优化

打印
fix
2026-06-23 15:26:51 +08:00 · 2026-06-23 15:17:29 +08:00 · 2026-06-16 23:41:27 +08:00 · 2026-06-15 17:53:51 +08:00 · 2026-06-15 17:43:01 +08:00 · 2026-06-15 16:59:37 +08:00
43 changed files with 5470 additions and 815 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';
@@ -20,9 +21,14 @@ import { MobileExportView } from './components/MobileExportView';
 import { MobileDesignView } from './components/MobileDesignView';
 import type { TableCellCoord } from './tableUtils';
 import { LayoutPreview } from './components/PreviewGrid';
+import { LabelLayoutSizeCalculator } from './components/LabelLayoutSizeCalculator';
 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,
@@ -30,6 +36,7 @@ import {
 } from './labelPrint';
 import { useIsMobile } from './hooks/useIsMobile';
 import { useUndoRedo } from './hooks/useUndoRedo';
+import { useElementClipboard } from './hooks/useElementClipboard';
 import { useAppDialog } from './components/AppDialog';
 import { AnchoredMenu } from './components/AnchoredMenu';
 import {
@@ -73,7 +80,7 @@ function fitTemplatePreviewSize(widthMm: number, heightMm: number) {
 }

 export default function App() {
-  const { showAlert, showConfirm } = useAppDialog();
+  const { showAlert, showConfirm, showToast } = useAppDialog();

  // --- 1. Templates Storage & Initial States ---
  const [templates, setTemplates] = useState<LabelTemplate[]>(() => {
@@ -142,6 +149,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 +157,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[]>([]);
@@ -157,8 +170,9 @@ export default function App() {
  // Modal / Inline input values for template creations
  const [showAddTmplForm, setShowAddTmplForm] = useState<boolean>(false);
  const [newTmplName, setNewTmplName] = useState<string>('');
-  const [newTmplW, setNewTmplW] = useState<number>(75);
-  const [newTmplH, setNewTmplH] = useState<number>(45);
+  const [newTmplW, setNewTmplW] = useState('75');
+  const [newTmplH, setNewTmplH] = useState('45');
+  const [newTmplPaper, setNewTmplPaper] = useState<PaperConfig | null>(null);
  const [editingTemplateId, setEditingTemplateId] = useState<string | null>(null);
  const [editTmplName, setEditTmplName] = useState<string>('');
  const [templateMenuId, setTemplateMenuId] = useState<string | null>(null);
@@ -186,25 +200,35 @@ export default function App() {
  };

  // Modify active template elements
-  const handleTemplateChange = (updated: LabelTemplate) => {
-    const updatedList = templates.map(t => t.id === updated.id ? updated : t);
-    saveTemplatesToStorage(updatedList);
-  };
+  const activeTemplateRef = useRef(activeTemplate);
+  activeTemplateRef.current = activeTemplate;
+
+  const handleTemplateChange = useCallback((updated: LabelTemplate) => {
+    setTemplates((prev) => {
+      const updatedList = prev.map((t) => (t.id === updated.id ? updated : t));
+      try {
+        const stripped = updatedList.map(stripTemplateForStorage);
+        localStorage.setItem('label_templates_list_v2', JSON.stringify(stripped));
+      } catch (e) {}
+      return updatedList;
+    });
+  }, []);

  const handleDesignTemplateChange = useCallback(
    (updated: LabelTemplate) => {
+      const current = activeTemplateRef.current;
      if (
        !skipDesignHistoryRef.current &&
        workflowStep === 'template-design' &&
-        activeTemplate &&
-        updated.id === activeTemplate.id
+        current &&
+        updated.id === current.id
      ) {
-        designHistory.record(activeTemplate, updated);
+        designHistory.record(current, updated);
      }
      skipDesignHistoryRef.current = false;
      handleTemplateChange(updated);
    },
-    [workflowStep, activeTemplate, designHistory, templates]
+    [workflowStep, designHistory, handleTemplateChange]
  );

  const handleDesignUndo = useCallback(() => {
@@ -238,6 +262,30 @@ export default function App() {
    [activeTemplate]
  );

+  const handleCopyElementsSuccess = useCallback(
+    (count: number) => {
+      showToast(`已复制 ${count} 个元素`, { variant: 'success' });
+    },
+    [showToast]
+  );
+
+  const handleDuplicateElementsSuccess = useCallback(
+    (count: number) => {
+      showToast(`已创建 ${count} 个副本`, { variant: 'success' });
+    },
+    [showToast]
+  );
+
+  const elementClipboard = useElementClipboard({
+    template: activeTemplate ?? EMPTY_TEMPLATE_PLACEHOLDER,
+    onChange: handleDesignTemplateChange,
+    selectedElementIds,
+    onSelectElements: handleSelectElements,
+    onSelectTableCells: setSelectedTableCells,
+    onCopySuccess: handleCopyElementsSuccess,
+    onDuplicateSuccess: handleDuplicateElementsSuccess,
+  });
+
  useEffect(() => {
    if (workflowStep !== 'template-design' || !activeTemplate?.id) return;
    const needReset =
@@ -359,31 +407,24 @@ export default function App() {
      await showAlert('请先输入合法的模板名', { variant: 'warning' });
      return;
    }
+    const width = Number(newTmplW);
+    const height = Number(newTmplH);
+    if (!newTmplW.trim() || Number.isNaN(width) || width < 10) {
+      await showAlert('请输入合法的标签宽度（>10 mm）', { variant: 'warning' });
+      return;
+    }
+    if (!newTmplH.trim() || Number.isNaN(height) || height < 10) {
+      await showAlert('请输入合法的标签高度（>10 mm）', { variant: 'warning' });
+      return;
+    }
    const newId = `custom_tmpl_${Date.now()}`;
    const newTmpl: LabelTemplate = {
      id: newId,
      name: `${newTmplName}`,
-      width: Math.max(10, Number(newTmplW) || 70),
-      height: Math.max(10, Number(newTmplH) || 40),
-      elements: [
-        {
-          id: `desc_welcome`,
-          type: 'text',
-          name: '主文字内容',
-          x: 5,
-          y: 5,
-          width: Math.max(10, newTmplW - 10),
-          height: 10,
-          content: '{变量}',
-          fontSize: 12,
-          textAlign: 'center',
-          fontWeight: 'bold',
-          barcodeFormat: 'CODE128',
-          showText: false,
-          fontFamily: 'sans'
-        }
-      ],
-      paper: DEFAULT_PAPER_CONFIG,
+      width,
+      height,
+      elements: [],
+      paper: newTmplPaper ?? DEFAULT_PAPER_CONFIG,
      cutLine: DEFAULT_CUT_LINE_CONFIG,
    };

@@ -391,6 +432,7 @@ export default function App() {
    saveTemplatesToStorage(list);
    handleSelectTemplate(newId);
    setNewTmplName('');
+    setNewTmplPaper(null);
    setShowAddTmplForm(false);
    setWorkflowStep('template-design');
  };
@@ -398,8 +440,9 @@ export default function App() {
  const closeAddTemplateDialog = () => {
    setShowAddTmplForm(false);
    setNewTmplName('');
-    setNewTmplW(75);
-    setNewTmplH(45);
+    setNewTmplW('75');
+    setNewTmplH('45');
+    setNewTmplPaper(null);
  };

  const openEditTemplateDialog = (tmpl: LabelTemplate) => {
@@ -533,7 +576,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 +617,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]
  );

@@ -678,7 +735,7 @@ export default function App() {
    if (previewSnapshot !== null && appliedExportData !== null) {
      setPreviewLayoutStale(true);
    }
-  }, [workingTemplate.elements, workingTemplate.width, workingTemplate.height]);
+  }, [workingTemplate.elements, workingTemplate.width, workingTemplate.height, workingTemplate.dataFilterRules]);

  useEffect(() => {
    if (workflowStep !== 'print-view') return;
@@ -688,7 +745,8 @@ export default function App() {
      appliedMappedRows,
      paper,
      workingTemplate,
-      appliedExportData.exportRange
+      appliedExportData.exportRange,
+      workingTemplate.variableDefaults ?? null
    );

    setPreviewSnapshot({
@@ -708,16 +766,70 @@ export default function App() {
    appliedMappedRows,
    workingTemplate.width,
    workingTemplate.height,
+    workingTemplate.dataFilterRules,
  ]);

  const pdfExportImage = useMemo(() => {
-    const hasCode = workingTemplate.elements.some(
-      (e) => e.type === 'barcode' || e.type === 'qrcode'
+    const printMode = workingTemplate.paper?.printColorMode ?? 'cmyk';
+    return {
+      imageFormat: 'png' as const,
+      jsPdfFormat: 'PNG' as const,
+      scale: printMode === 'cmyk' ? 14 : 12,
+      jpegQuality: 0.95,
+    };
+  }, [workingTemplate.paper?.printColorMode]);
+
+  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 handleDataFilterRulesChange = (rules: VisibilityRule[]) => {
+    if (!activeTemplate) return;
+    handleTemplateChange({
+      ...activeTemplate,
+      dataFilterRules: rules.length > 0 ? rules : undefined,
+    });
+  };
+
+  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: pdfExportImage.jpegQuality,
+        printColorMode: activeTemplate!.paper?.printColorMode ?? 'cmyk',
+        ...resolveReferenceBackgroundForOutput(activeTemplate!),
+      }),
+    [activeTemplate, pdfExportImage]
  );
-    return hasCode
-      ? { imageFormat: 'png' as const, jsPdfFormat: 'PNG' as const, scale: 10 }
-      : { imageFormat: 'jpeg' as const, jsPdfFormat: 'JPEG' as const, scale: 10 };
-  }, [workingTemplate.elements]);

  const exportPdf = async () => {
    if (!activeTemplate) return;
@@ -754,19 +866,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 +884,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 +971,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);
@@ -834,23 +986,24 @@ export default function App() {
    }
  };

-  const printBlockedReason =
-    !appliedExportData
-      ? '请先应用数据'
-      : appliedLayoutResult.selectedCount === 0
-        ? '当前数据范围内无标签'
-        : previewLayoutStale
-          ? '排版已变更，请重新绘制预览'
-          : 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 +1237,7 @@ export default function App() {
                            rowIndex={0}
                            showBorder={true}
                            variableDefaults={tmpl.variableDefaults ?? null}
+                            {...resolveReferenceBackgroundForPreview(tmpl)}
                          />
                        </div>
                      </div>
@@ -1223,6 +1377,7 @@ export default function App() {
            onRedo={handleDesignRedo}
            onBack={() => setWorkflowStep('template-select')}
            onExport={() => openPrintView()}
+            elementClipboard={elementClipboard}
          />
        )}

@@ -1265,7 +1420,7 @@ export default function App() {
                </button>
              </div>
              <span className="hidden md:inline text-[10px] text-[#666]">
-                Shift/Ctrl+点击多选
+                Shift/Ctrl+点击多选 · Ctrl+C/V 复制粘贴
              </span>
              <button
                onClick={() => openPrintView()}
@@ -1285,6 +1440,7 @@ export default function App() {
                onSelectElements={handleSelectElements}
                selectedTableCells={selectedTableCells}
                onSelectTableCells={setSelectedTableCells}
+                elementClipboard={elementClipboard}
              />
              <PropSidebar
                template={activeTemplate}
@@ -1296,6 +1452,7 @@ export default function App() {
                activeTab="element"
                onChangeTab={() => { }}
                paper={paper}
+                elementClipboard={elementClipboard}
              />
            </div>
          </div>
@@ -1307,6 +1464,7 @@ export default function App() {
        {workflowStep === 'print-view' && isMobile && hasTemplates && activeTemplate && (
          <MobileExportView
            template={activeTemplate}
+            onChangeTemplate={handleTemplateChange}
            templateName={activeTemplate.name ?? '标签'}
            templateVariables={templateVariables}
            importData={importData}
@@ -1320,6 +1478,7 @@ export default function App() {
            rows={mappedRows}
            draftExportRange={draftExportRange}
            onChangeDraftExportRange={setDraftExportRange}
+            onChangeDataFilterRules={handleDataFilterRulesChange}
            cutLine={cutLine}
            onChangeCutLine={handleCutLineChange}
            printablePages={previewSnapshot?.pages ?? []}
@@ -1335,6 +1494,7 @@ export default function App() {
            activeRowIndex={activeRowIndex}
            onSelectRowIndex={setActiveRowIndex}
            pdfGenerating={pdfGenerating}
+            imagesZipGenerating={imagesZipGenerating}
            printing={printing}
            onBack={() => setWorkflowStep('template-select')}
            onExportPdf={exportPdf}
@@ -1344,9 +1504,14 @@ 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 +1547,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'
                  }`}
@@ -1428,9 +1596,11 @@ export default function App() {
                paper={paper}
                onChangePaper={handlePaperChange}
                template={activeTemplate}
+                onChangeTemplate={handleTemplateChange}
                rows={mappedRows}
                draftExportRange={draftExportRange}
                onChangeDraftExportRange={setDraftExportRange}
+                onChangeDataFilterRules={handleDataFilterRulesChange}
                cutLine={cutLine}
                onChangeCutLine={handleCutLineChange}
                previewReady={previewSnapshot !== null}
@@ -1442,14 +1612,22 @@ 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}
              />
            </div>
          </div>
@@ -1459,7 +1637,6 @@ export default function App() {
      {editingTemplateId && (
        <div
          className="fixed inset-0 z-[9000] flex items-center justify-center bg-slate-950/60 backdrop-blur-sm p-4"
-          onClick={closeEditTemplateDialog}
          role="presentation"
        >
          <div
@@ -1507,7 +1684,6 @@ export default function App() {
      {showAddTmplForm && (
        <div
          className="fixed inset-0 z-[9000] flex items-center justify-center bg-slate-950/60 backdrop-blur-sm p-4"
-          onClick={closeAddTemplateDialog}
          role="presentation"
        >
          <div
@@ -1548,18 +1724,25 @@ export default function App() {
                  className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:border-indigo-400 focus:outline-none"
                />
              </div>
+              <LabelLayoutSizeCalculator
+                onCalculated={({ width, height, paper }) => {
+                  setNewTmplW(String(width));
+                  setNewTmplH(String(height));
+                  setNewTmplPaper(paper);
+                }}
+              />
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-[11px] font-semibold text-gray-500 mb-1.5">
                    标签宽度 (mm)
                  </label>
                  <input
-                    type="number"
+                    type="text"
+                    inputMode="decimal"
                    required
-                    min="10"
-                    max="150"
+                    placeholder="75"
                    value={newTmplW}
-                    onChange={(e) => setNewTmplW(Number(e.target.value))}
+                    onChange={(e) => setNewTmplW(e.target.value)}
                    className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm font-mono focus:border-indigo-400 focus:outline-none"
                  />
                </div>
@@ -1568,12 +1751,12 @@ export default function App() {
                    标签高度 (mm)
                  </label>
                  <input
-                    type="number"
+                    type="text"
+                    inputMode="decimal"
                    required
-                    min="10"
-                    max="150"
+                    placeholder="45"
                    value={newTmplH}
-                    onChange={(e) => setNewTmplH(Number(e.target.value))}
+                    onChange={(e) => setNewTmplH(e.target.value)}
                    className="w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm font-mono focus:border-indigo-400 focus:outline-none"
                  />
                </div>
@@ -1598,11 +1781,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 +1796,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/colorUtils.ts
+++ b/src/colorUtils.ts
@@ -0,0 +1,258 @@
+import type { PrintColorMode, RecordRow, TemplateElement } from './types';
+import { resolveContent, type ContentResolveMode } from './utils';
+
+export interface RenderColorContext {
+  printColorMode?: PrintColorMode;
+  row: RecordRow | null;
+  variableDefaults?: Record<string, string> | null;
+  mode?: ContentResolveMode;
+  rowIndex?: number;
+}
+
+export function colorValueUsesVariable(value?: string): boolean {
+  return !!value?.includes('{');
+}
+
+export function isTransparentColorValue(value?: string): boolean {
+  if (!value) return true;
+  const trimmed = value.trim().toLowerCase();
+  return trimmed === '' || trimmed === 'transparent';
+}
+
+function clampByte(n: number): number {
+  return Math.max(0, Math.min(255, Math.round(n)));
+}
+
+function parseHexColor(color: string): { r: number; g: number; b: number; a: number } | null {
+  const trimmed = color.trim();
+  if (!trimmed.startsWith('#')) return null;
+  let hex = trimmed.slice(1);
+  if (hex.length === 3) {
+    hex = hex.split('').map((c) => c + c).join('');
+  }
+  if (hex.length === 6) {
+    return {
+      r: parseInt(hex.slice(0, 2), 16),
+      g: parseInt(hex.slice(2, 4), 16),
+      b: parseInt(hex.slice(4, 6), 16),
+      a: 1,
+    };
+  }
+  if (hex.length === 8) {
+    return {
+      r: parseInt(hex.slice(0, 2), 16),
+      g: parseInt(hex.slice(2, 4), 16),
+      b: parseInt(hex.slice(4, 6), 16),
+      a: parseInt(hex.slice(6, 8), 16) / 255,
+    };
+  }
+  return null;
+}
+
+function parseRgbColor(color: string): { r: number; g: number; b: number; a: number } | null {
+  const rgba = color.match(
+    /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)/i
+  );
+  if (!rgba) return null;
+  return {
+    r: Math.round(Number(rgba[1])),
+    g: Math.round(Number(rgba[2])),
+    b: Math.round(Number(rgba[3])),
+    a: rgba[4] !== undefined ? Math.min(1, Math.max(0, Number(rgba[4]))) : 1,
+  };
+}
+
+export function parseCssColor(color: string): { r: number; g: number; b: number; a: number } | null {
+  const trimmed = color.trim();
+  if (!trimmed || trimmed.toLowerCase() === 'transparent') return null;
+  return parseHexColor(trimmed) ?? parseRgbColor(trimmed);
+}
+
+function formatRgba(r: number, g: number, b: number, a = 1): string {
+  if (a >= 1) return `rgb(${r},${g},${b})`;
+  return `rgba(${r},${g},${b},${Math.round(a * 1000) / 1000})`;
+}
+
+function rgbToCmyk(r: number, g: number, b: number) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const k = 1 - Math.max(rn, gn, bn);
+  if (k >= 1) return { c: 0, m: 0, y: 0, k: 1 };
+  const c = (1 - rn - k) / (1 - k);
+  const m = (1 - gn - k) / (1 - k);
+  const y = (1 - bn - k) / (1 - k);
+  return { c, m, y, k };
+}
+
+function cmykToRgb(c: number, m: number, y: number, k: number) {
+  return {
+    r: 255 * (1 - c) * (1 - k),
+    g: 255 * (1 - m) * (1 - k),
+    b: 255 * (1 - y) * (1 - k),
+  };
+}
+
+/** 灰成分替换（GCR），中性色更多走 K 通道，印刷更稳定 */
+function applyGrayComponentReplacement(c: number, m: number, y: number, k: number) {
+  const gray = Math.min(c, m, y);
+  if (gray <= 0.01) return { c, m, y, k };
+  const gcr = gray * 0.85;
+  return {
+    c: c - gcr,
+    m: m - gcr,
+    y: y - gcr,
+    k: Math.min(1, k + gcr),
+  };
+}
+
+/** 总墨量限制（TAC），典型 280–300% */
+function limitTotalInk(c: number, m: number, y: number, k: number, maxInk = 2.8) {
+  const total = c + m + y + k;
+  if (total <= maxInk || total <= 0) return { c, m, y, k };
+  const scale = maxInk / total;
+  return { c: c * scale, m: m * scale, y: y * scale, k: k * scale };
+}
+
+/** 网点扩大 / 纸张吸墨：印刷比屏幕略深 */
+function applyDotGain(r: number, g: number, b: number, amount: number): [number, number, number] {
+  const factor = 1 - amount;
+  return [clampByte(r * factor), clampByte(g * factor), clampByte(b * factor)];
+}
+
+/** 轻度去饱和，逼近油墨叠色效果 */
+function applyDesaturation(r: number, g: number, b: number, saturation: number): [number, number, number] {
+  const lum = 0.299 * r + 0.587 * g + 0.114 * b;
+  return [
+    clampByte(lum + (r - lum) * saturation),
+    clampByte(lum + (g - lum) * saturation),
+    clampByte(lum + (b - lum) * saturation),
+  ];
+}
+
+function transformRgbPixel(r: number, g: number, b: number, mode: PrintColorMode): [number, number, number] {
+  if (mode === 'grayscale') {
+    const lum = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
+    return [lum, lum, lum];
+  }
+
+  let nr = r;
+  let ng = g;
+  let nb = b;
+
+  if (mode === 'cmyk') {
+    let { c, m, y, k } = rgbToCmyk(nr, ng, nb);
+    ({ c, m, y, k } = applyGrayComponentReplacement(c, m, y, k));
+    ({ c, m, y, k } = limitTotalInk(c, m, y, k));
+    const rgb = cmykToRgb(c, m, y, k);
+    nr = rgb.r;
+    ng = rgb.g;
+    nb = rgb.b;
+    [nr, ng, nb] = applyDotGain(nr, ng, nb, 0.07);
+    return [nr, ng, nb];
+  }
+
+  // rgb：轻度印刷补偿（设计预览与导出一致，缩小与实机色差）
+  [nr, ng, nb] = applyDesaturation(nr, ng, nb, 0.9);
+  [nr, ng, nb] = applyDotGain(nr, ng, nb, 0.04);
+  return [nr, ng, nb];
+}
+
+export function applyPrintColorModeToImageData(
+  imageData: ImageData,
+  mode: PrintColorMode = 'rgb'
+): void {
+  const { data } = imageData;
+  for (let i = 0; i < data.length; i += 4) {
+    const alpha = data[i + 3];
+    if (alpha === 0) continue;
+    const [nr, ng, nb] = transformRgbPixel(data[i], data[i + 1], data[i + 2], mode);
+    data[i] = nr;
+    data[i + 1] = ng;
+    data[i + 2] = nb;
+  }
+}
+
+export function applyPrintColorModeToCanvas(
+  canvas: HTMLCanvasElement,
+  mode: PrintColorMode = 'rgb'
+): void {
+  const ctx = canvas.getContext('2d', { willReadFrequently: true });
+  if (!ctx) return;
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  applyPrintColorModeToImageData(imageData, mode);
+  ctx.putImageData(imageData, 0, 0);
+}
+
+export function applyPrintColorMode(color: string, mode: PrintColorMode = 'rgb'): string {
+  if (isTransparentColorValue(color)) return color;
+  const parsed = parseCssColor(color);
+  if (!parsed) return color;
+  const [r, g, b] = transformRgbPixel(parsed.r, parsed.g, parsed.b, mode);
+  return formatRgba(r, g, b, parsed.a);
+}
+
+/** 解析颜色字面量或 {变量} */
+export function resolveRenderableColor(
+  raw: string | undefined,
+  ctx: RenderColorContext,
+  fallback?: string
+): string | undefined {
+  const source = (raw ?? fallback ?? '').trim();
+  if (!source) return undefined;
+  if (isTransparentColorValue(source)) return 'transparent';
+
+  let resolved = source;
+  if (colorValueUsesVariable(source)) {
+    resolved = resolveContent(
+      source,
+      ctx.row,
+      ctx.rowIndex ?? 0,
+      ctx.variableDefaults,
+      { mode: ctx.mode ?? 'design' }
+    ).trim();
+  }
+
+  if (!resolved || isTransparentColorValue(resolved)) return 'transparent';
+  return resolved;
+}
+
+/** 为渲染解析元素上的颜色字段（含变量） */
+export function resolveElementColorsForRender(
+  elem: TemplateElement,
+  ctx: RenderColorContext
+): TemplateElement {
+  const textColor = resolveRenderableColor(elem.textColor, ctx, '#111827');
+  const backgroundColor = resolveRenderableColor(elem.backgroundColor, ctx);
+  const borderColor = resolveRenderableColor(elem.borderColor, ctx, '#111827');
+  const tableBorderColor = resolveRenderableColor(elem.tableBorderColor, ctx, '#374151');
+
+  const patchBorderSide = (value?: string) => {
+    if (!value?.trim()) return value;
+    return resolveRenderableColor(value, ctx, borderColor ?? '#111827');
+  };
+
+  return {
+    ...elem,
+    textColor,
+    backgroundColor,
+    borderColor,
+    tableBorderColor,
+    borderColorTop: patchBorderSide(elem.borderColorTop),
+    borderColorRight: patchBorderSide(elem.borderColorRight),
+    borderColorBottom: patchBorderSide(elem.borderColorBottom),
+    borderColorLeft: patchBorderSide(elem.borderColorLeft),
+  };
+}
+
+/** 颜色选择器可用的预览色（变量色时回退默认色） */
+export function colorPickerPreviewValue(value: string | undefined, fallback: string): string {
+  if (!value || isTransparentColorValue(value) || colorValueUsesVariable(value)) {
+    return fallback;
+  }
+  const parsed = parseCssColor(value);
+  if (!parsed) return fallback;
+  if (parsed.a < 1) return fallback;
+  const hex = (n: number) => n.toString(16).padStart(2, '0');
+  return `#${hex(parsed.r)}${hex(parsed.g)}${hex(parsed.b)}`;
+}
--- a/src/components/AppDialog.tsx
+++ b/src/components/AppDialog.tsx
@@ -33,6 +33,7 @@ interface DialogRequest {
 interface AppDialogContextValue {
  showAlert: (message: string, options?: AlertOptions) => Promise<void>;
  showConfirm: (message: string, options?: ConfirmOptions) => Promise<boolean>;
+  showToast: (message: string, options?: { variant?: AppDialogVariant; duration?: number }) => void;
 }

 const AppDialogContext = createContext<AppDialogContextValue | null>(null);
@@ -147,8 +148,40 @@ function AppDialogModal({
  );
 }

+function AppToast({
+  message,
+  variant = 'success',
+  onDismiss,
+}: {
+  message: string;
+  variant: AppDialogVariant;
+  onDismiss: () => void;
+}) {
+  const meta = VARIANT_META[variant];
+
+  useEffect(() => {
+    const timer = window.setTimeout(onDismiss, 2000);
+    return () => window.clearTimeout(timer);
+  }, [onDismiss]);
+
+  return (
+    <div
+      className="fixed left-1/2 bottom-[max(1.25rem,env(safe-area-inset-bottom))] z-[10001] -translate-x-1/2 pointer-events-none"
+      role="status"
+      aria-live="polite"
+    >
+      <div className="flex items-center gap-2 px-4 py-2.5 rounded-xl shadow-lg border border-black/10 bg-[#2a2a2a] text-[#f0f0f0] text-[12px] font-medium max-w-[min(90vw,20rem)]">
+        <span className="shrink-0">{meta.icon}</span>
+        <span className="truncate">{message}</span>
+      </div>
+    </div>
+  );
+}
+
 export function AppDialogProvider({ children }: { children: React.ReactNode }) {
  const [dialog, setDialog] = useState<DialogRequest | null>(null);
+  const [toast, setToast] = useState<{ message: string; variant: AppDialogVariant } | null>(null);
+  const toastTimerRef = useRef<number | null>(null);

  const showAlert = useCallback((message: string, options?: AlertOptions) => {
    const variant = options?.variant ?? 'info';
@@ -180,6 +213,28 @@ export function AppDialogProvider({ children }: { children: React.ReactNode }) {
    });
  }, []);

+  const dismissToast = useCallback(() => {
+    if (toastTimerRef.current !== null) {
+      window.clearTimeout(toastTimerRef.current);
+      toastTimerRef.current = null;
+    }
+    setToast(null);
+  }, []);
+
+  const showToast = useCallback(
+    (message: string, options?: { variant?: AppDialogVariant; duration?: number }) => {
+      dismissToast();
+      const variant = options?.variant ?? 'success';
+      setToast({ message, variant });
+      const duration = options?.duration ?? 2000;
+      toastTimerRef.current = window.setTimeout(() => {
+        toastTimerRef.current = null;
+        setToast(null);
+      }, duration);
+    },
+    [dismissToast]
+  );
+
  const closeDialog = useCallback((confirmed: boolean) => {
    setDialog((current) => {
      current?.resolve(confirmed);
@@ -188,9 +243,12 @@ export function AppDialogProvider({ children }: { children: React.ReactNode }) {
  }, []);

  return (
-    <AppDialogContext.Provider value={{ showAlert, showConfirm }}>
+    <AppDialogContext.Provider value={{ showAlert, showConfirm, showToast }}>
      {children}
      {dialog && <AppDialogModal dialog={dialog} onClose={closeDialog} />}
+      {toast && (
+        <AppToast message={toast.message} variant={toast.variant} onDismiss={dismissToast} />
+      )}
    </AppDialogContext.Provider>
  );
 }
--- a/src/components/CanvasLabelImage.tsx
+++ b/src/components/CanvasLabelImage.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { TemplateElement } from '../types';
+import type { PrintColorMode } from '../types';
 import { ContentResolveMode } from '../utils';
 import { renderLabelToDataUrl } from '../labelRenderer';

@@ -14,8 +15,12 @@ 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;
+  printColorMode?: PrintColorMode;
 }

 export const CanvasLabelImage: React.FC<CanvasLabelImageProps> = ({
@@ -28,7 +33,11 @@ export const CanvasLabelImage: React.FC<CanvasLabelImageProps> = ({
  transparentBackground = false,
  variableDefaults = null,
  mode = 'design' as ContentResolveMode,
+  referenceBackground,
+  referenceBackgroundOpacity,
+  referenceBackgroundFit,
  renderScale = 16,
+  printColorMode = 'cmyk',
 }) => {
  const [dataUrl, setDataUrl] = useState<string>('');
  const [initialLoading, setInitialLoading] = useState<boolean>(true);
@@ -54,6 +63,10 @@ export const CanvasLabelImage: React.FC<CanvasLabelImageProps> = ({
      variableDefaults,
      mode,
      scale: renderScale,
+      referenceBackground,
+      referenceBackgroundOpacity,
+      referenceBackgroundFit,
+      printColorMode,
    })
      .then((url) => {
        if (!active) return;
@@ -88,6 +101,10 @@ export const CanvasLabelImage: React.FC<CanvasLabelImageProps> = ({
    transparentBackground,
    mode,
    renderScale,
+    referenceBackground,
+    referenceBackgroundOpacity,
+    referenceBackgroundFit,
+    printColorMode,
  ]);

  if (initialLoading && !dataUrl) {
--- a/src/components/ColorValueField.tsx
+++ b/src/components/ColorValueField.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { colorPickerPreviewValue, colorValueUsesVariable } from '../colorUtils';
+import { CommitInput } from './CommitInput';
+
+interface ColorValueFieldProps {
+  label?: string;
+  value: string;
+  onChange: (value: string) => void;
+  variableOptions?: string[];
+  defaultColor?: string;
+  placeholder?: string;
+  className?: string;
+  hint?: string;
+}
+
+export const ColorValueField: React.FC<ColorValueFieldProps> = ({
+  label,
+  value,
+  onChange,
+  variableOptions = [],
+  defaultColor = '#111827',
+  placeholder = '#111827',
+  className = '',
+  hint,
+}) => {
+  const usesVariable = colorValueUsesVariable(value);
+  const pickerValue = colorPickerPreviewValue(value, defaultColor);
+
+  return (
+    <div className={className}>
+      {label && <label className="ps-field-label">{label}</label>}
+      <div className="flex gap-1 items-center">
+        <input
+          type="color"
+          value={pickerValue}
+          disabled={usesVariable}
+          onChange={(e) => onChange(e.target.value)}
+          className="color-input shrink-0 disabled:opacity-40"
+          title={usesVariable ? '当前为变量颜色，请使用文本框编辑' : undefined}
+        />
+        <CommitInput
+          type="text"
+          value={value}
+          placeholder={placeholder}
+          onCommit={onChange}
+          className="ps-field font-mono text-[11px] flex-1 min-w-0"
+        />
+      </div>
+      {variableOptions.length > 0 && (
+        <div className="flex flex-wrap gap-1 mt-1.5">
+          {variableOptions.map((v) => (
+            <button
+              key={v}
+              type="button"
+              onClick={() => {
+                const token = `{${v}}`;
+                onChange(value.includes(token) ? value : value ? `${value} ${token}` : token);
+              }}
+              className="ps-btn text-[9px] font-mono"
+            >
+              {`{${v}}`}
+            </button>
+          ))}
+        </div>
+      )}
+      {hint && <p className="text-[9px] text-[#666] mt-1 leading-relaxed">{hint}</p>}
+      {!hint && variableOptions.length > 0 && (
+        <p className="text-[9px] text-[#666] mt-1 leading-relaxed">
+          支持 hex/rgb/transparent 或 {`{变量名}`}；排版印刷色彩模式下按行数据解析
+        </p>
+      )}
+    </div>
+  );
+};
--- 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,45 +1,64 @@
-import React from 'react';
-import { Filter } from 'lucide-react';
-import { ExportRangeConfig, LabelTemplate, PaperConfig, RecordRow } from '../types';
-import { buildPrintablePages } from '../utils';
+import React, { useMemo } from 'react';
+import { ExportRangeConfig, LabelTemplate, PaperConfig, RecordRow, VisibilityRule } from '../types';
+import {
+  buildPrintablePages,
+  extractTemplateVariables,
+  getDataFilteredIndices,
+} from '../utils';
 import { PageInput } from './PreviewGrid';
 import { FieldSelect } from './PsSelect';
+import { VariableFilterRulesEditor } from './VariableFilterRulesEditor';

 interface DataRangeFieldsProps {
  variant?: 'ps' | 'mobile';
  exportRange: ExportRangeConfig;
  onChangeExportRange: (range: ExportRangeConfig) => void;
+  onChangeDataFilterRules: (rules: VisibilityRule[]) => void;
  rows: RecordRow[];
  paper: PaperConfig;
  template: LabelTemplate;
-  disabled?: boolean;
+  /** 排版过滤在无数据时不可用；数据过滤始终可编辑 */
+  layoutDisabled?: boolean;
 }

 export const DataRangeFields: React.FC<DataRangeFieldsProps> = ({
  variant = 'ps',
  exportRange,
  onChangeExportRange,
+  onChangeDataFilterRules,
  rows,
  paper,
  template,
-  disabled = false,
+  layoutDisabled = false,
 }) => {
  const isMobile = variant === 'mobile';
-  const rangeStats = buildPrintablePages(rows, paper, template, exportRange);
+  const variableDefaults = template.variableDefaults ?? null;
+  const templateVariables = useMemo(() => extractTemplateVariables(template), [template]);
+  const dataFilteredCount = useMemo(
+    () => getDataFilteredIndices(rows, template, variableDefaults).length,
+    [rows, template, variableDefaults]
+  );
+  const rangeStats = buildPrintablePages(rows, paper, template, exportRange, variableDefaults);

  const patchRange = (patch: Partial<ExportRangeConfig>) => {
    onChangeExportRange({ ...exportRange, ...patch });
  };

+  const sectionTitleClass = isMobile ? 'mobile-field-label mb-1 block' : 'ps-section-title';
+  const hintClass = isMobile ? 'text-[10px] text-slate-500' : 'text-[10px] text-[#888]';
+
  return (
-    <div className={isMobile ? 'space-y-4' : 'space-y-2'}>
-      {!isMobile && <div className="ps-section-title">数据范围</div>}
+    <div className={isMobile ? 'space-y-4' : 'space-y-3'}>
+      <div className="space-y-2">
+        {rows.length > 0 && (
+          <div className="space-y-2">
+            <div className={sectionTitleClass}>排版过滤</div>
+            <p className={hintClass}>仅影响当前导出会话</p>
            <div>
              {isMobile && <label className="mobile-field-label">范围</label>}
-        {/* {!isMobile && <label className="ps-field-label">范围</label>} */}
              <FieldSelect
                value={exportRange.mode}
-          disabled={disabled}
+                disabled={layoutDisabled}
                onChange={(e) => patchRange({ mode: e.target.value as ExportRangeConfig['mode'] })}
                className={isMobile ? 'mobile-field' : 'ps-field text-[11px]'}
              >
@@ -59,13 +78,39 @@ export const DataRangeFields: React.FC<DataRangeFieldsProps> = ({
                <PageInput
                  type="text"
                  value={exportRange.custom ?? ''}
-            disabled={disabled}
+                  disabled={layoutDisabled}
                  onCommit={(val) => patchRange({ custom: val })}
                  placeholder="如 1,3,5-10"
                  inputClassName={isMobile ? 'mobile-field font-mono' : 'ps-field font-mono text-[11px]'}
                />
              </div>
            )}
+            <p className={hintClass}>
+              最终范围：{rangeStats.selectedCount} / {rows.length} 行
+            </p>
+          </div>
+        )}
+
+        <div className="space-y-3">
+          <div className={sectionTitleClass}>数据过滤</div>
+          <p className={hintClass}>条件写入模板；全部满足的数据行才参与排版与导出。</p>
+          <VariableFilterRulesEditor
+            rules={template.dataFilterRules ?? []}
+            templateVariables={templateVariables}
+            emptyHint="尚未添加过滤条件，将使用全部数据行"
+            description="按数据行与变量默认值判断；上传数据后可预览过滤结果。"
+            addTitle="添加数据过滤条件"
+            editTitle="编辑数据过滤条件"
+            onChangeRules={onChangeDataFilterRules}
+          />
+          {rows.length > 0 && (
+            <p className={hintClass}>
+              数据过滤后：{dataFilteredCount} / {rows.length} 行
+            </p>
+          )}
+        </div>
+      </div>
+
    </div>
  );
 };
--- a/src/components/ElementFloatPreview.tsx
+++ b/src/components/ElementFloatPreview.tsx
@@ -3,6 +3,12 @@ import { TemplateElement } from '../types';
 import { mmToPx } from '../utils';
 import { renderLabelToDataUrl } from '../labelRenderer';

+/** 离屏单元素渲染时预留描边空间，避免画布边缘裁切表格线 */
+export function getFloatPreviewPaddingMm(element: TemplateElement): number {
+  if (element.type !== 'table') return 0;
+  return (element.tableBorderWidth ?? 0.2) / 2 + 0.1;
+}
+
 interface ElementFloatPreviewProps {
  element: TemplateElement;
  renderScale: number;
@@ -17,10 +23,11 @@ export async function renderElementFloatPreview(
  renderScale: number,
  variableDefaults?: Record<string, string> | null
 ): Promise<string> {
+  const padMm = getFloatPreviewPaddingMm(element);
  return renderLabelToDataUrl({
-    widthMm: element.width,
-    heightMm: element.height,
-    elements: [{ ...element, x: 0, y: 0 }],
+    widthMm: element.width + padMm * 2,
+    heightMm: element.height + padMm * 2,
+    elements: [{ ...element, x: padMm, y: padMm }],
    rowData: null,
    rowIndex: 0,
    showBorder: false,
@@ -67,10 +74,10 @@ export const ElementFloatPreview: React.FC<ElementFloatPreviewProps> = ({
    };
  }, [elementVisualKey, element, renderScale, variableDefaults, dataUrlProp]);

-  const left = mmToPx(element.x, displayZoom);
-  const top = mmToPx(element.y, displayZoom);
-  const width = mmToPx(element.width, displayZoom);
-  const height = mmToPx(element.height, displayZoom);
+  const padMm = getFloatPreviewPaddingMm(element);
+  const padPx = mmToPx(padMm, displayZoom);
+  const boxW = mmToPx(element.width, displayZoom);
+  const boxH = mmToPx(element.height, displayZoom);

  if (!dataUrl) return null;

@@ -80,18 +87,12 @@ export const ElementFloatPreview: React.FC<ElementFloatPreviewProps> = ({
      alt=""
      className="absolute pointer-events-none select-none"
      style={{
-        left: `${left}px`,
-        top: `${top}px`,
-        width: `${width}px`,
-        height: `${height}px`,
+        left: `${-padPx}px`,
+        top: `${-padPx}px`,
+        width: `${boxW + padPx * 2}px`,
+        height: `${boxH + padPx * 2}px`,
        imageRendering: 'auto',
      }}
-      onLoad={(e) => {
-        const placeholder = e.currentTarget.previousElementSibling as HTMLElement | null;
-        if (placeholder?.classList.contains('resize-float-placeholder')) {
-          placeholder.style.display = 'none';
-        }
-      }}
    />
  );
 };
--- a/src/components/ElementMaskDialog.tsx
+++ b/src/components/ElementMaskDialog.tsx
@@ -0,0 +1,339 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Upload, X } from 'lucide-react';
+import type { ElementMaskConfig, TemplateElement } from '../types';
+import { createDefaultElementMask } from '../elementMask';
+import { FieldSelect } from './PsSelect';
+import { CommitInput } from './CommitInput';
+
+interface ElementMaskDialogProps {
+  open: boolean;
+  element: TemplateElement | null;
+  onClose: () => void;
+  onConfirm: (mask: ElementMaskConfig | undefined) => void;
+}
+
+const round1 = (n: number) => Math.round(n * 10) / 10;
+
+export const ElementMaskDialog: React.FC<ElementMaskDialogProps> = ({
+  open,
+  element,
+  onClose,
+  onConfirm,
+}) => {
+  const [draft, setDraft] = useState<ElementMaskConfig>({ enabled: true, type: 'rect' });
+  const draftRef = useRef(draft);
+  draftRef.current = draft;
+
+  useEffect(() => {
+    if (!open || !element) return;
+    const initial = element.mask?.enabled
+      ? { ...createDefaultElementMask(element), ...element.mask, enabled: true }
+      : createDefaultElementMask(element);
+    draftRef.current = initial;
+    setDraft(initial);
+  }, [open, element]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [open, onClose]);
+
+  if (!open || !element || typeof document === 'undefined') return null;
+
+  const regionW = draft.width ?? element.width;
+  const regionH = draft.height ?? element.height;
+  const maskType = draft.type ?? 'rect';
+  const canConfirm = maskType !== 'image' || !!draft.image?.trim();
+
+  const patchDraft = (patch: Partial<ElementMaskConfig>) => {
+    setDraft((prev) => {
+      const next = { ...prev, ...patch };
+      draftRef.current = next;
+      return next;
+    });
+  };
+
+  const patchDraftCorner = (key: keyof ElementMaskConfig, val: string) => {
+    if (val.trim() === '') {
+      setDraft((prev) => {
+        const next = { ...prev };
+        delete next[key];
+        draftRef.current = next;
+        return next;
+      });
+      return;
+    }
+    patchDraft({ [key]: Math.max(0, round1(Number(val) || 0)) });
+  };
+
+  const normalizeDraft = (source: ElementMaskConfig): ElementMaskConfig => ({
+    ...source,
+    enabled: true,
+    x: round1(Number(source.x) || 0),
+    y: round1(Number(source.y) || 0),
+    width: Math.max(0.5, round1(Number(source.width) || element.width)),
+    height: Math.max(0.5, round1(Number(source.height) || element.height)),
+    borderRadius: Math.max(0, round1(Number(source.borderRadius) || 0)),
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const form = e.currentTarget as HTMLFormElement;
+    const active = document.activeElement;
+
+    const submit = () => {
+      if (!canConfirm) return;
+      onConfirm(normalizeDraft(draftRef.current));
+      onClose();
+    };
+
+    if (active instanceof HTMLElement && form.contains(active)) {
+      active.blur();
+      setTimeout(submit, 0);
+      return;
+    }
+
+    submit();
+  };
+
+  const handleClear = () => {
+    onConfirm(undefined);
+    onClose();
+  };
+
+  return createPortal(
+    <div className="ps-modal-overlay" role="presentation">
+      <div
+        className="ps-modal"
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="element-mask-dialog-title"
+      >
+        <div className="ps-modal-header">
+          <h3 id="element-mask-dialog-title" className="ps-modal-title">
+            蒙版设置 — {element.name}
+          </h3>
+          <button type="button" onClick={onClose} className="ps-modal-close" aria-label="关闭">
+            <X className="w-3.5 h-3.5" />
+          </button>
+        </div>
+        <form onSubmit={handleSubmit}>
+          <div className="ps-modal-body space-y-3">
+            <p className="text-[11px] text-[#888] leading-relaxed">
+              蒙版作用于当前图层（背景、内容与边框）；先在离屏画布合成，再按蒙版裁剪后绘制到画布。
+            </p>
+
+            <div>
+              <label className="ps-field-label">蒙版方向</label>
+              <FieldSelect
+                value={draft.mode ?? 'include'}
+                onChange={(e) =>
+                  patchDraft({
+                    mode: e.target.value as ElementMaskConfig['mode'],
+                  })
+                }
+                className="ps-field text-[11px]"
+              >
+                <option value="include">正向（保留区域内）</option>
+                <option value="exclude">反向（保留区域外）</option>
+              </FieldSelect>
+            </div>
+
+            <div>
+              <label className="ps-field-label">蒙版类型</label>
+              <FieldSelect
+                value={maskType}
+                onChange={(e) =>
+                  patchDraft({
+                    type: e.target.value as ElementMaskConfig['type'],
+                  })
+                }
+                className="ps-field text-[11px]"
+              >
+                <option value="rect">矩形</option>
+                <option value="image">图片</option>
+              </FieldSelect>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="ps-field-label">X 偏移 (mm)</label>
+                <CommitInput
+                  type="number"
+                  step="0.5"
+                  value={draft.x ?? 0}
+                  onCommit={(val) => patchDraft({ x: round1(Number(val) || 0) })}
+                  className="ps-field font-mono text-[11px]"
+                />
+              </div>
+              <div>
+                <label className="ps-field-label">Y 偏移 (mm)</label>
+                <CommitInput
+                  type="number"
+                  step="0.5"
+                  value={draft.y ?? 0}
+                  onCommit={(val) => patchDraft({ y: round1(Number(val) || 0) })}
+                  className="ps-field font-mono text-[11px]"
+                />
+              </div>
+              <div>
+                <label className="ps-field-label">宽度 (mm)</label>
+                <CommitInput
+                  type="number"
+                  step="0.5"
+                  min="0.5"
+                  value={regionW}
+                  onCommit={(val) =>
+                    patchDraft({
+                      width: Math.max(0.5, round1(Number(val) || element.width)),
+                    })
+                  }
+                  className="ps-field font-mono text-[11px]"
+                />
+              </div>
+              <div>
+                <label className="ps-field-label">高度 (mm)</label>
+                <CommitInput
+                  type="number"
+                  step="0.5"
+                  min="0.5"
+                  value={regionH}
+                  onCommit={(val) =>
+                    patchDraft({
+                      height: Math.max(0.5, round1(Number(val) || element.height)),
+                    })
+                  }
+                  className="ps-field font-mono text-[11px]"
+                />
+              </div>
+            </div>
+
+            {maskType === 'rect' && (
+              <>
+                <div>
+                  <label className="ps-field-label">圆角 (mm)</label>
+                  <CommitInput
+                    type="number"
+                    min="0"
+                    max="50"
+                    step="0.5"
+                    value={draft.borderRadius ?? 0}
+                    onCommit={(val) =>
+                      patchDraft({ borderRadius: Math.max(0, round1(Number(val) || 0)) })
+                    }
+                    className="ps-field font-mono text-[11px]"
+                  />
+                </div>
+                <div className="grid grid-cols-2 gap-2">
+                  {(
+                    [
+                      ['borderRadiusTL', '左上'],
+                      ['borderRadiusTR', '右上'],
+                      ['borderRadiusBL', '左下'],
+                      ['borderRadiusBR', '右下'],
+                    ] as const
+                  ).map(([key, label]) => (
+                    <div key={key} className="flex items-center gap-1">
+                      <span className="text-[9px] text-[#777] w-6 shrink-0">{label}</span>
+                      <CommitInput
+                        type="number"
+                        min="0"
+                        max="50"
+                        step="0.5"
+                        value={draft[key] ?? ''}
+                        onCommit={(val) => patchDraftCorner(key, val)}
+                        className="ps-field font-mono text-[10px] flex-1 min-w-0"
+                        placeholder="—"
+                      />
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
+
+            {maskType === 'image' && (
+              <div className="space-y-2">
+                <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 = () => patchDraft({ image: reader.result as string });
+                      reader.readAsDataURL(file);
+                      e.target.value = '';
+                    }}
+                  />
+                </label>
+                <p className="text-[9px] text-[#666] leading-relaxed">
+                  按图片亮度控制蒙版：白色区域保留内容，黑色区域裁剪；反向模式下黑白互换。
+                </p>
+                {draft.image && (
+                  <div className="border border-[#3a3a3a] bg-[#1e1e1e] p-2">
+                    <img
+                      src={draft.image}
+                      alt="蒙版预览"
+                      className="block max-h-28 mx-auto object-contain"
+                    />
+                  </div>
+                )}
+                <div>
+                  <label className="ps-field-label">图片适应方式</label>
+                  <FieldSelect
+                    value={draft.imageFit ?? 'fill'}
+                    onChange={(e) =>
+                      patchDraft({
+                        imageFit: e.target.value as ElementMaskConfig['imageFit'],
+                      })
+                    }
+                    className="ps-field text-[11px]"
+                  >
+                    <option value="fill">拉伸 (fill)</option>
+                    <option value="cover">覆盖 (cover)</option>
+                    <option value="contain">包含 (contain)</option>
+                  </FieldSelect>
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="ps-modal-footer">
+            {element.mask && element.mask.enabled !== false && (
+              <button
+                type="button"
+                onClick={handleClear}
+                className="ps-btn text-[11px] text-red-400 hover:text-red-300 mr-auto"
+              >
+                移除蒙版
+              </button>
+            )}
+            <button type="button" onClick={onClose} className="ps-btn text-[11px]">
+              取消
+            </button>
+            <button
+              type="submit"
+              disabled={!canConfirm}
+              className="ps-btn ps-btn-primary text-[11px] disabled:opacity-50"
+            >
+              确定
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>,
+    document.body
+  );
+};
--- 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';
@@ -8,6 +8,7 @@ import { CollapsiblePanelSection } from './CollapsiblePanelSection';
 import { DataRangeFields } from './DataRangeFields';
 import { FieldSelect } from './PsSelect';
 import { PrintModule } from './PrintModule';
+import { LayoutPageBackgroundFields } from './LayoutPageBackgroundFields';

 interface ExportSidebarProps {
  importData: ImportData | null;
@@ -21,9 +22,11 @@ interface ExportSidebarProps {
  paper: PaperConfig;
  onChangePaper: (updated: PaperConfig) => void;
  template: LabelTemplate;
+  onChangeTemplate: (updated: LabelTemplate) => void;
  rows: RecordRow[];
  draftExportRange: ExportRangeConfig;
  onChangeDraftExportRange: (range: ExportRangeConfig) => void;
+  onChangeDataFilterRules: (rules: VisibilityRule[]) => void;
  cutLine: CutLineConfig;
  onChangeCutLine: (cutLine: CutLineConfig) => void;
  previewReady: boolean;
@@ -35,8 +38,15 @@ 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;
  /** 移动端精简：仅数据、映射、数据范围 */
  compact?: boolean;
 }
@@ -53,9 +63,11 @@ export const ExportSidebar: React.FC<ExportSidebarProps> = ({
  paper,
  onChangePaper,
  template,
+  onChangeTemplate,
  rows,
  draftExportRange,
  onChangeDraftExportRange,
+  onChangeDataFilterRules,
  cutLine,
  onChangeCutLine,
  previewReady,
@@ -67,8 +79,15 @@ export const ExportSidebar: React.FC<ExportSidebarProps> = ({
  draftSelectedCount,
  printing,
  onPrint,
+  imagesExporting = false,
+  onExportImages,
+  exportImageFileNamePattern = '',
+  onChangeExportImageFileNamePattern,
+  exportImageFilterMode = 'always',
+  exportImageFilterRules = [],
+  onChangeExportImageFilterMode,
+  onChangeExportImageFilterRules,
  printDisabled,
-  printDisabledReason = null,
  compact = false,
 }) => {
  type ExportPanelKey = 'data' | 'layout' | 'print';
@@ -86,10 +105,11 @@ export const ExportSidebar: React.FC<ExportSidebarProps> = ({
      variant={compact ? 'ps' : 'ps'}
      exportRange={draftExportRange}
      onChangeExportRange={onChangeDraftExportRange}
+      onChangeDataFilterRules={onChangeDataFilterRules}
      rows={rows}
      paper={paper}
      template={template}
-      disabled={rows.length === 0}
+      layoutDisabled={rows.length === 0}
    />
  );

@@ -139,6 +159,7 @@ export const ExportSidebar: React.FC<ExportSidebarProps> = ({
              templateVariables={templateVariables}
            />
          </div>
+          {dataRangeSection}
          {hasData && (
            <>
              <div>
@@ -151,7 +172,6 @@ export const ExportSidebar: React.FC<ExportSidebarProps> = ({
                  variableDefaults={template.variableDefaults}
                />
              </div>
-              {dataRangeSection}
              {applyDataSection}
            </>
          )}
@@ -178,6 +198,7 @@ export const ExportSidebar: React.FC<ExportSidebarProps> = ({
          templateName={templateName}
          templateVariables={templateVariables}
        />
+        {dataRangeSection}
        {hasData && (
          <>
            <VariableMappingPanel
@@ -188,7 +209,6 @@ export const ExportSidebar: React.FC<ExportSidebarProps> = ({
              onChangeMapping={onChangeMapping}
              variableDefaults={template.variableDefaults}
            />
-            {dataRangeSection}
            {applyDataSection}
          </>
        )}
@@ -211,6 +231,9 @@ export const ExportSidebar: React.FC<ExportSidebarProps> = ({
          exportRange={draftExportRange}
          totalRowCount={rows.length}
        />
+        <div className="ps-section-divider">
+          <LayoutPageBackgroundFields template={template} onChangeTemplate={onChangeTemplate} />
+        </div>
        <div className="ps-section-divider space-y-2">
          <div className="ps-section-title">
            <Settings className="w-3 h-3" />
@@ -304,9 +327,17 @@ export const ExportSidebar: React.FC<ExportSidebarProps> = ({
      >
        <PrintModule
          disabled={printDisabled}
-          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
@@ -1,7 +1,9 @@
 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { LabelTemplate, TemplateElement } from '../types';
-import { mmToPx, MM_TO_PX, shouldRenderElement } from '../utils';
+import { mmToPx, MM_TO_PX, shouldRenderElement, centerElementOnLabel } from '../utils';
+import { getSelectionBounds } from '../elementAlign';
+import type { ElementClipboardActions } from '../hooks/useElementClipboard';
 import {
  createDefaultTableElement,
  getTableColWidths,
@@ -15,9 +17,10 @@ import {
 } from '../tableUtils';
 import { useIsNarrowScreen } from '../hooks/useIsMobile';
 import { CanvasLabelImage } from './CanvasLabelImage';
-import { ElementFloatPreview, renderElementFloatPreview } from './ElementFloatPreview';
+import { ElementFloatPreview, getFloatPreviewPaddingMm, renderElementFloatPreview } from './ElementFloatPreview';
 import { renderLabelToDataUrl } from '../labelRenderer';
 import { useAppDialog } from './AppDialog';
+import { MobileMainToolButtons, type MobileToolButtonItem } from './MobileMainToolButtons';
 import {
  ZoomIn,
  ZoomOut,
@@ -40,6 +43,10 @@ interface LabelDesignerProps {
  variant?: 'desktop' | 'mobile';
  /** 微调等场景下隐藏选区框与缩放手柄 */
  suppressSelectionChrome?: boolean;
+  elementClipboard?: Pick<
+    ElementClipboardActions,
+    'copySelectedElements' | 'pasteClipboardElements' | 'canCopy' | 'canPaste' | 'clipboardCount'
+  >;
 }

 type ActiveTool = 'move' | 'text' | 'barcode' | 'qrcode' | 'table';
@@ -212,6 +219,7 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
  onSelectTableCells,
  variant = 'desktop',
  suppressSelectionChrome = false,
+  elementClipboard,
 }) => {
  const { showConfirm } = useAppDialog();
  const selectedElementId = selectedElementIds[0] || null;
@@ -228,6 +236,14 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
    () => template.variableDefaults ?? null,
    [template.variableDefaults]
  );
+  const printColorMode = template.paper?.printColorMode ?? 'cmyk';
+
+  const showReferencePreview = useMemo(
+    () =>
+      !!template.previewReferenceBackground &&
+      template.enablePreviewReferenceBackground !== false,
+    [template.previewReferenceBackground, template.enablePreviewReferenceBackground]
+  );

  const localElementsRef = useRef<TemplateElement[] | null>(null);
  /** 交互开始时的元素快照：拖动底图分层、缩放节流重绘 */
@@ -304,17 +320,19 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
  selectedIdsRef.current = selectedElementIds;
  const templateElementsRef = useRef(template.elements);
  templateElementsRef.current = template.elements;
+  const templateRef = useRef(template);
+  templateRef.current = template;

  const addImageElement = useCallback(
    (src: string = '') => {
+      const current = templateRef.current;
      const id = `image_${Date.now()}`;
-      const n = template.elements.length + 1;
+      const n = current.elements.length + 1;
      const newElement: TemplateElement = {
        id,
        type: 'image',
        name: `图片 ${n}`,
-        x: 5,
-        y: 5,
+        ...centerElementOnLabel(current.width, current.height, 30, 30),
        width: 30,
        height: 30,
        content: src,
@@ -329,20 +347,21 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
        imageFit: 'contain',
      };
      onChange({
-        ...template,
-        elements: [...template.elements, newElement],
+        ...current,
+        elements: [...current.elements, newElement],
      });
      onSelectElements([id]);
      setActiveTool('move');
    },
-    [template, onChange, onSelectElements]
+    [onChange, onSelectElements]
  );

  const addElement = useCallback(
    (type: 'text' | 'barcode' | 'qrcode' | 'table') => {
+      const current = templateRef.current;
      let newElement: TemplateElement;
      const id = `${type}_${Date.now()}`;
-      const n = template.elements.length + 1;
+      const n = current.elements.length + 1;

      if (type === 'table') {
        newElement = createDefaultTableElement(id, n);
@@ -407,17 +426,26 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
        };
      }

+      const centered = centerElementOnLabel(
+        current.width,
+        current.height,
+        newElement.width,
+        newElement.height
+      );
+      newElement = { ...newElement, ...centered };
+
      onChange({
-        ...template,
-        elements: [...template.elements, newElement],
+        ...current,
+        elements: [...current.elements, newElement],
      });
      onSelectElements([id]);
      setActiveTool('move');
    },
-    [template, onChange, onSelectElements]
+    [onChange, onSelectElements]
  );

  const deleteSelectedElements = useCallback(async () => {
+    const current = templateRef.current;
    const ids =
      selectedElementIds.length > 0
        ? selectedElementIds
@@ -425,14 +453,14 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
          ? [selectedElementId]
          : [];
    const deletable = ids.filter((id) => {
-      const el = template.elements.find((item) => item.id === id);
+      const el = current.elements.find((item) => item.id === id);
      return el && !el.locked;
    });
    if (deletable.length === 0) return;

    const message =
      deletable.length === 1
-        ? `确定删除「${template.elements.find((item) => item.id === deletable[0])?.name ?? '未命名'}」吗？此操作无法撤销。`
+        ? `确定删除「${current.elements.find((item) => item.id === deletable[0])?.name ?? '未命名'}」吗？此操作无法撤销。`
        : `确定删除选中的 ${deletable.length} 个元素吗？此操作无法撤销。`;

    const confirmed = await showConfirm(message, {
@@ -443,10 +471,10 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
    if (!confirmed) return;

    const idSet = new Set(deletable);
-    const remaining = template.elements.filter((el) => !idSet.has(el.id));
-    onChange({ ...template, elements: remaining });
+    const remaining = current.elements.filter((el) => !idSet.has(el.id));
+    onChange({ ...templateRef.current, elements: remaining });
    onSelectElements(selectedElementIds.filter((id) => remaining.some((el) => el.id === id)));
-  }, [selectedElementIds, selectedElementId, template, onChange, onSelectElements, showConfirm]);
+  }, [selectedElementIds, selectedElementId, onChange, onSelectElements, showConfirm]);

  const handleToolClick = (tool: ActiveTool) => {
    if (tool === 'move') {
@@ -484,7 +512,18 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'a') {
        e.preventDefault();
        setActiveTool('move');
-        onSelectElements(template.elements.filter((el) => !el.locked).map((el) => el.id));
+        onSelectElements(templateRef.current.elements.filter((el) => !el.locked).map((el) => el.id));
+        return;
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'c') {
+        e.preventDefault();
+        elementClipboard?.copySelectedElements();
+        return;
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'v') {
+        e.preventDefault();
+        elementClipboard?.pasteClipboardElements();
+        setActiveTool('move');
        return;
      }
      if (e.key === 'Delete' || e.key === 'Backspace') {
@@ -509,9 +548,10 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({

      const idSet = new Set(moveIds);
      e.preventDefault();
+      const current = templateRef.current;
      onChange({
-        ...template,
-        elements: template.elements.map((el) => {
+        ...current,
+        elements: current.elements.map((el) => {
          if (!idSet.has(el.id) || el.locked) return el;
          return {
            ...el,
@@ -532,6 +572,7 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
    addElement,
    onSelectElements,
    deleteSelectedElements,
+    elementClipboard,
  ]);

  const clearInteractionCanvasState = useCallback(() => {
@@ -1003,7 +1044,7 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
        const shouldCommit =
          dragState.type === 'resize' || dragMovedRef.current;
        if (shouldCommit) {
-          onChange({ ...template, elements: localElementsRef.current });
+          onChange({ ...templateRef.current, elements: localElementsRef.current });
        }
      }
      localElementsRef.current = null;
@@ -1408,6 +1449,33 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
    suppressSelectionChrome || (dragState?.type === 'drag' && dragInteractionVisualActive);
  const showUnselectedDimLayer = activeTool === 'move';
  const showUnselectedDim = showUnselectedDimLayer && selectedElementIds.length > 0;
+
+  const multiSelectionBounds = useMemo(() => {
+    if (selectedElementIds.length < 2 || hideSelectionChrome) return null;
+    const selected = template.elements.filter(
+      (el) => selectedElementIds.includes(el.id) && !el.locked
+    );
+    if (selected.length < 2) return null;
+    return getSelectionBounds(selected);
+  }, [selectedElementIds, template.elements, hideSelectionChrome]);
+
+  const dragMultiSelectionBounds = useMemo(() => {
+    if (
+      selectedElementIds.length < 2 ||
+      dragState?.type !== 'drag' ||
+      !dragInteractionVisualActive ||
+      dragFloatElements.length < 2
+    ) {
+      return null;
+    }
+    return getSelectionBounds(dragFloatElements);
+  }, [
+    selectedElementIds.length,
+    dragState?.type,
+    dragInteractionVisualActive,
+    dragFloatElements,
+  ]);
+
  const resizingPreviewElement =
    dragState?.type === 'resize'
      ? interactionFloatElements?.find((el) => el.id === dragState.elementId)
@@ -1423,6 +1491,28 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
    { id: 'qrcode', icon: <QrCode className="w-[18px] h-[18px]" />, label: '二维码' },
  ];

+  const mobileToolItems = useMemo<MobileToolButtonItem[]>(
+    () => [
+      ...tools.map((tool) => ({
+        id: tool.id,
+        icon: tool.icon,
+        label: tool.label,
+        shortcut: tool.shortcut,
+        active: activeTool === tool.id,
+        onClick: () => handleToolClick(tool.id),
+      })),
+      {
+        id: 'image',
+        icon: <ImageIcon className="w-[18px] h-[18px]" />,
+        label: '图片',
+        active: false,
+        onClick: handleImageToolClick,
+      },
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- tools 为静态配置
+    [activeTool, handleToolClick, handleImageToolClick]
+  );
+
  const mainToolButtons = (
    <>
      {tools.map((tool) => (
@@ -1527,20 +1617,27 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
                willChange: 'transform',
              }}
            >
-              {dragFloatElements.map((el) => (
+              {dragFloatElements.map((el) => {
+                const padMm = getFloatPreviewPaddingMm(el);
+                const padPx = mmToPx(padMm, displayZoom);
+                const boxW = mmToPx(el.width, displayZoom);
+                const boxH = mmToPx(el.height, displayZoom);
+                return (
                <div
                  key={el.id}
                  className="absolute pointer-events-none"
                  style={{
                    left: `${mmToPx(el.x, displayZoom)}px`,
                    top: `${mmToPx(el.y, displayZoom)}px`,
-                    width: `${mmToPx(el.width, displayZoom)}px`,
-                    height: `${mmToPx(el.height, displayZoom)}px`,
+                    width: `${boxW}px`,
+                    height: `${boxH}px`,
+                    transform: el.rotation ? `rotate(${el.rotation}deg)` : undefined,
+                    transformOrigin: 'center center',
                  }}
                >
                  <div
                    data-drag-float-placeholder={el.id}
-                    className="absolute inset-0 bg-white border border-[#31a8ff]/40 shadow-[0_1px_4px_rgba(0,0,0,0.12)]"
+                    className="absolute inset-0 bg-white shadow-[0_1px_4px_rgba(0,0,0,0.12)]"
                  />
                  <img
                    ref={(node) => {
@@ -1560,7 +1657,13 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
                      }
                    }}
                    alt=""
-                    className="absolute inset-0 w-full h-full pointer-events-none select-none opacity-0"
+                    className="absolute pointer-events-none select-none opacity-0"
+                    style={{
+                      left: `${-padPx}px`,
+                      top: `${-padPx}px`,
+                      width: `${boxW + padPx * 2}px`,
+                      height: `${boxH + padPx * 2}px`,
+                    }}
                    onLoad={(e) => {
                      const img = e.currentTarget;
                      img.style.opacity = '1';
@@ -1568,8 +1671,33 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
                      if (placeholder) placeholder.style.display = 'none';
                    }}
                  />
+                  {selectedElementIds.length === 1 && (
+                    <div
+                      className="absolute inset-0 ps-resize-outline pointer-events-none z-[3]"
+                      aria-hidden
+                    />
+                  )}
                </div>
-              ))}
+              );
+              })}
+              {dragMultiSelectionBounds && (
+                <div
+                  className="absolute ps-resize-outline pointer-events-none z-[5]"
+                  style={{
+                    left: `${mmToPx(dragMultiSelectionBounds.minX, displayZoom)}px`,
+                    top: `${mmToPx(dragMultiSelectionBounds.minY, displayZoom)}px`,
+                    width: `${mmToPx(
+                      dragMultiSelectionBounds.maxX - dragMultiSelectionBounds.minX,
+                      displayZoom
+                    )}px`,
+                    height: `${mmToPx(
+                      dragMultiSelectionBounds.maxY - dragMultiSelectionBounds.minY,
+                      displayZoom
+                    )}px`,
+                  }}
+                  aria-hidden
+                />
+              )}
            </div>
          )}
          {resizeFloatElements && resizeFloatElements.length > 0 && (
@@ -1577,27 +1705,34 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
              className="absolute inset-0 pointer-events-none"
              style={{ overflow: 'visible' }}
            >
-              {resizeFloatElements.map((el) => (
-                <React.Fragment key={el.id}>
+              {resizeFloatElements.map((el) => {
+                const left = mmToPx(el.x, displayZoom);
+                const top = mmToPx(el.y, displayZoom);
+                const width = mmToPx(el.width, displayZoom);
+                const height = mmToPx(el.height, displayZoom);
+                return (
                  <div
-                    className="absolute pointer-events-none border border-dashed border-[#31a8ff]/40 resize-float-placeholder"
+                    key={el.id}
+                    className="absolute pointer-events-none"
                    style={{
-                      left: `${mmToPx(el.x, displayZoom)}px`,
-                      top: `${mmToPx(el.y, displayZoom)}px`,
-                      width: `${mmToPx(el.width, displayZoom)}px`,
-                      height: `${mmToPx(el.height, displayZoom)}px`,
+                      left: `${left}px`,
+                      top: `${top}px`,
+                      width: `${width}px`,
+                      height: `${height}px`,
                      transform: el.rotation ? `rotate(${el.rotation}deg)` : undefined,
                      transformOrigin: 'center center',
                    }}
-                  />
+                  >
                    <ElementFloatPreview
                      element={el}
                      renderScale={canvasRenderScale}
                      displayZoom={displayZoom}
                      variableDefaults={previewDefaults}
                    />
-                </React.Fragment>
-              ))}
+                    <div className="absolute inset-0 ps-resize-outline z-[2]" aria-hidden />
+                  </div>
+                );
+              })}
            </div>
          )}
        </div>,
@@ -1629,7 +1764,7 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
        <div
          ref={canvasAreaRef}
          className={`flex-1 ps-workspace-bg ps-design-canvas-touch flex items-center justify-center min-h-0 min-w-0 p-4 ${
-            allowInteractionOverflow ? 'overflow-visible' : 'overflow-auto'
+            allowInteractionOverflow ? 'overflow-visible' : 'overflow-auto scrollbar-hide overscroll-contain'
          }`}
          onPointerDown={handleWorkspacePointerDown}
          onClick={(e) => {
@@ -1653,20 +1788,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 ${
+              showReferencePreview ? '' : '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> */}
+            {showReferencePreview && (
+              <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,7 +1816,9 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
                rowData={null}
                rowIndex={0}
                showBorder={false}
+                transparentBackground={showReferencePreview}
                variableDefaults={previewDefaults}
+                printColorMode={printColorMode}
                renderScale={canvasRenderScale}
              />
            </div>
@@ -1685,32 +1829,7 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
                  showUnselectedDim ? ' ps-unselected-dim-layer--visible' : ''
                }`}
                aria-hidden={!showUnselectedDim}
-              >
-                {overlayElements.map((element) => {
-                  if (selectedElementIds.includes(element.id)) return null;
-                  if (dragState?.type === 'drag' && dragMovingIdSet?.has(element.id)) return null;
-                  const elemX = mmToPx(element.x, displayZoom);
-                  const elemY = mmToPx(element.y, displayZoom);
-                  const elemW = mmToPx(element.width, displayZoom);
-                  const elemH = mmToPx(element.height, displayZoom);
-                  return (
-                    <div
-                      key={`dim-${element.id}`}
-                      className="ps-unselected-dim absolute"
-                      style={{
-                        left: `${elemX}px`,
-                        top: `${elemY}px`,
-                        width: `${elemW}px`,
-                        height: `${elemH}px`,
-                        transform: element.rotation
-                          ? `rotate(${element.rotation}deg)`
-                          : undefined,
-                        transformOrigin: 'center center',
-                      }}
              />
-                  );
-                })}
-              </div>
            )}

            {selectedLiftElements && (
@@ -1724,6 +1843,7 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
                  showBorder={false}
                  transparentBackground
                  variableDefaults={previewDefaults}
+                  printColorMode={printColorMode}
                  renderScale={canvasRenderScale}
                />
              </div>
@@ -1762,6 +1882,9 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
              if (isBeingDragged) {
                return null;
              }
+              if (isBeingResized && interactionCanvasReady && resizingPreviewElement) {
+                return null;
+              }

              const overlayElement =
                isBeingResized && resizingPreviewElement ? resizingPreviewElement : element;
@@ -1821,6 +1944,21 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
                    </div>
                  )}

+                  {isBeingResized && (
+                    <div className="absolute inset-0 ps-resize-outline pointer-events-none z-[60]" aria-hidden />
+                  )}
+
+                  {isSelected &&
+                    !hideSelectionChrome &&
+                    !isLocked &&
+                    selectedElementIds.length === 1 &&
+                    !isBeingResized && (
+                      <div
+                        className="absolute inset-0 ps-resize-outline pointer-events-none z-[60]"
+                        aria-hidden
+                      />
+                    )}
+
                  {showResizeHandles && (
                    <>
                      <div
@@ -1900,6 +2038,25 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
                </div>
              );
            })}
+
+            {multiSelectionBounds && (
+              <div
+                className="absolute ps-resize-outline pointer-events-none z-[1005]"
+                style={{
+                  left: `${mmToPx(multiSelectionBounds.minX, displayZoom)}px`,
+                  top: `${mmToPx(multiSelectionBounds.minY, displayZoom)}px`,
+                  width: `${mmToPx(
+                    multiSelectionBounds.maxX - multiSelectionBounds.minX,
+                    displayZoom
+                  )}px`,
+                  height: `${mmToPx(
+                    multiSelectionBounds.maxY - multiSelectionBounds.minY,
+                    displayZoom
+                  )}px`,
+                }}
+                aria-hidden
+              />
+            )}
          </div>

          </div>
@@ -1907,9 +2064,14 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({

        {isMobileLayout ? (
          <div className="mobile-design-toolstrip">
-            <div className="mobile-design-toolstrip-tools">
-              {mainToolButtons}
-            </div>
+            <MobileMainToolButtons items={mobileToolItems} />
+            <input
+              ref={imageInputRef}
+              type="file"
+              accept="image/*"
+              className="hidden"
+              onChange={handleImageFile}
+            />
            {zoomControls}
          </div>
        ) : (
@@ -1926,18 +2088,21 @@ export const LabelDesigner: React.FC<LabelDesignerProps> = ({
                  <span>
                    文档: {template.width} × {template.height} mm
                  </span>
-                  {selectedElemObj && (
+                  {selectedElemObj && selectedElementIds.length === 1 && (
                    <span className="text-[#31a8ff]">
                      | {selectedElemObj.name} — X:{selectedElemObj.x} Y:{selectedElemObj.y} W:
                      {selectedElemObj.width} H:{selectedElemObj.height} mm
                    </span>
                  )}
-                  {selectedElementIds.length > 1 && (
-                    <span className="text-emerald-400">| 已选 {selectedElementIds.length} 个</span>
+                  {multiSelectionBounds && (
+                    <span className="text-emerald-400">
+                      | 已选 {selectedElementIds.length} 个 — X:{multiSelectionBounds.minX} Y:
+                      {multiSelectionBounds.minY} mm
+                    </span>
                  )}
                  {activeTool === 'move' && (
                    <span className="text-[#888] hidden sm:inline">
-                      | 框选 · Shift/Ctrl+点选 · Ctrl+A 全选
+                      | 框选 · Shift/Ctrl+点选 · Ctrl+A 全选 · Ctrl+C/V 复制粘贴
                    </span>
                  )}
                </>
--- a/src/components/LabelLayoutSizeCalculator.tsx
+++ b/src/components/LabelLayoutSizeCalculator.tsx
@@ -0,0 +1,240 @@
+import React, { useState } from 'react';
+import { Calculator, ChevronDown, ChevronUp } from 'lucide-react';
+import type { PaperConfig, PaperType } from '../types';
+import { computeLabelSizeFromLayout, DEFAULT_PAPER_CONFIG } from '../utils';
+import { CommitInput } from './CommitInput';
+import { FieldSelect } from './PsSelect';
+import { useAppDialog } from './AppDialog';
+
+const fieldClass =
+  'w-full px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm font-mono focus:border-indigo-400 focus:outline-none';
+const labelClass = 'block text-[11px] font-semibold text-gray-500 mb-1.5';
+
+interface LabelLayoutSizeCalculatorProps {
+  onCalculated: (result: { width: number; height: number; paper: PaperConfig }) => void;
+}
+
+function handlePaperTypeChange(paper: PaperConfig, type: PaperType): PaperConfig {
+  let width = 210;
+  let height = 297;
+  if (type === 'A5') {
+    width = 148;
+    height = 210;
+  } else if (type === 'A6') {
+    width = 105;
+    height = 148;
+  } else if (type === 'custom') {
+    width = paper.width;
+    height = paper.height;
+  }
+  return { ...paper, type, width, height };
+}
+
+export const LabelLayoutSizeCalculator: React.FC<LabelLayoutSizeCalculatorProps> = ({
+  onCalculated,
+}) => {
+  const { showAlert } = useAppDialog();
+  const [open, setOpen] = useState(false);
+  const [paper, setPaper] = useState<PaperConfig>(DEFAULT_PAPER_CONFIG);
+  const [cols, setCols] = useState('3');
+  const [rows, setRows] = useState('8');
+
+  const patchPaper = (patch: Partial<PaperConfig>) => {
+    setPaper((prev) => ({ ...prev, ...patch }));
+  };
+
+  const handleCalculate = async () => {
+    const colCount = Math.max(1, Math.min(99, Number(cols) || 0));
+    const rowCount = Math.max(1, Math.min(99, Number(rows) || 0));
+    if (!cols.trim() || !rows.trim() || colCount < 1 || rowCount < 1) {
+      await showAlert('请输入有效的排版列数与行数。', { variant: 'warning' });
+      return;
+    }
+
+    const size = computeLabelSizeFromLayout(paper, colCount, rowCount);
+    if (!size) {
+      await showAlert(
+        '无法根据当前纸张、边距与间距计算出有效标签尺寸（单边至少 10 mm）。请调整参数后重试。',
+        { variant: 'warning' }
+      );
+      return;
+    }
+
+    onCalculated({ width: size.width, height: size.height, paper });
+    setOpen(false);
+  };
+
+  return (
+    <div className="border border-gray-200 rounded-lg overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center justify-between gap-2 px-3 py-2.5 bg-gray-50 hover:bg-gray-100 text-left transition cursor-pointer"
+      >
+        <span className="flex items-center gap-2 text-[12px] font-medium text-gray-700">
+          <Calculator className="w-4 h-4 text-indigo-500" />
+          根据页面排版计算标签尺寸
+        </span>
+        {open ? (
+          <ChevronUp className="w-4 h-4 text-gray-400 shrink-0" />
+        ) : (
+          <ChevronDown className="w-4 h-4 text-gray-400 shrink-0" />
+        )}
+      </button>
+
+      {open && (
+        <div className="px-3 py-3 space-y-3 border-t border-gray-200 bg-white">
+          <p className="text-[11px] text-gray-500 leading-relaxed">
+            设置纸张、页边距与 n×m 排版后，将自动反算单个标签的宽高并填入上方表单。
+          </p>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div className="col-span-2">
+              <label className={labelClass}>纸张类型</label>
+              <FieldSelect
+                value={paper.type}
+                onChange={(e) => patchPaper(handlePaperTypeChange(paper, e.target.value as PaperType))}
+                className={fieldClass}
+              >
+                <option value="A4">A4 (210×297 mm)</option>
+                <option value="A5">A5 (148×210 mm)</option>
+                <option value="A6">A6 (105×148 mm)</option>
+                <option value="custom">自定义尺寸</option>
+              </FieldSelect>
+            </div>
+
+            {paper.type === 'custom' && (
+              <>
+                <div>
+                  <label className={labelClass}>纸张宽 (mm)</label>
+                  <CommitInput
+                    type="number"
+                    min="10"
+                    value={paper.width}
+                    onCommit={(val) => patchPaper({ width: Math.max(10, Number(val) || 10) })}
+                    className={fieldClass}
+                  />
+                </div>
+                <div>
+                  <label className={labelClass}>纸张高 (mm)</label>
+                  <CommitInput
+                    type="number"
+                    min="10"
+                    value={paper.height}
+                    onCommit={(val) => patchPaper({ height: Math.max(10, Number(val) || 10) })}
+                    className={fieldClass}
+                  />
+                </div>
+              </>
+            )}
+
+            <div className="col-span-2">
+              <label className={labelClass}>进纸方向</label>
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  onClick={() => patchPaper({ orientation: 'portrait' })}
+                  className={`flex-1 px-3 py-2 rounded-lg text-xs font-medium border cursor-pointer ${
+                    paper.orientation === 'portrait'
+                      ? 'bg-indigo-50 border-indigo-300 text-indigo-700'
+                      : 'bg-gray-50 border-gray-200 text-gray-600'
+                  }`}
+                >
+                  纵向
+                </button>
+                <button
+                  type="button"
+                  onClick={() => patchPaper({ orientation: 'landscape' })}
+                  className={`flex-1 px-3 py-2 rounded-lg text-xs font-medium border cursor-pointer ${
+                    paper.orientation === 'landscape'
+                      ? 'bg-indigo-50 border-indigo-300 text-indigo-700'
+                      : 'bg-gray-50 border-gray-200 text-gray-600'
+                  }`}
+                >
+                  横向
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <label className={labelClass}>排版列数 n</label>
+              <CommitInput
+                type="number"
+                min="1"
+                max="99"
+                value={cols}
+                onCommit={(val) => setCols(val)}
+                className={fieldClass}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>排版行数 m</label>
+              <CommitInput
+                type="number"
+                min="1"
+                max="99"
+                value={rows}
+                onCommit={(val) => setRows(val)}
+                className={fieldClass}
+              />
+            </div>
+
+            {(
+              [
+                ['上边距', 'marginTop', paper.marginTop],
+                ['下边距', 'marginBottom', paper.marginBottom],
+                ['左边距', 'marginLeft', paper.marginLeft],
+                ['右边距', 'marginRight', paper.marginRight],
+              ] as const
+            ).map(([label, key, val]) => (
+              <div key={key}>
+                <label className={labelClass}>{label} (mm)</label>
+                <CommitInput
+                  type="number"
+                  min="0"
+                  max="100"
+                  value={val}
+                  onCommit={(v) => patchPaper({ [key]: Math.max(0, Number(v) || 0) })}
+                  className={fieldClass}
+                />
+              </div>
+            ))}
+
+            <div>
+              <label className={labelClass}>列间距 (mm)</label>
+              <CommitInput
+                type="number"
+                min="0"
+                max="50"
+                value={paper.columnGap}
+                onCommit={(val) => patchPaper({ columnGap: Math.max(0, Number(val) || 0) })}
+                className={fieldClass}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>行间距 (mm)</label>
+              <CommitInput
+                type="number"
+                min="0"
+                max="50"
+                value={paper.rowGap}
+                onCommit={(val) => patchPaper({ rowGap: Math.max(0, Number(val) || 0) })}
+                className={fieldClass}
+              />
+            </div>
+          </div>
+
+          <div className="flex justify-end">
+            <button
+              type="button"
+              onClick={() => void handleCalculate()}
+              className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-xs font-semibold cursor-pointer"
+            >
+              确认计算并填入
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
--- a/src/components/LayoutPageBackgroundFields.tsx
+++ b/src/components/LayoutPageBackgroundFields.tsx
@@ -0,0 +1,146 @@
+import React from 'react';
+import { Image as ImageIcon, Upload } from 'lucide-react';
+import type { LabelTemplate } from '../types';
+import { FieldSelect } from './PsSelect';
+
+interface LayoutPageBackgroundFieldsProps {
+  template: LabelTemplate;
+  onChangeTemplate: (updated: LabelTemplate) => void;
+}
+
+export const LayoutPageBackgroundFields: React.FC<LayoutPageBackgroundFieldsProps> = ({
+  template,
+  onChangeTemplate,
+}) => (
+  <div className="space-y-3">
+    <div className="ps-section-title">
+      <ImageIcon className="w-3 h-3" />
+      页面背景
+    </div>
+    <p className="text-[9px] text-[#777] leading-relaxed">
+      上传底图作为排版后整页背景；可分别控制排版预览与 PDF / 打印输出是否显示。
+    </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,
+              layoutPageBackground: reader.result as string,
+              layoutPageBackgroundOpacity: template.layoutPageBackgroundOpacity ?? 100,
+              layoutPageBackgroundFit: template.layoutPageBackgroundFit ?? 'cover',
+              enableLayoutPageBackground: true,
+            });
+          reader.readAsDataURL(file);
+          e.target.value = '';
+        }}
+      />
+    </label>
+    {template.layoutPageBackground && (
+      <>
+        <div className="border border-[#3a3a3a] bg-[#1e1e1e] p-2">
+          <img
+            src={template.layoutPageBackground}
+            alt="页面背景预览"
+            className="block max-h-24 mx-auto object-contain"
+          />
+        </div>
+        <div>
+          <label className="ps-field-label">适应方式</label>
+          <FieldSelect
+            value={template.layoutPageBackgroundFit ?? 'cover'}
+            onChange={(e) =>
+              onChangeTemplate({
+                ...template,
+                layoutPageBackgroundFit: 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.layoutPageBackgroundOpacity ?? 100}%)
+          </label>
+          <input
+            type="range"
+            min="0"
+            max="100"
+            step="1"
+            value={template.layoutPageBackgroundOpacity ?? 100}
+            onChange={(e) =>
+              onChangeTemplate({
+                ...template,
+                layoutPageBackgroundOpacity: Number(e.target.value),
+              })
+            }
+            className="w-full accent-[#31a8ff]"
+          />
+        </div>
+        <label className="flex items-start gap-2">
+          <input
+            type="checkbox"
+            checked={template.enableLayoutPageBackground !== false}
+            onChange={(e) =>
+              onChangeTemplate({
+                ...template,
+                enableLayoutPageBackground: e.target.checked ? true : false,
+              })
+            }
+            className="ps-checkbox mt-0.5"
+          />
+          <span className="text-xs text-[#ccc] leading-normal">
+            排版预览中显示页面背景
+            <span className="block text-[9px] text-[#777] mt-0.5">
+              关闭后仍保留背景图，可随时重新开启
+            </span>
+          </span>
+        </label>
+        <label className="flex items-start gap-2">
+          <input
+            type="checkbox"
+            checked={template.includeLayoutPageBackgroundInOutput ?? false}
+            onChange={(e) =>
+              onChangeTemplate({
+                ...template,
+                includeLayoutPageBackgroundInOutput: e.target.checked ? true : undefined,
+              })
+            }
+            className="ps-checkbox mt-0.5"
+          />
+          <span className="text-xs text-[#ccc] leading-normal">
+            PDF 导出与打印时包含页面背景
+          </span>
+        </label>
+        <button
+          type="button"
+          onClick={() =>
+            onChangeTemplate({
+              ...template,
+              layoutPageBackground: undefined,
+              layoutPageBackgroundOpacity: undefined,
+              layoutPageBackgroundFit: undefined,
+              enableLayoutPageBackground: undefined,
+              includeLayoutPageBackgroundInOutput: undefined,
+            })
+          }
+          className="text-[9px] text-[#31a8ff] hover:underline cursor-pointer"
+        >
+          清除页面背景
+        </button>
+      </>
+    )}
+  </div>
+);
--- a/src/components/MobileDesignView.tsx
+++ b/src/components/MobileDesignView.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { ChevronLeft, Printer, Undo2, Redo2 } from 'lucide-react';
 import { LabelTemplate, PaperConfig } from '../types';
 import type { TableCellCoord } from '../tableUtils';
+import type { ElementClipboardActions } from '../hooks/useElementClipboard';
 import { LabelDesigner } from './LabelDesigner';
 import { PropSidebar, MobilePropModule } from './PropSidebar';

@@ -19,6 +20,7 @@ interface MobileDesignViewProps {
  onRedo: () => void;
  onBack: () => void;
  onExport: () => void;
+  elementClipboard: ElementClipboardActions;
 }

 export const MobileDesignView: React.FC<MobileDesignViewProps> = ({
@@ -35,6 +37,7 @@ export const MobileDesignView: React.FC<MobileDesignViewProps> = ({
  onRedo,
  onBack,
  onExport,
+  elementClipboard,
 }) => {
  const [mobileModule, setMobileModule] = useState<MobilePropModule>('properties');

@@ -90,6 +93,7 @@ export const MobileDesignView: React.FC<MobileDesignViewProps> = ({
          selectedTableCells={selectedTableCells}
          onSelectTableCells={onSelectTableCells}
          suppressSelectionChrome={mobileModule === 'nudge'}
+          elementClipboard={elementClipboard}
        />
      </div>

@@ -107,6 +111,7 @@ export const MobileDesignView: React.FC<MobileDesignViewProps> = ({
          paper={paper}
          mobileModule={mobileModule}
          onMobileModuleChange={setMobileModule}
+          elementClipboard={elementClipboard}
        />
      </div>
    </div>
--- a/src/components/MobileExportLayoutPanel.tsx
+++ b/src/components/MobileExportLayoutPanel.tsx
@@ -9,9 +9,11 @@ import {
 } from '../types';
 import { PaperSettingsPanel, PageInput } from './PreviewGrid';
 import { FieldSelect } from './PsSelect';
+import { LayoutPageBackgroundFields } from './LayoutPageBackgroundFields';

 interface MobileExportLayoutPanelProps {
  template: LabelTemplate;
+  onChangeTemplate: (updated: LabelTemplate) => void;
  paper: PaperConfig;
  onChangePaper: (paper: PaperConfig) => void;
  rows: RecordRow[];
@@ -22,6 +24,7 @@ interface MobileExportLayoutPanelProps {

 export const MobileExportLayoutPanel: React.FC<MobileExportLayoutPanelProps> = ({
  template,
+  onChangeTemplate,
  paper,
  onChangePaper,
  rows,
@@ -40,6 +43,9 @@ export const MobileExportLayoutPanel: React.FC<MobileExportLayoutPanelProps> = (
        exportRange={exportRange}
        totalRowCount={rows.length}
      />
+      <div className="ps-section-divider">
+        <LayoutPageBackgroundFields template={template} onChangeTemplate={onChangeTemplate} />
+      </div>
      <div className="ps-section-divider space-y-2">
        <div className="ps-section-title">
          <Settings className="w-3 h-3" />
--- 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';
@@ -38,6 +40,7 @@ const MOBILE_EXPORT_MODULES: {

 interface MobileExportViewProps {
  template: LabelTemplate;
+  onChangeTemplate: (updated: LabelTemplate) => void;
  templateName: string;
  templateVariables: string[];
  importData: ImportData | null;
@@ -51,6 +54,7 @@ interface MobileExportViewProps {
  rows: RecordRow[];
  draftExportRange: ExportRangeConfig;
  onChangeDraftExportRange: (range: ExportRangeConfig) => void;
+  onChangeDataFilterRules: (rules: VisibilityRule[]) => void;
  cutLine: CutLineConfig;
  onChangeCutLine: (cutLine: CutLineConfig) => void;
  printablePages: (PrintableLabel | null)[][];
@@ -66,16 +70,22 @@ 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> = ({
  template,
+  onChangeTemplate,
  templateName,
  templateVariables,
  importData,
@@ -89,6 +99,7 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
  rows,
  draftExportRange,
  onChangeDraftExportRange,
+  onChangeDataFilterRules,
  cutLine,
  onChangeCutLine,
  printablePages,
@@ -104,12 +115,17 @@ 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 +144,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">
@@ -233,7 +249,6 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
                  templateVariables={templateVariables}
                />
                {hasData && (
-                  <>
                  <div>
                    <p className="text-[11px] font-semibold text-[#e8e8e8] mb-2">关联变量</p>
                    <VariableMappingPanel
@@ -245,16 +260,16 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
                      variableDefaults={template.variableDefaults}
                    />
                  </div>
+                )}
                <DataRangeFields
                  variant="ps"
                  exportRange={draftExportRange}
                  onChangeExportRange={onChangeDraftExportRange}
+                  onChangeDataFilterRules={onChangeDataFilterRules}
                  rows={rows}
                  paper={paper}
                  template={template}
                />
-                  </>
-                )}
                {/* {exportBlockedReason && !pdfGenerating && (
                  <p className="text-[10px] text-amber-500/90 text-center">{exportBlockedReason}</p>
                )} */}
@@ -264,6 +279,7 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
              <div className="ps-panel-body p-3 min-h-0">
                <MobileExportLayoutPanel
                  template={template}
+                  onChangeTemplate={onChangeTemplate}
                  paper={paper}
                  onChangePaper={onChangePaper}
                  rows={rows}
@@ -278,9 +294,17 @@ export const MobileExportView: React.FC<MobileExportViewProps> = ({
                <PrintModule
                  variant="mobile"
                  disabled={printDisabled}
-                  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/MobileMainToolButtons.tsx
+++ b/src/components/MobileMainToolButtons.tsx
@@ -0,0 +1,123 @@
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { MoreHorizontal } from 'lucide-react';
+import { AnchoredMenu } from './AnchoredMenu';
+
+const TOOL_BTN_SIZE_PX = 40;
+const TOOL_BTN_GAP_PX = 4;
+const TOOL_BTN_SLOT_PX = TOOL_BTN_SIZE_PX + TOOL_BTN_GAP_PX;
+
+export interface MobileToolButtonItem {
+  id: string;
+  icon: React.ReactNode;
+  label: string;
+  shortcut?: string;
+  active?: boolean;
+  onClick: () => void;
+}
+
+interface MobileMainToolButtonsProps {
+  items: MobileToolButtonItem[];
+}
+
+function computeVisibleCount(containerWidth: number, total: number): number {
+  if (total <= 0 || containerWidth <= 0) return total;
+  if (containerWidth >= total * TOOL_BTN_SLOT_PX) return total;
+  const withMore = Math.floor((containerWidth - TOOL_BTN_SLOT_PX) / TOOL_BTN_SLOT_PX);
+  return Math.max(1, Math.min(withMore, total - 1));
+}
+
+function reorderItemsForActive(items: MobileToolButtonItem[], visibleCount: number): MobileToolButtonItem[] {
+  if (visibleCount >= items.length) return items;
+  const activeIndex = items.findIndex((item) => item.active);
+  if (activeIndex < 0 || activeIndex < visibleCount) return items;
+  const next = [...items];
+  const [activeItem] = next.splice(activeIndex, 1);
+  next.splice(visibleCount - 1, 0, activeItem);
+  return next;
+}
+
+export const MobileMainToolButtons: React.FC<MobileMainToolButtonsProps> = ({ items }) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const moreButtonRef = useRef<HTMLButtonElement | null>(null);
+  const [visibleCount, setVisibleCount] = useState(items.length);
+  const [moreOpen, setMoreOpen] = useState(false);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const measure = () => {
+      setVisibleCount(computeVisibleCount(container.clientWidth, items.length));
+    };
+
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [items.length]);
+
+  const orderedItems = useMemo(
+    () => reorderItemsForActive(items, visibleCount),
+    [items, visibleCount]
+  );
+
+  const visibleItems = orderedItems.slice(0, visibleCount);
+  const overflowItems = orderedItems.slice(visibleCount);
+  const overflowHasActive = overflowItems.some((item) => item.active);
+
+  const renderToolButton = (item: MobileToolButtonItem) => (
+    <button
+      key={item.id}
+      type="button"
+      className={`ps-tool-btn mobile-design-tool-btn ${item.active ? 'active' : ''}`}
+      onClick={item.onClick}
+      title={`${item.label}${item.shortcut ? ` (${item.shortcut})` : ''}`}
+      aria-label={item.label}
+    >
+      {item.icon}
+    </button>
+  );
+
+  return (
+    <div ref={containerRef} className="mobile-design-toolstrip-tools">
+      {visibleItems.map((item) => renderToolButton(item))}
+      {overflowItems.length > 0 && (
+        <>
+          <button
+            ref={moreButtonRef}
+            type="button"
+            className={`ps-tool-btn mobile-design-tool-btn`}
+            onClick={() => setMoreOpen((open) => !open)}
+            title="更多工具"
+            aria-label="更多工具"
+            aria-expanded={moreOpen}
+          >
+            <MoreHorizontal className="w-[18px] h-[18px]" />
+          </button>
+          <AnchoredMenu
+            open={moreOpen}
+            onClose={() => setMoreOpen(false)}
+            anchorRef={moreButtonRef}
+            className="mobile-toolstrip-overflow-menu"
+          >
+            {overflowItems.map((item) => (
+              <button
+                key={item.id}
+                type="button"
+                role="menuitem"
+                className={`mobile-toolstrip-overflow-menu-item${item.active ? ' active' : ''}`}
+                onClick={() => {
+                  item.onClick();
+                  setMoreOpen(false);
+                }}
+              >
+                <span className="mobile-toolstrip-overflow-menu-icon">{item.icon}</span>
+                <span>{item.label}</span>
+              </button>
+            ))}
+          </AnchoredMenu>
+        </>
+      )}
+    </div>
+  );
+};
--- a/src/components/PreviewGrid.tsx
+++ b/src/components/PreviewGrid.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useState, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { PaperConfig, LabelTemplate, RecordRow, PaperType, CutLineConfig, ExportRangeConfig } from '../types';
+import { PaperConfig, LabelTemplate, RecordRow, PaperType, CutLineConfig, ExportRangeConfig, PrintColorMode, PRINT_COLOR_MODE_LABELS } from '../types';
 import {
  computeAutoLayoutPaper,
  DEFAULT_EXPORT_RANGE,
@@ -15,6 +15,7 @@ import {
  type PrintableLabel,
 } from '../utils';
 import { CanvasLabelImage } from './CanvasLabelImage';
+import { resolveReferenceBackgroundForOutput, resolveLayoutPageBackgroundForPreview } from '../labelRenderer';
 import { CommitInput } from './CommitInput';
 import { useAppDialog } from './AppDialog';
 import { FieldSelect } from './PsSelect';
@@ -65,7 +66,8 @@ const paperEquals = (a: PaperConfig, b: PaperConfig) =>
  a.marginLeft === b.marginLeft &&
  a.columnGap === b.columnGap &&
  a.rowGap === b.rowGap &&
-  a.flow === b.flow;
+  a.flow === b.flow &&
+  (a.printColorMode ?? 'cmyk') === (b.printColorMode ?? 'cmyk');

 export const PaperSettingsPanel: React.FC<PaperSettingsPanelProps> = ({
  paper,
@@ -130,7 +132,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]
  );

@@ -511,6 +520,29 @@ export const PaperSettingsPanel: React.FC<PaperSettingsPanelProps> = ({
            </div>
          </div>

+          <div className="space-y-2">
+            <h4 className={sectionTitleClass}>印刷色彩</h4>
+            <div>
+              <label className={labelClass}>色彩模式</label>
+              <FieldSelect
+                value={draftPaper.printColorMode ?? 'cmyk'}
+                onChange={(e) =>
+                  patchDraftPaper({ printColorMode: e.target.value as PrintColorMode })
+                }
+                className={selectClass}
+              >
+                {(Object.keys(PRINT_COLOR_MODE_LABELS) as PrintColorMode[]).map((mode) => (
+                  <option key={mode} value={mode}>
+                    {PRINT_COLOR_MODE_LABELS[mode]}
+                  </option>
+                ))}
+              </FieldSelect>
+              <p className={`${isPs || isMobile ? 'text-[9px] text-[#666]' : 'text-[10px] text-gray-500'} mt-1 leading-relaxed`}>
+                设计预览、排版预览与导出/打印使用同一套色彩处理；推荐 CMYK 模式。实机仍受打印机驱动影响，请以打样为准
+              </p>
+            </div>
+          </div>
+
        </div>
      </div>
      {autoLayoutDialog}
@@ -588,6 +620,24 @@ 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 layoutPageBackground = useMemo(
+    () => resolveLayoutPageBackgroundForPreview(template),
+    [
+      template.layoutPageBackground,
+      template.layoutPageBackgroundOpacity,
+      template.layoutPageBackgroundFit,
+      template.enableLayoutPageBackground,
+    ]
+  );
  const pageCutLines = useMemo(
    () =>
      collectGridCutLinePositions(
@@ -688,7 +738,7 @@ export const LayoutPreview: React.FC<LayoutPreviewProps> = ({
      </div>

      <div
-        className={`flex-1 overflow-auto ps-workspace-bg min-h-0 ps-preview-workspace ${isMobileVariant ? 'p-3 mobile-preview-workspace' : 'p-6'
+        className={`flex-1 overflow-auto scrollbar-hide overscroll-contain ps-workspace-bg min-h-0 ps-preview-workspace ${isMobileVariant ? 'p-3 mobile-preview-workspace' : 'p-6'
          }`}
      >
        {!previewReady ? (
@@ -704,17 +754,10 @@ export const LayoutPreview: React.FC<LayoutPreviewProps> = ({
          <div
            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-col items-center justify-center min-h-full w-full space-y-4 pb-4'
+                : 'flex flex-wrap justify-center content-center w-full min-h-full pb-8'
            }
+            style={isMobileVariant ? undefined : { gap: `${previewPageGapPx}px` }}
          >
            {visiblePages.map((pageRows, pageIdx) => (
              <div
@@ -731,16 +774,32 @@ export const LayoutPreview: React.FC<LayoutPreviewProps> = ({
                  </span> */}
                </div>
                <div
-                  className="bg-white flex items-start justify-start relative select-none overflow-hidden shrink-0"
+                  className="bg-white relative select-none overflow-hidden shrink-0"
                  style={{
                    width: `${pageCardWidthPx}px`,
                    height: `${currentPaperH * previewScale}px`,
+                  }}
+                >
+                  {layoutPageBackground && (
+                    <img
+                      src={layoutPageBackground.background}
+                      alt=""
+                      aria-hidden
+                      className="absolute inset-0 w-full h-full pointer-events-none z-0"
+                      style={{
+                        objectFit: layoutPageBackground.fit,
+                        opacity: layoutPageBackground.opacity / 100,
+                      }}
+                    />
+                  )}
+                  <div
+                    className="relative z-10 flex items-center justify-center h-full box-border"
+                    style={{
                      padding: `${paper.marginTop * previewScale}px ${paper.marginRight * previewScale}px ${paper.marginBottom * previewScale}px ${paper.marginLeft * previewScale}px`,
-                    boxSizing: 'border-box',
                    }}
                  >
                  <div
-                    className="grid bg-white relative"
+                    className="grid bg-transparent relative"
                    style={{
                      gridTemplateColumns: `repeat(${gridInfo.cols}, ${labelWPx}px)`,
                      gridAutoRows: `${labelHPx}px`,
@@ -810,8 +869,7 @@ export const LayoutPreview: React.FC<LayoutPreviewProps> = ({
                        <div
                          key={cellIdx}
                          onClick={() => onSelectRowIndex(item.sourceIndex)}
-                          className={`bg-white text-center relative flex flex-col justify-center cursor-pointer box-border ${isActive ? 'ring-2 ring-inset ring-[#31a8ff] z-10' : ''
-                            }`}
+                          className={`bg-white text-center relative flex flex-col justify-center cursor-pointer box-border`}
                          style={{
                            width: `${labelWPx}px`,
                            height: `${labelHPx}px`,
@@ -828,6 +886,8 @@ export const LayoutPreview: React.FC<LayoutPreviewProps> = ({
                              rowIndex={item.sourceIndex}
                              showBorder={false}
                              mode="output"
+                              printColorMode={paper.printColorMode ?? 'cmyk'}
+                              {...referenceBackgroundRender}
                            />
                          </div>
                        </div>
@@ -836,6 +896,7 @@ export const LayoutPreview: React.FC<LayoutPreviewProps> = ({
                  </div>
                  </div>
                </div>
+              </div>
            ))}
          </div>
        )}
@@ -871,7 +932,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,
@@ -14,17 +16,33 @@ import {

 interface PrintModuleProps {
  disabled: boolean;
-  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';
 }

 export const PrintModule: React.FC<PrintModuleProps> = ({
  disabled,
-  disabledReason,
  printing,
  onPrint,
+  imagesExporting = false,
+  onExportImages,
+  exportImageFileNamePattern = '',
+  onChangeExportImageFileNamePattern,
+  exportImageFilterMode = 'always',
+  exportImageFilterRules = [],
+  onChangeExportImageFilterMode,
+  onChangeExportImageFilterRules,
+  templateVariables = [],
  variant = 'desktop',
 }) => {
  const [printers, setPrinters] = useState<PrinterOption[]>([
@@ -73,6 +91,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 +120,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 +139,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"
            >
              添加
@@ -133,16 +161,12 @@ export const PrintModule: React.FC<PrintModuleProps> = ({
            : '当前浏览器不支持枚举打印机；打印时将打开系统对话框，请在对话框中选择对应打印机。已保存的名称便于下次快速识别。'}
      </p>

-      {disabledReason && disabled && (
-        <p className="text-[10px] text-amber-500/90">{disabledReason}</p>
-      )}
-
      <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 +178,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
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react';
-import { LabelTemplate, TemplateElement, PaperConfig, VisibilityRule } from '../types';
+import { LabelTemplate, TemplateElement, PaperConfig, VisibilityRule, ElementMaskConfig } from '../types';
 import {
  extractTemplateVariables,
  extractVariablesFromContent,
@@ -7,14 +7,20 @@ import {
  isTemplateVariableInUse,
  removeUnusedTemplateVariable,
  resolveVisibilityRules,
+  toggleVisibilityRuleEnabled,
+  withContentAndSyncedName,
 } from '../utils';
 import { VisibilityRuleDialog } from './VisibilityRuleDialog';
+import { ElementMaskDialog } from './ElementMaskDialog';
 import { VisibilityRuleSummary } from './VisibilityRuleSummary';
+import { ColorValueField } from './ColorValueField';
 import { ValueExtractFields } from './ValueExtractFields';
 import { TextDisplayAffixFields } from './TextDisplayAffixFields';
 import {
  alignToSelectionBounds,
  alignSelectionToCanvas,
+  getSelectionBounds,
+  setSelectionOrigin,
  tileSelectedEvenly,
  tileSelectedFlush,
  type AlignMode,
@@ -24,6 +30,7 @@ import { FieldSelect } from './PsSelect';
 import { CommitInput } from './CommitInput';
 import { useAppDialog } from './AppDialog';
 import { useIsNarrowScreen } from '../hooks/useIsMobile';
+import type { ElementClipboardActions } from '../hooks/useElementClipboard';
 import {
  TablePropertyFields,
  TableCellContentFields,
@@ -31,6 +38,7 @@ import {
 } from './TablePropertyFields';
 import type { TableCellCoord } from '../tableUtils';
 import { expandTableForPadding } from '../tableUtils';
+import { isElementMaskActive } from '../elementMask';
 import {
  Sliders,
  LayoutGrid,
@@ -45,6 +53,8 @@ import {
  HelpCircle,
  Lock,
  Unlock,
+  Eye,
+  EyeOff,
  ArrowUp,
  ArrowDown,
  ArrowLeft,
@@ -52,6 +62,7 @@ import {
  Move,
  Layers,
  Trash2,
+  Copy,
  AlignHorizontalJustifyStart,
  AlignHorizontalJustifyCenter,
  AlignHorizontalJustifyEnd,
@@ -71,6 +82,7 @@ import {
  Image as ImageIcon,
  Upload,
  Table2,
+  Blend,
 } from 'lucide-react';

 const PANEL_COLLAPSE_STORAGE_KEY = 'label_designer_panel_collapse_v2';
@@ -179,13 +191,14 @@ interface PropSidebarProps {
  variant?: 'desktop' | 'mobile';
  mobileModule?: MobilePropModule;
  onMobileModuleChange?: (module: MobilePropModule) => void;
+  elementClipboard?: ElementClipboardActions;
 }

 const MOBILE_PROP_MODULES: { id: MobilePropModule; label: string; icon: React.ReactNode }[] = [
  { id: 'properties', label: '属性', icon: <Sliders className="w-4 h-4" /> },
-  { id: 'nudge', label: '微调', icon: <Move className="w-4 h-4" /> },
  { id: 'content', label: '内容', icon: <Link2 className="w-4 h-4" /> },
  { id: 'layers', label: '图层', icon: <Layers className="w-4 h-4" /> },
+  { id: 'nudge', label: '微调', icon: <Move className="w-4 h-4" /> },
 ];

 export const PropSidebar: React.FC<PropSidebarProps> = ({
@@ -201,8 +214,11 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
  variant = 'desktop',
  mobileModule: mobileModuleProp,
  onMobileModuleChange,
+  elementClipboard,
 }) => {
  const { showConfirm } = useAppDialog();
+  const templateRef = useRef(template);
+  templateRef.current = template;
  const isNarrowScreen = useIsNarrowScreen();
  const selectedElementId = selectedElementIds[0] || null;
  const selectedElem = template.elements.find((el) => el.id === selectedElementId);
@@ -210,6 +226,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
  const [visibilityRuleDialog, setVisibilityRuleDialog] = useState<
    { mode: 'add' } | { mode: 'edit'; index: number } | null
  >(null);
+  const [maskDialogElementId, setMaskDialogElementId] = useState<string | null>(null);
  const [panelCollapsed, setPanelCollapsed] = useState<PanelCollapseState>(loadPanelCollapseState);
  const [internalMobileModule, setInternalMobileModule] =
    useState<MobilePropModule>('properties');
@@ -238,27 +255,6 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({

  const templateVariables = useMemo(() => extractTemplateVariables(template), [template]);

-  const addableVisibilityVariables = useMemo(() => {
-    if (!selectedElem || !isConditionalVisibility(selectedElem)) return [];
-    const rules = resolveVisibilityRules(selectedElem);
-    return templateVariables.filter(
-      (v) => !rules.some((r) => r.target !== 'content' && r.variable === v)
-    );
-  }, [selectedElem, templateVariables]);
-
-  const visibilityRuleDialogVariableOptions = useMemo(() => {
-    if (!selectedElem || !visibilityRuleDialog) return [];
-    const rules = resolveVisibilityRules(selectedElem);
-    if (visibilityRuleDialog.mode === 'add') {
-      return addableVisibilityVariables;
-    }
-    const usedByOthers = rules
-      .filter((_, i) => i !== visibilityRuleDialog.index)
-      .filter((r) => r.target !== 'content')
-      .map((r) => r.variable);
-    return templateVariables.filter((v) => !usedByOthers.includes(v));
-  }, [selectedElem, visibilityRuleDialog, addableVisibilityVariables, templateVariables]);
-
  const editingVisibilityRule = useMemo(() => {
    if (!selectedElem || visibilityRuleDialog?.mode !== 'edit') return undefined;
    return resolveVisibilityRules(selectedElem)[visibilityRuleDialog.index];
@@ -272,9 +268,10 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
  const maxLabelH = Math.max(10, paperH - paper.marginTop - paper.marginBottom);

  const handleElemChange = (updatedElem: TemplateElement) => {
+    const current = templateRef.current;
    onChangeTemplate({
-      ...template,
-      elements: template.elements.map((el) => (el.id === updatedElem.id ? updatedElem : el)),
+      ...current,
+      elements: current.elements.map((el) => (el.id === updatedElem.id ? updatedElem : el)),
    });
  };

@@ -286,6 +283,11 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
    }
  };

+  const handleContentChange = (content: string) => {
+    if (!selectedElem || selectedElem.type === 'table') return;
+    handleElemChange(withContentAndSyncedName(selectedElem, content));
+  };
+
  const nudgeableElementIds = useMemo(() => {
    const idSet = new Set(selectedElementIds);
    return template.elements
@@ -293,6 +295,24 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
      .map((el) => el.id);
  }, [selectedElementIds, template.elements]);

+  const isMultiSelect = selectedElementIds.length >= 2;
+
+  const multiSelectionBounds = useMemo(() => {
+    if (!isMultiSelect) return null;
+    const selected = template.elements.filter(
+      (el) => selectedElementIds.includes(el.id) && !el.locked
+    );
+    if (selected.length < 2) return null;
+    return getSelectionBounds(selected);
+  }, [isMultiSelect, selectedElementIds, template.elements]);
+
+  const moveSelectedGroupTo = (newMinX: number, newMinY: number) => {
+    onChangeTemplate({
+      ...template,
+      elements: setSelectionOrigin(template.elements, selectedElementIds, newMinX, newMinY),
+    });
+  };
+
  const nudgeSelectedElements = (deltaX: number, deltaY: number) => {
    if (nudgeableElementIds.length === 0) return;
    const idSet = new Set(nudgeableElementIds);
@@ -309,6 +329,19 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
    });
  };

+  const maskDialogElement = maskDialogElementId
+    ? template.elements.find((el) => el.id === maskDialogElementId) ?? null
+    : null;
+
+  const updateElementMask = (elementId: string, mask: ElementMaskConfig | undefined) => {
+    onChangeTemplate({
+      ...template,
+      elements: template.elements.map((el) =>
+        el.id === elementId ? { ...el, mask: mask || undefined } : el
+      ),
+    });
+  };
+
  const applyVisibilityRules = (next: VisibilityRule[]) => {
    if (!selectedElem) return;
    handleElemChange({
@@ -418,7 +451,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
      : selectedElem.content.trim()
        ? `${selectedElem.content}${selectedElem.content.endsWith(' ') ? '' : ' '}${token}`
        : token;
-    handleElemChange({ ...selectedElem, content });
+    handleContentChange(content);
  };

  const handleAddTemplateVariable = () => {
@@ -479,10 +512,10 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
        <p className="text-[10px] text-[#888]">暂无变量</p>
      ) : (

-        <div className="space-y-3">
+        <div className="space-y-2 pt-2">
          <div className="text-[10px] font-bold text-[#31a8ff]">变量列表</div>
-          <p className="text-[10px] text-[#666] leading-relaxed mb-3">
-            可编辑变量预览值，未被内容或显示条件引用的变量可删除。
+          <p className="text-[10px] text-[#666] leading-relaxed">
+            未被内容或显示条件引用的变量可删除
          </p>
          {templateVariables.map((v) => {
            const inUse = isTemplateVariableInUse(template, v);
@@ -559,6 +592,9 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
  };

  const toggleLockLayer = (idx: number) => {
+    const target = template.elements[idx];
+    if (!target) return;
+    const willLock = !target.locked;
    const list = template.elements.map((el, i) => {
      if (i === idx) {
        return { ...el, locked: !el.locked };
@@ -566,6 +602,20 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
      return el;
    });
    onChangeTemplate({ ...template, elements: list });
+    if (willLock && onSelectElements) {
+      onSelectElements(selectedElementIds.filter((id) => id !== target.id));
+      if (target.type === 'table') {
+        onSelectTableCells?.([]);
+      }
+    }
+  };
+
+  const toggleLayerVisibility = (idx: number) => {
+    const list = template.elements.map((el, i) => {
+      if (i !== idx) return el;
+      return { ...el, hidden: el.hidden ? undefined : true };
+    });
+    onChangeTemplate({ ...template, elements: list });
  };

  const deleteLayer = async (id: string) => {
@@ -583,8 +633,8 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
    if (!confirmed) return;

    onChangeTemplate({
-      ...template,
-      elements: template.elements.filter((item) => item.id !== id),
+      ...templateRef.current,
+      elements: templateRef.current.elements.filter((item) => item.id !== id),
    });
    if (onSelectElements && selectedElementIds.includes(id)) {
      onSelectElements(selectedElementIds.filter((selectedId) => selectedId !== id));
@@ -615,9 +665,10 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
    });
    if (!confirmed) return;

+    const current = templateRef.current;
    const idSet = new Set(deletableSelectedIds);
-    const remaining = template.elements.filter((el) => !idSet.has(el.id));
-    onChangeTemplate({ ...template, elements: remaining });
+    const remaining = current.elements.filter((el) => !idSet.has(el.id));
+    onChangeTemplate({ ...current, elements: remaining });
    onSelectElements?.(selectedElementIds.filter((id) => remaining.some((el) => el.id === id)));
  };

@@ -650,8 +701,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                  const file = e.target.files?.[0];
                  if (!file) return;
                  const reader = new FileReader();
-                  reader.onload = () =>
-                    handleElemChange({ ...selectedElem, content: reader.result as string });
+                  reader.onload = () => handleContentChange(reader.result as string);
                  reader.readAsDataURL(file);
                  e.target.value = '';
                }}
@@ -666,7 +716,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
              <button
                type="button"
                disabled={!selectedElem.content}
-                onClick={() => handleElemChange({ ...selectedElem, content: '' })}
+                onClick={() => handleContentChange('')}
                className="text-[9px] text-[#31a8ff] hover:underline cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed disabled:no-underline shrink-0"
              >
                清空内容
@@ -674,7 +724,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
            </div>
            <PropTextarea
              value={selectedElem.content}
-              onCommit={(val) => handleElemChange({ ...selectedElem, content: val })}
+              onCommit={(val) => handleContentChange(val)}
              rows={selectedElem.type === 'image' ? 3 : 2}
              className="ps-field resize-none"
              placeholder={
@@ -747,7 +797,10 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
              />
            ) : (
              <>
-            <ValueExtractFields elem={selectedElem} onChange={handleElemChange} />
+            <ValueExtractFields
+              config={selectedElem}
+              onChange={(patch) => handleElemChange({ ...selectedElem, ...patch })}
+            />
            {selectedElem.type === 'text' && (
              <TextDisplayAffixFields elem={selectedElem} onChange={handleElemChange} />
            )}
@@ -821,6 +874,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 +903,150 @@ 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',
+                enablePreviewReferenceBackground: true,
+              });
+            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.enablePreviewReferenceBackground !== false}
+              onChange={(e) =>
+                onChangeTemplate({
+                  ...template,
+                  enablePreviewReferenceBackground: e.target.checked ? true : false,
+                })
+              }
+              className="ps-checkbox mt-0.5"
+            />
+            <span className="text-xs text-[#ccc] leading-normal">
+              设计预览中显示参考背景
+              <span className="block text-[9px] text-[#777] mt-0.5">
+                控制设计画布与模板列表缩略图；关闭后仍保留参考图，可随时重新开启
+              </span>
+            </span>
+          </label>
+          <label className="flex items-start gap-2">
+            <input
+              type="checkbox"
+              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,
+                enablePreviewReferenceBackground: undefined,
+                includeReferenceBackgroundInOutput: undefined,
+              })
+            }
+            className="text-[9px] text-[#31a8ff] hover:underline cursor-pointer"
+          >
+            清除参考背景
+          </button>
+        </>
+      )}
+    </div>
+  );
+
  const renderPropertiesPanelBody = () => (
    <>
+      {!selectedElem && (
+        <div className="pb-3 border-b border-[#3a3a3a]">{renderPreviewReferenceBackgroundFields()}</div>
+      )}
      {/* Label Canvas Dimensions */}
      {!selectedElem && (
        <div className="space-y-4">
@@ -968,7 +1170,13 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
            <PropInput
              type="text"
              value={selectedElem.name}
-              onCommit={(val) => handleElemChange({ ...selectedElem, name: val || '未命名元素' })}
+              onCommit={(val) =>
+                handleElemChange({
+                  ...selectedElem,
+                  name: val || '未命名元素',
+                  nameCustomized: true,
+                })
+              }
              className="ps-field mt-2"
            />
          </div>
@@ -1151,23 +1359,20 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({

              {/* Text color */}
              <div className="border-t border-[#3a3a3a] pt-2.5">
-                <label className="block text-[10px] font-semibold text-[#777] mb-1">文本颜色</label>
-                <div className="flex gap-1 items-center">
-                  <input
-                    type="color"
-                    value={selectedElem.textColor || '#111827'}
-                    onChange={(e) => handleElemChange({ ...selectedElem, textColor: e.target.value })}
-                    className="color-input shrink-0"
-                  />
-                  <input
-                    type="text"
-                    placeholder="#111827"
+                <ColorValueField
+                  label="文本颜色"
                  value={selectedElem.textColor || ''}
-                    onChange={(e) => handleElemChange({ ...selectedElem, textColor: e.target.value })}
-                    className="ps-field font-mono text-[11px] flex-1 min-w-0"
+                  onChange={(val) =>
+                    handleElemChange({
+                      ...selectedElem,
+                      textColor: val || undefined,
+                    })
+                  }
+                  variableOptions={templateVariables}
+                  defaultColor="#111827"
+                  placeholder="#111827"
                />
              </div>
-              </div>

              <div className="space-y-2">
                <label className="ps-field-label mb-0">文本样式</label>
@@ -1378,6 +1583,60 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                />
                <span className="text-[12px] text-[#ccc]">自动换行</span>
              </label>
+
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <label className="ps-field-label">最大行数</label>
+                  <PropInput
+                    type="number"
+                    min="0"
+                    max="99"
+                    step="1"
+                    value={selectedElem.textMaxLines ?? ''}
+                    onCommit={(val) => {
+                      const raw = String(val).trim();
+                      if (!raw) {
+                        handleElemChange({
+                          ...selectedElem,
+                          textMaxLines: undefined,
+                          textEllipsis: undefined,
+                        });
+                        return;
+                      }
+                      const n = Math.max(0, Math.min(99, Math.floor(Number(val) || 0)));
+                      handleElemChange({
+                        ...selectedElem,
+                        textMaxLines: n > 0 ? n : undefined,
+                        textEllipsis: n > 0 ? selectedElem.textEllipsis : undefined,
+                      });
+                    }}
+                    className="ps-field font-mono"
+                    placeholder="不限"
+                  />
+                  <p className="text-[9px] text-[#666] mt-0.5">留空表示不限制</p>
+                </div>
+                <div className="flex items-end pb-5">
+                  <label
+                    className={`flex items-center gap-2 cursor-pointer ${
+                      !selectedElem.textMaxLines ? 'opacity-40 cursor-not-allowed' : ''
+                    }`}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={selectedElem.textEllipsis === true}
+                      disabled={!selectedElem.textMaxLines || selectedElem.textMaxLines <= 0}
+                      onChange={(e) =>
+                        handleElemChange({
+                          ...selectedElem,
+                          textEllipsis: e.target.checked ? true : undefined,
+                        })
+                      }
+                      className="ps-checkbox"
+                    />
+                    <span className="text-[12px] text-[#ccc]">超出显示省略号</span>
+                  </label>
+                </div>
+              </div>
            </div>
          )}

@@ -1489,39 +1748,60 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
          <div className="space-y-3">
            <h5 className="ps-section-title">
              <Ruler className="w-3.5 h-3.5" />
-              位置与尺寸 (mm)
+              {isMultiSelect && multiSelectionBounds ? '选区位置 (mm)' : '位置与尺寸 (mm)'}
            </h5>
+            {isMultiSelect && multiSelectionBounds && (
+              <p className="text-[10px] text-[#666] leading-snug">
+                X、Y 为选中元素整体包围框左上角，修改后将整体平移
+              </p>
+            )}
            <div className="grid grid-cols-2 gap-3">
              <div>
-                <label className="ps-field-label">X 坐标 (左边距)</label>
+                <label className="ps-field-label">
+                  {isMultiSelect ? 'X 坐标 (选区左边距)' : 'X 坐标 (左边距)'}
+                </label>
                <PropInput
                  type="number"
                  step="0.5"
-                  value={selectedElem.x}
+                  value={isMultiSelect && multiSelectionBounds ? multiSelectionBounds.minX : selectedElem.x}
                  onCommit={(val) => {
+                    const xVal = Math.round((Number(val) || 0) * 10) / 10;
+                    if (isMultiSelect && multiSelectionBounds) {
+                      moveSelectedGroupTo(xVal, multiSelectionBounds.minY);
+                      return;
+                    }
                    handleElemChange({
                      ...selectedElem,
-                      x: Math.round((Number(val) || 0) * 10) / 10,
+                      x: xVal,
                    });
                  }}
                  className="ps-field font-mono"
                />
              </div>
              <div>
-                <label className="ps-field-label">Y 坐标 (顶边距)</label>
+                <label className="ps-field-label">
+                  {isMultiSelect ? 'Y 坐标 (选区顶边距)' : 'Y 坐标 (顶边距)'}
+                </label>
                <PropInput
                  type="number"
                  step="0.5"
-                  value={selectedElem.y}
+                  value={isMultiSelect && multiSelectionBounds ? multiSelectionBounds.minY : selectedElem.y}
                  onCommit={(val) => {
+                    const yVal = Math.round((Number(val) || 0) * 10) / 10;
+                    if (isMultiSelect && multiSelectionBounds) {
+                      moveSelectedGroupTo(multiSelectionBounds.minX, yVal);
+                      return;
+                    }
                    handleElemChange({
                      ...selectedElem,
-                      y: Math.round((Number(val) || 0) * 10) / 10,
+                      y: yVal,
                    });
                  }}
                  className="ps-field font-mono"
                />
              </div>
+              {!isMultiSelect && (
+              <>
              <div>
                <label className="ps-field-label">元素宽度</label>
                <PropInput
@@ -1531,13 +1811,15 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                  value={selectedElem.width}
                  onCommit={(val) => {
                    const wVal = Math.max(2, Number(val) || 2);
-                    let updated = { ...selectedElem, width: wVal };
                    if (selectedElem.type === 'qrcode') {
-                      updated.height = wVal;
+                      handleElemChange({ ...selectedElem, width: wVal, height: wVal });
                    } else if (selectedElem.type === 'table') {
-                      updated = scaleTableElementSize(updated, wVal, updated.height);
+                      handleElemChange(
+                        scaleTableElementSize(selectedElem, wVal, selectedElem.height)
+                      );
+                    } else {
+                      handleElemChange({ ...selectedElem, width: wVal });
                    }
-                    handleElemChange(updated);
                  }}
                  className="ps-field font-mono"
                />
@@ -1582,6 +1864,8 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                  />
                </div>
              </div>
+              </>
+              )}
            </div>
          </div>

@@ -1653,6 +1937,35 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                className="ps-field font-mono text-[11px] flex-1 min-w-0"
              />
            </div>
+            {templateVariables.length > 0 && (
+              <div className="flex flex-wrap gap-1 mt-1.5">
+                {templateVariables.map((v) => (
+                  <button
+                    key={v}
+                    type="button"
+                    onClick={() => {
+                      const token = `{${v}}`;
+                      const current =
+                        selectedElem.backgroundColor === 'transparent'
+                          ? ''
+                          : selectedElem.backgroundColor || '';
+                      handleElemChange({
+                        ...selectedElem,
+                        backgroundColor: current.includes(token)
+                          ? current
+                          : current
+                            ? `${current} ${token}`
+                            : token,
+                        backgroundOpacity: 100,
+                      });
+                    }}
+                    className="ps-btn text-[9px] font-mono"
+                  >
+                    {`{${v}}`}
+                  </button>
+                ))}
+              </div>
+            )}
            <div>
              <div className="flex justify-between items-center mb-1">
                <span className="text-[10px] text-[#777]">不透明度</span>
@@ -1791,35 +2104,20 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
              </div>
            </div>

-            <div>
-              <label className="ps-field-label">边框颜色</label>
-              <div className="flex gap-1 items-center">
-                <input
-                  type="color"
-                  value={selectedElem.borderColor || '#111827'}
-                  onChange={(e) =>
+            <ColorValueField
+              label="边框颜色"
+              value={selectedElem.borderColor || ''}
+              onChange={(val) =>
                handleElemChange({
                  ...selectedElem,
-                      borderColor: e.target.value,
+                  borderColor: val || undefined,
                  borderWidth: selectedElem.borderWidth || 0.3,
                })
              }
-                  className="color-input shrink-0"
-                />
-                <input
-                  type="text"
-                  value={selectedElem.borderColor || ''}
+              variableOptions={templateVariables}
+              defaultColor="#111827"
              placeholder="#111827"
-                  onChange={(e) =>
-                    handleElemChange({
-                      ...selectedElem,
-                      borderColor: e.target.value,
-                    })
-                  }
-                  className="ps-field font-mono text-[11px] flex-1 min-w-0"
            />
-              </div>
-            </div>

            <div>
              <label className="ps-field-label">各边独立边框宽度 (mm，留空用统一值，0 为不显示)</label>
@@ -1957,6 +2255,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
          const actualIdx = template.elements.length - 1 - revIdx;
          const isSelected = selectedElementIds.includes(elem.id);
          const isLocked = !!elem.locked;
+          const isHidden = elem.hidden === true;

          return (
            <div
@@ -1986,15 +2285,15 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                  }
              }
              className={`ps-layer-item group ${isSelected && !isLocked ? 'selected' : ''} ${isLocked ? 'ps-layer-item-locked' : ''
-                }`}
+                }${isHidden ? ' ps-layer-item-hidden' : ''}`}
            >
              <div className="flex items-center gap-2 min-w-0 flex-1 pointer-events-none">
-                <span className="shrink-0 w-3.5 flex items-center justify-center">
-                  {elem.type === 'text' && <Type className="w-3 h-3 text-[#666]" />}
-                  {elem.type === 'barcode' && <Barcode className="w-3 h-3 text-[#666]" />}
-                  {elem.type === 'qrcode' && <QrCode className="w-3 h-3 text-[#666]" />}
-                  {elem.type === 'image' && <ImageIcon className="w-3 h-3 text-[#666]" />}
-                  {elem.type === 'table' && <Table2 className="w-3 h-3 text-[#666]" />}
+                <span className="ps-layer-item-icon">
+                  {elem.type === 'text' && <Type />}
+                  {elem.type === 'barcode' && <Barcode />}
+                  {elem.type === 'qrcode' && <QrCode />}
+                  {elem.type === 'image' && <ImageIcon />}
+                  {elem.type === 'table' && <Table2 />}
                </span>
                <span className="truncate" title={elem.name}>
                  {elem.name}
@@ -2002,9 +2301,14 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
              </div>

              <div
-                className={`flex items-center gap-0.5 shrink-0 pointer-events-auto ${isNarrowScreen || variant === 'mobile' || isLocked
+                className={`ps-layer-item-actions pointer-events-auto ${
+                  isNarrowScreen || variant === 'mobile' || isLocked
+                    ? ''
+                    : 'ps-layer-item-actions--float'
+                } ${
+                  isNarrowScreen || variant === 'mobile' || isLocked
                    ? 'opacity-100'
-                  : 'opacity-0 group-hover:opacity-100 transition-opacity'
+                    : ''
                }`}
              >
                {!isLocked && (
@@ -2014,37 +2318,60 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
                      onClick={(e) => { e.stopPropagation(); moveLayer(actualIdx, 'up'); }}
                      disabled={actualIdx === template.elements.length - 1}
                      title="上移"
-                      className="p-0.5 hover:bg-[#555] disabled:opacity-20 cursor-pointer text-[#aaa]"
                    >
-                      <ArrowUp className="w-3 h-3" />
+                      <ArrowUp />
                    </button>
                    <button
                      type="button"
                      onClick={(e) => { e.stopPropagation(); moveLayer(actualIdx, 'down'); }}
                      disabled={actualIdx === 0}
                      title="下移"
-                      className="p-0.5 hover:bg-[#555] disabled:opacity-20 cursor-pointer text-[#aaa]"
                    >
-                      <ArrowDown className="w-3 h-3" />
+                      <ArrowDown />
                    </button>
                  </>
                )}
+                {!isLocked && (
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setMaskDialogElementId(elem.id);
+                    }}
+                    title={isElementMaskActive(elem.mask) ? '编辑蒙版' : '添加蒙版'}
+                    className={
+                      isElementMaskActive(elem.mask)
+                        ? 'text-[#31a8ff]'
+                        : 'text-[#666] hover:text-[#ccc]'
+                    }
+                  >
+                    <Blend />
+                  </button>
+                )}
+                <button
+                  type="button"
+                  onClick={(e) => { e.stopPropagation(); toggleLayerVisibility(actualIdx); }}
+                  title={isHidden ? '显示图层' : '隐藏图层'}
+                  className={isHidden ? 'text-[#666]' : 'text-[#ccc] hover:text-white'}
+                >
+                  {isHidden ? <EyeOff /> : <Eye />}
+                </button>
                <button
                  type="button"
                  onClick={(e) => { e.stopPropagation(); toggleLockLayer(actualIdx); }}
                  title={isLocked ? '解锁' : '锁定'}
-                  className={`p-0.5 cursor-pointer ${isLocked ? 'text-amber-400' : 'text-[#666] hover:text-[#ccc]'}`}
+                  className={isLocked ? 'text-amber-400' : 'text-[#666] hover:text-[#ccc]'}
                >
-                  {isLocked ? <Lock className="w-3 h-3" /> : <Unlock className="w-3 h-3" />}
+                  {isLocked ? <Lock /> : <Unlock />}
                </button>
                {!isLocked && (
                  <button
                    type="button"
                    onClick={(e) => { e.stopPropagation(); void deleteLayer(elem.id); }}
                    title="删除"
-                    className="p-0.5 hover:text-red-400 text-[#666] cursor-pointer"
+                    className="hover:text-red-400 text-[#666]"
                  >
-                    <Trash2 className="w-3 h-3" />
+                    <Trash2 />
                  </button>
                )}
              </div>
@@ -2114,14 +2441,16 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({

            {primaryElem && (
              <div className="mobile-nudge-info">
-                <p className="text-[12px] font-medium text-[#ddd] truncate">{primaryElem.name}</p>
+                <p className="text-[12px] font-medium text-[#ddd] truncate">
+                  {nudgeableElementIds.length > 1 ? `已选 ${nudgeableElementIds.length} 个元素` : primaryElem.name}
+                </p>
                <p className="text-[11px] font-mono text-[#31a8ff] mt-1">
-                  X {primaryElem.x} · Y {primaryElem.y} mm
+                  {nudgeableElementIds.length > 1 && multiSelectionBounds
+                    ? `X ${multiSelectionBounds.minX} · Y ${multiSelectionBounds.minY} mm`
+                    : `X ${primaryElem.x} · Y ${primaryElem.y} mm`}
                </p>
                {nudgeableElementIds.length > 1 && (
-                  <p className="text-[10px] text-[#888] mt-1">
-                    已选 {nudgeableElementIds.length} 个元素，将一起移动
-                  </p>
+                  <p className="text-[10px] text-[#888] mt-1">将一起移动</p>
                )}
              </div>
            )}
@@ -2136,16 +2465,29 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
      open={visibilityRuleDialog !== null}
      mode={visibilityRuleDialog?.mode ?? 'add'}
      initialRule={editingVisibilityRule}
-      variableOptions={visibilityRuleDialogVariableOptions}
+      variableOptions={templateVariables}
      onClose={() => setVisibilityRuleDialog(null)}
      onConfirm={handleConfirmVisibilityRule}
    />
  );

+  const elementMaskDialogNode = (
+    <ElementMaskDialog
+      open={maskDialogElementId !== null}
+      element={maskDialogElement}
+      onClose={() => setMaskDialogElementId(null)}
+      onConfirm={(mask) => {
+        if (!maskDialogElementId) return;
+        updateElementMask(maskDialogElementId, mask);
+      }}
+    />
+  );
+
  if (variant === 'mobile') {
    return (
      <div className="mobile-design-props">
        {visibilityRuleDialogNode}
+        {elementMaskDialogNode}
        <nav className="mobile-design-props-nav" aria-label="属性模块">
          {MOBILE_PROP_MODULES.map((item) => (
            <button
@@ -2159,6 +2501,18 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
            </button>
          ))}
          <div className="mobile-design-props-nav-spacer" aria-hidden />
+          {elementClipboard?.canCopy && (
+            <button
+              type="button"
+              onClick={() => elementClipboard.copyAndPasteSelectedElements()}
+              className="mobile-design-props-nav-btn"
+              aria-label="复制选中元素"
+              title="复制选中元素并创建副本"
+            >
+              <Copy className="w-4 h-4" />
+              <span>复制</span>
+            </button>
+          )}
          <button
            type="button"
            onClick={() => void deleteSelectedElements()}
@@ -2192,6 +2546,7 @@ export const PropSidebar: React.FC<PropSidebarProps> = ({
  return (
    <div className="ps-sidebar-stack">
      {visibilityRuleDialogNode}
+      {elementMaskDialogNode}
      <CollapsiblePanelSection
        sectionClassName="properties-panel flex flex-col"
        collapsed={panelCollapsed.properties}
--- a/src/components/TableCellTextFields.tsx
+++ b/src/components/TableCellTextFields.tsx
@@ -3,6 +3,7 @@ import { TemplateElement } from '../types';
 import { CommitInput } from './CommitInput';
 import { FieldSelect } from './PsSelect';
 import { ValueExtractFields } from './ValueExtractFields';
+import { ColorValueField } from './ColorValueField';
 import { TextDisplayAffixFields } from './TextDisplayAffixFields';
 import {
  applyCellTextElementChange,
@@ -173,23 +174,15 @@ export const TableCellTextFields: React.FC<TableCellTextFieldsProps> = ({
      </div>

      <div className="border-t border-[#3a3a3a] pt-2.5">
-        <label className="block text-[10px] font-semibold text-[#777] mb-1">文本颜色</label>
-        <div className="flex gap-1 items-center">
-          <input
-            type="color"
-            value={textElem.textColor || '#111827'}
-            onChange={(e) => patchText({ ...textElem, textColor: e.target.value })}
-            className="color-input shrink-0"
-          />
-          <input
-            type="text"
-            placeholder="#111827"
+        <ColorValueField
+          label="文本颜色"
          value={textElem.textColor || ''}
-            onChange={(e) => patchText({ ...textElem, textColor: e.target.value })}
-            className="ps-field font-mono text-[11px] flex-1 min-w-0"
+          onChange={(val) => patchText({ ...textElem, textColor: val || undefined })}
+          variableOptions={templateVariables}
+          defaultColor="#111827"
+          placeholder="#111827"
        />
      </div>
-      </div>

      <div className="space-y-2">
        <label className="ps-field-label mb-0">文本样式</label>
@@ -384,6 +377,53 @@ export const TableCellTextFields: React.FC<TableCellTextFieldsProps> = ({
        <span className="text-[12px] text-[#ccc]">自动换行</span>
      </label>

+      <div className="grid grid-cols-2 gap-2">
+        <div>
+          <label className="ps-field-label">最大行数</label>
+          <CommitInput
+            type="number"
+            min="0"
+            max="99"
+            step="1"
+            value={textElem.textMaxLines ?? ''}
+            onCommit={(val) => {
+              const raw = String(val).trim();
+              if (!raw) {
+                patchText({ ...textElem, textMaxLines: undefined, textEllipsis: undefined });
+                return;
+              }
+              const n = Math.max(0, Math.min(99, Math.floor(Number(val) || 0)));
+              patchText({
+                ...textElem,
+                textMaxLines: n > 0 ? n : undefined,
+                textEllipsis: n > 0 ? textElem.textEllipsis : undefined,
+              });
+            }}
+            className="ps-field font-mono"
+            placeholder="不限"
+          />
+          <p className="text-[9px] text-[#666] mt-0.5">留空表示不限制</p>
+        </div>
+        <div className="flex items-end pb-5">
+          <label
+            className={`flex items-center gap-2 cursor-pointer ${
+              !textElem.textMaxLines ? 'opacity-40 cursor-not-allowed' : ''
+            }`}
+          >
+            <input
+              type="checkbox"
+              checked={textElem.textEllipsis === true}
+              disabled={!textElem.textMaxLines || textElem.textMaxLines <= 0}
+              onChange={(e) =>
+                patchText({ ...textElem, textEllipsis: e.target.checked ? true : undefined })
+              }
+              className="ps-checkbox"
+            />
+            <span className="text-[12px] text-[#ccc]">超出显示省略号</span>
+          </label>
+        </div>
+      </div>
+
      <div className="grid grid-cols-2 gap-2 border-t border-[#3a3a3a] pt-2">
        <div>
          <label className="ps-field-label">单元格背景</label>
@@ -409,7 +449,10 @@ export const TableCellTextFields: React.FC<TableCellTextFieldsProps> = ({
        </div>
      </div>

-      <ValueExtractFields elem={textElem} onChange={patchText} />
+      <ValueExtractFields
+        config={textElem}
+        onChange={(patch) => patchText({ ...textElem, ...patch })}
+      />
      <TextDisplayAffixFields elem={textElem} onChange={patchText} />
    </div>
  );
--- a/src/components/TablePropertyFields.tsx
+++ b/src/components/TablePropertyFields.tsx
@@ -14,6 +14,8 @@ import {
  updateTableCells,
  updateTableColWidth,
  updateTableRowHeight,
+  equalizeTableColWidths,
+  equalizeTableRowHeights,
  getTableColWidths,
  getTableRowHeights,
  getCellRawContent,
@@ -21,6 +23,7 @@ import {
 } from '../tableUtils';
 import { Table2, Merge, SplitSquareHorizontal } from 'lucide-react';
 import { TableCellTextFields } from './TableCellTextFields';
+import { ColorValueField } from './ColorValueField';

 const PropInput = CommitInput;

@@ -90,7 +93,17 @@ export const TablePropertyFields: React.FC<TablePropertyFieldsProps> = ({
      </div>

      <div className="space-y-1.5">
+        <div className="flex items-center justify-between gap-2">
          <span className="text-[10px] font-semibold text-[#aaa]">行高 (mm)</span>
+          <button
+            type="button"
+            onClick={() => onChange(equalizeTableRowHeights(elem))}
+            className="text-[9px] text-[#31a8ff] hover:underline cursor-pointer shrink-0"
+            title="将各行高度恢复为相等"
+          >
+            等分行高
+          </button>
+        </div>
        <div className="grid grid-cols-3 gap-1.5">
          {rowHeights.map((h, i) => (
            <div key={`rh-${i}`}>
@@ -111,7 +124,17 @@ export const TablePropertyFields: React.FC<TablePropertyFieldsProps> = ({
      </div>

      <div className="space-y-1.5">
+        <div className="flex items-center justify-between gap-2">
          <span className="text-[10px] font-semibold text-[#aaa]">列宽 (mm)</span>
+          <button
+            type="button"
+            onClick={() => onChange(equalizeTableColWidths(elem))}
+            className="text-[9px] text-[#31a8ff] hover:underline cursor-pointer shrink-0"
+            title="将各列宽度恢复为相等"
+          >
+            等分列宽
+          </button>
+        </div>
        <div className="grid grid-cols-3 gap-1.5">
          {colWidths.map((w, i) => (
            <div key={`cw-${i}`}>
@@ -145,16 +168,15 @@ export const TablePropertyFields: React.FC<TablePropertyFieldsProps> = ({
            className="ps-field font-mono"
          />
        </div>
-        <div>
-          <label className="ps-field-label">网格线颜色</label>
-          <input
-            type="color"
-            value={elem.tableBorderColor ?? '#374151'}
-            onChange={(e) => onChange({ ...elem, tableBorderColor: e.target.value })}
-            className="color-input w-full"
+        <ColorValueField
+          label="网格线颜色"
+          value={elem.tableBorderColor ?? ''}
+          onChange={(val) => onChange({ ...elem, tableBorderColor: val || undefined })}
+          variableOptions={templateVariables}
+          defaultColor="#374151"
+          placeholder="#374151"
        />
      </div>
-      </div>

      {normalizedCells.length > 0 && (
        <div className="bg-[#1e1e1e] border border-[#3a3a3a] p-3 space-y-3">
@@ -287,7 +309,9 @@ export const TableCellContentFields: React.FC<TableCellContentFieldsProps> = ({
 export function scaleTableElementSize(
  elem: TemplateElement,
  newWidth: number,
-  newHeight: number
+  newHeight: number,
+  startWidth = elem.width,
+  startHeight = elem.height
 ): TemplateElement {
  if (elem.type !== 'table') {
    return { ...elem, width: newWidth, height: newHeight };
@@ -296,8 +320,8 @@ export function scaleTableElementSize(
    elem,
    newWidth,
    newHeight,
-    elem.width,
-    elem.height,
+    startWidth,
+    startHeight,
    getTableRowHeights(elem),
    getTableColWidths(elem)
  );
--- a/src/components/TextDisplayAffixFields.tsx
+++ b/src/components/TextDisplayAffixFields.tsx
@@ -45,7 +45,7 @@ export const TextDisplayAffixFields: React.FC<TextDisplayAffixFieldsProps> = ({
      />
    </div>
    <p className="col-span-2 text-[9px] text-[#666] leading-relaxed">
-      在值提取完成后追加，仅影响显示；不参与「内容值」显示条件判断
+      在值提取完成后追加，仅影响显示；反选模式下会一并参与从原值中去除；不参与「内容值」显示条件判断
    </p>
  </div>
 );
--- a/src/components/ValueExtractFields.tsx
+++ b/src/components/ValueExtractFields.tsx
@@ -1,34 +1,39 @@
 import React from 'react';
-import { TemplateElement } from '../types';
+import type { ValueExtractConfig } from '../types';
 import { CommitInput } from './CommitInput';
 import { FieldSelect } from './PsSelect';

 interface ValueExtractFieldsProps {
-  elem: TemplateElement;
-  onChange: (elem: TemplateElement) => void;
+  config: ValueExtractConfig;
+  onChange: (patch: Partial<ValueExtractConfig>) => void;
 }

 const PropInput = CommitInput;

-function getEffectiveExtractMode(elem: TemplateElement) {
-  if (elem.textExtractMode !== undefined) return elem.textExtractMode;
-  return elem.textSplitDelimiter?.trim() ? 'split' : 'none';
+function getEffectiveExtractMode(config: ValueExtractConfig) {
+  if (config.textExtractMode !== undefined) return config.textExtractMode;
+  return config.textSplitDelimiter?.trim() ? 'split' : 'none';
 }

-export const ValueExtractFields: React.FC<ValueExtractFieldsProps> = ({ elem, onChange }) => {
-  const extractMode = getEffectiveExtractMode(elem);
+type ExtractSelectValue = 'none' | 'split' | 'prefix' | 'suffix' | 'inverse';
+
+export const ValueExtractFields: React.FC<ValueExtractFieldsProps> = ({ config, onChange }) => {
+  const isInverse = config.textExtractInverse === true;
+  const extractMode = getEffectiveExtractMode(config);
+  const selectValue: ExtractSelectValue = isInverse ? 'inverse' : extractMode;
+  const showExtractFields = selectValue !== 'none';

  return (
    <div className="space-y-2">
      <div>
        <label className="ps-field-label">值提取</label>
        <FieldSelect
-          value={extractMode}
+          value={selectValue}
          onChange={(e) => {
-            const mode = e.target.value as 'none' | 'split' | 'prefix' | 'suffix';
+            const mode = e.target.value as ExtractSelectValue;
            if (mode === 'none') {
              onChange({
-                ...elem,
+                textExtractInverse: false,
                textExtractMode: 'none',
                textSplitDelimiter: undefined,
                textSplitIndex: undefined,
@@ -36,14 +41,23 @@ export const ValueExtractFields: React.FC<ValueExtractFieldsProps> = ({ elem, on
              });
              return;
            }
+            if (mode === 'inverse') {
              onChange({
-              ...elem,
+                textExtractInverse: true,
+                textExtractMode: extractMode === 'none' ? 'prefix' : extractMode,
+                textSplitIndex: config.textSplitIndex ?? 1,
+                textExtractLength: config.textExtractLength ?? 1,
+              });
+              return;
+            }
+            onChange({
+              textExtractInverse: false,
              textExtractMode: mode,
-              textSplitIndex: mode === 'split' ? elem.textSplitIndex ?? 1 : elem.textSplitIndex,
+              textSplitIndex: mode === 'split' ? config.textSplitIndex ?? 1 : config.textSplitIndex,
              textExtractLength:
                mode === 'prefix' || mode === 'suffix'
-                  ? elem.textExtractLength ?? 1
-                  : elem.textExtractLength,
+                  ? config.textExtractLength ?? 1
+                  : config.textExtractLength,
            });
          }}
          className="ps-field"
@@ -52,48 +66,76 @@ export const ValueExtractFields: React.FC<ValueExtractFieldsProps> = ({ elem, on
          <option value="split">按分隔符</option>
          <option value="prefix">前 N 位</option>
          <option value="suffix">后 N 位</option>
+          <option value="inverse">反选</option>
        </FieldSelect>
      </div>
-      {extractMode === 'split' && (
+      {isInverse && (
+        <div>
+          <label className="ps-field-label">去除段</label>
+          <FieldSelect
+            value={extractMode === 'none' ? 'prefix' : extractMode}
+            onChange={(e) => {
+              const mode = e.target.value as 'split' | 'prefix' | 'suffix';
+              onChange({
+                textExtractInverse: true,
+                textExtractMode: mode,
+                textSplitIndex: mode === 'split' ? config.textSplitIndex ?? 1 : config.textSplitIndex,
+                textExtractLength:
+                  mode === 'prefix' || mode === 'suffix'
+                    ? config.textExtractLength ?? 1
+                    : config.textExtractLength,
+              });
+            }}
+            className="ps-field"
+          >
+            <option value="prefix">前 N 位</option>
+            <option value="split">按分隔符</option>
+            <option value="suffix">后 N 位</option>
+          </FieldSelect>
+          <p className="text-[9px] text-[#666] mt-1 leading-relaxed">
+            从原值中去掉「显示前缀 + 提取段 + 显示后缀」。例如原值 A-1-1-1，提取前 1 位并追加后缀
+            「-」，则得到 1-1-1
+          </p>
+        </div>
+      )}
+      {showExtractFields && extractMode === 'split' && (
        <div className="grid grid-cols-2 gap-2">
          <div>
            <label className="ps-field-label">分隔符</label>
            <PropInput
              type="text"
-              value={elem.textSplitDelimiter ?? ''}
+              value={config.textSplitDelimiter ?? ''}
              placeholder="如 -"
              onCommit={(val) => {
                const trimmed = val.trim();
                if (!trimmed) {
                  onChange({
-                    ...elem,
-                    textExtractMode: 'none',
+                    textExtractMode: isInverse ? 'split' : 'none',
+                    textExtractInverse: isInverse ? true : false,
                    textSplitDelimiter: undefined,
                    textSplitIndex: undefined,
                  });
                  return;
                }
                onChange({
-                  ...elem,
                  textExtractMode: 'split',
                  textSplitDelimiter: trimmed,
-                  textSplitIndex: elem.textSplitIndex ?? 1,
+                  textSplitIndex: config.textSplitIndex ?? 1,
                });
              }}
              className="ps-field font-mono"
            />
          </div>
          <div>
-            <label className="ps-field-label">显示第几位</label>
+            <label className="ps-field-label">{isInverse ? '去除第几位' : '显示第几位'}</label>
            <PropInput
              type="number"
              min="1"
              max="99"
-              value={elem.textSplitIndex ?? 1}
-              disabled={!elem.textSplitDelimiter?.trim()}
+              value={config.textSplitIndex ?? 1}
+              disabled={!config.textSplitDelimiter?.trim()}
              onCommit={(val) =>
                onChange({
-                  ...elem,
                  textExtractMode: 'split',
                  textSplitIndex: Math.max(1, Math.min(99, Number(val) || 1)),
                })
@@ -101,34 +143,37 @@ export const ValueExtractFields: React.FC<ValueExtractFieldsProps> = ({ elem, on
              className="ps-field font-mono"
            />
          </div>
+          {!isInverse && (
            <p className="col-span-2 text-[9px] text-[#666] leading-relaxed">
              变量替换为完整内容后，按分隔符拆分并取第 N 段（从 1 开始）；段数不足时为空
            </p>
+          )}
        </div>
      )}
-      {(extractMode === 'prefix' || extractMode === 'suffix') && (
+      {showExtractFields && (extractMode === 'prefix' || extractMode === 'suffix') && (
        <div>
          <label className="ps-field-label">
-            {extractMode === 'prefix' ? '前' : '后'} N 位
+            {isInverse ? '去除' : extractMode === 'prefix' ? '前' : '后'} N 位
          </label>
          <PropInput
            type="number"
            min="1"
            max="999"
-            value={elem.textExtractLength ?? 1}
+            value={config.textExtractLength ?? 1}
            onCommit={(val) =>
              onChange({
-                ...elem,
                textExtractLength: Math.max(1, Math.min(999, Number(val) || 1)),
              })
            }
            className="ps-field font-mono"
          />
+          {!isInverse && (
            <p className="text-[9px] text-[#666] mt-1 leading-relaxed">
              {extractMode === 'prefix'
                ? '变量替换为完整内容后，取最前面的 N 个字符'
                : '变量替换为完整内容后，取最后面的 N 个字符'}
            </p>
+          )}
        </div>
      )}
    </div>
--- a/src/components/VariableFilterRulesEditor.tsx
+++ b/src/components/VariableFilterRulesEditor.tsx
@@ -0,0 +1,98 @@
+import React, { 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 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={templateVariables}
+        variableOnly
+        addTitle={addTitle}
+        editTitle={editTitle}
+        onClose={() => setRuleDialog(null)}
+        onConfirm={handleConfirmRule}
+      />
+    </>
+  );
+};
--- a/src/components/VisibilityRuleDialog.tsx
+++ b/src/components/VisibilityRuleDialog.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { X } from 'lucide-react';
 import { VisibilityRule } from '../types';
-import { visibilityOperatorNeedsValue } from '../utils';
+import { visibilityOperatorNeedsValue, valueExtractConfigHasExtract } from '../utils';
 import { VisibilityRuleForm, type VisibilityRuleDraft } from './VisibilityRuleForm';

 const EMPTY_DRAFT: VisibilityRuleDraft = {
@@ -11,11 +12,54 @@ const EMPTY_DRAFT: VisibilityRuleDraft = {
  value: '',
 };

+function pickRuleExtractFields(draft: VisibilityRuleDraft): Partial<VisibilityRule> {
+  if (!valueExtractConfigHasExtract(draft)) {
+    return {
+      textExtractMode: undefined,
+      textSplitDelimiter: undefined,
+      textSplitIndex: undefined,
+      textExtractLength: undefined,
+      textExtractInverse: undefined,
+      textDisplayPrefix: undefined,
+      textDisplaySuffix: undefined,
+    };
+  }
+
+  return {
+    textExtractMode: draft.textExtractMode,
+    textSplitDelimiter: draft.textSplitDelimiter,
+    textSplitIndex: draft.textSplitIndex,
+    textExtractLength: draft.textExtractLength,
+    textExtractInverse: draft.textExtractInverse || undefined,
+    textDisplayPrefix: draft.textDisplayPrefix || undefined,
+    textDisplaySuffix: draft.textDisplaySuffix || undefined,
+  };
+}
+
+function ruleToDraft(rule: VisibilityRule): VisibilityRuleDraft {
+  return {
+    target: rule.target ?? 'variable',
+    variable: rule.variable,
+    operator: rule.operator,
+    value: rule.value ?? '',
+    textExtractMode: rule.textExtractMode,
+    textSplitDelimiter: rule.textSplitDelimiter,
+    textSplitIndex: rule.textSplitIndex,
+    textExtractLength: rule.textExtractLength,
+    textExtractInverse: rule.textExtractInverse,
+    textDisplayPrefix: rule.textDisplayPrefix,
+    textDisplaySuffix: rule.textDisplaySuffix,
+  };
+}
+
 interface VisibilityRuleDialogProps {
  open: boolean;
  mode: 'add' | 'edit';
  initialRule?: VisibilityRule;
  variableOptions: string[];
+  variableOnly?: boolean;
+  addTitle?: string;
+  editTitle?: string;
  onClose: () => void;
  onConfirm: (rule: VisibilityRule) => void;
 }
@@ -25,6 +69,9 @@ export const VisibilityRuleDialog: React.FC<VisibilityRuleDialogProps> = ({
  mode,
  initialRule,
  variableOptions,
+  variableOnly = false,
+  addTitle = '添加显示条件',
+  editTitle = '编辑显示条件',
  onClose,
  onConfirm,
 }) => {
@@ -33,19 +80,14 @@ export const VisibilityRuleDialog: React.FC<VisibilityRuleDialogProps> = ({
  useEffect(() => {
    if (!open) return;
    if (mode === 'edit' && initialRule) {
-      setDraft({
-        target: initialRule.target ?? 'variable',
-        variable: initialRule.variable,
-        operator: initialRule.operator,
-        value: initialRule.value ?? '',
-      });
+      setDraft(ruleToDraft(initialRule));
    } 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;
@@ -59,12 +101,11 @@ export const VisibilityRuleDialog: React.FC<VisibilityRuleDialogProps> = ({
    return () => window.removeEventListener('keydown', onKeyDown);
  }, [open, onClose]);

-  if (!open) return null;
+  if (!open || typeof document === 'undefined') return null;

  const target = draft.target ?? 'variable';
-  const canConfirm =
-    target === 'content' || draft.variable.trim().length > 0;
-  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) => {
@@ -77,12 +118,13 @@ export const VisibilityRuleDialog: React.FC<VisibilityRuleDialogProps> = ({
      value: visibilityOperatorNeedsValue(draft.operator)
        ? draft.value?.trim() || undefined
        : undefined,
+      ...pickRuleExtractFields(draft),
    });
    onClose();
  };

-  return (
-    <div className="ps-modal-overlay" onClick={onClose} role="presentation">
+  return createPortal(
+    <div className="ps-modal-overlay" role="presentation">
      <div
        className="ps-modal"
        onClick={(e) => e.stopPropagation()}
@@ -109,6 +151,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">
@@ -125,6 +168,7 @@ export const VisibilityRuleDialog: React.FC<VisibilityRuleDialogProps> = ({
          </div>
        </form>
      </div>
-    </div>
+    </div>,
+    document.body
  );
 };
--- a/src/components/VisibilityRuleForm.tsx
+++ b/src/components/VisibilityRuleForm.tsx
@@ -3,13 +3,16 @@ import {
  VisibilityRule,
  VisibilityOperator,
  VisibilityRuleTarget,
+  ValueExtractConfig,
  VISIBILITY_OPERATOR_LABELS,
  VISIBILITY_RULE_TARGET_LABELS,
 } from '../types';
-import { visibilityOperatorNeedsValue } from '../utils';
+import { visibilityOperatorNeedsValue, valueExtractConfigHasExtract } from '../utils';
 import { FieldSelect } from './PsSelect';
+import { ValueExtractFields } from './ValueExtractFields';
+import { TextDisplayAffixFields } from './TextDisplayAffixFields';

-export interface VisibilityRuleDraft {
+export interface VisibilityRuleDraft extends ValueExtractConfig {
  target: VisibilityRuleTarget;
  variable: string;
  operator: VisibilityOperator;
@@ -20,17 +23,22 @@ 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');
+  const hasExtract = valueExtractConfigHasExtract(rule);

  return (
    <div className="space-y-3">
+      {!variableOnly && (
        <div>
          <label className="ps-field-label">条件对象</label>
          <FieldSelect
@@ -51,6 +59,7 @@ export const VisibilityRuleForm: React.FC<VisibilityRuleFormProps> = ({
            ))}
          </FieldSelect>
        </div>
+      )}
      {target === 'variable' ? (
        <div>
          <label className="ps-field-label">变量</label>
@@ -68,15 +77,56 @@ 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 className="pt-2 border-t border-[#3a3a3a] space-y-2">
+        <div className="text-[10px] font-bold text-[#31a8ff]">值提取</div>
+        <ValueExtractFields config={rule} onChange={onChange} />
+        {hasExtract && rule.textExtractInverse && (
+          <TextDisplayAffixFields
+            elem={{
+              id: '',
+              type: 'text',
+              name: '',
+              x: 0,
+              y: 0,
+              width: 0,
+              height: 0,
+              content: '',
+              fontSize: 10,
+              textAlign: 'left',
+              fontWeight: 'normal',
+              barcodeFormat: 'CODE128',
+              showText: true,
+              fontFamily: 'sans',
+              textDisplayPrefix: rule.textDisplayPrefix,
+              textDisplaySuffix: rule.textDisplaySuffix,
+            }}
+            onChange={(patch) =>
+              onChange({
+                textDisplayPrefix: patch.textDisplayPrefix,
+                textDisplaySuffix: patch.textDisplaySuffix,
+              })
+            }
+          />
+        )}
+        {hasExtract && !rule.textExtractInverse && (
+          <p className="text-[9px] text-[#666] leading-relaxed">
+            条件判断前先对{target === 'content' ? '内容值' : '变量值'}做提取，再与目标值比较
          </p>
        )}
+      </div>
      <div>
        <label className="ps-field-label">条件</label>
        <FieldSelect
@@ -99,14 +149,51 @@ export const VisibilityRuleForm: React.FC<VisibilityRuleFormProps> = ({
      </div>
      {visibilityOperatorNeedsValue(rule.operator) && (
        <div>
+          <div className="flex items-center justify-between gap-2">
            <label className="ps-field-label">目标值</label>
+            <button
+              type="button"
+              disabled={!rule.value}
+              onClick={() => onChange({ value: '' })}
+              className="text-[9px] text-[#31a8ff] hover:underline cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed disabled:no-underline shrink-0"
+            >
+              清空
+            </button>
+          </div>
          <input
            type="text"
            value={rule.value ?? ''}
            onChange={(e) => onChange({ value: e.target.value })}
-            placeholder="比较目标值"
+            placeholder="比较目标值，可使用 {变量名}"
            className="ps-field font-mono text-[11px] w-full mt-0.5"
          />
+          {variableOptions.length > 0 && (
+            <div className="flex flex-wrap gap-1 mt-1.5">
+              {variableOptions.map((v) => (
+                <button
+                  key={v}
+                  type="button"
+                  onClick={() => {
+                    const token = `{${v}}`;
+                    const current = rule.value ?? '';
+                    onChange({
+                      value: current.includes(token)
+                        ? current
+                        : current
+                          ? `${current}${current.endsWith(' ') ? '' : ' '}${token}`
+                          : token,
+                    });
+                  }}
+                  className="ps-btn text-[9px] font-mono"
+                >
+                  {`{${v}}`}
+                </button>
+              ))}
+            </div>
+          )}
+          <p className="text-[9px] text-[#666] mt-1 leading-relaxed">
+            支持字面量或 {`{变量名}`}；导出时按数据行解析变量后再比较
+          </p>
        </div>
      )}
    </div>
--- 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/elementAlign.ts
+++ b/src/elementAlign.ts
@@ -28,6 +28,30 @@ export function getSelectionBounds(selected: TemplateElement[]) {
  return { minX, minY, maxX, maxY };
 }

+/** 将选中元素整体平移，使选区左上角移至 (newMinX, newMinY) */
+export function setSelectionOrigin(
+  elements: TemplateElement[],
+  selectedIds: string[],
+  newMinX: number,
+  newMinY: number
+): TemplateElement[] {
+  const selected = elements.filter((e) => selectedIds.includes(e.id) && !e.locked);
+  if (selected.length === 0) return elements;
+  const { minX, minY } = getSelectionBounds(selected);
+  const deltaX = round1(newMinX - minX);
+  const deltaY = round1(newMinY - minY);
+  if (deltaX === 0 && deltaY === 0) return elements;
+  const idSet = new Set(selected.map((e) => e.id));
+  return elements.map((el) => {
+    if (!idSet.has(el.id)) return el;
+    return {
+      ...el,
+      x: round1(el.x + deltaX),
+      y: round1(el.y + deltaY),
+    };
+  });
+}
+
 /** 选中元素对齐到共同选区边界 */
 export function alignToSelectionBounds(
  elements: TemplateElement[],
--- a/src/elementMask.ts
+++ b/src/elementMask.ts
@@ -0,0 +1,278 @@
+import type { ElementMaskConfig, TemplateElement } from './types';
+import { traceRoundedRect, type CornerRadiiPx } from './elementBox';
+
+function loadImageOrNull(src: string): Promise<HTMLImageElement | null> {
+  const trimmed = src.trim();
+  if (!trimmed) return Promise.resolve(null);
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => resolve(null);
+    img.src = trimmed;
+  });
+}
+
+function drawImageWithFit(
+  ctx: CanvasRenderingContext2D,
+  img: HTMLImageElement,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  fit: 'contain' | 'cover' | 'fill' = 'contain'
+) {
+  if (fit === 'fill') {
+    ctx.drawImage(img, x, y, w, h);
+    return;
+  }
+  const imgRatio = img.width / img.height;
+  const boxRatio = w / h;
+  if (fit === 'contain') {
+    let dw = w;
+    let dh = h;
+    let dx = x;
+    let dy = y;
+    if (imgRatio > boxRatio) {
+      dh = w / imgRatio;
+      dy = y + (h - dh) / 2;
+    } else {
+      dw = h * imgRatio;
+      dx = x + (w - dw) / 2;
+    }
+    ctx.drawImage(img, dx, dy, dw, dh);
+    return;
+  }
+  let sx = 0;
+  let sy = 0;
+  let sw = img.width;
+  let sh = img.height;
+  if (imgRatio > boxRatio) {
+    sw = img.height * boxRatio;
+    sx = (img.width - sw) / 2;
+  } else {
+    sh = img.width / boxRatio;
+    sy = (img.height - sh) / 2;
+  }
+  ctx.drawImage(img, sx, sy, sw, sh, x, y, w, h);
+}
+
+export function isElementMaskActive(mask?: ElementMaskConfig): boolean {
+  if (!mask) return false;
+  if (mask.enabled === false) return false;
+  if (mask.type === 'image') return !!mask.image?.trim();
+  return true;
+}
+
+export function createDefaultElementMask(elem: TemplateElement): ElementMaskConfig {
+  return {
+    enabled: true,
+    type: 'rect',
+    mode: 'include',
+    x: 0,
+    y: 0,
+    width: elem.width,
+    height: elem.height,
+    borderRadius: 0,
+    imageFit: 'fill',
+  };
+}
+
+export function resolveMaskRegionMm(
+  elem: TemplateElement,
+  mask: ElementMaskConfig
+): { x: number; y: number; width: number; height: number } {
+  return {
+    x: mask.x ?? 0,
+    y: mask.y ?? 0,
+    width: mask.width ?? elem.width,
+    height: mask.height ?? elem.height,
+  };
+}
+
+export function resolveMaskCornerRadiiPx(
+  mask: ElementMaskConfig,
+  scale: number,
+  w: number,
+  h: number
+): CornerRadiiPx {
+  const maxR = Math.min(w, h) / 2;
+  const baseMm = mask.borderRadius ?? 0;
+
+  const radiusFor = (specificMm?: number): number => {
+    const mm = specificMm !== undefined && specificMm !== null ? specificMm : baseMm;
+    if (mm <= 0) return 0;
+    return Math.min(maxR, mm * scale);
+  };
+
+  return {
+    tl: radiusFor(mask.borderRadiusTL),
+    tr: radiusFor(mask.borderRadiusTR),
+    br: radiusFor(mask.borderRadiusBR),
+    bl: radiusFor(mask.borderRadiusBL),
+  };
+}
+
+function resolveMaskRegionPx(
+  elem: TemplateElement,
+  mask: ElementMaskConfig,
+  scale: number
+) {
+  const region = resolveMaskRegionMm(elem, mask);
+  return {
+    x: Math.round(region.x * scale),
+    y: Math.round(region.y * scale),
+    w: Math.max(1, Math.round(region.width * scale)),
+    h: Math.max(1, Math.round(region.height * scale)),
+  };
+}
+
+function fillRectMaskAlpha(
+  ctx: CanvasRenderingContext2D,
+  mx: number,
+  my: number,
+  mw: number,
+  mh: number,
+  mask: ElementMaskConfig,
+  scale: number
+) {
+  ctx.fillStyle = '#ffffff';
+  traceRoundedRect(ctx, mx, my, mw, mh, resolveMaskCornerRadiiPx(mask, scale, mw, mh));
+  ctx.fill();
+}
+
+/** 将图片按亮度转为 alpha 蒙版（白=不透明，黑=透明） */
+function buildImageLuminanceMaskCanvas(
+  img: HTMLImageElement,
+  w: number,
+  h: number,
+  fit: 'contain' | 'cover' | 'fill',
+  invert: boolean
+): HTMLCanvasElement {
+  const canvas = document.createElement('canvas');
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext('2d', { willReadFrequently: true });
+  if (!ctx) return canvas;
+
+  drawImageWithFit(ctx, img, 0, 0, w, h, fit);
+  const imageData = ctx.getImageData(0, 0, w, h);
+  const data = imageData.data;
+  for (let i = 0; i < data.length; i += 4) {
+    const luminance = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
+    const alpha = invert ? 255 - luminance : luminance;
+    data[i] = 255;
+    data[i + 1] = 255;
+    data[i + 2] = 255;
+    data[i + 3] = alpha;
+  }
+  ctx.putImageData(imageData, 0, 0);
+  return canvas;
+}
+
+/** 生成与元素同尺寸的蒙版 alpha 图（不透明区域保留图层像素） */
+async function buildMaskAlphaCanvas(
+  elem: TemplateElement,
+  mask: ElementMaskConfig,
+  ew: number,
+  eh: number,
+  scale: number
+): Promise<HTMLCanvasElement> {
+  const canvas = document.createElement('canvas');
+  canvas.width = Math.max(1, ew);
+  canvas.height = Math.max(1, eh);
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return canvas;
+
+  const { x: mx, y: my, w: mw, h: mh } = resolveMaskRegionPx(elem, mask, scale);
+  const include = (mask.mode ?? 'include') === 'include';
+
+  if (mask.type === 'image' && mask.image) {
+    const img = await loadImageOrNull(mask.image);
+    if (img) {
+      const maskCanvas = buildImageLuminanceMaskCanvas(
+        img,
+        mw,
+        mh,
+        mask.imageFit ?? 'fill',
+        !include
+      );
+      ctx.drawImage(maskCanvas, mx, my);
+    } else if (include) {
+      fillRectMaskAlpha(ctx, mx, my, mw, mh, mask, scale);
+    }
+    return canvas;
+  }
+
+  if (include) {
+    fillRectMaskAlpha(ctx, mx, my, mw, mh, mask, scale);
+    return canvas;
+  }
+
+  ctx.fillStyle = '#ffffff';
+  ctx.fillRect(0, 0, ew, eh);
+  ctx.globalCompositeOperation = 'destination-out';
+  fillRectMaskAlpha(ctx, mx, my, mw, mh, mask, scale);
+  ctx.globalCompositeOperation = 'source-over';
+  return canvas;
+}
+
+/** 对已绘制的图层离屏画布应用蒙版（destination-in） */
+async function applyMaskToLayerCanvas(
+  layerCtx: CanvasRenderingContext2D,
+  elem: TemplateElement,
+  mask: ElementMaskConfig,
+  ew: number,
+  eh: number,
+  scale: number
+) {
+  const alphaCanvas = await buildMaskAlphaCanvas(elem, mask, ew, eh, scale);
+  layerCtx.save();
+  layerCtx.globalCompositeOperation = 'destination-in';
+  layerCtx.drawImage(alphaCanvas, 0, 0);
+  layerCtx.restore();
+}
+
+type DrawLayerFn = (
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  w: number,
+  h: number
+) => void | Promise<void>;
+
+/**
+ * 绘制元素图层：无蒙版时直接绘制；有蒙版时先在离屏画布绘制整层（背景、内容、边框），应用蒙版后再合成到主画布。
+ */
+export async function composeElementLayer(
+  mainCtx: CanvasRenderingContext2D,
+  elem: TemplateElement,
+  ex: number,
+  ey: number,
+  ew: number,
+  eh: number,
+  scale: number,
+  drawLayer: DrawLayerFn
+) {
+  const mask = isElementMaskActive(elem.mask) ? elem.mask : undefined;
+
+  if (!mask) {
+    await drawLayer(mainCtx, ex, ey, ew, eh);
+    return;
+  }
+
+  const layerCanvas = document.createElement('canvas');
+  layerCanvas.width = Math.max(1, ew);
+  layerCanvas.height = Math.max(1, eh);
+  const layerCtx = layerCanvas.getContext('2d');
+  if (!layerCtx) {
+    await drawLayer(mainCtx, ex, ey, ew, eh);
+    return;
+  }
+
+  await drawLayer(layerCtx, 0, 0, ew, eh);
+  await applyMaskToLayerCanvas(layerCtx, elem, mask, ew, eh, scale);
+  mainCtx.drawImage(layerCanvas, ex, ey);
+}
+
+/** @deprecated 使用 composeElementLayer */
+export const drawElementContentWithMask = composeElementLayer;
--- a/src/hooks/useElementClipboard.ts
+++ b/src/hooks/useElementClipboard.ts
@@ -0,0 +1,113 @@
+import { useCallback, useRef, useState } from 'react';
+import type { LabelTemplate, TemplateElement } from '../types';
+import type { TableCellCoord } from '../tableUtils';
+import { cloneTemplateElementsForPaste } from '../utils';
+
+/** 应用内元素剪贴板（内存，跨模板/跨页面模块共享） */
+const globalElementClipboard: { elements: TemplateElement[] | null } = { elements: null };
+
+function getClipboardCount() {
+  return globalElementClipboard.elements?.length ?? 0;
+}
+
+function setGlobalClipboard(elements: TemplateElement[] | null) {
+  globalElementClipboard.elements = elements;
+}
+
+export interface UseElementClipboardOptions {
+  template: LabelTemplate;
+  onChange: (updated: LabelTemplate) => void;
+  selectedElementIds: string[];
+  onSelectElements: (ids: string[]) => void;
+  onSelectTableCells?: (cells: TableCellCoord[]) => void;
+  onCopySuccess?: (count: number) => void;
+  onDuplicateSuccess?: (count: number) => void;
+}
+
+export interface ElementClipboardActions {
+  copySelectedElements: () => void;
+  pasteClipboardElements: () => void;
+  /** 复制并立即粘贴（移动端快捷复制） */
+  copyAndPasteSelectedElements: () => void;
+  canCopy: boolean;
+  canPaste: boolean;
+  clipboardCount: number;
+}
+
+export function useElementClipboard({
+  template,
+  onChange,
+  selectedElementIds,
+  onSelectElements,
+  onSelectTableCells,
+  onCopySuccess,
+  onDuplicateSuccess,
+}: UseElementClipboardOptions): ElementClipboardActions {
+  const templateRef = useRef(template);
+  templateRef.current = template;
+  const [clipboardCount, setClipboardCount] = useState(getClipboardCount);
+
+  const syncClipboardCount = useCallback((elements: TemplateElement[] | null) => {
+    setGlobalClipboard(elements);
+    setClipboardCount(elements?.length ?? 0);
+  }, []);
+
+  const canCopy = selectedElementIds.length > 0;
+  const canPaste = clipboardCount > 0;
+
+  const copySelectedElements = useCallback(() => {
+    if (selectedElementIds.length === 0) return;
+    const current = templateRef.current;
+    const idSet = new Set(selectedElementIds);
+    const toCopy = current.elements.filter((el) => idSet.has(el.id));
+    if (toCopy.length === 0) return;
+    const cloned = JSON.parse(JSON.stringify(toCopy)) as TemplateElement[];
+    syncClipboardCount(cloned);
+    onCopySuccess?.(toCopy.length);
+  }, [selectedElementIds, syncClipboardCount, onCopySuccess]);
+
+  const pasteClipboardElements = useCallback(() => {
+    const source = globalElementClipboard.elements;
+    if (!source || source.length === 0) return;
+    const current = templateRef.current;
+    const pasted = cloneTemplateElementsForPaste(source, 1);
+    onChange({
+      ...current,
+      elements: [...current.elements, ...pasted],
+    });
+    onSelectElements(pasted.map((el) => el.id));
+    onSelectTableCells?.([]);
+    syncClipboardCount(null);
+  }, [onChange, onSelectElements, onSelectTableCells, syncClipboardCount]);
+
+  const copyAndPasteSelectedElements = useCallback(() => {
+    if (selectedElementIds.length === 0) return;
+    const current = templateRef.current;
+    const idSet = new Set(selectedElementIds);
+    const toCopy = current.elements.filter((el) => idSet.has(el.id));
+    if (toCopy.length === 0) return;
+    const pasted = cloneTemplateElementsForPaste(toCopy, 1);
+    onChange({
+      ...current,
+      elements: [...current.elements, ...pasted],
+    });
+    onSelectElements(pasted.map((el) => el.id));
+    onSelectTableCells?.([]);
+    onDuplicateSuccess?.(toCopy.length);
+  }, [
+    selectedElementIds,
+    onChange,
+    onSelectElements,
+    onSelectTableCells,
+    onDuplicateSuccess,
+  ]);
+
+  return {
+    copySelectedElements,
+    pasteClipboardElements,
+    copyAndPasteSelectedElements,
+    canCopy,
+    canPaste,
+    clipboardCount,
+  };
+}
--- a/src/hooks/useIsMobile.ts
+++ b/src/hooks/useIsMobile.ts
@@ -17,9 +17,18 @@ export function useMediaQuery(query: string): boolean {
  return matches;
 }

-/** 与 Tailwind `md` 断点一致：&lt; 768px 视为移动端 */
+/** 移动端上下布局：手机窄屏，或平板竖屏（宽度 < 1024 且竖屏） */
+export const MOBILE_LAYOUT_MEDIA_QUERY =
+  '(max-width: 767px), (max-width: 1023px) and (orientation: portrait)';
+
+/** 移动端上下布局：手机窄屏，或平板竖屏（宽度 < 1024 且竖屏） */
 export function useIsMobile(): boolean {
-  return useMediaQuery('(max-width: 767px)');
+  return useMediaQuery(MOBILE_LAYOUT_MEDIA_QUERY);
+}
+
+/** 语义别名：是否使用移动端上下布局 */
+export function useMobileLayout(): boolean {
+  return useIsMobile();
 }

 /** 平板等窄屏：&lt; 1024px */
--- 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;
@@ -575,7 +590,7 @@ body {
 .ps-modal-overlay {
  position: fixed;
  inset: 0;
-  z-index: 9000;
+  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -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;
@@ -724,11 +753,14 @@ body {
 }

 .ps-layer-item {
+  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 4px 8px;
-  font-size: 11px;
+  gap: 8px;
+  min-height: 40px;
+  padding: 6px 10px;
+  font-size: 12px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid #222;
@@ -754,6 +786,83 @@ body {
  background: transparent;
 }

+.ps-layer-item-hidden {
+  opacity: 0.55;
+}
+
+.ps-layer-item-hidden .truncate {
+  color: #888;
+}
+
+.ps-layer-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: #666;
+}
+
+.ps-layer-item-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+/* PC：未 hover 时不占位，悬停时浮于右侧 */
+.ps-layer-item-actions--float {
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  z-index: 1;
+  transform: translateY(-50%);
+  opacity: 0;
+  pointer-events: none;
+  padding-left: 16px;
+  background: linear-gradient(to left, #2d2d2d 180px, transparent);
+  transition: opacity 0.12s ease;
+}
+
+.ps-layer-item:hover .ps-layer-item-actions--float {
+  opacity: 1;
+  pointer-events: auto;
+  background: linear-gradient(to left, #383838 180px, transparent);
+}
+
+.ps-layer-item.selected:hover .ps-layer-item-actions--float {
+  background: linear-gradient(to left, #3d4f5f 180px, transparent);
+}
+
+.ps-layer-item-actions button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: 2px;
+  color: #aaa;
+  cursor: pointer;
+}
+
+/* .ps-layer-item-actions button:hover:not(:disabled) {
+  background: #555;
+} */
+
+.ps-layer-item-actions button:disabled {
+  opacity: 0.2;
+  cursor: default;
+}
+
+.ps-layer-item-actions button svg {
+  width: 14px;
+  height: 14px;
+}
+
 .ps-marquee-select {
  position: absolute;
  border: 1px solid #31a8ff;
@@ -768,6 +877,12 @@ body {
  outline-offset: 0;
 }

+.ps-resize-outline {
+  outline: 1px dashed var(--color-ps-accent);
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px rgba(49, 168, 255, 0.2);
+}
+
 .ps-unselected-dim-layer {
  position: absolute;
  inset: 0;
@@ -780,10 +895,6 @@ body {

 .ps-unselected-dim-layer--visible {
  opacity: 1;
-}
-
-.ps-unselected-dim {
-  position: absolute;
  background: rgba(255, 255, 255, 0.3);
 }

@@ -867,8 +978,8 @@ body {
  background-size: 24px 24px;
 }

-/* ── Mobile layout (< 768px) ── */
-@media (max-width: 767px) {
+/* ── Mobile layout：手机窄屏，或平板竖屏 ── */
+@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {

  /* Mobile export flow — shares mobile-design-view shell */
  .mobile-export-view {
@@ -1477,13 +1588,25 @@ body {
    gap: 4px;
    width: 64px;
    flex-shrink: 0;
+    min-height: 0;
+    align-self: stretch;
    padding: 8px 6px;
    background: #252525;
    border-right: 1px solid #1a1a1a;
+    overflow-y: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .mobile-design-props-nav::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
  }

  .mobile-design-props-nav-spacer {
-    flex: 1;
+    flex: 1 1 auto;
    min-height: 8px;
  }

@@ -1556,21 +1679,66 @@ body {
    display: flex;
    align-items: center;
    gap: 4px;
-    overflow-x: auto;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
+    overflow: hidden;
    min-width: 0;
    flex: 1;
  }

-  .mobile-design-toolstrip-tools::-webkit-scrollbar {
-    display: none;
-  }
-
  .mobile-design-tool-btn {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
+    border-radius: 10px !important;
+    flex-shrink: 0;
+  }
+
+  .mobile-design-tool-btn.active:hover {
+    background: #1a1a1a;
+    color: var(--color-ps-accent);
+  }
+
+  .mobile-design-tool-btn:hover {
+    background: transparent;
+    color: #fff;
+  }
+
+  .mobile-toolstrip-overflow-menu {
+    min-width: 148px;
+    padding: 4px;
+    background: #2a2a2a;
+    border: 1px solid #3a3a3a;
+    border-radius: 10px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+  }
+
+  .mobile-toolstrip-overflow-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 8px 10px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: #ccc;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    text-align: left;
+  }
+
+  .mobile-toolstrip-overflow-menu-item:hover,
+  .mobile-toolstrip-overflow-menu-item.active {
+    background: #1e3a4f;
+    color: #31a8ff;
+  }
+
+  .mobile-toolstrip-overflow-menu-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
    flex-shrink: 0;
  }

@@ -1654,7 +1822,8 @@ body {
  }
 }

-@media (min-width: 768px) {
+/* 桌面宽屏 / 横屏平板：隐藏仅移动端渲染的视图 */
+@media (min-width: 768px) and (orientation: landscape), (min-width: 1024px) {
  .mobile-only {
    display: none !important;
  }
--- 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,
@@ -27,6 +27,14 @@ import {
  buildTableGridBoundariesPx,
  getCellRectPx,
 } from './tableUtils';
+import { composeElementLayer, isElementMaskActive } from './elementMask';
+import {
+  resolveElementColorsForRender,
+  resolveRenderableColor,
+  applyPrintColorModeToCanvas,
+  type RenderColorContext,
+} from './colorUtils';
+import type { PrintColorMode } from './types';

 const GENERATOR_TRANSPARENT_BG = '#00000000';

@@ -212,6 +220,58 @@ function layoutHorizontalTextLines(
  return lines;
 }

+const TEXT_ELLIPSIS = '…';
+
+function truncateLineWithEllipsis(
+  ctx: CanvasRenderingContext2D,
+  line: string,
+  maxWidth: number,
+  ellipsis = TEXT_ELLIPSIS
+): string {
+  if (!line) return ellipsis;
+  if (ctx.measureText(line).width <= maxWidth) return line;
+  let truncated = line;
+  while (truncated.length > 0 && ctx.measureText(truncated + ellipsis).width > maxWidth) {
+    truncated = truncated.slice(0, -1);
+  }
+  return truncated.length > 0 ? truncated + ellipsis : ellipsis;
+}
+
+function applyHorizontalLineLimit(
+  ctx: CanvasRenderingContext2D,
+  lines: string[],
+  maxLines: number | undefined,
+  ellipsis: boolean,
+  writableW: number
+): string[] {
+  if (!maxLines || maxLines <= 0 || lines.length <= maxLines) return lines;
+  const visible = lines.slice(0, maxLines);
+  if (ellipsis) {
+    const lastIdx = visible.length - 1;
+    visible[lastIdx] = truncateLineWithEllipsis(ctx, visible[lastIdx], writableW - 4);
+  }
+  return visible;
+}
+
+function applyVerticalColumnLimit(
+  columns: string[][],
+  maxLines: number | undefined,
+  ellipsis: boolean
+): string[][] {
+  if (!maxLines || maxLines <= 0 || columns.length <= maxLines) return columns;
+  const visible = columns.slice(0, maxLines);
+  if (ellipsis && columns.length > maxLines) {
+    const lastCol = [...visible[visible.length - 1]];
+    if (lastCol.length > 0) {
+      lastCol[lastCol.length - 1] = TEXT_ELLIPSIS;
+      visible[visible.length - 1] = lastCol;
+    } else {
+      visible[visible.length - 1] = [TEXT_ELLIPSIS];
+    }
+  }
+  return visible;
+}
+
 /** 竖排：按列组织字符，列高受限时换列 */
 function layoutVerticalTextColumns(
  value: string,
@@ -313,7 +373,8 @@ function drawTextContentInBox(
  const vAlign = elem.verticalAlign ?? 'middle';

  if (isVertical) {
-    const columns = layoutVerticalTextColumns(String(value), writableH, lineHeight, wordWrap);
+    let columns = layoutVerticalTextColumns(String(value), writableH, lineHeight, wordWrap);
+    columns = applyVerticalColumnLimit(columns, elem.textMaxLines, elem.textEllipsis === true);
    const totalColumnsWidth = columns.length * columnWidth;

    let startX: number;
@@ -348,7 +409,14 @@ function drawTextContentInBox(
      }
    }
  } else {
-    const lines = layoutHorizontalTextLines(ctx, String(value), writableW, wordWrap);
+    let lines = layoutHorizontalTextLines(ctx, String(value), writableW, wordWrap);
+    lines = applyHorizontalLineLimit(
+      ctx,
+      lines,
+      elem.textMaxLines,
+      elem.textEllipsis === true,
+      writableW
+    );
    const totalTextHeight = lines.length * lineHeight;

    let textX = boxX + padPx.left;
@@ -422,12 +490,17 @@ function drawTableGridLines(
  ctx.beginPath();

  const inset = borderW / 2;
-  ctx.rect(
-    alignStrokeCoord(left + inset),
-    alignStrokeCoord(top + inset),
-    Math.max(0, width - borderW),
-    Math.max(0, height - borderW)
-  );
+  const right = left + width;
+  const bottom = top + height;
+  // 外框：描边完全落在网格区域内，避免 clip / 画布边缘裁切右、下边
+  ctx.moveTo(alignStrokeCoord(left + inset), alignStrokeCoord(top + inset));
+  ctx.lineTo(alignStrokeCoord(right - inset), alignStrokeCoord(top + inset));
+  ctx.moveTo(alignStrokeCoord(right - inset), alignStrokeCoord(top + inset));
+  ctx.lineTo(alignStrokeCoord(right - inset), alignStrokeCoord(bottom - inset));
+  ctx.moveTo(alignStrokeCoord(right - inset), alignStrokeCoord(bottom - inset));
+  ctx.lineTo(alignStrokeCoord(left + inset), alignStrokeCoord(bottom - inset));
+  ctx.moveTo(alignStrokeCoord(left + inset), alignStrokeCoord(bottom - inset));
+  ctx.lineTo(alignStrokeCoord(left + inset), alignStrokeCoord(top + inset));

  for (let r = 1; r < rows; r++) {
    const y = alignStrokeCoord(rowBounds[r]);
@@ -471,23 +544,27 @@ async function drawTableElement(
  rowData: RecordRow | null,
  rowIndex: number,
  variableDefaults: Record<string, string> | null | undefined,
-  mode: ContentResolveMode
+  mode: ContentResolveMode,
+  colorCtx: RenderColorContext
 ) {
-  const radii = resolveCornerRadiiPx(elem, scale, ew, eh);
-  const sides = resolveBorderSides(elem);
+  const renderElem = resolveElementColorsForRender(elem, colorCtx);
+  const radii = resolveCornerRadiiPx(renderElem, scale, ew, eh);
+  const sides = resolveBorderSides(renderElem);

-  drawElementFill(ctx, ex, ey, ew, eh, elem, radii);
-  drawElementBorders(ctx, ex, ey, ew, eh, radii, sides, elem, scale);
-
-  const { rowBounds, colBounds } = buildTableGridBoundariesPx(elem, scale, ex, ey);
+  const drawCellContent = async (
+    targetCtx: CanvasRenderingContext2D,
+    ox: number,
+    oy: number
+  ) => {
+    const { rowBounds, colBounds } = buildTableGridBoundariesPx(elem, scale, ox, oy);
    const gridX = colBounds[0];
    const gridY = rowBounds[0];
    const gridW = colBounds[colBounds.length - 1] - gridX;
    const gridH = rowBounds[rowBounds.length - 1] - gridY;
-  ctx.save();
-  ctx.beginPath();
-  ctx.rect(gridX, gridY, gridW, gridH);
-  ctx.clip();
+    targetCtx.save();
+    targetCtx.beginPath();
+    targetCtx.rect(gridX, gridY, gridW, gridH);
+    targetCtx.clip();

    const anchors = iterTableCells(elem);
    for (const { row, col } of anchors) {
@@ -496,17 +573,21 @@ async function drawTableElement(
        row,
        col,
        scale,
-      ex,
-      ey
+        ox,
+        oy
      );

      const cellData = getCellData(elem, row, col);
-    if (cellData?.backgroundColor && cellData.backgroundColor !== 'transparent') {
-      ctx.fillStyle = cellData.backgroundColor;
-      ctx.fillRect(cellX, cellY, cellW, cellH);
+      const cellBg = resolveRenderableColor(cellData?.backgroundColor, colorCtx);
+      if (cellBg && cellBg !== 'transparent') {
+        targetCtx.fillStyle = cellBg;
+        targetCtx.fillRect(cellX, cellY, cellW, cellH);
      }

-    const textElem = getEffectiveCellStyle(elem, row, col);
+      const textElem = resolveElementColorsForRender(
+        getEffectiveCellStyle(elem, row, col),
+        colorCtx
+      );
      if (!textElem.content.trim()) continue;

      const cellValue = resolveElementValue(textElem, rowData, rowIndex, variableDefaults, mode);
@@ -514,7 +595,7 @@ async function drawTableElement(
      if (!displayText) continue;

      drawTextContentInBox(
-      ctx,
+        targetCtx,
        {
          ...textElem,
          padding: 0,
@@ -532,8 +613,16 @@ async function drawTableElement(
      );
    }

-  drawTableGridLines(ctx, elem, ex, ey, scale);
-  ctx.restore();
+    targetCtx.restore();
+  };
+
+  await composeElementLayer(ctx, renderElem, ex, ey, ew, eh, scale, async (layerCtx, ox, oy, ow, oh) => {
+    drawElementFill(layerCtx, ox, oy, ow, oh, renderElem, radii);
+    await drawCellContent(layerCtx, ox, oy);
+    drawElementBorders(layerCtx, ox, oy, ow, oh, radii, sides, renderElem, scale);
+  });
+
+  drawTableGridLines(ctx, renderElem, ex, ey, scale);
 }

 function drawImagePlaceholder(
@@ -568,6 +657,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 */
@@ -575,6 +668,138 @@ export interface RenderLabelOptions {
  jpegQuality?: number;
  /** 为 false 时不裁剪到画布边界（用于拖动浮层完整显示元素） */
  clipToCanvas?: boolean;
+  /** 排版/印刷色彩模式 */
+  printColorMode?: PrintColorMode;
+}
+
+export type ReferenceBackgroundRenderOptions = Pick<
+  RenderLabelOptions,
+  'referenceBackground' | 'referenceBackgroundOpacity' | 'referenceBackgroundFit'
+>;
+
+type ReferenceBackgroundTemplate = Pick<
+  LabelTemplate,
+  | 'previewReferenceBackground'
+  | 'previewReferenceBackgroundOpacity'
+  | 'previewReferenceBackgroundFit'
+  | 'enablePreviewReferenceBackground'
+>;
+
+function buildReferenceBackgroundRenderOptions(
+  template: ReferenceBackgroundTemplate
+): ReferenceBackgroundRenderOptions {
+  if (!template.previewReferenceBackground) {
+    return {};
+  }
+  if (template.enablePreviewReferenceBackground === false) {
+    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 {};
+  }
+  if (!template.previewReferenceBackground) {
+    return {};
+  }
+  return {
+    referenceBackground: template.previewReferenceBackground,
+    referenceBackgroundOpacity: template.previewReferenceBackgroundOpacity ?? 100,
+    referenceBackgroundFit: template.previewReferenceBackgroundFit ?? 'cover',
+  };
+}
+
+export type LayoutPageBackgroundRenderOptions = {
+  background: string;
+  opacity: number;
+  fit: 'contain' | 'cover' | 'fill';
+};
+
+type LayoutPageBackgroundTemplate = Pick<
+  LabelTemplate,
+  | 'layoutPageBackground'
+  | 'layoutPageBackgroundOpacity'
+  | 'layoutPageBackgroundFit'
+  | 'enableLayoutPageBackground'
+  | 'includeLayoutPageBackgroundInOutput'
+>;
+
+function buildLayoutPageBackgroundRenderOptions(
+  template: LayoutPageBackgroundTemplate,
+  forOutput: boolean
+): LayoutPageBackgroundRenderOptions | null {
+  if (!template.layoutPageBackground) return null;
+  if (!forOutput && template.enableLayoutPageBackground === false) return null;
+  if (forOutput && !template.includeLayoutPageBackgroundInOutput) return null;
+  return {
+    background: template.layoutPageBackground,
+    opacity: template.layoutPageBackgroundOpacity ?? 100,
+    fit: template.layoutPageBackgroundFit ?? 'cover',
+  };
+}
+
+/** 排版预览：整页背景渲染参数 */
+export function resolveLayoutPageBackgroundForPreview(
+  template: LayoutPageBackgroundTemplate
+): LayoutPageBackgroundRenderOptions | null {
+  return buildLayoutPageBackgroundRenderOptions(template, false);
+}
+
+/** PDF / 打印：整页背景渲染参数 */
+export function resolveLayoutPageBackgroundForOutput(
+  template: LayoutPageBackgroundTemplate
+): LayoutPageBackgroundRenderOptions | null {
+  return buildLayoutPageBackgroundRenderOptions(template, true);
+}
+
+/** 将整页背景渲染为 data URL（白底 + 背景图） */
+export async function renderLayoutPageBackgroundDataUrl(
+  paperWidthMm: number,
+  paperHeightMm: number,
+  options: LayoutPageBackgroundRenderOptions,
+  scale = 4,
+  imageFormat: 'png' | 'jpeg' = 'png',
+  printColorMode: PrintColorMode = 'rgb'
+): Promise<string | null> {
+  const canvas = document.createElement('canvas');
+  canvas.width = Math.max(1, Math.round(paperWidthMm * scale));
+  canvas.height = Math.max(1, Math.round(paperHeightMm * scale));
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return null;
+
+  ctx.fillStyle = '#ffffff';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  const img = await loadImageOrNull(options.background);
+  if (!img) return null;
+
+  ctx.save();
+  ctx.globalAlpha = Math.min(1, Math.max(0, options.opacity / 100));
+  drawImageWithFit(ctx, img, 0, 0, canvas.width, canvas.height, options.fit);
+  ctx.restore();
+
+  applyPrintColorModeToCanvas(canvas, printColorMode);
+
+  return imageFormat === 'jpeg'
+    ? canvas.toDataURL('image/jpeg', 0.95)
+    : canvas.toDataURL('image/png');
 }

 /** 离屏渲染标签为 PNG data URL */
@@ -589,12 +814,24 @@ 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,
    clipToCanvas = true,
+    printColorMode = 'rgb',
  } = options;

+  const colorCtx: RenderColorContext = {
+    printColorMode,
+    row: rowData,
+    variableDefaults,
+    mode,
+    rowIndex,
+  };
+
  const scale = scaleOption;
  const canvas = document.createElement('canvas');
  canvas.width = Math.max(1, Math.round(widthMm * scale));
@@ -618,6 +855,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();
@@ -641,31 +888,34 @@ export async function renderLabelToDataUrl(options: RenderLabelOptions): Promise
      continue;
    }

+    const renderElem = resolveElementColorsForRender(elem, colorCtx);
+
    ctx.save();
    applyElementRotation(ctx, ex, ey, ew, eh, elem.rotation);

    if (elem.type === 'text') {
-      const radii = resolveCornerRadiiPx(elem, scale, ew, eh);
-      const sides = resolveBorderSides(elem);
+      const radii = resolveCornerRadiiPx(renderElem, scale, ew, eh);
+      const sides = resolveBorderSides(renderElem);

-      ctx.save();
-      traceRoundedRect(ctx, ex, ey, ew, eh, radii);
-      ctx.clip();
-
-      drawElementFill(ctx, ex, ey, ew, eh, elem, radii);
-
-      drawTextContentInBox(ctx, elem, ex, ey, ew, eh, String(value), scale);
-
-      ctx.restore();
-      drawElementBorders(ctx, ex, ey, ew, eh, radii, sides, elem, scale);
+      await composeElementLayer(ctx, renderElem, ex, ey, ew, eh, scale, async (layerCtx, ox, oy, ow, oh) => {
+        drawElementFill(layerCtx, ox, oy, ow, oh, renderElem, radii);
+        drawTextContentInBox(layerCtx, renderElem, ox, oy, ow, oh, String(value), scale);
+        drawElementBorders(layerCtx, ox, oy, ow, oh, radii, sides, renderElem, scale);
+      });
    } else if (elem.type === 'barcode') {
      try {
-        drawElementChrome(ctx, ex, ey, ew, eh, elem, scale);
-        const inner = getPaddedRectPx(ex, ey, ew, eh, elem, scale);
-        const tempCanvas = document.createElement('canvas');
+        const radii = resolveCornerRadiiPx(renderElem, scale, ew, eh);
+        const sides = resolveBorderSides(renderElem);
        const barcodeValue = value ? String(value).trim() : mode === 'design' ? 'SAMPLE' : '';

-        if (barcodeValue) {
+        await composeElementLayer(ctx, renderElem, ex, ey, ew, eh, scale, async (layerCtx, ox, oy, ow, oh) => {
+          drawElementFill(layerCtx, ox, oy, ow, oh, renderElem, radii);
+          if (!barcodeValue) {
+            drawElementBorders(layerCtx, ox, oy, ow, oh, radii, sides, renderElem, scale);
+            return;
+          }
+          const inner = getPaddedRectPx(ox, oy, ow, oh, renderElem, scale);
+          const tempCanvas = document.createElement('canvas');
          JsBarcode(tempCanvas, barcodeValue, {
            format: elem.barcodeFormat || 'CODE128',
            width: 2,
@@ -675,13 +925,13 @@ export async function renderLabelToDataUrl(options: RenderLabelOptions): Promise
            margin: 2,
            background: GENERATOR_TRANSPARENT_BG,
          });
-
-        ctx.drawImage(tempCanvas, inner.x, inner.y, inner.w, inner.h);
-        }
+          layerCtx.drawImage(tempCanvas, inner.x, inner.y, inner.w, inner.h);
+          drawElementBorders(layerCtx, ox, oy, ow, oh, radii, sides, renderElem, scale);
+        });
      } catch (error) {
        console.warn('Barcode drawing failed', error);
        if (mode === 'design') {
-          const inner = getPaddedRectPx(ex, ey, ew, eh, elem, scale);
+          const inner = getPaddedRectPx(ex, ey, ew, eh, renderElem, scale);
          ctx.fillStyle = '#f3f4f6';
          ctx.fillRect(inner.x, inner.y, inner.w, inner.h);
          ctx.strokeStyle = '#ef4444';
@@ -695,11 +945,17 @@ export async function renderLabelToDataUrl(options: RenderLabelOptions): Promise
      }
    } else if (elem.type === 'qrcode') {
      try {
-        drawElementChrome(ctx, ex, ey, ew, eh, elem, scale);
-        const inner = getPaddedRectPx(ex, ey, ew, eh, elem, scale);
+        const radii = resolveCornerRadiiPx(renderElem, scale, ew, eh);
+        const sides = resolveBorderSides(renderElem);
        const qrValue = value ? String(value).trim() : mode === 'design' ? 'SAMPLE QR' : '';

-        if (qrValue) {
+        await composeElementLayer(ctx, renderElem, ex, ey, ew, eh, scale, async (layerCtx, ox, oy, ow, oh) => {
+          drawElementFill(layerCtx, ox, oy, ow, oh, renderElem, radii);
+          if (!qrValue) {
+            drawElementBorders(layerCtx, ox, oy, ow, oh, radii, sides, renderElem, scale);
+            return;
+          }
+          const inner = getPaddedRectPx(ox, oy, ow, oh, renderElem, scale);
          const tempCanvas = document.createElement('canvas');
          await QRCode.toCanvas(tempCanvas, qrValue, {
            width: Math.max(64, inner.w),
@@ -709,13 +965,13 @@ export async function renderLabelToDataUrl(options: RenderLabelOptions): Promise
              light: GENERATOR_TRANSPARENT_BG,
            },
          });
-
-        ctx.drawImage(tempCanvas, inner.x, inner.y, inner.w, inner.h);
-        }
+          layerCtx.drawImage(tempCanvas, inner.x, inner.y, inner.w, inner.h);
+          drawElementBorders(layerCtx, ox, oy, ow, oh, radii, sides, renderElem, scale);
+        });
      } catch (error) {
        console.warn('QR code drawing failed', error);
        if (mode === 'design') {
-          const inner = getPaddedRectPx(ex, ey, ew, eh, elem, scale);
+          const inner = getPaddedRectPx(ex, ey, ew, eh, renderElem, scale);
          ctx.fillStyle = '#f3f4f6';
          ctx.fillRect(inner.x, inner.y, inner.w, inner.h);
          ctx.strokeStyle = '#ef4444';
@@ -732,13 +988,38 @@ export async function renderLabelToDataUrl(options: RenderLabelOptions): Promise
        continue;
      }

-      drawElementChrome(ctx, ex, ey, ew, eh, elem, scale);
-      const inner = getPaddedRectPx(ex, ey, ew, eh, elem, scale);
+      const radii = resolveCornerRadiiPx(renderElem, scale, ew, eh);
+      const sides = resolveBorderSides(renderElem);
+      const hasMask = isElementMaskActive(elem.mask);
+
+      if (hasMask) {
+        await composeElementLayer(ctx, renderElem, ex, ey, ew, eh, scale, async (layerCtx, ox, oy, ow, oh) => {
+          drawElementFill(layerCtx, ox, oy, ow, oh, renderElem, radii);
+          const inner = getPaddedRectPx(ox, oy, ow, oh, renderElem, scale);
+          if (img) {
+            drawImageWithFit(
+              layerCtx,
+              img,
+              inner.x,
+              inner.y,
+              inner.w,
+              inner.h,
+              elem.imageFit ?? 'contain'
+            );
+          } else {
+            drawImagePlaceholder(layerCtx, inner.x, inner.y, inner.w, inner.h, '图片');
+          }
+          drawElementBorders(layerCtx, ox, oy, ow, oh, radii, sides, renderElem, scale);
+        });
+      } else {
+        drawElementChrome(ctx, ex, ey, ew, eh, renderElem, scale);
+        const inner = getPaddedRectPx(ex, ey, ew, eh, renderElem, scale);
        if (img) {
          drawImageWithFit(ctx, img, inner.x, inner.y, inner.w, inner.h, elem.imageFit ?? 'contain');
        } else {
          drawImagePlaceholder(ctx, inner.x, inner.y, inner.w, inner.h, '图片');
        }
+      }
    } else if (elem.type === 'table') {
      await drawTableElement(
        ctx,
@@ -751,7 +1032,8 @@ export async function renderLabelToDataUrl(options: RenderLabelOptions): Promise
        rowData,
        rowIndex,
        variableDefaults,
-        mode
+        mode,
+        colorCtx
      );
    }

@@ -760,6 +1042,8 @@ export async function renderLabelToDataUrl(options: RenderLabelOptions): Promise

  ctx.restore();

+  applyPrintColorModeToCanvas(canvas, printColorMode);
+
  return imageFormat === 'jpeg'
    ? canvas.toDataURL('image/jpeg', jpegQuality)
    : canvas.toDataURL('image/png');
--- a/src/pdfExport.ts
+++ b/src/pdfExport.ts
@@ -1,6 +1,10 @@
 import { jsPDF } from 'jspdf';
 import type { PaperConfig, LabelTemplate, CutLineConfig } from './types';
 import { collectGridCutLinePositions, getCutLineChannel, getCutLineDashSegmentMm, getCutLineStrokeWidthMm, type PrintableLabel } from './utils';
+import {
+  resolveLayoutPageBackgroundForOutput,
+  renderLayoutPageBackgroundDataUrl,
+} from './labelRenderer';

 export interface PdfExportProgress {
  done: number;
@@ -26,6 +30,39 @@ const yieldToMain = () => new Promise<void>((resolve) => setTimeout(resolve, 0))

 const PAGE_RENDER_CONCURRENCY = 3;

+type PageBackgroundCache = { dataUrl: string | null; key: string | null };
+
+async function addPageBackgroundIfNeeded(
+  pdf: jsPDF,
+  template: LabelTemplate,
+  paper: PaperConfig,
+  paperW: number,
+  paperH: number,
+  imageFormat: 'PNG' | 'JPEG',
+  cache: PageBackgroundCache
+) {
+  const options = resolveLayoutPageBackgroundForOutput(template);
+  if (!options) return;
+
+  const printColorMode = paper.printColorMode ?? 'cmyk';
+  const key = `${options.background}|${options.opacity}|${options.fit}|${paperW}|${paperH}|${imageFormat}|${printColorMode}`;
+  if (cache.key !== key) {
+    cache.key = key;
+    cache.dataUrl = await renderLayoutPageBackgroundDataUrl(
+      paperW,
+      paperH,
+      options,
+      4,
+      imageFormat === 'JPEG' ? 'jpeg' : 'png',
+      printColorMode
+    );
+  }
+
+  if (cache.dataUrl) {
+    pdf.addImage(cache.dataUrl, imageFormat, 0, 0, paperW, paperH, undefined, 'FAST');
+  }
+}
+
 function parseColorToRgb(color: string): [number, number, number] {
  const c = color.trim();
  if (c.startsWith('#')) {
@@ -141,6 +178,7 @@ export async function exportLabelsPdfAsync(options: AsyncExportLabelsPdfOptions)

  let done = 0;
  let progressTick = 0;
+  const pageBgCache: PageBackgroundCache = { dataUrl: null, key: null };

  const report = (page: number, phase: PdfExportProgress['phase']) => {
    onProgress?.({ done, total: totalLabels, page, totalPages, phase });
@@ -151,6 +189,8 @@ export async function exportLabelsPdfAsync(options: AsyncExportLabelsPdfOptions)
      pdf.addPage([paperW, paperH], orientation);
    }

+    await addPageBackgroundIfNeeded(pdf, template, paper, paperW, paperH, imageFormat, pageBgCache);
+
    const pageRows = printablePages[pIdx];
    const gridRows = Math.ceil(pageRows.length / gridCols);
    const cutChannel = getCutLineChannel(paper.columnGap, paper.rowGap, cutLine);
@@ -242,6 +282,7 @@ export async function exportLabelsPdfBlobAsync(

  let done = 0;
  let progressTick = 0;
+  const pageBgCache: PageBackgroundCache = { dataUrl: null, key: null };

  const report = (page: number, phase: PdfExportProgress['phase']) => {
    onProgress?.({ done, total: totalLabels, page, totalPages, phase });
@@ -252,6 +293,8 @@ export async function exportLabelsPdfBlobAsync(
      pdf.addPage([paperW, paperH], orientation);
    }

+    await addPageBackgroundIfNeeded(pdf, template, paper, paperW, paperH, imageFormat, pageBgCache);
+
    const pageRows = printablePages[pIdx];
    const gridRows = Math.ceil(pageRows.length / gridCols);
    const cutChannel = getCutLineChannel(paper.columnGap, paper.rowGap, cutLine);
--- a/src/tableUtils.ts
+++ b/src/tableUtils.ts
@@ -56,6 +56,36 @@ export function getTableColWidths(elem: TemplateElement): number[] {
  return Array.from({ length: cols }, () => even);
 }

+/** 调整末项（必要时向前）使轨道总和精确等于 targetTotal */
+function absorbTrackSumDiff(tracks: number[], targetTotal: number, min = 0.5): number[] {
+  const result = tracks.map((t) => round1(Math.max(min, t)));
+  let diff = round1(targetTotal - result.reduce((a, b) => a + b, 0));
+  for (let i = result.length - 1; i >= 0 && diff !== 0; i--) {
+    const adjusted = round1(Math.max(min, result[i] + diff));
+    const applied = round1(adjusted - result[i]);
+    result[i] = adjusted;
+    diff = round1(diff - applied);
+  }
+  return result;
+}
+
+/** 按比例缩放轨道，严格使总和等于 targetTotal（不放大目标总量） */
+function scaleTracksToExactTotal(tracks: number[], targetTotal: number, min = 0.5): number[] {
+  if (tracks.length === 0) return [];
+  const count = tracks.length;
+  const floor = count * min;
+  if (targetTotal <= floor + 0.01) {
+    return absorbTrackSumDiff(Array.from({ length: count }, () => min), targetTotal, min);
+  }
+  const current = tracks.reduce((a, b) => a + b, 0);
+  if (current <= 0) {
+    const even = round1(targetTotal / count);
+    return absorbTrackSumDiff(Array.from({ length: count }, () => even), targetTotal, min);
+  }
+  const scaled = tracks.map((t) => round1(Math.max(min, (t / current) * targetTotal)));
+  return absorbTrackSumDiff(scaled, targetTotal, min);
+}
+
 /** 将轨道尺寸总和调整为 targetTotal（保持相对比例，末项吸收取整误差） */
 function scaleTracksToTotal(tracks: number[], targetTotal: number, min = 0.5): number[] {
  if (tracks.length === 0) return [];
@@ -73,6 +103,48 @@ function scaleTracksToTotal(tracks: number[], targetTotal: number, min = 0.5): n
  return scaled;
 }

+/** 调整单条轨道尺寸，保持轨道总和不变；优先由 index 之后的轨道吸收差值 */
+function resizeTrackKeepingTotal(
+  tracks: number[],
+  index: number,
+  sizeMm: number,
+  min = 0.5
+): number[] {
+  if (index < 0 || index >= tracks.length) return tracks;
+  const total = round1(tracks.reduce((a, b) => a + b, 0));
+  if (tracks.length === 1) {
+    return [round1(Math.max(min, Math.min(total, sizeMm)))];
+  }
+
+  const beforeSum = round1(tracks.slice(0, index).reduce((a, b) => a + b, 0));
+  const afterCount = tracks.length - index - 1;
+  const beforeCount = index;
+
+  const maxForIndex =
+    afterCount > 0
+      ? round1(total - beforeSum - afterCount * min)
+      : round1(total - beforeCount * min);
+  const newSize = round1(Math.max(min, Math.min(maxForIndex, sizeMm)));
+  const result = [...tracks];
+  result[index] = newSize;
+
+  if (afterCount > 0) {
+    const afterRemaining = round1(total - beforeSum - newSize);
+    const scaledAfter = scaleTracksToExactTotal(tracks.slice(index + 1), afterRemaining, min);
+    for (let i = 0; i < scaledAfter.length; i++) {
+      result[index + 1 + i] = scaledAfter[i];
+    }
+  } else if (beforeCount > 0) {
+    const beforeRemaining = round1(total - newSize);
+    const scaledBefore = scaleTracksToExactTotal(tracks.slice(0, index), beforeRemaining, min);
+    for (let i = 0; i < scaledBefore.length; i++) {
+      result[i] = scaledBefore[i];
+    }
+  }
+
+  return absorbTrackSumDiff(result, total, min);
+}
+
 /** 将 inner 区域均分给 count 条轨道（末项吸收取整误差） */
 function distributeTracks(total: number, count: number, min = 0.5): number[] {
  if (count <= 0) return [];
@@ -132,8 +204,14 @@ export function scaleTableTracks(
  const scaleW = newInnerW / startInnerW;
  const scaleH = newInnerH / startInnerH;

-  const tableRowHeights = startRowHeights.map((h) => round1(Math.max(0.5, h * scaleH)));
-  const tableColWidths = startColWidths.map((w) => round1(Math.max(0.5, w * scaleW)));
+  const tableRowHeights = scaleTracksToExactTotal(
+    startRowHeights.map((h) => h * scaleH),
+    newInnerH
+  );
+  const tableColWidths = scaleTracksToExactTotal(
+    startColWidths.map((w) => w * scaleW),
+    newInnerW
+  );

  return {
    ...elem,
@@ -456,14 +534,27 @@ export function updateTableRowHeight(
  rowIndex: number,
  heightMm: number
 ): TemplateElement {
-  const rowHeights = [...getTableRowHeights(elem)];
-  if (rowIndex < 0 || rowIndex >= rowHeights.length) return elem;
-  rowHeights[rowIndex] = Math.max(0.5, round1(heightMm));
+  if (rowIndex < 0 || rowIndex >= getTableRows(elem)) return elem;
  const pad = resolvePaddingMm(elem);
+  const innerH = getTableInnerSizeMm(elem).height;
+  const rowHeights = scaleTracksToExactTotal(getTableRowHeights(elem), innerH);
+  const isLast = rowIndex === rowHeights.length - 1;
+
+  if (isLast) {
+    const nextHeights = [...rowHeights];
+    nextHeights[rowIndex] = round1(Math.max(0.5, heightMm));
+    const newInnerH = round1(nextHeights.reduce((a, b) => a + b, 0));
    return {
      ...elem,
-    tableRowHeights: rowHeights,
-    height: round1(rowHeights.reduce((a, b) => a + b, 0) + pad.top + pad.bottom),
+      tableRowHeights: nextHeights,
+      height: round1(newInnerH + pad.top + pad.bottom),
+    };
+  }
+
+  return {
+    ...elem,
+    tableRowHeights: resizeTrackKeepingTotal(rowHeights, rowIndex, heightMm),
+    height: elem.height,
  };
 }

@@ -472,14 +563,55 @@ export function updateTableColWidth(
  colIndex: number,
  widthMm: number
 ): TemplateElement {
-  const colWidths = [...getTableColWidths(elem)];
-  if (colIndex < 0 || colIndex >= colWidths.length) return elem;
-  colWidths[colIndex] = Math.max(0.5, round1(widthMm));
+  if (colIndex < 0 || colIndex >= getTableCols(elem)) return elem;
  const pad = resolvePaddingMm(elem);
+  const innerW = getTableInnerSizeMm(elem).width;
+  const colWidths = scaleTracksToExactTotal(getTableColWidths(elem), innerW);
+  const isLast = colIndex === colWidths.length - 1;
+
+  if (isLast) {
+    const nextWidths = [...colWidths];
+    nextWidths[colIndex] = round1(Math.max(0.5, widthMm));
+    const newInnerW = round1(nextWidths.reduce((a, b) => a + b, 0));
    return {
      ...elem,
-    tableColWidths: colWidths,
-    width: round1(colWidths.reduce((a, b) => a + b, 0) + pad.left + pad.right),
+      tableColWidths: nextWidths,
+      width: round1(newInnerW + pad.left + pad.right),
+    };
+  }
+
+  return {
+    ...elem,
+    tableColWidths: resizeTrackKeepingTotal(colWidths, colIndex, widthMm),
+    width: elem.width,
+  };
+}
+
+/** 在现有元素高度内均分行高 */
+export function equalizeTableRowHeights(elem: TemplateElement): TemplateElement {
+  const rows = getTableRows(elem);
+  const innerH = getTableInnerSizeMm(elem).height;
+  return {
+    ...elem,
+    tableRowHeights: scaleTracksToExactTotal(
+      Array.from({ length: rows }, () => innerH / rows),
+      innerH
+    ),
+    height: elem.height,
+  };
+}
+
+/** 在现有元素宽度内均分列宽 */
+export function equalizeTableColWidths(elem: TemplateElement): TemplateElement {
+  const cols = getTableCols(elem);
+  const innerW = getTableInnerSizeMm(elem).width;
+  return {
+    ...elem,
+    tableColWidths: scaleTracksToExactTotal(
+      Array.from({ length: cols }, () => innerW / cols),
+      innerW
+    ),
+    width: elem.width,
  };
 }

@@ -531,6 +663,8 @@ export function getEffectiveCellStyle(
    textWritingMode: pick('textWritingMode', elem.textWritingMode ?? 'horizontal'),
    textColor: pick('textColor', elem.textColor ?? '#111827'),
    wordWrap: cell?.wordWrap ?? elem.wordWrap !== false,
+    textMaxLines: pick('textMaxLines', elem.textMaxLines),
+    textEllipsis: pick('textEllipsis', elem.textEllipsis ?? false),
    fontFamily: pick('fontFamily', elem.fontFamily),
    textFormat: pick('textFormat', elem.textFormat ?? 'text'),
    decimalPlaces: pick('decimalPlaces', elem.decimalPlaces ?? 2),
@@ -539,6 +673,7 @@ export function getEffectiveCellStyle(
    textSplitDelimiter: cell?.textSplitDelimiter ?? elem.textSplitDelimiter,
    textSplitIndex: cell?.textSplitIndex ?? elem.textSplitIndex,
    textExtractLength: cell?.textExtractLength ?? elem.textExtractLength,
+    textExtractInverse: cell?.textExtractInverse ?? elem.textExtractInverse,
    textDisplayPrefix: cell?.textDisplayPrefix ?? elem.textDisplayPrefix,
    textDisplaySuffix: cell?.textDisplaySuffix ?? elem.textDisplaySuffix,
    backgroundColor: cell?.backgroundColor,
@@ -561,6 +696,8 @@ const CELL_TEXT_PATCH_KEYS: (keyof TableCellData)[] = [
  'textColor',
  'backgroundColor',
  'wordWrap',
+  'textMaxLines',
+  'textEllipsis',
  'fontFamily',
  'textFormat',
  'decimalPlaces',
@@ -569,6 +706,7 @@ const CELL_TEXT_PATCH_KEYS: (keyof TableCellData)[] = [
  'textSplitDelimiter',
  'textSplitIndex',
  'textExtractLength',
+  'textExtractInverse',
  'textDisplayPrefix',
  'textDisplaySuffix',
 ];
--- a/src/types.ts
+++ b/src/types.ts
@@ -10,18 +10,41 @@ export const TEXT_EXTRACT_MODE_LABELS: Record<TextExtractMode, string> = {
  prefix: '前 N 位',
  suffix: '后 N 位',
 };
+
+/** 变量/内容值提取配置（元素、表格单元格、显示条件等共用） */
+export interface ValueExtractConfig {
+  textExtractMode?: TextExtractMode;
+  textSplitDelimiter?: string;
+  textSplitIndex?: number;
+  textExtractLength?: number;
+  /** 反选：从原值中去掉「显示前缀 + 提取段 + 显示后缀」 */
+  textExtractInverse?: boolean;
+  textDisplayPrefix?: string;
+  textDisplaySuffix?: string;
+}
+
 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';

-export interface VisibilityRule {
+export interface VisibilityRule extends ValueExtractConfig {
  /** 条件对象，默认 variable */
  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 +59,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';
@@ -63,6 +88,10 @@ export interface TableCellData {
  textColor?: string;
  backgroundColor?: string;
  wordWrap?: boolean;
+  /** 最大显示行数（横排为行、竖排为列）；未设置或 0 表示不限制 */
+  textMaxLines?: number;
+  /** 超出最大行数时末行/末列显示省略号 */
+  textEllipsis?: boolean;
  fontFamily?: 'sans' | 'serif' | 'mono';
  textFormat?: TextFormat;
  decimalPlaces?: number;
@@ -71,6 +100,8 @@ export interface TableCellData {
  textSplitDelimiter?: string;
  textSplitIndex?: number;
  textExtractLength?: number;
+  /** 反选：从原值中去掉「显示前缀 + 提取段 + 显示后缀」 */
+  textExtractInverse?: boolean;
  textDisplayPrefix?: string;
  textDisplaySuffix?: string;
 }
@@ -79,6 +110,8 @@ export interface TemplateElement {
  id: string;
  type: 'text' | 'barcode' | 'qrcode' | 'image' | 'table';
  name: string;
+  /** 用户是否手动修改过图层名称；为 true 时不再根据内容自动同步名称 */
+  nameCustomized?: boolean;
  x: number; // in mm
  y: number; // in mm
  width: number; // in mm
@@ -102,6 +135,10 @@ export interface TemplateElement {
  verticalAlign?: 'top' | 'middle' | 'bottom';
  /** 是否自动换行，仅 type=text，默认 true */
  wordWrap?: boolean;
+  /** 最大显示行数（横排为行、竖排为列）；未设置或 0 表示不限制，仅 type=text */
+  textMaxLines?: number;
+  /** 超出最大行数时显示省略号，仅 type=text */
+  textEllipsis?: boolean;
  /** 文本排列方向，仅 type=text，默认 horizontal */
  textWritingMode?: 'horizontal' | 'vertical';
  fontWeight: 'normal' | 'bold';
@@ -131,6 +168,8 @@ export interface TemplateElement {
  paddingBottom?: number;
  paddingLeft?: number;
  locked?: boolean;
+  /** 图层是否隐藏；隐藏后在预览、导出、打印及画布中均不显示 */
+  hidden?: boolean;
  /** 图片缩放方式，仅 type=image 时有效 */
  imageFit?: 'contain' | 'cover' | 'fill';
  /** 默认图片 URL 或 data URI；主图加载失败时使用，仅 type=image 时有效 */
@@ -151,6 +190,8 @@ export interface TemplateElement {
  textSplitIndex?: number;
  /** 前 N / 后 N 位提取时的位数 */
  textExtractLength?: number;
+  /** 反选：从原值中去掉「显示前缀 + 提取段 + 显示后缀」 */
+  textExtractInverse?: boolean;
  /** 提取后在显示文本前追加的前缀字符，仅 type=text；不参与内容值条件 */
  textDisplayPrefix?: string;
  /** 提取后在显示文本后追加的后缀字符，仅 type=text；不参与内容值条件 */
@@ -190,6 +231,37 @@ export interface TemplateElement {
  tableBorderWidth?: number;
  /** 单元格网格线颜色，仅 type=table */
  tableBorderColor?: string;
+  /** 图层蒙版；在预览与导出时裁剪元素可见区域 */
+  mask?: ElementMaskConfig;
+}
+
+export type ElementMaskShape = 'rect' | 'image';
+
+export interface ElementMaskConfig {
+  /** 是否启用蒙版 */
+  enabled?: boolean;
+  /** 蒙版形状：矩形矢量区域或图片 alpha */
+  type?: ElementMaskShape;
+  /** 相对元素左上角的 X 偏移 (mm) */
+  x?: number;
+  /** 相对元素左上角的 Y 偏移 (mm) */
+  y?: number;
+  /** 蒙版区域宽度 (mm)，默认与元素同宽 */
+  width?: number;
+  /** 蒙版区域高度 (mm)，默认与元素同高 */
+  height?: number;
+  /** 圆角半径 (mm) */
+  borderRadius?: number;
+  borderRadiusTL?: number;
+  borderRadiusTR?: number;
+  borderRadiusBR?: number;
+  borderRadiusBL?: number;
+  /** 图片蒙版（data URI / URL），type=image 时使用 */
+  image?: string;
+  /** 图片蒙版在区域内的适应方式 */
+  imageFit?: 'contain' | 'cover' | 'fill';
+  /** include=保留蒙版区域内，exclude=保留区域外；默认 include */
+  mode?: 'include' | 'exclude';
 }

 export interface DataSourceMeta {
@@ -214,7 +286,7 @@ export type ExportRangeMode = 'all' | 'odd' | 'even' | 'custom';

 export interface ExportRangeConfig {
  mode: ExportRangeMode;
-  /** 自定义范围：1-based 序号，如 "1,3,5-10" */
+  /** 自定义范围：1-based 序号，如 "1,3,5-10"（排版过滤，不写入模板） */
  custom?: string;
 }

@@ -228,14 +300,51 @@ export interface LabelTemplate {
  variableList?: string[];
  /** 设计预览用：变量名 → 默认展示值 */
  variableDefaults?: Record<string, string>;
+  /** 数据过滤条件（写入模板）；全部满足的数据行才参与排版/导出 */
+  dataFilterRules?: VisibilityRule[];
  /** 整页排版配置（每模板独立） */
  paper?: PaperConfig;
  /** PDF 裁切参考线配置 */
  cutLine?: CutLineConfig;
+  /** 设计画布预览参考背景（URL / data URI） */
+  previewReferenceBackground?: string;
+  /** 预览参考背景不透明度 0–100，默认 100 */
+  previewReferenceBackgroundOpacity?: number;
+  /** 预览参考背景适应方式，默认 cover */
+  previewReferenceBackgroundFit?: 'contain' | 'cover' | 'fill';
+  /** 设计预览（画布、模板列表缩略图）是否显示参考背景，默认 true */
+  enablePreviewReferenceBackground?: boolean;
+  /** 生成 PDF / 打印 / 排版预览输出时是否绘制参考背景，默认 false */
+  includeReferenceBackgroundInOutput?: boolean;
+  /** 排版整页背景图（URL / data URI） */
+  layoutPageBackground?: string;
+  /** 排版整页背景不透明度 0–100，默认 100 */
+  layoutPageBackgroundOpacity?: number;
+  /** 排版整页背景适应方式，默认 cover */
+  layoutPageBackgroundFit?: 'contain' | 'cover' | 'fill';
+  /** 排版预览是否显示整页背景，默认 true */
+  enableLayoutPageBackground?: boolean;
+  /** PDF / 打印输出时是否绘制整页背景，默认 false */
+  includeLayoutPageBackgroundInOutput?: boolean;
+  /** 批量导出图片时的文件名模板，支持 {#SEQ}、{#INDEX}、{变量名}；留空则按序号补零命名 */
+  exportImageFileNamePattern?: string;
+  /** 批量导出图片：all=全部导出，conditional=按条件过滤 */
+  exportImageFilterMode?: ElementVisibilityMode;
+  /** 批量导出图片过滤条件；全部满足时才导出该枚标签 */
+  exportImageFilterRules?: VisibilityRule[];
 }

 export type PaperType = 'A4' | 'A5' | 'A6' | 'custom';

+/** 排版/印刷输出色彩模式 */
+export type PrintColorMode = 'rgb' | 'grayscale' | 'cmyk';
+
+export const PRINT_COLOR_MODE_LABELS: Record<PrintColorMode, string> = {
+  rgb: '标准（轻度印刷补偿）',
+  grayscale: '黑白（灰度）',
+  cmyk: 'CMYK 印刷模拟（推荐）',
+};
+
 export interface PaperConfig {
  type: PaperType;
  width: number; // in mm
@@ -248,6 +357,8 @@ export interface PaperConfig {
  columnGap: number; // in mm (horizontal spacing between labels)
  rowGap: number; // in mm (vertical spacing between labels)
  flow: 'top-bottom-left-right' | 'left-right-top-bottom'; // how cells flow
+  /** 排版预览与导出时的色彩模式，默认 rgb */
+  printColorMode?: PrintColorMode;
 }

 export interface RecordRow {
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -13,6 +13,7 @@ import {
  VisibilityRule,
  VisibilityOperator,
  VISIBILITY_OPERATOR_LABELS,
+  ValueExtractConfig,
 } from './types';

 const IMPORT_DATA_STORAGE_PREFIX = 'label_import_data_v2_';
@@ -27,6 +28,105 @@ export const VARIABLE_MAPPING_USE_ROW_INDEX = '__use_row_index__';

 export const VARIABLE_MAPPING_ROW_INDEX_LABEL = '数据序号';

+/** 粘贴副本时相对原位置的偏移 (mm) */
+export const PASTE_ELEMENT_OFFSET_MM = 2;
+
+/** 在标签画布上居中放置元素（mm，保留 1 位小数） */
+export function centerElementOnLabel(
+  labelWidth: number,
+  labelHeight: number,
+  elementWidth: number,
+  elementHeight: number
+): { x: number; y: number } {
+  const x = Math.round(((labelWidth - elementWidth) / 2) * 10) / 10;
+  const y = Math.round(((labelHeight - elementHeight) / 2) * 10) / 10;
+  return {
+    x: Math.max(0, x),
+    y: Math.max(0, y),
+  };
+}
+
+const AUTO_ELEMENT_NAME_RE = /^(文本|条形码|二维码|图片|表格) \d+$/;
+const MAX_LAYER_NAME_FROM_CONTENT = 40;
+
+/** 是否为新建时的默认图层名（含粘贴副本后缀） */
+export function isAutoGeneratedElementName(name: string): boolean {
+  const trimmed = name.trim();
+  if (!trimmed || trimmed === '未命名元素') return true;
+  if (AUTO_ELEMENT_NAME_RE.test(trimmed)) return true;
+  if (trimmed.endsWith(' 副本')) {
+    const base = trimmed.slice(0, -3).trim();
+    if (AUTO_ELEMENT_NAME_RE.test(base) || base === '未命名元素') return true;
+  }
+  return false;
+}
+
+/** 是否应根据内容自动同步图层名称 */
+export function shouldSyncElementNameFromContent(elem: TemplateElement): boolean {
+  if (elem.nameCustomized) return false;
+  return isAutoGeneratedElementName(elem.name);
+}
+
+/** 从元素内容推导图层显示名称 */
+export function deriveElementNameFromContent(
+  content: string,
+  type: TemplateElement['type']
+): string {
+  const trimmed = content.trim();
+  if (!trimmed) return '未命名元素';
+
+  if (type === 'image') {
+    if (trimmed.startsWith('data:')) return '图片';
+    const withoutVars = trimmed.replace(/\{[^}]+\}/g, '').trim();
+    if (withoutVars && /^https?:\/\//i.test(withoutVars)) {
+      try {
+        const path = withoutVars.split(/[?#]/)[0];
+        const segment = path.split('/').filter(Boolean).pop();
+        if (segment) {
+          return decodeURIComponent(segment).slice(0, MAX_LAYER_NAME_FROM_CONTENT);
+        }
+      } catch {
+        /* ignore */
+      }
+    }
+  }
+
+  const singleLine = trimmed.split(/\r?\n/)[0].trim();
+  if (!singleLine) return '未命名元素';
+  if (singleLine.startsWith('data:')) return type === 'image' ? '图片' : '未命名元素';
+  return singleLine.slice(0, MAX_LAYER_NAME_FROM_CONTENT);
+}
+
+/** 更新内容并在需要时同步图层名称 */
+export function withContentAndSyncedName(
+  elem: TemplateElement,
+  content: string
+): TemplateElement {
+  const updated = { ...elem, content };
+  if (!shouldSyncElementNameFromContent(elem)) return updated;
+  return {
+    ...updated,
+    name: deriveElementNameFromContent(content, elem.type),
+  };
+}
+
+/** 深拷贝元素并生成新 id，用于复制/粘贴 */
+export function cloneTemplateElementsForPaste(
+  elements: TemplateElement[],
+  pasteRepeat: number
+): TemplateElement[] {
+  const offset = PASTE_ELEMENT_OFFSET_MM * Math.max(1, pasteRepeat);
+  const stamp = Date.now();
+  return elements.map((element, index) => {
+    const cloned = JSON.parse(JSON.stringify(element)) as TemplateElement;
+    cloned.id = `${element.type}_${stamp}_${index}`;
+    cloned.name = `${element.name} 副本`;
+    cloned.x = Math.round((element.x + offset) * 10) / 10;
+    cloned.y = Math.round((element.y + offset) * 10) / 10;
+    return cloned;
+  });
+}
+
 export function toDataSourceMeta(data: ImportData): DataSourceMeta {
  return {
    fileName: data.fileName,
@@ -157,11 +257,67 @@ export const DEFAULT_EXPORT_RANGE: ExportRangeConfig = { mode: 'all' };
 export const exportRangeEquals = (a: ExportRangeConfig, b: ExportRangeConfig) =>
  a.mode === b.mode && (a.custom ?? '') === (b.custom ?? '');

+/** 模板数据过滤规则（仅 variable 目标） */
+export function resolveDataFilterRules(
+  template: Pick<LabelTemplate, 'dataFilterRules'>
+): VisibilityRule[] {
+  return resolveVariableFilterRules(template.dataFilterRules);
+}
+
+/** 按模板数据过滤条件筛选 0-based 行索引 */
+export function getDataFilteredIndices(
+  rows: RecordRow[],
+  template: Pick<LabelTemplate, 'dataFilterRules'>,
+  variableDefaults?: Record<string, string> | null
+): number[] {
+  const total = rows.length;
+  if (total <= 0) return [];
+  const rules = getActiveVisibilityRules(resolveDataFilterRules(template));
+  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)
+  );
+}
+
+/** 在候选行上应用排版过滤（奇偶/自定义序号，基于原始 1-based 行号） */
+export function getLayoutRangeIndices(
+  candidateIndices: number[],
+  totalRows: number,
+  range: ExportRangeConfig
+): number[] {
+  if (candidateIndices.length === 0) return [];
+  switch (range.mode) {
+    case 'odd':
+      return candidateIndices.filter((i) => (i + 1) % 2 === 1);
+    case 'even':
+      return candidateIndices.filter((i) => (i + 1) % 2 === 0);
+    case 'custom': {
+      const parsed = parseCustomExportRange(range.custom ?? '', totalRows);
+      const candidateSet = new Set(candidateIndices);
+      return parsed.filter((i) => candidateSet.has(i));
+    }
+    case 'all':
+    default:
+      return candidateIndices;
+  }
+}
+
+/** 按数据过滤 + 排版过滤得到最终 0-based 行索引（保持升序） */
+export function getExportRangeIndices(
+  rows: RecordRow[],
+  range: ExportRangeConfig,
+  template: Pick<LabelTemplate, 'dataFilterRules'>,
+  variableDefaults?: Record<string, string> | null
+): number[] {
+  const dataFiltered = getDataFilteredIndices(rows, template, variableDefaults);
+  return getLayoutRangeIndices(dataFiltered, rows.length, range);
+}
+
 export const DEFAULT_CUT_LINE_CONFIG: CutLineConfig = {
  enabled: true,
  style: 'dashed',
-  width: 0.1,
-  color: '#cccccc',
+  width: 0.2,
+  color: '#333333',
 };

 /** 裁切线有效线宽 (mm)，预览与 PDF 共用 */
@@ -245,22 +401,6 @@ export interface PrintableLabel {
  sourceIndex: number;
 }

-/** 按导出范围筛选 0-based 行索引（保持升序） */
-export function getExportRangeIndices(total: number, range: ExportRangeConfig): number[] {
-  if (total <= 0) return [];
-  switch (range.mode) {
-    case 'odd':
-      return Array.from({ length: total }, (_, i) => i).filter((i) => (i + 1) % 2 === 1);
-    case 'even':
-      return Array.from({ length: total }, (_, i) => i).filter((i) => (i + 1) % 2 === 0);
-    case 'custom':
-      return parseCustomExportRange(range.custom ?? '', total);
-    case 'all':
-    default:
-      return Array.from({ length: total }, (_, i) => i);
-  }
-}
-
 /** 解析自定义范围字符串（1-based 序号） */
 export function parseCustomExportRange(input: string, total: number): number[] {
  const trimmed = input.trim();
@@ -286,12 +426,13 @@ export function parseCustomExportRange(input: string, total: number): number[] {
 export function buildPrintablePages(
  rows: RecordRow[],
  paper: PaperConfig,
-  labelSize: { width: number; height: number },
-  exportRange: ExportRangeConfig
+  template: Pick<LabelTemplate, 'width' | 'height' | 'dataFilterRules'>,
+  exportRange: ExportRangeConfig,
+  variableDefaults?: Record<string, string> | null
 ) {
-  const gridInfo = calculateGrid(paper, labelSize);
+  const gridInfo = calculateGrid(paper, template);
  const labelsPerPage = gridInfo.cols * gridInfo.rows;
-  const indices = getExportRangeIndices(rows.length, exportRange);
+  const indices = getExportRangeIndices(rows, exportRange, template, variableDefaults);
  const selected: PrintableLabel[] = indices.map((i) => ({ row: rows[i], sourceIndex: i }));
  const totalPages = Math.ceil(selected.length / labelsPerPage) || 1;
  const pages: (PrintableLabel | null)[][] = [];
@@ -393,11 +534,36 @@ export const DEFAULT_PAPER_CONFIG: PaperConfig = {
  marginBottom: AUTO_LAYOUT_MIN_PAGE_MARGIN_MM,
  marginLeft: AUTO_LAYOUT_MIN_PAGE_MARGIN_MM,
  marginRight: AUTO_LAYOUT_MIN_PAGE_MARGIN_MM,
-  columnGap: 2,
-  rowGap: 2,
+  columnGap: 0,
+  rowGap: 0,
  flow: 'left-right-top-bottom',
+  printColorMode: 'cmyk',
 };

+/** 根据纸张排版参数反算单个标签尺寸 (mm) */
+export function computeLabelSizeFromLayout(
+  paper: PaperConfig,
+  cols: number,
+  rows: number
+): { width: number; height: number } | null {
+  if (cols < 1 || rows < 1) return null;
+
+  const paperW = paper.orientation === 'portrait' ? paper.width : paper.height;
+  const paperH = paper.orientation === 'portrait' ? paper.height : paper.width;
+  const usableW = paperW - paper.marginLeft - paper.marginRight;
+  const usableH = paperH - paper.marginTop - paper.marginBottom;
+  if (usableW <= 0 || usableH <= 0) return null;
+
+  const width = (usableW - (cols - 1) * paper.columnGap) / cols;
+  const height = (usableH - (rows - 1) * paper.rowGap) / rows;
+  if (width < 10 || height < 10) return null;
+
+  return {
+    width: Math.round(width * 10) / 10,
+    height: Math.round(height * 10) / 10,
+  };
+}
+
 /** 补全模板默认排版字段，剥离已废弃的数据源字段 */
 export function normalizeTemplate(tmpl: LabelTemplate): LabelTemplate {
  const { ...rest } = tmpl;
@@ -495,6 +661,24 @@ export function resolveElementBackgroundFill(
  return color;
 }

+/** 从显示/过滤条件中收集引用的变量名 */
+function collectVariablesFromVisibilityRule(rule: VisibilityRule, vars: Set<string>) {
+  const name = (rule.variable ?? '').trim();
+  if (name) vars.add(name);
+  if (rule.value) {
+    for (const v of extractVariablesFromContent(rule.value)) {
+      vars.add(v);
+    }
+  }
+}
+
+function collectVariablesFromVisibilityRules(rules: VisibilityRule[] | undefined, vars: Set<string>) {
+  if (!rules) return;
+  for (const rule of rules) {
+    collectVariablesFromVisibilityRule(rule, vars);
+  }
+}
+
 /** 从元素内容（含表格单元格）提取变量名 */
 export function extractVariablesFromElement(elem: TemplateElement): string[] {
  const vars = new Set<string>();
@@ -517,32 +701,36 @@ export function extractVariablesFromElement(elem: TemplateElement): string[] {
 export function extractTemplateVariables(template: {
  variableList?: string[];
  elements: TemplateElement[];
+  dataFilterRules?: VisibilityRule[];
+  exportImageFilterRules?: VisibilityRule[];
 }): string[] {
  const vars = new Set<string>(template.variableList ?? []);
  for (const elem of template.elements) {
    for (const v of extractVariablesFromElement(elem)) {
      vars.add(v);
    }
-    for (const rule of resolveVisibilityRules(elem)) {
-      const name = (rule.variable ?? '').trim();
-      if (name) vars.add(name);
-    }
+    collectVariablesFromVisibilityRules(resolveVisibilityRules(elem), vars);
  }
+  collectVariablesFromVisibilityRules(template.dataFilterRules, vars);
+  collectVariablesFromVisibilityRules(template.exportImageFilterRules, vars);
  return Array.from(vars).sort((a, b) => a.localeCompare(b, 'zh-CN'));
 }

 /** 被元素内容或显示条件引用的变量 */
-export function getUsedTemplateVariables(template: { elements: TemplateElement[] }): string[] {
+export function getUsedTemplateVariables(template: {
+  elements: TemplateElement[];
+  dataFilterRules?: VisibilityRule[];
+  exportImageFilterRules?: VisibilityRule[];
+}): string[] {
  const vars = new Set<string>();
  for (const elem of template.elements) {
    for (const v of extractVariablesFromElement(elem)) {
      vars.add(v);
    }
-    for (const rule of resolveVisibilityRules(elem)) {
-      const name = (rule.variable ?? '').trim();
-      if (name) vars.add(name);
-    }
+    collectVariablesFromVisibilityRules(resolveVisibilityRules(elem), vars);
  }
+  collectVariablesFromVisibilityRules(template.dataFilterRules, vars);
+  collectVariablesFromVisibilityRules(template.exportImageFilterRules, vars);
  return Array.from(vars);
 }

@@ -578,28 +766,53 @@ 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 };
 }

 /** 将显示条件格式化为可读说明 */
 export function formatVisibilityRuleDescription(rule: VisibilityRule): string {
+  const extractNote = formatValueExtractSummary(rule);
  const subjectLabel =
    rule.target === 'content' ? '内容值' : `{${rule.variable}}`;
+  const subject = extractNote ? `${subjectLabel}（${extractNote}）` : subjectLabel;
  switch (rule.operator) {
    case 'empty':
-      return `${subjectLabel} 为空`;
+      return `${subject} 为空`;
    case 'not_empty':
-      return `${subjectLabel} 不为空`;
+      return `${subject} 不为空`;
    case 'gt':
-      return `${subjectLabel} 大于 ${rule.value ?? '—'}`;
+      return `${subject} 大于 ${rule.value ?? '—'}`;
    case 'lt':
-      return `${subjectLabel} 小于 ${rule.value ?? '—'}`;
+      return `${subject} 小于 ${rule.value ?? '—'}`;
    case 'eq':
-      return `${subjectLabel} 等于 ${rule.value ?? '—'}`;
+      return `${subject} 等于 ${rule.value ?? '—'}`;
    case 'neq':
-      return `${subjectLabel} 不等于 ${rule.value ?? '—'}`;
+      return `${subject} 不等于 ${rule.value ?? '—'}`;
+    case 'contains':
+      return `${subject} 包含 ${rule.value ?? '—'}`;
+    case 'not_contains':
+      return `${subject} 不包含 ${rule.value ?? '—'}`;
    default:
-      return `${subjectLabel} ${VISIBILITY_OPERATOR_LABELS[rule.operator]}`;
+      return `${subject} ${VISIBILITY_OPERATOR_LABELS[rule.operator]}`;
  }
 }

@@ -616,6 +829,14 @@ export function resolveVisibilityRules(elem: TemplateElement): VisibilityRule[]
        variable: (r.variable ?? '').trim(),
        operator: r.operator,
        value: r.value,
+        enabled: r.enabled,
+        textExtractMode: r.textExtractMode,
+        textSplitDelimiter: r.textSplitDelimiter,
+        textSplitIndex: r.textSplitIndex,
+        textExtractLength: r.textExtractLength,
+        textExtractInverse: r.textExtractInverse,
+        textDisplayPrefix: r.textDisplayPrefix,
+        textDisplaySuffix: r.textDisplaySuffix,
      }))
      .filter((r) => r.target === 'content' || r.variable);
  }
@@ -661,7 +882,7 @@ function compareVariableToTarget(
  return false;
 }

-/** 读取显示条件所判断的原始值 */
+/** 读取显示条件所判断的原始值（含条件专用值提取） */
 function getVisibilityRuleRawValue(
  rule: VisibilityRule,
  elem: TemplateElement | undefined,
@@ -670,15 +891,43 @@ function getVisibilityRuleRawValue(
  defaults?: Record<string, string> | null,
  mode: ContentResolveMode = 'output'
 ): string | undefined {
+  let resolved: string | undefined;
+
  if (isVisibilityContentTarget(rule)) {
    if (!elem) return undefined;
    const effectiveRow =
      row ?? (mode === 'design' && defaults ? (defaults as RecordRow) : null);
-    const resolved = resolveElementCoreValue(elem, effectiveRow, rowIndex, defaults, 'output');
-    const trimmed = resolved.trim();
+    const formatSubst = textElementNeedsNumberFormatSubst(elem)
+      ? (raw: string) => formatTextNumberSubstValue(elem, raw)
+      : undefined;
+    const trimmed = resolveContent(elem.content, effectiveRow, rowIndex, defaults, {
+      mode: 'output',
+      formatSubst,
+    }).trim();
+    resolved = trimmed || undefined;
+  } else {
+    resolved = getVariableRawValue(rule.variable, row, defaults, mode);
+  }
+
+  if (resolved === undefined) return undefined;
+  if (!valueExtractConfigHasExtract(rule)) return resolved;
+  const extracted = applyValueExtractConfig(resolved, rule);
+  const trimmed = extracted.trim();
  return trimmed || undefined;
 }
-  return getVariableRawValue(rule.variable, row, defaults, mode);
+
+/** 解析条件目标值（支持 {变量名}） */
+export function resolveVisibilityRuleCompareTarget(
+  targetTemplate: string | undefined,
+  row: RecordRow | null,
+  defaults: Record<string, string> | null | undefined,
+  mode: ContentResolveMode,
+  rowIndex: number = 0
+): string {
+  const trimmed = (targetTemplate ?? '').trim();
+  if (!trimmed) return '';
+  if (!trimmed.includes('{')) return trimmed;
+  return resolveContent(trimmed, row, rowIndex, defaults, { mode }).trim();
 }

 /** 单条显示条件是否满足 */
@@ -692,6 +941,13 @@ export function evaluateVisibilityRule(
 ): boolean {
  const raw = getVisibilityRuleRawValue(rule, elem, row, rowIndex, defaults, mode);
  const isEmpty = raw === undefined;
+  const compareTarget = resolveVisibilityRuleCompareTarget(
+    rule.value,
+    row,
+    defaults,
+    mode,
+    rowIndex
+  );

  switch (rule.operator) {
    case 'empty':
@@ -702,12 +958,20 @@ export function evaluateVisibilityRule(
    case 'lt':
    case 'eq': {
      if (isEmpty) return false;
-      return compareVariableToTarget(raw!, (rule.value ?? '').trim(), rule.operator);
+      return compareVariableToTarget(raw!, compareTarget, rule.operator);
    }
    case 'neq': {
-      const target = (rule.value ?? '').trim();
-      if (isEmpty) return target !== '';
-      return compareVariableToTarget(raw!, target, 'neq');
+      if (isEmpty) return compareTarget !== '';
+      return compareVariableToTarget(raw!, compareTarget, 'neq');
+    }
+    case 'contains': {
+      if (!compareTarget || isEmpty) return false;
+      return raw!.includes(compareTarget);
+    }
+    case 'not_contains': {
+      if (!compareTarget) return true;
+      if (isEmpty) return true;
+      return !raw!.includes(compareTarget);
    }
    default:
      return true;
@@ -749,6 +1013,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,
@@ -836,41 +1232,65 @@ export function applyTextSplitSegment(
 }

 /** 解析元素有效的文本提取方式（兼容旧版仅配置分隔符） */
-export function getTextExtractMode(elem: Pick<
-  TemplateElement,
-  'textExtractMode' | 'textSplitDelimiter' | 'textSplitIndex'
->): TextExtractMode {
-  if (elem.textExtractMode !== undefined) return elem.textExtractMode;
-  const delimiter = elem.textSplitDelimiter?.trim();
-  const splitIndex = elem.textSplitIndex ?? 0;
+export function getTextExtractMode(
+  config: Pick<ValueExtractConfig, 'textExtractMode' | 'textSplitDelimiter' | 'textSplitIndex'>
+): TextExtractMode {
+  if (config.textExtractMode !== undefined) return config.textExtractMode;
+  const delimiter = config.textSplitDelimiter?.trim();
+  const splitIndex = config.textSplitIndex ?? 0;
  if (delimiter && splitIndex >= 1) return 'split';
  return 'none';
 }

+/** 值提取配置是否生效 */
+export function valueExtractConfigHasExtract(config: ValueExtractConfig): boolean {
+  const mode = getTextExtractMode(config);
+  if (mode === 'split') {
+    const delimiter = config.textSplitDelimiter?.trim();
+    const index = config.textSplitIndex ?? 0;
+    return !!(delimiter && index >= 1);
+  }
+  if (mode === 'prefix' || mode === 'suffix') {
+    return (config.textExtractLength ?? 0) >= 1;
+  }
+  return false;
+}
+
+/** 值提取配置的可读摘要 */
+export function formatValueExtractSummary(config: ValueExtractConfig): string | null {
+  if (!valueExtractConfigHasExtract(config)) return null;
+  const mode = getTextExtractMode(config);
+  let base: string;
+  if (mode === 'split') {
+    const delimiter = config.textSplitDelimiter?.trim() ?? '';
+    const index = config.textSplitIndex ?? 1;
+    base = `按「${delimiter}」第 ${index} 段`;
+  } else if (mode === 'prefix') {
+    base = `前 ${config.textExtractLength ?? 1} 位`;
+  } else {
+    base = `后 ${config.textExtractLength ?? 1} 位`;
+  }
+  return config.textExtractInverse ? `反选 ${base}` : `提取 ${base}`;
+}
+
 /** 按配置提取变量值片段 */
-export function applyTextExtract(
-  value: string,
-  elem: Pick<
-    TemplateElement,
-    'textExtractMode' | 'textSplitDelimiter' | 'textSplitIndex' | 'textExtractLength'
-  >
-): string {
+export function applyTextExtract(value: string, config: ValueExtractConfig): string {
  const trimmed = value.trim();
-  const mode = getTextExtractMode(elem);
+  const mode = getTextExtractMode(config);
  switch (mode) {
    case 'split': {
-      const delimiter = elem.textSplitDelimiter?.trim();
-      const index = elem.textSplitIndex ?? 0;
+      const delimiter = config.textSplitDelimiter?.trim();
+      const index = config.textSplitIndex ?? 0;
      if (!delimiter || index < 1) return trimmed;
      return applyTextSplitSegment(trimmed, delimiter, index);
    }
    case 'prefix': {
-      const n = elem.textExtractLength ?? 0;
+      const n = config.textExtractLength ?? 0;
      if (n < 1) return trimmed;
      return trimmed.slice(0, n);
    }
    case 'suffix': {
-      const n = elem.textExtractLength ?? 0;
+      const n = config.textExtractLength ?? 0;
      if (n < 1) return trimmed;
      return trimmed.slice(-n);
    }
@@ -879,6 +1299,44 @@ export function applyTextExtract(
  }
 }

+/** 按配置应用值提取（含反选） */
+export function applyValueExtractConfig(value: string, config: ValueExtractConfig): string {
+  if (!valueExtractConfigHasExtract(config)) return value;
+  if (config.textExtractInverse) {
+    return applyTextExtractInverse(value, { type: 'text', ...config });
+  }
+  return applyTextExtract(value, config);
+}
+
+function removeFirstOccurrence(value: string, needle: string): string {
+  if (!needle) return value;
+  const index = value.indexOf(needle);
+  if (index === -1) return value;
+  return value.slice(0, index) + value.slice(index + needle.length);
+}
+
+/** 反选：从原值中去掉「显示前缀 + 提取段 + 显示后缀」 */
+export function applyTextExtractInverse(
+  value: string,
+  elem: Pick<
+    ValueExtractConfig,
+    | 'textExtractMode'
+    | 'textSplitDelimiter'
+    | 'textSplitIndex'
+    | 'textExtractLength'
+    | 'textDisplayPrefix'
+    | 'textDisplaySuffix'
+  > & { type?: TemplateElement['type'] }
+): string {
+  const full = value.trim();
+  const extracted = applyTextExtract(full, elem);
+  const needle =
+    elem.type === 'text' || elem.textDisplayPrefix || elem.textDisplaySuffix
+      ? applyTextDisplayAffix(extracted, elem)
+      : extracted;
+  return removeFirstOccurrence(full, needle);
+}
+
 /** 元素是否启用了变量值提取（文本/条码/二维码/图片内容均有效） */
 export function elementHasValueExtract(
  elem: Pick<
@@ -886,16 +1344,7 @@ export function elementHasValueExtract(
    'textExtractMode' | 'textSplitDelimiter' | 'textSplitIndex' | 'textExtractLength'
  >
 ): boolean {
-  const mode = getTextExtractMode(elem);
-  if (mode === 'split') {
-    const delimiter = elem.textSplitDelimiter?.trim();
-    const index = elem.textSplitIndex ?? 0;
-    return !!(delimiter && index >= 1);
-  }
-  if (mode === 'prefix' || mode === 'suffix') {
-    return (elem.textExtractLength ?? 0) >= 1;
-  }
-  return false;
+  return valueExtractConfigHasExtract(elem);
 }

 /** @deprecated 使用 elementHasValueExtract */
@@ -962,6 +1411,11 @@ export function getVariableRawValue(
  return undefined;
 }

+/** 图层是否在画布与输出中显示 */
+export function isElementLayerVisible(elem: TemplateElement): boolean {
+  return elem.hidden !== true;
+}
+
 /** 是否应渲染元素（显示控制为 conditional 时按关联变量判断；设计模式使用变量默认值） */
 export function shouldRenderElement(
  elem: TemplateElement,
@@ -970,11 +1424,15 @@ export function shouldRenderElement(
  defaults?: Record<string, string> | null,
  mode: ContentResolveMode = 'output'
 ): boolean {
+  if (!isElementLayerVisible(elem)) return false;
+
  if (!isConditionalVisibility(elem)) return true;

  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)
    );
  }
@@ -1002,7 +1460,9 @@ export function resolveElementCoreValue(
  let resolved = resolveContent(elem.content, row, rowIndex, defaults, { mode, formatSubst });

  if (elementHasValueExtract(elem)) {
-    resolved = applyTextExtract(resolved, elem);
+    resolved = elem.textExtractInverse
+      ? applyTextExtractInverse(resolved, elem)
+      : applyTextExtract(resolved, elem);
  }

  return resolved;
@@ -1018,6 +1478,7 @@ export function resolveElementValue(
 ): string {
  const core = resolveElementCoreValue(elem, row, rowIndex, defaults, mode);
  if (elem.type !== 'text') return core;
+  if (elem.textExtractInverse && elementHasValueExtract(elem)) return core;
  return applyTextDisplayAffix(core, elem);
 }
Author	SHA1	Message	Date
iqudoo	33d3e5537c	优化	2026-06-23 15:26:51 +08:00
iqudoo	1b04e34ff0	打印	2026-06-23 15:17:29 +08:00
iqudoo	3a50e7e33b	fix	2026-06-16 23:41:27 +08:00
iqudoo	43900a8b52	完美的	2026-06-15 17:53:51 +08:00
iqudoo	25fa186d02	优化蒙版	2026-06-15 17:43:01 +08:00
iqudoo	455946c51c	蒙版	2026-06-15 16:59:37 +08:00
iqudoo	fcd587bd50	优化	2026-06-15 16:21:23 +08:00
iqudoo	1d506e0c71	fix	2026-06-15 14:55:54 +08:00
iqudoo	ac117425d7	优化修复	2026-06-15 14:46:30 +08:00
iqudoo	8c9b53b1b6	优化	2026-06-14 18:02:18 +08:00
iqudoo	b4c2cf07d0	修复	2026-06-14 14:03:45 +08:00
iqudoo	2bd89c517c	完美	2026-06-14 12:07:49 +08:00
iqudoo	4955b1f2e2	优化布局和交互	2026-06-14 12:03:05 +08:00
iqudoo	55867ae12d	修复	2026-06-14 10:37:57 +08:00
iqudoo	846061ab48	fix	2026-06-14 10:25:15 +08:00
iqudoo	ccb5b119de	数据	2026-06-14 04:12:21 +08:00
iqudoo	1e03b7750a	导出	2026-06-14 03:59:45 +08:00