导出

2026-06-14 03:59:45 +08:00
parent 833eda5621
commit 1e03b7750a
23 changed files with 1499 additions and 153 deletions
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/assets/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=1.0, user-scalable=no" />
+    <meta name="theme-color" content="#323232" />
    <title>标签设计生成器</title>
  </head>
  <body>
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
        "express": "^4.21.2",
        "jsbarcode": "^3.12.3",
        "jspdf": "^4.2.1",
+        "jszip": "^3.10.1",
        "lucide-react": "^0.546.0",
        "motion": "^12.23.24",
        "qrcode": "^1.5.4",
@@ -2082,6 +2083,12 @@
        "url": "https://opencollective.com/core-js"
      }
    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
    "node_modules/crc-32": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
@@ -2836,6 +2843,12 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
    "node_modules/inherits": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -2866,6 +2879,12 @@
        "node": ">=8"
      }
    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
    "node_modules/jiti": {
      "version": "2.7.0",
      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
@@ -2937,6 +2956,24 @@
        "html2canvas": "^1.0.0-rc.5"
      }
    },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/jszip/node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
    "node_modules/jwa": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
@@ -2958,6 +2995,15 @@
        "safe-buffer": "^5.0.1"
      }
    },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
    "node_modules/lightningcss": {
      "version": "1.32.0",
      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -3614,6 +3660,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
    "node_modules/protobufjs": {
      "version": "7.6.3",
      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.6.3.tgz",
@@ -3747,6 +3799,27 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readable-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
    "node_modules/regenerator-runtime": {
      "version": "0.13.11",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
@@ -3933,6 +4006,12 @@
      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
      "license": "ISC"
    },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
    "node_modules/setprototypeof": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -4051,6 +4130,21 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
    "node_modules/string-width": {
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -4696,6 +4790,12 @@
        "browserslist": ">= 4.21.0"
      }
    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
    "node_modules/utils-merge": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
    "express": "^4.21.2",
    "jsbarcode": "^3.12.3",
    "jspdf": "^4.2.1",
+    "jszip": "^3.10.1",
    "lucide-react": "^0.546.0",
    "motion": "^12.23.24",
    "qrcode": "^1.5.4",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useEffect, useLayoutEffect, useRef, useCallback } from 'react';
-import { LabelTemplate, PaperConfig, ImportData, RecordRow, ExportRangeConfig, CutLineConfig } from './types';
+import { LabelTemplate, PaperConfig, ImportData, RecordRow, ExportRangeConfig, CutLineConfig, ElementVisibilityMode, VisibilityRule } from './types';
 import {
  stripTemplateForStorage,
  normalizeTemplate,
@@ -11,6 +11,7 @@ import {
  extractTemplateVariables,
  buildAutoVariableMapping,
  applyRowVariableMapping,
+  filterLabelsForImageExport,
  type PrintableLabel,
 } from './utils';
 import { LabelDesigner } from './components/LabelDesigner';
@@ -21,8 +22,12 @@ import { MobileDesignView } from './components/MobileDesignView';
 import type { TableCellCoord } from './tableUtils';
 import { LayoutPreview } from './components/PreviewGrid';
 import { CanvasLabelImage } from './components/CanvasLabelImage';
-import { renderLabelToDataUrl } from './labelRenderer';
+import { renderLabelToDataUrl, resolveReferenceBackgroundForOutput, resolveReferenceBackgroundForPreview } from './labelRenderer';
 import { exportLabelsPdfAsync, exportLabelsPdfBlobAsync, type PdfExportProgress } from './pdfExport';
+import {
+  exportLabelsImagesZipAsync,
+  type LabelImagesExportProgress,
+} from './labelImagesExport';
 import {
  getAvailablePrinters,
  saveSelectedPrinterId,
@@ -142,6 +147,7 @@ export default function App() {

  const [pdfGenerating, setPdfGenerating] = useState(false);
  const [printing, setPrinting] = useState(false);
+  const [imagesZipGenerating, setImagesZipGenerating] = useState(false);
  const [pdfProgress, setPdfProgress] = useState<PdfExportProgress>({
    done: 0,
    total: 0,
@@ -149,6 +155,11 @@ export default function App() {
    totalPages: 0,
    phase: 'render',
  });
+  const [imagesZipProgress, setImagesZipProgress] = useState<LabelImagesExportProgress>({
+    done: 0,
+    total: 0,
+    phase: 'render',
+  });

  // --- 5. Selection and Active item states ---
  const [selectedElementIds, setSelectedElementIds] = useState<string[]>([]);
@@ -533,7 +544,14 @@ export default function App() {
  );

  const layoutResult = useMemo(
-    () => buildPrintablePages(mappedRows, paper, workingTemplate, draftExportRange),
+    () =>
+      buildPrintablePages(
+        mappedRows,
+        paper,
+        workingTemplate,
+        draftExportRange,
+        workingTemplate.variableDefaults ?? null
+      ),
    [mappedRows, paper, workingTemplate, draftExportRange]
  );

@@ -567,7 +585,14 @@ export default function App() {
  const appliedExportRange = appliedExportData?.exportRange ?? DEFAULT_EXPORT_RANGE;

  const appliedLayoutResult = useMemo(
-    () => buildPrintablePages(appliedMappedRows, paper, workingTemplate, appliedExportRange),
+    () =>
+      buildPrintablePages(
+        appliedMappedRows,
+        paper,
+        workingTemplate,
+        appliedExportRange,
+        workingTemplate.variableDefaults ?? null
+      ),
    [appliedMappedRows, paper, workingTemplate, appliedExportRange]
  );

@@ -688,7 +713,8 @@ export default function App() {
      appliedMappedRows,
      paper,
      workingTemplate,
-      appliedExportData.exportRange
+      appliedExportData.exportRange,
+      workingTemplate.variableDefaults ?? null
    );

    setPreviewSnapshot({
@@ -719,6 +745,49 @@ export default function App() {
      : { imageFormat: 'jpeg' as const, jsPdfFormat: 'JPEG' as const, scale: 10 };
  }, [workingTemplate.elements]);

+  const handleExportImageFileNamePatternChange = (pattern: string) => {
+    if (!activeTemplate) return;
+    handleTemplateChange({
+      ...activeTemplate,
+      exportImageFileNamePattern: pattern.trim() || undefined,
+    });
+  };
+
+  const handleExportImageFilterModeChange = (mode: ElementVisibilityMode) => {
+    if (!activeTemplate) return;
+    handleTemplateChange({
+      ...activeTemplate,
+      exportImageFilterMode: mode === 'always' ? undefined : 'conditional',
+    });
+  };
+
+  const handleExportImageFilterRulesChange = (rules: VisibilityRule[]) => {
+    if (!activeTemplate) return;
+    handleTemplateChange({
+      ...activeTemplate,
+      exportImageFilterMode: 'conditional',
+      exportImageFilterRules: rules,
+    });
+  };
+
+  const renderAppliedLabelToDataUrl = useCallback(
+    (label: PrintableLabel) =>
+      renderLabelToDataUrl({
+        widthMm: activeTemplate!.width,
+        heightMm: activeTemplate!.height,
+        elements: activeTemplate!.elements,
+        rowData: label.row,
+        rowIndex: label.sourceIndex,
+        showBorder: false,
+        mode: 'output',
+        scale: pdfExportImage.scale,
+        imageFormat: pdfExportImage.imageFormat,
+        jpegQuality: 0.9,
+        ...resolveReferenceBackgroundForOutput(activeTemplate!),
+      }),
+    [activeTemplate, pdfExportImage]
+  );
+
  const exportPdf = async () => {
    if (!activeTemplate) return;
    if (!appliedExportData) {
@@ -754,19 +823,7 @@ export default function App() {
        cutLine,
        filename: `${safeName}_${exportTotalPages}页.pdf`,
        imageFormat: pdfExportImage.jsPdfFormat,
-        renderLabel: (label) =>
-          renderLabelToDataUrl({
-            widthMm: activeTemplate.width,
-            heightMm: activeTemplate.height,
-            elements: activeTemplate.elements,
-            rowData: label.row,
-            rowIndex: label.sourceIndex,
-            showBorder: false,
-            mode: 'output',
-            scale: pdfExportImage.scale,
-            imageFormat: pdfExportImage.imageFormat,
-            jpegQuality: 0.9,
-          }),
+        renderLabel: renderAppliedLabelToDataUrl,
        onProgress: (progress) => {
          const now = Date.now();
          const isDone = progress.done >= progress.total || progress.phase === 'save';
@@ -784,6 +841,70 @@ export default function App() {
    }
  };

+  const exportLabelsImagesZip = async () => {
+    if (!activeTemplate) return;
+    if (!appliedExportData) {
+      await showAlert('请先应用数据后再导出图片。', { variant: 'warning' });
+      return;
+    }
+    if (appliedLayoutResult.selectedCount === 0) {
+      await showAlert('当前数据范围内没有可排版的标签，请调整范围设置。', { variant: 'warning' });
+      return;
+    }
+
+    const exportableLabels = filterLabelsForImageExport(
+      appliedLayoutResult.pages,
+      activeTemplate,
+      activeTemplate.variableDefaults ?? null
+    );
+    if (exportableLabels.length === 0) {
+      await showAlert('没有符合导出过滤条件的标签。', { variant: 'warning' });
+      return;
+    }
+
+    const labelTotal = exportableLabels.length;
+    const safeName =
+      activeTemplate.name.replace(/[^\w\u4e00-\u9fa5-]+/g, '_').slice(0, 40) || 'labels';
+    const progressLastUpdate = { current: 0 };
+
+    setImagesZipGenerating(true);
+    setImagesZipProgress({
+      done: 0,
+      total: labelTotal,
+      phase: 'render',
+    });
+
+    try {
+      await exportLabelsImagesZipAsync({
+        printablePages: appliedLayoutResult.pages,
+        filename: `${safeName}_${labelTotal}枚_${Date.now()}.zip`,
+        imageExtension: pdfExportImage.imageFormat === 'jpeg' ? 'jpg' : 'png',
+        fileNamePattern: activeTemplate.exportImageFileNamePattern,
+        variableDefaults: activeTemplate.variableDefaults ?? null,
+        exportFilter: {
+          exportImageFilterMode: activeTemplate.exportImageFilterMode,
+          exportImageFilterRules: activeTemplate.exportImageFilterRules,
+        },
+        renderLabel: renderAppliedLabelToDataUrl,
+        onProgress: (progress) => {
+          const now = Date.now();
+          const isDone =
+            progress.phase === 'save' ||
+            (progress.phase === 'render' && progress.done >= progress.total);
+          if (isDone || now - progressLastUpdate.current >= 150) {
+            progressLastUpdate.current = now;
+            setImagesZipProgress(progress);
+          }
+        },
+      });
+    } catch (e) {
+      console.error('Images zip export failed', e);
+      await showAlert('图片导出失败，请重试。', { variant: 'error' });
+    } finally {
+      setImagesZipGenerating(false);
+    }
+  };
+
  const printLabels = async (printerId: string) => {
    if (!activeTemplate) return;
    if (!appliedExportData) {
@@ -807,19 +928,7 @@ export default function App() {
        gridCols: appliedLayoutResult.gridCols,
        cutLine,
        imageFormat: pdfExportImage.jsPdfFormat,
-        renderLabel: (label) =>
-          renderLabelToDataUrl({
-            widthMm: activeTemplate.width,
-            heightMm: activeTemplate.height,
-            elements: activeTemplate.elements,
-            rowData: label.row,
-            rowIndex: label.sourceIndex,
-            showBorder: false,
-            mode: 'output',
-            scale: pdfExportImage.scale,
-            imageFormat: pdfExportImage.imageFormat,
-            jpegQuality: 0.9,
-          }),
+        renderLabel: renderAppliedLabelToDataUrl,
      });

      const mode = await submitLabelsPrint(blob, printerId, printers);
@@ -843,14 +952,24 @@ export default function App() {
          ? '排版已变更，请重新绘制预览'
          : null;

+  const isDarkWorkspace =
+    workflowStep === 'template-design' || workflowStep === 'print-view';
+  const isMobileDarkShell = isMobile && isDarkWorkspace;
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('app-dark-shell', isMobileDarkShell);
+    return () => {
+      document.documentElement.classList.remove('app-dark-shell');
+    };
+  }, [isMobileDarkShell]);
+
  return (
    <div
-      className={`flex flex-col font-sans h-dvh max-h-dvh overflow-hidden ${workflowStep === 'template-design' || (workflowStep === 'print-view' && !isMobile)
-        ? 'bg-[#323232] text-[#e8e8e8]'
-        : workflowStep === 'print-view' && isMobile
+      className={`flex flex-col font-sans h-dvh min-h-dvh max-h-dvh overflow-hidden ${
+        isDarkWorkspace
          ? 'bg-[#323232] text-[#e8e8e8]'
          : 'bg-slate-50 text-slate-800'
-        }`}
+      } ${isMobileDarkShell ? 'pb-[env(safe-area-inset-bottom)]' : ''}`}
    >
      {/* 
        =========================================
@@ -1084,6 +1203,7 @@ export default function App() {
                            rowIndex={0}
                            showBorder={true}
                            variableDefaults={tmpl.variableDefaults ?? null}
+                            {...resolveReferenceBackgroundForPreview(tmpl)}
                          />
                        </div>
                      </div>
@@ -1335,6 +1455,7 @@ export default function App() {
            activeRowIndex={activeRowIndex}
            onSelectRowIndex={setActiveRowIndex}
            pdfGenerating={pdfGenerating}
+            imagesZipGenerating={imagesZipGenerating}
            printing={printing}
            onBack={() => setWorkflowStep('template-select')}
            onExportPdf={exportPdf}
@@ -1344,9 +1465,15 @@ export default function App() {
              appliedLayoutResult.selectedCount === 0 ||
              previewLayoutStale ||
              printing ||
-              pdfGenerating
+              pdfGenerating ||
+              imagesZipGenerating
            }
            printDisabledReason={printBlockedReason}
+            onExportImages={exportLabelsImagesZip}
+            imagesExporting={imagesZipGenerating}
+            onChangeExportImageFileNamePattern={handleExportImageFileNamePatternChange}
+            onChangeExportImageFilterMode={handleExportImageFilterModeChange}
+            onChangeExportImageFilterRules={handleExportImageFilterRulesChange}
          />
        )}

@@ -1382,9 +1509,12 @@ export default function App() {
                type="button"
                onClick={exportPdf}
                disabled={
-                  !appliedExportData || appliedLayoutResult.selectedCount === 0 || pdfGenerating
+                  !appliedExportData ||
+                  appliedLayoutResult.selectedCount === 0 ||
+                  pdfGenerating ||
+                  imagesZipGenerating
                }
-                className={`inline-flex items-center gap-1.5 px-3 py-1 text-[11px] font-semibold transition cursor-pointer ${appliedExportData && appliedLayoutResult.selectedCount > 0 && !pdfGenerating
+                className={`inline-flex items-center gap-1.5 px-3 py-1 text-[11px] font-semibold transition cursor-pointer ${appliedExportData && appliedLayoutResult.selectedCount > 0 && !pdfGenerating && !imagesZipGenerating
                  ? 'bg-[#31a8ff] hover:bg-[#2890d8] text-white'
                  : 'bg-[#444] text-[#666] cursor-not-allowed'
                  }`}
@@ -1442,12 +1572,21 @@ export default function App() {
                draftSelectedCount={selectedCount}
                printing={printing}
                onPrint={printLabels}
+                onExportImages={exportLabelsImagesZip}
+                imagesExporting={imagesZipGenerating}
+                exportImageFileNamePattern={activeTemplate.exportImageFileNamePattern ?? ''}
+                onChangeExportImageFileNamePattern={handleExportImageFileNamePatternChange}
+                exportImageFilterMode={activeTemplate.exportImageFilterMode ?? 'always'}
+                exportImageFilterRules={activeTemplate.exportImageFilterRules ?? []}
+                onChangeExportImageFilterMode={handleExportImageFilterModeChange}
+                onChangeExportImageFilterRules={handleExportImageFilterRulesChange}
                printDisabled={
                  !appliedExportData ||
                  appliedLayoutResult.selectedCount === 0 ||
                  previewLayoutStale ||
                  printing ||
-                  pdfGenerating
+                  pdfGenerating ||
+                  imagesZipGenerating
                }
                printDisabledReason={printBlockedReason}
              />
@@ -1598,11 +1737,13 @@ export default function App() {
        </div>
      )}

-      {pdfGenerating && (
+      {(pdfGenerating || imagesZipGenerating) && (
        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-slate-950/70 backdrop-blur-sm">
          <div className="bg-white rounded-2xl shadow-2xl px-8 py-6 flex flex-col items-center gap-4 min-w-[280px]">
            <Loader2 className="w-10 h-10 text-indigo-600 animate-spin" />
            <div className="text-center">
+              {pdfGenerating ? (
+                <>
                  <p className="text-sm font-bold text-gray-900">
                    {pdfProgress.phase === 'save' ? '正在保存 PDF 文件…' : '正在生成 PDF'}
                  </p>
@@ -1611,13 +1752,40 @@ export default function App() {
                      ? '即将完成，请稍候'
                      : `第 ${pdfProgress.page} / ${pdfProgress.totalPages} 页 · ${pdfProgress.done} / ${pdfProgress.total} 张标签`}
                  </p>
+                </>
+              ) : (
+                <>
+                  <p className="text-sm font-bold text-gray-900">
+                    {imagesZipProgress.phase === 'save'
+                      ? '正在下载 ZIP 文件…'
+                      : imagesZipProgress.phase === 'zip'
+                        ? '正在打包压缩…'
+                        : '正在生成标签图片'}
+                  </p>
+                  <p className="text-xs text-gray-500 mt-1">
+                    {imagesZipProgress.phase === 'save'
+                      ? '即将完成，请稍候'
+                      : imagesZipProgress.phase === 'zip'
+                        ? `压缩进度 ${Math.round(imagesZipProgress.zipPercent ?? 0)}%`
+                        : `${imagesZipProgress.done} / ${imagesZipProgress.total} 张`}
+                  </p>
+                </>
+              )}
            </div>
            <div className="w-full h-1.5 bg-gray-100 rounded-full overflow-hidden">
              <div
                className="h-full bg-indigo-600 transition-all duration-200"
                style={{
-                  width: pdfProgress.total
+                  width: pdfGenerating
+                    ? pdfProgress.total
                      ? `${(pdfProgress.done / pdfProgress.total) * 100}%`
+                      : '0%'
+                    : imagesZipProgress.phase === 'zip'
+                      ? `${imagesZipProgress.zipPercent ?? 0}%`
+                      : imagesZipProgress.phase === 'save'
+                        ? '100%'
+                        : imagesZipProgress.total
+                          ? `${(imagesZipProgress.done / imagesZipProgress.total) * 100}%`
                          : '0%',
                }}
              />
--- a/src/components/CanvasLabelImage.tsx
+++ b/src/components/CanvasLabelImage.tsx
@@ -14,6 +14,9 @@ interface CanvasLabelImageProps {
  variableDefaults?: Record<string, string> | null;
  /** design=设计预览（空变量显示占位）；output=排版/打印（空值隐藏图形元素） */
  mode?: ContentResolveMode;
+  referenceBackground?: string;
+  referenceBackgroundOpacity?: number;
+  referenceBackgroundFit?: 'contain' | 'cover' | 'fill';
  /** 渲染倍率，设计画布应传 MM_TO_PX * zoom 与显示尺寸 1:1 对齐 */
  renderScale?: number;
 }
@@ -28,6 +31,9 @@ export const CanvasLabelImage: React.FC<CanvasLabelImageProps> = ({
  transparentBackground = false,
  variableDefaults = null,
  mode = 'design' as ContentResolveMode,
+  referenceBackground,
+  referenceBackgroundOpacity,
+  referenceBackgroundFit,
  renderScale = 16,
 }) => {
  const [dataUrl, setDataUrl] = useState<string>('');
@@ -54,6 +60,9 @@ export const CanvasLabelImage: React.FC<CanvasLabelImageProps> = ({
      variableDefaults,
      mode,
      scale: renderScale,
+      referenceBackground,
+      referenceBackgroundOpacity,
+      referenceBackgroundFit,
    })
      .then((url) => {
        if (!active) return;
@@ -88,6 +97,9 @@ export const CanvasLabelImage: React.FC<CanvasLabelImageProps> = ({
    transparentBackground,
    mode,
    renderScale,
+    referenceBackground,
+    referenceBackgroundOpacity,
+    referenceBackgroundFit,
  ]);

  if (initialLoading && !dataUrl) {
--- a/src/components/CommitInput.tsx
+++ b/src/components/CommitInput.tsx
@@ -86,3 +86,75 @@ export const CommitInput: React.FC<CommitInputProps> = ({
    />
  );
 };
+
+export interface CommitTextareaProps
+  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'value'> {
+  value: string;
+  onCommit: (val: string) => void;
+}
+
+/** 失焦提交型多行输入框 */
+export const CommitTextarea: React.FC<CommitTextareaProps> = ({
+  value,
+  onCommit,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  ...props
+}) => {
+  const [localVal, setLocalVal] = useState<string>(value);
+  const focusedRef = useRef(false);
+  const localValRef = useRef(localVal);
+  const valueRef = useRef(value);
+  const onCommitRef = useRef(onCommit);
+  localValRef.current = localVal;
+  valueRef.current = value;
+  onCommitRef.current = onCommit;
+
+  useEffect(() => {
+    if (!focusedRef.current) {
+      setLocalVal(value);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    return () => {
+      if (focusedRef.current && localValRef.current !== valueRef.current) {
+        onCommitRef.current(localValRef.current);
+      }
+    };
+  }, []);
+
+  const commitIfChanged = () => {
+    if (localValRef.current !== valueRef.current) {
+      onCommitRef.current(localValRef.current);
+    }
+  };
+
+  const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+    focusedRef.current = false;
+    onBlur?.(e);
+    commitIfChanged();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+      (e.target as HTMLTextAreaElement).blur();
+    }
+    onKeyDown?.(e);
+  };
+
+  return (
+    <textarea
+      {...props}
+      value={localVal}
+      onChange={(e) => setLocalVal(e.target.value)}
+      onFocus={(e) => {
+        focusedRef.current = true;
+        onFocus?.(e);
+      }}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+    />
+  );
+};
--- a/src/components/DataRangeFields.tsx
+++ b/src/components/DataRangeFields.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import { Filter } from 'lucide-react';
+import React, { useMemo } from 'react';
 import { ExportRangeConfig, LabelTemplate, PaperConfig, RecordRow } from '../types';
-import { buildPrintablePages } from '../utils';
+import { buildPrintablePages, extractTemplateVariables } from '../utils';
 import { PageInput } from './PreviewGrid';
 import { FieldSelect } from './PsSelect';
+import { VariableFilterRulesEditor } from './VariableFilterRulesEditor';

 interface DataRangeFieldsProps {
  variant?: 'ps' | 'mobile';
@@ -25,7 +25,9 @@ export const DataRangeFields: React.FC<DataRangeFieldsProps> = ({
  disabled = false,
 }) => {
  const isMobile = variant === 'mobile';
-  const rangeStats = buildPrintablePages(rows, paper, template, exportRange);
+  const variableDefaults = template.variableDefaults ?? null;
+  const templateVariables = useMemo(() => extractTemplateVariables(template), [template]);
+  const rangeStats = buildPrintablePages(rows, paper, template, exportRange, variableDefaults);

  const patchRange = (patch: Partial<ExportRangeConfig>) => {
    onChangeExportRange({ ...exportRange, ...patch });
@@ -36,7 +38,6 @@ export const DataRangeFields: React.FC<DataRangeFieldsProps> = ({
      {!isMobile && <div className="ps-section-title">数据范围</div>}
      <div>
        {isMobile && <label className="mobile-field-label">范围</label>}
-        {/* {!isMobile && <label className="ps-field-label">范围</label>} */}
        <FieldSelect
          value={exportRange.mode}
          disabled={disabled}
@@ -47,6 +48,7 @@ export const DataRangeFields: React.FC<DataRangeFieldsProps> = ({
          <option value="odd">仅限奇数序号的行</option>
          <option value="even">仅限偶数序号的行</option>
          <option value="custom">自定义行序号</option>
+          <option value="conditional">按条件过滤</option>
        </FieldSelect>
      </div>
      {exportRange.mode === 'custom' && (
@@ -66,6 +68,23 @@ export const DataRangeFields: React.FC<DataRangeFieldsProps> = ({
          />
        </div>
      )}
+      {exportRange.mode === 'conditional' && (
+        <VariableFilterRulesEditor
+          rules={exportRange.filterRules ?? []}
+          templateVariables={templateVariables}
+          disabled={disabled}
+          emptyHint="尚未添加过滤条件，将使用全部数据行"
+          description="全部条件满足的数据行才纳入排版与导出；按数据行与变量默认值判断。"
+          addTitle="添加数据范围条件"
+          editTitle="编辑数据范围条件"
+          onChangeRules={(filterRules) => patchRange({ filterRules })}
+        />
+      )}
+      {rows.length > 0 && (
+        <p className={isMobile ? 'text-[10px] text-slate-500' : 'text-[10px] text-[#888]'}>
+          当前范围：{rangeStats.selectedCount} / {rows.length} 行
+        </p>
+      )}
    </div>
  );
 };
--- a/src/components/ExportImageFilterFields.tsx
+++ b/src/components/ExportImageFilterFields.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import type { ElementVisibilityMode, VisibilityRule } from '../types';
+import { isExportImageFilterConditional } from '../utils';
+import { FieldSelect } from './PsSelect';
+import { VariableFilterRulesEditor } from './VariableFilterRulesEditor';
+
+interface ExportImageFilterFieldsProps {
+  filterMode?: ElementVisibilityMode;
+  filterRules?: VisibilityRule[];
+  templateVariables: string[];
+  disabled?: boolean;
+  onChangeFilterMode: (mode: ElementVisibilityMode) => void;
+  onChangeFilterRules: (rules: VisibilityRule[]) => void;
+}
+
+export const ExportImageFilterFields: React.FC<ExportImageFilterFieldsProps> = ({
+  filterMode = 'always' as ElementVisibilityMode,
+  filterRules = [],
+  templateVariables,
+  disabled = false,
+  onChangeFilterMode,
+  onChangeFilterRules,
+}) => {
+  const conditional = isExportImageFilterConditional({ exportImageFilterMode: filterMode });
+
+  const setRules = (next: VisibilityRule[]) => {
+    onChangeFilterMode('conditional');
+    onChangeFilterRules(next);
+  };
+
+  return (
+    <>
+      <div className="space-y-1.5">
+        <label className="ps-field-label mb-0">导出过滤</label>
+        <FieldSelect
+          value={conditional ? 'conditional' : 'always'}
+          onChange={(e) => {
+            const nextConditional = e.target.value === 'conditional';
+            onChangeFilterMode(nextConditional ? 'conditional' : 'always');
+            if (nextConditional && (filterRules?.length ?? 0) === 0) {
+              onChangeFilterRules([]);
+            }
+          }}
+          className="ps-field text-[11px]"
+          disabled={disabled}
+        >
+          <option value="always">导出全部标签</option>
+          <option value="conditional">按条件过滤</option>
+        </FieldSelect>
+      </div>
+
+      {conditional && (
+        <VariableFilterRulesEditor
+          rules={filterRules}
+          templateVariables={templateVariables}
+          disabled={disabled}
+          emptyHint="尚未添加过滤条件，将导出全部标签"
+          description="全部条件满足时才导出该枚标签；按当前数据行与变量默认值判断。"
+          addTitle="添加导出过滤条件"
+          editTitle="编辑导出过滤条件"
+          onChangeRules={setRules}
+        />
+      )}
+    </>
+  );
+};
--- a/src/components/ExportSidebar.tsx
+++ b/src/components/ExportSidebar.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Database, Layout, Printer, Settings } from 'lucide-react';
-import { ImportData, PaperConfig, LabelTemplate, RecordRow, ExportRangeConfig, CutLineConfig } from '../types';
+import { ImportData, PaperConfig, LabelTemplate, RecordRow, ExportRangeConfig, CutLineConfig, ElementVisibilityMode, VisibilityRule } from '../types';
 import { DataImporter } from './DataImporter';
 import { VariableMappingPanel } from './VariableMappingPanel';
 import { PaperSettingsPanel, PageInput } from './PreviewGrid';
@@ -35,6 +35,14 @@ interface ExportSidebarProps {
  draftSelectedCount: number;
  printing: boolean;
  onPrint: (printerId: string) => void;
+  imagesExporting?: boolean;
+  onExportImages?: () => void;
+  exportImageFileNamePattern?: string;
+  onChangeExportImageFileNamePattern?: (pattern: string) => void;
+  exportImageFilterMode?: ElementVisibilityMode;
+  exportImageFilterRules?: VisibilityRule[];
+  onChangeExportImageFilterMode?: (mode: ElementVisibilityMode) => void;
+  onChangeExportImageFilterRules?: (rules: VisibilityRule[]) => void;
  printDisabled: boolean;
  printDisabledReason?: string | null;
  /** 移动端精简：仅数据、映射、数据范围 */
@@ -67,6 +75,14 @@ export const ExportSidebar: React.FC<ExportSidebarProps> = ({
  draftSelectedCount,
  printing,
  onPrint,
+  imagesExporting = false,
+  onExportImages,
+  exportImageFileNamePattern = '',
+  onChangeExportImageFileNamePattern,
+  exportImageFilterMode = 'always',
+  exportImageFilterRules = [],
+  onChangeExportImageFilterMode,
+  onChangeExportImageFilterRules,
  printDisabled,
  printDisabledReason = null,
  compact = false,
@@ -307,6 +323,15 @@ export const ExportSidebar: React.FC<ExportSidebarProps> = ({
          disabledReason={printDisabledReason}
          printing={printing}
          onPrint={onPrint}
+          imagesExporting={imagesExporting}
+          onExportImages={onExportImages}
+          exportImageFileNamePattern={exportImageFileNamePattern}
+          onChangeExportImageFileNamePattern={onChangeExportImageFileNamePattern}
+          exportImageFilterMode={exportImageFilterMode}
+          exportImageFilterRules={exportImageFilterRules}
+          onChangeExportImageFilterMode={onChangeExportImageFilterMode}
+          onChangeExportImageFilterRules={onChangeExportImageFilterRules}
+          templateVariables={templateVariables}
        />
      </CollapsiblePanelSection>
    </aside>
--- a/src/components/LabelDesigner.tsx
+++ b/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}
              />
--- a/src/components/MobileExportView.tsx
+++ b/src/components/MobileExportView.tsx
@@ -15,6 +15,8 @@ import {
  ExportRangeConfig,
  PaperConfig,
  CutLineConfig,
+  ElementVisibilityMode,
+  VisibilityRule,
 } from '../types';
 import { isVariableMappingConfigured, type PrintableLabel } from '../utils';
 import { DataImporter, downloadDataTemplate } from './DataImporter';
@@ -66,12 +68,18 @@ interface MobileExportViewProps {
  activeRowIndex: number;
  onSelectRowIndex: (idx: number) => void;
  pdfGenerating: boolean;
+  imagesZipGenerating?: boolean;
  printing: boolean;
  onBack: () => void;
  onExportPdf: () => void;
  onPrint: (printerId: string) => void;
+  onExportImages?: () => void;
+  onChangeExportImageFileNamePattern?: (pattern: string) => void;
+  onChangeExportImageFilterMode?: (mode: ElementVisibilityMode) => void;
+  onChangeExportImageFilterRules?: (rules: VisibilityRule[]) => void;
  printDisabled: boolean;
  printDisabledReason?: string | null;
+  imagesExporting?: boolean;
 }

 export const MobileExportView: React.FC<MobileExportViewProps> = ({
@@ -104,12 +112,18 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
  activeRowIndex,
  onSelectRowIndex,
  pdfGenerating,
+  imagesZipGenerating = false,
  printing,
  onBack,
  onExportPdf,
  onPrint,
  printDisabled,
  printDisabledReason = null,
+  onExportImages,
+  imagesExporting = false,
+  onChangeExportImageFileNamePattern,
+  onChangeExportImageFilterMode,
+  onChangeExportImageFilterRules,
 }) => {
  const [mobileModule, setMobileModule] = useState<MobileExportModule>('data');

@@ -128,7 +142,7 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
        ? '当前数据范围内无标签'
        : null;

-  const exportDisabled = !!exportBlockedReason || pdfGenerating;
+  const exportDisabled = !!exportBlockedReason || pdfGenerating || imagesZipGenerating;

  return (
    <div className="mobile-export-view mobile-design-view">
@@ -281,6 +295,15 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
                  disabledReason={printDisabledReason}
                  printing={printing}
                  onPrint={onPrint}
+                  imagesExporting={imagesExporting}
+                  onExportImages={onExportImages}
+                  exportImageFileNamePattern={template.exportImageFileNamePattern ?? ''}
+                  onChangeExportImageFileNamePattern={onChangeExportImageFileNamePattern}
+                  exportImageFilterMode={template.exportImageFilterMode ?? 'always'}
+                  exportImageFilterRules={template.exportImageFilterRules ?? []}
+                  onChangeExportImageFilterMode={onChangeExportImageFilterMode}
+                  onChangeExportImageFilterRules={onChangeExportImageFilterRules}
+                  templateVariables={templateVariables}
                />
              </div>
            )}
--- a/src/components/PreviewGrid.tsx
+++ b/src/components/PreviewGrid.tsx
@@ -15,6 +15,7 @@ import {
  type PrintableLabel,
 } from '../utils';
 import { CanvasLabelImage } from './CanvasLabelImage';
+import { resolveReferenceBackgroundForOutput } from '../labelRenderer';
 import { CommitInput } from './CommitInput';
 import { useAppDialog } from './AppDialog';
 import { FieldSelect } from './PsSelect';
@@ -130,7 +131,14 @@ export const PaperSettingsPanel: React.FC<PaperSettingsPanelProps> = ({

  const rangeForStats = exportRange ?? DEFAULT_EXPORT_RANGE;
  const draftLayoutStats = useMemo(
-    () => buildPrintablePages(rows, draftPaper, template, rangeForStats),
+    () =>
+      buildPrintablePages(
+        rows,
+        draftPaper,
+        template,
+        rangeForStats,
+        template.variableDefaults ?? null
+      ),
    [rows, draftPaper, template, rangeForStats]
  );

@@ -588,6 +596,15 @@ export const LayoutPreview: React.FC<LayoutPreviewProps> = ({
  const cutChannelXPx = cutChannel.x * previewScale;
  const cutChannelYPx = cutChannel.y * previewScale;
  const cutDash = formatCutLineSvgDashArray(cutLine, previewScale);
+  const referenceBackgroundRender = useMemo(
+    () => resolveReferenceBackgroundForOutput(template),
+    [
+      template.previewReferenceBackground,
+      template.previewReferenceBackgroundOpacity,
+      template.previewReferenceBackgroundFit,
+      template.includeReferenceBackgroundInOutput,
+    ]
+  );
  const pageCutLines = useMemo(
    () =>
      collectGridCutLinePositions(
@@ -705,16 +722,9 @@ export const LayoutPreview: React.FC<LayoutPreviewProps> = ({
            className={
              isMobileVariant
                ? 'flex flex-col items-center space-y-4 pb-4'
-                : 'grid pb-8 justify-items-center content-start w-full'
-            }
-            style={
-              isMobileVariant
-                ? undefined
-                : {
-                  gridTemplateColumns: `repeat(auto-fill, minmax(${pageCardWidthPx}px, 1fr))`,
-                  gap: `${previewPageGapPx}px`,
-                }
+                : 'flex flex-wrap justify-center content-start w-full pb-8'
            }
+            style={isMobileVariant ? undefined : { gap: `${previewPageGapPx}px` }}
          >
            {visiblePages.map((pageRows, pageIdx) => (
              <div
@@ -828,6 +838,7 @@ export const LayoutPreview: React.FC<LayoutPreviewProps> = ({
                              rowIndex={item.sourceIndex}
                              showBorder={false}
                              mode="output"
+                              {...referenceBackgroundRender}
                            />
                          </div>
                        </div>
@@ -871,7 +882,13 @@ export const PreviewGrid: React.FC<PreviewGridProps> = ({
  activeRowIndex,
  onSelectRowIndex,
 }) => {
-  const layout = buildPrintablePages(rows, paper, template, DEFAULT_EXPORT_RANGE);
+  const layout = buildPrintablePages(
+    rows,
+    paper,
+    template,
+    DEFAULT_EXPORT_RANGE,
+    template.variableDefaults ?? null
+  );
  return (
    <div className="space-y-6">
      <PaperSettingsPanel
--- a/src/components/PrintModule.tsx
+++ b/src/components/PrintModule.tsx
@@ -1,7 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Loader2, Printer, RefreshCw } from 'lucide-react';
+import { Images, Loader2, Printer, RefreshCw } from 'lucide-react';
+import type { ElementVisibilityMode, VisibilityRule } from '../types';
 import { FieldSelect } from './PsSelect';
-import { CommitInput } from './CommitInput';
+import { CommitInput, CommitTextarea } from './CommitInput';
+import { ExportImageFilterFields } from './ExportImageFilterFields';
 import {
  addCustomPrinter,
  DEFAULT_PRINTER_ID,
@@ -17,6 +19,15 @@ interface PrintModuleProps {
  disabledReason?: string | null;
  printing: boolean;
  onPrint: (printerId: string) => void;
+  imagesExporting?: boolean;
+  onExportImages?: () => void;
+  exportImageFileNamePattern?: string;
+  onChangeExportImageFileNamePattern?: (pattern: string) => void;
+  exportImageFilterMode?: ElementVisibilityMode;
+  exportImageFilterRules?: VisibilityRule[];
+  onChangeExportImageFilterMode?: (mode: ElementVisibilityMode) => void;
+  onChangeExportImageFilterRules?: (rules: VisibilityRule[]) => void;
+  templateVariables?: string[];
  variant?: 'desktop' | 'mobile';
 }

@@ -25,6 +36,15 @@ export const PrintModule: React.FC<PrintModuleProps> = ({
  disabledReason,
  printing,
  onPrint,
+  imagesExporting = false,
+  onExportImages,
+  exportImageFileNamePattern = '',
+  onChangeExportImageFileNamePattern,
+  exportImageFilterMode = 'always',
+  exportImageFilterRules = [],
+  onChangeExportImageFilterMode,
+  onChangeExportImageFilterRules,
+  templateVariables = [],
  variant = 'desktop',
 }) => {
  const [printers, setPrinters] = useState<PrinterOption[]>([
@@ -73,6 +93,16 @@ export const PrintModule: React.FC<PrintModuleProps> = ({
  const directAvailable = supportsDirectPrinting(printers);
  const selectedPrinter = printers.find((p) => p.id === selectedPrinterId);
  const usesDirect = !!selectedPrinter?.direct;
+  const exportBusy = printing || imagesExporting;
+
+  const appendFileNameToken = (token: string) => {
+    if (!onChangeExportImageFileNamePattern) return;
+    const current = exportImageFileNamePattern.trim();
+    const next = current
+      ? `${current}${current.endsWith('_') || current.endsWith('-') || current.endsWith(' ') ? '' : '_'}${token}`
+      : token;
+    onChangeExportImageFileNamePattern(next);
+  };

  return (
    <div className="space-y-3">
@@ -92,7 +122,7 @@ export const PrintModule: React.FC<PrintModuleProps> = ({
        value={selectedPrinterId}
        onChange={(e) => setSelectedPrinterId(e.target.value)}
        className="ps-field text-[11px]"
-        disabled={loadingPrinters || printing}
+        disabled={loadingPrinters || exportBusy}
      >
        {printers.map((printer) => (
          <option key={printer.id} value={printer.id}>
@@ -111,12 +141,12 @@ export const PrintModule: React.FC<PrintModuleProps> = ({
              onCommit={setCustomPrinterName}
              placeholder="与系统中打印机名称一致"
              className="ps-field text-[11px] flex-1 min-w-0"
-              disabled={printing}
+              disabled={exportBusy}
            />
            <button
              type="button"
              onClick={handleAddCustomPrinter}
-              disabled={!customPrinterName.trim() || printing}
+              disabled={!customPrinterName.trim() || exportBusy}
              className="ps-btn text-[10px] shrink-0 disabled:opacity-40 disabled:cursor-not-allowed"
            >
              添加
@@ -140,9 +170,9 @@ export const PrintModule: React.FC<PrintModuleProps> = ({
      <button
        type="button"
        onClick={handlePrint}
-        disabled={disabled || printing || loadingPrinters}
+        disabled={disabled || exportBusy || loadingPrinters}
        className={`w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 text-[11px] font-semibold transition cursor-pointer ${
-          !disabled && !printing && !loadingPrinters
+          !disabled && !exportBusy && !loadingPrinters
            ? 'bg-[#31a8ff] hover:bg-[#2890d8] text-white'
            : 'bg-[#444] text-[#666] cursor-not-allowed'
        }`}
@@ -154,6 +184,98 @@ export const PrintModule: React.FC<PrintModuleProps> = ({
        )}
        {printing ? '准备打印…' : variant === 'mobile' ? '打印' : '开始打印'}
      </button>
+
+      {onExportImages && (
+        <>
+          <div className="border-t border-[#3a3a3a] pt-3 space-y-2">
+            <p className="text-[10px] text-[#666] leading-relaxed">
+              将当前数据范围内每一枚标签导出为单独图片，打包为 ZIP 下载。
+            </p>
+            {onChangeExportImageFileNamePattern && (
+              <div className="space-y-1.5">
+                <div className="flex items-center justify-between gap-2">
+                  <label className="ps-field-label mb-0">图片文件名</label>
+                  <button
+                    type="button"
+                    disabled={!exportImageFileNamePattern || exportBusy}
+                    onClick={() => onChangeExportImageFileNamePattern('')}
+                    className="text-[9px] text-[#31a8ff] hover:underline cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed disabled:no-underline shrink-0"
+                  >
+                    恢复默认
+                  </button>
+                </div>
+                <CommitTextarea
+                  value={exportImageFileNamePattern}
+                  onCommit={onChangeExportImageFileNamePattern}
+                  placeholder="留空则按 001、002… 命名"
+                  rows={3}
+                  className="ps-field text-[11px] font-mono resize-y min-h-[72px]"
+                  disabled={exportBusy}
+                />
+                <p className="text-[9px] text-[#777] leading-relaxed">
+                  与元素内容相同，可使用 {'{#SEQ}'}（导出序号）、{'{#INDEX}'}（数据行号）、{'{变量名}'}；{'{#SEQ:4}'} 可补零。换行仅用于编辑排版，导出时会自动忽略。
+                </p>
+                <div className="flex flex-wrap gap-1">
+                  <button
+                    type="button"
+                    onClick={() => appendFileNameToken('{#SEQ}')}
+                    disabled={exportBusy}
+                    className="ps-btn text-[9px] font-mono"
+                  >
+                    {'{#SEQ}'}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => appendFileNameToken('{#INDEX}')}
+                    disabled={exportBusy}
+                    className="ps-btn text-[9px] font-mono"
+                  >
+                    {'{#INDEX}'}
+                  </button>
+                  {templateVariables.map((variable) => (
+                    <button
+                      key={variable}
+                      type="button"
+                      onClick={() => appendFileNameToken(`{${variable}}`)}
+                      disabled={exportBusy}
+                      className="ps-btn text-[9px] font-mono"
+                    >
+                      {`{${variable}}`}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+            {onChangeExportImageFilterMode && onChangeExportImageFilterRules && (
+              <ExportImageFilterFields
+                filterMode={exportImageFilterMode}
+                filterRules={exportImageFilterRules}
+                templateVariables={templateVariables}
+                disabled={exportBusy}
+                onChangeFilterMode={onChangeExportImageFilterMode}
+                onChangeFilterRules={onChangeExportImageFilterRules}
+              />
+            )}
+            <button
+              type="button"
+              onClick={onExportImages}
+              disabled={disabled || exportBusy || loadingPrinters}
+              className={`w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 text-[11px] font-semibold transition cursor-pointer ${
+                !disabled && !exportBusy && !loadingPrinters
+                  ? 'bg-[#383838] hover:bg-[#444] text-[#e8e8e8] border border-[#4a4a4a]'
+                  : 'bg-[#444] text-[#666] cursor-not-allowed border border-[#333]'
+              }`}
+            >
+              {imagesExporting ? (
+                <Loader2 className="w-3.5 h-3.5 animate-spin shrink-0" />
+              ) : (
+                <Images className="w-3.5 h-3.5 shrink-0" />
+              )}
+              {imagesExporting ? '正在导出图片…' : '批量保存为图片'}
+            </button>
+          </div>
+        </>
+      )}
    </div>
  );
 };
--- a/src/components/PropSidebar.tsx
+++ b/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">
--- a/src/components/VariableFilterRulesEditor.tsx
+++ b/src/components/VariableFilterRulesEditor.tsx
@@ -0,0 +1,109 @@
+import React, { useMemo, useState } from 'react';
+import { Plus } from 'lucide-react';
+import type { VisibilityRule } from '../types';
+import { resolveVariableFilterRules, toggleVisibilityRuleEnabled } from '../utils';
+import { VisibilityRuleDialog } from './VisibilityRuleDialog';
+import { VisibilityRuleSummary } from './VisibilityRuleSummary';
+
+interface VariableFilterRulesEditorProps {
+  rules?: VisibilityRule[];
+  templateVariables: string[];
+  disabled?: boolean;
+  emptyHint?: string;
+  description?: string;
+  addTitle?: string;
+  editTitle?: string;
+  onChangeRules: (rules: VisibilityRule[]) => void;
+}
+
+export const VariableFilterRulesEditor: React.FC<VariableFilterRulesEditorProps> = ({
+  rules = [],
+  templateVariables,
+  disabled = false,
+  emptyHint = '尚未添加过滤条件',
+  description = '与元素「显示控制」相同：全部条件满足时才纳入；按当前数据行与变量默认值判断。',
+  addTitle = '添加过滤条件',
+  editTitle = '编辑过滤条件',
+  onChangeRules,
+}) => {
+  const [ruleDialog, setRuleDialog] = useState<{ mode: 'add' | 'edit'; index?: number } | null>(
+    null
+  );
+
+  const normalizedRules = resolveVariableFilterRules(rules);
+
+  const ruleDialogVariableOptions = useMemo(() => {
+    if (!ruleDialog) return templateVariables;
+    if (ruleDialog.mode === 'add') {
+      return templateVariables.filter((name) => !normalizedRules.some((rule) => rule.variable === name));
+    }
+    const usedByOthers = normalizedRules
+      .filter((_, index) => index !== ruleDialog.index)
+      .map((rule) => rule.variable);
+    return templateVariables.filter((name) => !usedByOthers.includes(name));
+  }, [ruleDialog, normalizedRules, templateVariables]);
+
+  const editingRule =
+    ruleDialog?.mode === 'edit' && ruleDialog.index !== undefined
+      ? normalizedRules[ruleDialog.index]
+      : undefined;
+
+  const handleConfirmRule = (rule: VisibilityRule) => {
+    if (!ruleDialog) return;
+    if (ruleDialog.mode === 'edit' && ruleDialog.index !== undefined) {
+      onChangeRules(normalizedRules.map((item, index) => (index === ruleDialog.index ? rule : item)));
+      return;
+    }
+    onChangeRules([...normalizedRules, rule]);
+  };
+
+  return (
+    <>
+      <div className="space-y-2">
+        <p className="text-[9px] text-[#777] leading-relaxed">{description}</p>
+        {normalizedRules.length > 0 ? (
+          <div className="space-y-1.5">
+            {normalizedRules.map((rule, index) => (
+                <VisibilityRuleSummary
+                  key={`${rule.variable}-${rule.operator}-${index}`}
+                  rule={rule}
+                  onEdit={() => setRuleDialog({ mode: 'edit', index })}
+                  onDelete={() => onChangeRules(normalizedRules.filter((_, i) => i !== index))}
+                  onToggleEnabled={() =>
+                    onChangeRules(
+                      normalizedRules.map((item, i) =>
+                        i === index ? toggleVisibilityRuleEnabled(item) : item
+                      )
+                    )
+                  }
+                />
+            ))}
+          </div>
+        ) : (
+          <p className="text-[10px] text-[#888]">{emptyHint}</p>
+        )}
+        <button
+          type="button"
+          onClick={() => setRuleDialog({ mode: 'add' })}
+          disabled={disabled}
+          className="ps-btn w-full text-[10px] justify-center disabled:opacity-40 disabled:cursor-not-allowed"
+        >
+          <Plus className="w-3 h-3" />
+          添加条件
+        </button>
+      </div>
+
+      <VisibilityRuleDialog
+        open={ruleDialog !== null}
+        mode={ruleDialog?.mode ?? 'add'}
+        initialRule={editingRule}
+        variableOptions={ruleDialogVariableOptions}
+        variableOnly
+        addTitle={addTitle}
+        editTitle={editTitle}
+        onClose={() => setRuleDialog(null)}
+        onConfirm={handleConfirmRule}
+      />
+    </>
+  );
+};
--- a/src/components/VisibilityRuleDialog.tsx
+++ b/src/components/VisibilityRuleDialog.tsx
@@ -16,6 +16,9 @@ interface VisibilityRuleDialogProps {
  mode: 'add' | 'edit';
  initialRule?: VisibilityRule;
  variableOptions: string[];
+  variableOnly?: boolean;
+  addTitle?: string;
+  editTitle?: string;
  onClose: () => void;
  onConfirm: (rule: VisibilityRule) => void;
 }
@@ -25,6 +28,9 @@ export const VisibilityRuleDialog: React.FC<VisibilityRuleDialogProps> = ({
  mode,
  initialRule,
  variableOptions,
+  variableOnly = false,
+  addTitle = '添加显示条件',
+  editTitle = '编辑显示条件',
  onClose,
  onConfirm,
 }) => {
@@ -42,10 +48,10 @@ export const VisibilityRuleDialog: React.FC<VisibilityRuleDialogProps> = ({
    } else {
      setDraft({
        ...EMPTY_DRAFT,
-        target: variableOptions.length > 0 ? 'variable' : 'content',
+        target: variableOnly || variableOptions.length > 0 ? 'variable' : 'content',
      });
    }
-  }, [open, mode, initialRule, variableOptions.length]);
+  }, [open, mode, initialRule, variableOptions.length, variableOnly]);

  useEffect(() => {
    if (!open) return;
@@ -62,9 +68,8 @@ export const VisibilityRuleDialog: React.FC<VisibilityRuleDialogProps> = ({
  if (!open) return null;

  const target = draft.target ?? 'variable';
-  const canConfirm =
-    target === 'content' || draft.variable.trim().length > 0;
-  const title = mode === 'add' ? '添加显示条件' : '编辑显示条件';
+  const canConfirm = target === 'content' || draft.variable.trim().length > 0;
+  const title = mode === 'add' ? addTitle : editTitle;
  const confirmLabel = mode === 'add' ? '确定添加' : '保存';

  const handleSubmit = (e: React.FormEvent) => {
@@ -109,6 +114,7 @@ export const VisibilityRuleDialog: React.FC<VisibilityRuleDialogProps> = ({
              rule={draft}
              onChange={(patch) => setDraft((d) => ({ ...d, ...patch }))}
              variableOptions={variableOptions}
+              variableOnly={variableOnly}
            />
          </div>
          <div className="ps-modal-footer">
--- a/src/components/VisibilityRuleForm.tsx
+++ b/src/components/VisibilityRuleForm.tsx
@@ -20,17 +20,21 @@ interface VisibilityRuleFormProps {
  rule: VisibilityRuleDraft;
  onChange: (patch: Partial<VisibilityRule>) => void;
  variableOptions: string[];
+  /** 为 true 时仅支持按变量判断（如批量导出过滤） */
+  variableOnly?: boolean;
 }

 export const VisibilityRuleForm: React.FC<VisibilityRuleFormProps> = ({
  rule,
  onChange,
  variableOptions,
+  variableOnly = false,
 }) => {
-  const target = rule.target ?? 'variable';
+  const target = variableOnly ? 'variable' : (rule.target ?? 'variable');

  return (
    <div className="space-y-3">
+      {!variableOnly && (
        <div>
          <label className="ps-field-label">条件对象</label>
          <FieldSelect
@@ -51,6 +55,7 @@ export const VisibilityRuleForm: React.FC<VisibilityRuleFormProps> = ({
            ))}
          </FieldSelect>
        </div>
+      )}
      {target === 'variable' ? (
        <div>
          <label className="ps-field-label">变量</label>
@@ -68,14 +73,18 @@ export const VisibilityRuleForm: React.FC<VisibilityRuleFormProps> = ({
          </FieldSelect>
          {variableOptions.length === 0 && (
            <p className="text-[9px] text-[#666] mt-1 leading-relaxed">
-              请先在「变量管理」中添加变量，或改用「内容值」作为条件对象
+              {variableOnly
+                ? '请先在模板中添加变量后再设置过滤条件'
+                : '请先在「变量管理」中添加变量，或改用「内容值」作为条件对象'}
            </p>
          )}
        </div>
      ) : (
+        !variableOnly && (
        <p className="text-[9px] text-[#666] leading-relaxed">
          使用本元素绑定内容解析并提取后的显示文本（含数值格式等；不含前缀/后缀字符）
        </p>
+        )
      )}
      <div>
        <label className="ps-field-label">条件</label>
--- a/src/components/VisibilityRuleSummary.tsx
+++ b/src/components/VisibilityRuleSummary.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { Pencil, Trash2 } from 'lucide-react';
 import { VisibilityRule } from '../types';
-import { formatVisibilityRuleDescription } from '../utils';
+import { formatVisibilityRuleDescription, isVisibilityRuleEnabled } from '../utils';

 interface VisibilityRuleSummaryProps {
  rule: VisibilityRule;
  onEdit: () => void;
  onDelete: () => void;
+  onToggleEnabled?: () => void;
 }

 /** 将 {变量} 或「内容值」高亮展示 */
@@ -37,8 +38,22 @@ export const VisibilityRuleSummary: React.FC<VisibilityRuleSummaryProps> = ({
  rule,
  onEdit,
  onDelete,
-}) => (
-  <div className="visibility-rule-summary">
+  onToggleEnabled,
+}) => {
+  const enabled = isVisibilityRuleEnabled(rule);
+
+  return (
+    <div className={`visibility-rule-summary${enabled ? '' : ' is-disabled'}`}>
+      {onToggleEnabled && (
+        <input
+          type="checkbox"
+          checked={enabled}
+          onChange={onToggleEnabled}
+          className="ps-checkbox shrink-0"
+          title={enabled ? '禁用条件' : '启用条件'}
+          aria-label={enabled ? '禁用条件' : '启用条件'}
+        />
+      )}
      <button
        type="button"
        onClick={onEdit}
@@ -65,3 +80,4 @@ export const VisibilityRuleSummary: React.FC<VisibilityRuleSummaryProps> = ({
      </button>
    </div>
  );
+};
--- a/src/index.css
+++ b/src/index.css
@@ -1,10 +1,16 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import "tailwindcss";

+html {
+  height: 100%;
+  height: -webkit-fill-available;
+}
+
 html,
 body,
 #root {
  height: 100%;
+  min-height: 100dvh;
  overscroll-behavior: none;
 }

@@ -13,6 +19,15 @@ body {
  overflow: hidden;
 }

+body {
+  background-color: #f8fafc;
+}
+
+html.app-dark-shell,
+html.app-dark-shell body {
+  background-color: #323232;
+}
+
 /* 可滚动区域隐藏滚动条 */
 .scrollbar-hide {
  scrollbar-width: none;
@@ -656,6 +671,20 @@ body {
  background: #2a2a2a;
 }

+.visibility-rule-summary.is-disabled {
+  opacity: 0.62;
+  background: #222;
+}
+
+.visibility-rule-summary.is-disabled .visibility-rule-summary-text {
+  color: #777;
+  text-decoration: line-through;
+}
+
+.visibility-rule-summary.is-disabled .visibility-rule-summary-text .var-token {
+  color: #5a8fb0;
+}
+
 .visibility-rule-summary-btn {
  flex: 1;
  min-width: 0;
--- a/src/labelImagesExport.ts
+++ b/src/labelImagesExport.ts
@@ -0,0 +1,146 @@
+import JSZip from 'jszip';
+import type { LabelTemplate } from './types';
+import {
+  filterLabelsForImageExport,
+  resolveExportImageFileName,
+  type PrintableLabel,
+} from './utils';
+
+export interface LabelImagesExportProgress {
+  done: number;
+  total: number;
+  phase: 'render' | 'zip' | 'save';
+  zipPercent?: number;
+}
+
+export interface ExportLabelsImagesZipOptions {
+  printablePages: (PrintableLabel | null)[][];
+  filename?: string;
+  imageExtension: 'png' | 'jpg';
+  fileNamePattern?: string;
+  variableDefaults?: Record<string, string> | null;
+  exportFilter?: Pick<LabelTemplate, 'exportImageFilterMode' | 'exportImageFilterRules'>;
+  renderLabel: (label: PrintableLabel) => Promise<string>;
+  onProgress?: (progress: LabelImagesExportProgress) => void;
+}
+
+const yieldToMain = () => new Promise<void>((resolve) => setTimeout(resolve, 0));
+
+const RENDER_CONCURRENCY = 3;
+
+function dataUrlToBlob(dataUrl: string): Blob {
+  const [header, base64] = dataUrl.split(',');
+  const mime = header.match(/:(.*?);/)?.[1] ?? 'image/png';
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return new Blob([bytes], { type: mime });
+}
+
+function downloadBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+function assignUniqueZipEntryName(
+  baseName: string,
+  extension: string,
+  usedNames: Map<string, number>
+): string {
+  const first = `${baseName}.${extension}`;
+  if (!usedNames.has(first)) {
+    usedNames.set(first, 1);
+    return first;
+  }
+  const duplicate = usedNames.get(first)! + 1;
+  usedNames.set(first, duplicate);
+  return `${baseName}_${duplicate}.${extension}`;
+}
+
+/** 逐张渲染标签图片，按模板命名并打包为 ZIP 下载 */
+export async function exportLabelsImagesZipAsync(
+  options: ExportLabelsImagesZipOptions
+): Promise<void> {
+  const {
+    printablePages,
+    filename = 'labels.zip',
+    imageExtension,
+    fileNamePattern,
+    variableDefaults = null,
+    exportFilter,
+    renderLabel,
+    onProgress,
+  } = options;
+
+  const labels = filterLabelsForImageExport(
+    printablePages,
+    exportFilter ?? { exportImageFilterMode: 'always' },
+    variableDefaults
+  );
+  const total = labels.length;
+  if (total === 0) return;
+
+  const zip = new JSZip();
+  const padWidth = String(total).length;
+  const usedNames = new Map<string, number>();
+  let done = 0;
+  let progressTick = 0;
+
+  const report = (phase: LabelImagesExportProgress['phase'], zipPercent?: number) => {
+    onProgress?.({ done, total, phase, zipPercent });
+  };
+
+  report('render');
+
+  for (let i = 0; i < labels.length; i += RENDER_CONCURRENCY) {
+    const batch = labels.slice(i, i + RENDER_CONCURRENCY);
+    const rendered = await Promise.all(
+      batch.map(async (label, batchIdx) => {
+        const seq = i + batchIdx + 1;
+        const dataUrl = await renderLabel(label);
+        return { seq, label, dataUrl };
+      })
+    );
+
+    for (const { seq, label, dataUrl } of rendered) {
+      const baseName = resolveExportImageFileName(
+        fileNamePattern,
+        label,
+        seq,
+        padWidth,
+        variableDefaults
+      );
+      const name = assignUniqueZipEntryName(baseName, imageExtension, usedNames);
+      zip.file(name, dataUrlToBlob(dataUrl));
+      done++;
+    }
+
+    progressTick++;
+    if (progressTick >= 2) {
+      progressTick = 0;
+      report('render');
+      await yieldToMain();
+    }
+  }
+
+  report('render');
+  await yieldToMain();
+
+  report('zip', 0);
+  const zipBlob = await zip.generateAsync(
+    { type: 'blob', compression: 'DEFLATE', compressionOptions: { level: 6 } },
+    (metadata) => {
+      report('zip', metadata.percent);
+    }
+  );
+
+  report('save');
+  await yieldToMain();
+  downloadBlob(zipBlob, filename);
+}
--- a/src/labelRenderer.ts
+++ b/src/labelRenderer.ts
@@ -1,6 +1,6 @@
 import JsBarcode from 'jsbarcode';
 import QRCode from 'qrcode';
-import { TemplateElement, RecordRow } from './types';
+import { TemplateElement, RecordRow, LabelTemplate } from './types';
 import {
  resolveElementValue,
  isGraphicContentEmpty,
@@ -568,6 +568,10 @@ export interface RenderLabelOptions {
  transparentBackground?: boolean;
  variableDefaults?: Record<string, string> | null;
  mode?: ContentResolveMode;
+  /** 输出参考背景（生成/打印），绘制在元素下层 */
+  referenceBackground?: string;
+  referenceBackgroundOpacity?: number;
+  referenceBackgroundFit?: 'contain' | 'cover' | 'fill';
  /** 渲染倍率，默认 16；PDF 导出可用较低倍率以减轻内存与耗时 */
  scale?: number;
  /** 输出格式，默认 png */
@@ -577,6 +581,47 @@ export interface RenderLabelOptions {
  clipToCanvas?: boolean;
 }

+export type ReferenceBackgroundRenderOptions = Pick<
+  RenderLabelOptions,
+  'referenceBackground' | 'referenceBackgroundOpacity' | 'referenceBackgroundFit'
+>;
+
+type ReferenceBackgroundTemplate = Pick<
+  LabelTemplate,
+  'previewReferenceBackground' | 'previewReferenceBackgroundOpacity' | 'previewReferenceBackgroundFit'
+>;
+
+function buildReferenceBackgroundRenderOptions(
+  template: ReferenceBackgroundTemplate
+): ReferenceBackgroundRenderOptions {
+  if (!template.previewReferenceBackground) {
+    return {};
+  }
+  return {
+    referenceBackground: template.previewReferenceBackground,
+    referenceBackgroundOpacity: template.previewReferenceBackgroundOpacity ?? 100,
+    referenceBackgroundFit: template.previewReferenceBackgroundFit ?? 'cover',
+  };
+}
+
+/** 模板列表 / 设计预览等：有参考图即绘制 */
+export function resolveReferenceBackgroundForPreview(
+  template: ReferenceBackgroundTemplate
+): ReferenceBackgroundRenderOptions {
+  return buildReferenceBackgroundRenderOptions(template);
+}
+
+/** 模板开启「输出参考背景」时，供 PDF / 打印 / 排版预览使用的渲染参数 */
+export function resolveReferenceBackgroundForOutput(
+  template: ReferenceBackgroundTemplate &
+    Pick<LabelTemplate, 'includeReferenceBackgroundInOutput'>
+): ReferenceBackgroundRenderOptions {
+  if (!template.includeReferenceBackgroundInOutput) {
+    return {};
+  }
+  return buildReferenceBackgroundRenderOptions(template);
+}
+
 /** 离屏渲染标签为 PNG data URL */
 export async function renderLabelToDataUrl(options: RenderLabelOptions): Promise<string> {
  const {
@@ -589,6 +634,9 @@ export async function renderLabelToDataUrl(options: RenderLabelOptions): Promise
    transparentBackground = false,
    variableDefaults = null,
    mode = 'design',
+    referenceBackground,
+    referenceBackgroundOpacity = 100,
+    referenceBackgroundFit = 'cover',
    scale: scaleOption = 16,
    imageFormat = 'png',
    jpegQuality = 0.92,
@@ -618,6 +666,16 @@ export async function renderLabelToDataUrl(options: RenderLabelOptions): Promise
    ctx.setLineDash([]);
  }

+  if (referenceBackground) {
+    const refImg = await loadImageOrNull(referenceBackground);
+    if (refImg) {
+      ctx.save();
+      ctx.globalAlpha = Math.min(1, Math.max(0, referenceBackgroundOpacity / 100));
+      drawImageWithFit(ctx, refImg, 0, 0, canvas.width, canvas.height, referenceBackgroundFit);
+      ctx.restore();
+    }
+  }
+
  ctx.save();
  if (clipToCanvas) {
    ctx.beginPath();
--- a/src/types.ts
+++ b/src/types.ts
@@ -11,7 +11,15 @@ export const TEXT_EXTRACT_MODE_LABELS: Record<TextExtractMode, string> = {
  suffix: '后 N 位',
 };
 export type ElementVisibilityMode = 'always' | 'conditional';
-export type VisibilityOperator = 'empty' | 'not_empty' | 'gt' | 'lt' | 'eq' | 'neq';
+export type VisibilityOperator =
+  | 'empty'
+  | 'not_empty'
+  | 'gt'
+  | 'lt'
+  | 'eq'
+  | 'neq'
+  | 'contains'
+  | 'not_contains';
 /** 显示条件判断对象：变量值 或 本元素解析后的内容值 */
 export type VisibilityRuleTarget = 'variable' | 'content';

@@ -20,8 +28,10 @@ export interface VisibilityRule {
  target?: VisibilityRuleTarget;
  variable: string;
  operator: VisibilityOperator;
-  /** gt / lt / eq / neq 时的比较目标值 */
+  /** gt / lt / eq / neq / contains / not_contains 时的比较目标值 */
  value?: string;
+  /** 为 false 时跳过该条件；默认启用 */
+  enabled?: boolean;
 }

 export const VISIBILITY_RULE_TARGET_LABELS: Record<VisibilityRuleTarget, string> = {
@@ -36,6 +46,8 @@ export const VISIBILITY_OPERATOR_LABELS: Record<VisibilityOperator, string> = {
  lt: '小于',
  eq: '等于',
  neq: '不等于',
+  contains: '包含',
+  not_contains: '不包含',
 };
 export type ElementSide = 'top' | 'right' | 'bottom' | 'left';
 export type ElementCorner = 'tl' | 'tr' | 'br' | 'bl';
@@ -210,12 +222,14 @@ export interface CutLineConfig {
  color: string;
 }

-export type ExportRangeMode = 'all' | 'odd' | 'even' | 'custom';
+export type ExportRangeMode = 'all' | 'odd' | 'even' | 'custom' | 'conditional';

 export interface ExportRangeConfig {
  mode: ExportRangeMode;
  /** 自定义范围：1-based 序号，如 "1,3,5-10" */
  custom?: string;
+  /** mode=conditional 时，全部满足才纳入排版/导出范围 */
+  filterRules?: VisibilityRule[];
 }

 export interface LabelTemplate {
@@ -232,6 +246,20 @@ export interface LabelTemplate {
  paper?: PaperConfig;
  /** PDF 裁切参考线配置 */
  cutLine?: CutLineConfig;
+  /** 设计画布预览参考背景（URL / data URI） */
+  previewReferenceBackground?: string;
+  /** 预览参考背景不透明度 0–100，默认 100 */
+  previewReferenceBackgroundOpacity?: number;
+  /** 预览参考背景适应方式，默认 cover */
+  previewReferenceBackgroundFit?: 'contain' | 'cover' | 'fill';
+  /** 生成 PDF / 打印 / 排版预览输出时是否绘制参考背景，默认 false */
+  includeReferenceBackgroundInOutput?: boolean;
+  /** 批量导出图片时的文件名模板，支持 {#SEQ}、{#INDEX}、{变量名}；留空则按序号补零命名 */
+  exportImageFileNamePattern?: string;
+  /** 批量导出图片：all=全部导出，conditional=按条件过滤 */
+  exportImageFilterMode?: ElementVisibilityMode;
+  /** 批量导出图片过滤条件；全部满足时才导出该枚标签 */
+  exportImageFilterRules?: VisibilityRule[];
 }

 export type PaperType = 'A4' | 'A5' | 'A6' | 'custom';
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -155,7 +155,9 @@ export function applyRowVariableMapping(
 export const DEFAULT_EXPORT_RANGE: ExportRangeConfig = { mode: 'all' };

 export const exportRangeEquals = (a: ExportRangeConfig, b: ExportRangeConfig) =>
-  a.mode === b.mode && (a.custom ?? '') === (b.custom ?? '');
+  a.mode === b.mode &&
+  (a.custom ?? '') === (b.custom ?? '') &&
+  JSON.stringify(a.filterRules ?? []) === JSON.stringify(b.filterRules ?? []);

 export const DEFAULT_CUT_LINE_CONFIG: CutLineConfig = {
  enabled: true,
@@ -246,7 +248,12 @@ export interface PrintableLabel {
 }

 /** 按导出范围筛选 0-based 行索引（保持升序） */
-export function getExportRangeIndices(total: number, range: ExportRangeConfig): number[] {
+export function getExportRangeIndices(
+  rows: RecordRow[],
+  range: ExportRangeConfig,
+  variableDefaults?: Record<string, string> | null
+): number[] {
+  const total = rows.length;
  if (total <= 0) return [];
  switch (range.mode) {
    case 'odd':
@@ -255,6 +262,13 @@ export function getExportRangeIndices(total: number, range: ExportRangeConfig):
      return Array.from({ length: total }, (_, i) => i).filter((i) => (i + 1) % 2 === 0);
    case 'custom':
      return parseCustomExportRange(range.custom ?? '', total);
+    case 'conditional': {
+      const rules = resolveVariableFilterRules(range.filterRules);
+      if (rules.length === 0) return Array.from({ length: total }, (_, i) => i);
+      return Array.from({ length: total }, (_, i) => i).filter((i) =>
+        rowMatchesVariableFilterRules(rows[i], i, rules, variableDefaults)
+      );
+    }
    case 'all':
    default:
      return Array.from({ length: total }, (_, i) => i);
@@ -287,11 +301,12 @@ export function buildPrintablePages(
  rows: RecordRow[],
  paper: PaperConfig,
  labelSize: { width: number; height: number },
-  exportRange: ExportRangeConfig
+  exportRange: ExportRangeConfig,
+  variableDefaults?: Record<string, string> | null
 ) {
  const gridInfo = calculateGrid(paper, labelSize);
  const labelsPerPage = gridInfo.cols * gridInfo.rows;
-  const indices = getExportRangeIndices(rows.length, exportRange);
+  const indices = getExportRangeIndices(rows, exportRange, variableDefaults);
  const selected: PrintableLabel[] = indices.map((i) => ({ row: rows[i], sourceIndex: i }));
  const totalPages = Math.ceil(selected.length / labelsPerPage) || 1;
  const pages: (PrintableLabel | null)[][] = [];
@@ -578,7 +593,26 @@ export function isConditionalVisibility(elem: TemplateElement): boolean {
 }

 export function visibilityOperatorNeedsValue(operator: VisibilityOperator): boolean {
-  return operator === 'gt' || operator === 'lt' || operator === 'eq' || operator === 'neq';
+  return (
+    operator === 'gt' ||
+    operator === 'lt' ||
+    operator === 'eq' ||
+    operator === 'neq' ||
+    operator === 'contains' ||
+    operator === 'not_contains'
+  );
+}
+
+export function isVisibilityRuleEnabled(rule: VisibilityRule): boolean {
+  return rule.enabled !== false;
+}
+
+export function getActiveVisibilityRules(rules: VisibilityRule[]): VisibilityRule[] {
+  return rules.filter(isVisibilityRuleEnabled);
+}
+
+export function toggleVisibilityRuleEnabled(rule: VisibilityRule): VisibilityRule {
+  return { ...rule, enabled: isVisibilityRuleEnabled(rule) ? false : undefined };
 }

 /** 将显示条件格式化为可读说明 */
@@ -598,6 +632,10 @@ export function formatVisibilityRuleDescription(rule: VisibilityRule): string {
      return `${subjectLabel} 等于 ${rule.value ?? '—'}`;
    case 'neq':
      return `${subjectLabel} 不等于 ${rule.value ?? '—'}`;
+    case 'contains':
+      return `${subjectLabel} 包含 ${rule.value ?? '—'}`;
+    case 'not_contains':
+      return `${subjectLabel} 不包含 ${rule.value ?? '—'}`;
    default:
      return `${subjectLabel} ${VISIBILITY_OPERATOR_LABELS[rule.operator]}`;
  }
@@ -616,6 +654,7 @@ export function resolveVisibilityRules(elem: TemplateElement): VisibilityRule[]
        variable: (r.variable ?? '').trim(),
        operator: r.operator,
        value: r.value,
+        enabled: r.enabled,
      }))
      .filter((r) => r.target === 'content' || r.variable);
  }
@@ -709,6 +748,17 @@ export function evaluateVisibilityRule(
      if (isEmpty) return target !== '';
      return compareVariableToTarget(raw!, target, 'neq');
    }
+    case 'contains': {
+      const target = (rule.value ?? '').trim();
+      if (!target || isEmpty) return false;
+      return raw!.includes(target);
+    }
+    case 'not_contains': {
+      const target = (rule.value ?? '').trim();
+      if (!target) return true;
+      if (isEmpty) return true;
+      return !raw!.includes(target);
+    }
    default:
      return true;
  }
@@ -749,6 +799,138 @@ export function resolveContent(
  });
 }

+/** 清理为安全的文件名（不含扩展名） */
+export function sanitizeFileName(name: string, fallback = 'label'): string {
+  const cleaned = name
+    .replace(/[\\/:*?"<>|]/g, '_')
+    .replace(/[\u0000-\u001f]/g, '')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .replace(/[. ]+$/g, '')
+    .slice(0, 120);
+  return cleaned || fallback;
+}
+
+/**
+ * 解析批量导出图片的文件名模板。
+ * - {#SEQ}：导出顺序（1-based）；{#SEQ:4} 可补零
+ * - {#INDEX}：数据行序号（1-based）；{#INDEX:4} 可补零
+ * - {变量名}：当前行数据或 variableDefaults
+ */
+export function resolveExportImageFileName(
+  pattern: string | undefined,
+  label: PrintableLabel,
+  seq: number,
+  padWidth: number,
+  variableDefaults?: Record<string, string> | null
+): string {
+  if (!pattern?.trim()) {
+    return String(seq).padStart(padWidth, '0');
+  }
+
+  const normalizedPattern = pattern.replace(/\r?\n/g, '').trim();
+  if (!normalizedPattern) {
+    return String(seq).padStart(padWidth, '0');
+  }
+
+  const resolved = normalizedPattern.replace(/\{([^}]+)\}/g, (_, key: string) => {
+    const special = key.match(/^(#SEQ|#INDEX)(?::(\d+))?$/);
+    if (special) {
+      const width = special[2] ? parseInt(special[2], 10) : 0;
+      const raw = special[1] === '#SEQ' ? String(seq) : String(label.sourceIndex + 1);
+      return width > 0 ? raw.padStart(width, '0') : raw;
+    }
+    if (key === '#SEQ') return String(seq);
+    if (key === '#INDEX') return String(label.sourceIndex + 1);
+
+    let val: string | undefined;
+    if (label.row && label.row[key] !== undefined && String(label.row[key]).trim() !== '') {
+      val = String(label.row[key]);
+    } else if (
+      variableDefaults &&
+      variableDefaults[key] !== undefined &&
+      String(variableDefaults[key]).trim() !== ''
+    ) {
+      val = String(variableDefaults[key]);
+    }
+    return val ?? '';
+  });
+
+  return sanitizeFileName(resolved);
+}
+
+/** 解析变量过滤规则（仅 variable 目标） */
+export function resolveVariableFilterRules(rules?: VisibilityRule[]): VisibilityRule[] {
+  return (rules ?? [])
+    .map((rule) => ({
+      target: rule.target ?? 'variable',
+      variable: (rule.variable ?? '').trim(),
+      operator: rule.operator,
+      value: rule.value,
+      enabled: rule.enabled,
+    }))
+    .filter((rule) => rule.target === 'variable' && rule.variable);
+}
+
+/** 数据行是否满足全部变量过滤条件 */
+export function rowMatchesVariableFilterRules(
+  row: RecordRow,
+  rowIndex: number,
+  rules: VisibilityRule[],
+  variableDefaults?: Record<string, string> | null
+): boolean {
+  const activeRules = getActiveVisibilityRules(rules);
+  if (activeRules.length === 0) return true;
+  return activeRules.every((rule) =>
+    evaluateVisibilityRule(rule, row, variableDefaults, 'output', undefined, rowIndex)
+  );
+}
+
+export function isExportImageFilterConditional(
+  template: Pick<LabelTemplate, 'exportImageFilterMode'>
+): boolean {
+  return template.exportImageFilterMode === 'conditional';
+}
+
+export function resolveExportImageFilterRules(
+  template: Pick<LabelTemplate, 'exportImageFilterRules'>
+): VisibilityRule[] {
+  return resolveVariableFilterRules(template.exportImageFilterRules);
+}
+
+/** 批量导出图片时，当前数据行是否应导出 */
+export function shouldExportLabelImage(
+  template: Pick<LabelTemplate, 'exportImageFilterMode' | 'exportImageFilterRules'>,
+  label: PrintableLabel,
+  variableDefaults?: Record<string, string> | null
+): boolean {
+  if (!isExportImageFilterConditional(template)) return true;
+  const rules = resolveExportImageFilterRules(template);
+  return rowMatchesVariableFilterRules(label.row, label.sourceIndex, rules, variableDefaults);
+}
+
+export function filterLabelsForImageExport(
+  printablePages: (PrintableLabel | null)[][],
+  template: Pick<LabelTemplate, 'exportImageFilterMode' | 'exportImageFilterRules'>,
+  variableDefaults?: Record<string, string> | null
+): PrintableLabel[] {
+  return flattenPrintableLabelsForExport(printablePages).filter((label) =>
+    shouldExportLabelImage(template, label, variableDefaults)
+  );
+}
+
+function flattenPrintableLabelsForExport(
+  printablePages: (PrintableLabel | null)[][]
+): PrintableLabel[] {
+  const labels: PrintableLabel[] = [];
+  for (const page of printablePages) {
+    for (const item of page) {
+      if (item) labels.push(item);
+    }
+  }
+  return labels;
+}
+
 /** 格式化单个数值用于文本显示 */
 export function formatDisplayValue(
  value: string,
@@ -974,7 +1156,9 @@ export function shouldRenderElement(

  const rules = resolveVisibilityRules(elem);
  if (rules.length > 0) {
-    return rules.every((rule) =>
+    const activeRules = getActiveVisibilityRules(rules);
+    if (activeRules.length === 0) return true;
+    return activeRules.every((rule) =>
      evaluateVisibilityRule(rule, row, defaults, mode, elem, rowIndex)
    );
  }