x-print-designer 0.4.13 → 0.4.14

package/dist/{vue-D5fIULVq.js → vue-Nq-wK6M_.js}

@@ -4600,12 +4600,24 @@ const createI18nInstance = (initialLocale) => {
   });
 };
 const i18n = createI18nInstance();
-const sanitizeElement = (element) => {
+const normalizeIdentifier = (value, fallback) => {
+  if (typeof value === "string") {
+    const normalized = value.trim();
+    return normalized || fallback;
+  }
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return String(value);
+  }
+  return fallback;
+};
+const sanitizeElement = (element, pageIndex, elementIndex) => {
   if (!element || typeof element !== "object") return null;
-  if (typeof element.id !== "string" || !element.id) return null;
-  if (typeof element.type !== "string" || !element.type) return null;
+  const type = typeof element.type === "string" ? element.type.trim() : "";
+  if (!type) return null;
   const next = {
     ...element,
+    id: normalizeIdentifier(element.id, `element-${pageIndex + 1}-${elementIndex + 1}`),
+    type,
     style: element.style && typeof element.style === "object" ? element.style : {}
   };
   if (next.type === "table") {
@@ -4619,8 +4631,8 @@ const sanitizePages = (pages) => {
   if (!Array.isArray(pages)) return [];
   return pages.filter((page) => page && typeof page === "object").map((page, index) => ({
     ...page,
-    id: typeof page.id === "string" && page.id ? page.id : `page-${index + 1}`,
-    elements: Array.isArray(page.elements) ? page.elements.map(sanitizeElement).filter(Boolean) : []
+    id: normalizeIdentifier(page.id, `page-${index + 1}`),
+    elements: Array.isArray(page.elements) ? page.elements.map((element, elementIndex) => sanitizeElement(element, index, elementIndex)).filter(Boolean) : []
   }));
 };
 const sanitizeTemplateData = (data) => {
@@ -5215,6 +5227,9 @@ const useTemplateStore = defineStore("templates", {
             }
             const t = detail;
             const designerStore = useDesignerStore();
+            const isReportMode = designerStore.mode === "report";
+            const injectedTestData = isReportMode && Object.keys(designerStore.testData || {}).length > 0 ? cloneDeep$1(designerStore.testData) : null;
+            const injectedVariables = isReportMode && Object.keys(designerStore.variables || {}).length > 0 ? cloneDeep$1(designerStore.variables) : null;
             designerStore.resetCanvas();
             const data = t.data;
             if (data.pages && data.pages.length > 0) {
@@ -5240,12 +5255,16 @@ const useTemplateStore = defineStore("templates", {
             if (data.pageSpacingY !== void 0) designerStore.pageSpacingY = data.pageSpacingY;
             if (data.unit !== void 0) designerStore.unit = data.unit;
             if (data.watermark !== void 0) designerStore.watermark = cloneDeep$1(data.watermark);
-            if (designerStore.mode !== "report" || Object.keys(designerStore.testData || {}).length === 0) {
+            if (injectedTestData) {
+              designerStore.testData = injectedTestData;
+            } else {
               designerStore.testData = cloneDeep$1(data.testData || {});
             }
-            if (data.variables !== void 0) {
+            if (injectedVariables) {
+              designerStore.variables = injectedVariables;
+            } else if (data.variables !== void 0) {
               designerStore.variables = cloneDeep$1(data.variables || {});
-            } else if (designerStore.mode === "report" && data.testData && typeof data.testData === "object") {
+            } else if (isReportMode && data.testData && typeof data.testData === "object") {
               const nestedVariables = data.testData.variables && typeof data.testData.variables === "object" ? data.testData.variables : data.testData;
               designerStore.variables = cloneDeep$1(nestedVariables || {});
             }
@@ -5291,6 +5310,9 @@ const useTemplateStore = defineStore("templates", {
           const t = this.templates.find((t2) => t2.id === id);
           if (t) {
             const designerStore = useDesignerStore();
+            const isReportMode = designerStore.mode === "report";
+            const injectedTestData = isReportMode && Object.keys(designerStore.testData || {}).length > 0 ? cloneDeep$1(designerStore.testData) : null;
+            const injectedVariables = isReportMode && Object.keys(designerStore.variables || {}).length > 0 ? cloneDeep$1(designerStore.variables) : null;
             designerStore.resetCanvas();
             const data = sanitizeTemplateData(t.data);
             if (data.pages && data.pages.length > 0) {
@@ -5321,12 +5343,16 @@ const useTemplateStore = defineStore("templates", {
             if (data.pageSpacingY !== void 0) designerStore.pageSpacingY = data.pageSpacingY;
             if (data.unit !== void 0) designerStore.unit = data.unit;
             if (data.watermark !== void 0) designerStore.watermark = cloneDeep$1(data.watermark);
-            if (designerStore.mode !== "report" || Object.keys(designerStore.testData || {}).length === 0) {
+            if (injectedTestData) {
+              designerStore.testData = injectedTestData;
+            } else {
               designerStore.testData = cloneDeep$1(data.testData || {});
             }
-            if (data.variables !== void 0) {
+            if (injectedVariables) {
+              designerStore.variables = injectedVariables;
+            } else if (data.variables !== void 0) {
               designerStore.variables = cloneDeep$1(data.variables || {});
-            } else if (designerStore.mode === "report" && data.testData && typeof data.testData === "object") {
+            } else if (isReportMode && data.testData && typeof data.testData === "object") {
               const nestedVariables = data.testData.variables && typeof data.testData.variables === "object" ? data.testData.variables : data.testData;
               designerStore.variables = cloneDeep$1(nestedVariables || {});
             }
@@ -6527,6 +6553,13 @@ const useDesignerStore = defineStore("designer", {
      * 用于派发对外 `templateloaded` 事件，解决调用方无法 await loadTemplate 的问题。
      */
     loadCompleteEmitter: null,
+    /**
+     * 原始模板页快照（materialize 之前的 pages）。
+     * 报告模式下 materializeReportTables 会把 table 转成 customTable（分页后），
+     * 导致后续数据变化时无法重新分页（table 元素已消失）。
+     * 每次加载模板时保存快照，重新分页前从快照恢复原始 table。
+     */
+    originalTemplatePages: null,
     testData: {},
     variables: {},
     availableVariables: [],
@@ -6700,6 +6733,7 @@ const useDesignerStore = defineStore("designer", {
       this.watermark = { ...defaultWatermark };
       localStorage.setItem("print-designer-watermark", JSON.stringify(this.watermark));
       this.pages = [{ id: v4(), elements: [] }];
+      this.originalTemplatePages = null;
       this.currentPageIndex = 0;
       this.testData = {};
       this.variables = {};
@@ -8260,8 +8294,15 @@ const useDesignerStore = defineStore("designer", {
     materializeReportTables() {
       if (this.mode !== "report") return false;
       if (!Array.isArray(this.pages) || this.pages.length === 0) return false;
-      const hasDataTable = this.pages.some((page) => Array.isArray(page == null ? void 0 : page.elements) && page.elements.some((element) => (element == null ? void 0 : element.type) === ElementType.TABLE));
+      let hasDataTable = this.pages.some((page) => Array.isArray(page == null ? void 0 : page.elements) && page.elements.some((element) => (element == null ? void 0 : element.type) === ElementType.TABLE));
+      if (!hasDataTable && this.originalTemplatePages) {
+        this.pages = cloneDeep$1(this.originalTemplatePages);
+        hasDataTable = this.pages.some((page) => Array.isArray(page == null ? void 0 : page.elements) && page.elements.some((element) => (element == null ? void 0 : element.type) === ElementType.TABLE));
+      }
       if (!hasDataTable) return false;
+      if (!this.originalTemplatePages) {
+        this.originalTemplatePages = cloneDeep$1(this.pages);
+      }
       const result = materializeReportDataTables({
         pages: this.pages,
         canvasHeight: this.canvasSize.height,
@@ -8723,11 +8764,11 @@ function expandLoopPages(pages, ctx) {
     for (let i = 0; i < data.length; i++) {
       const item = data[i];
       const newPage = {
-        id: i === 0 ? page.id : v4(),
+        id: i === 0 ? page.id : `${page.id}-loop-${i}`,
         elements: page.elements.map((el) => {
           const cloned = cloneDeep$1(el);
           if (i !== 0) {
-            cloned.id = v4();
+            cloned.id = `${el.id}-loop-${i}`;
           }
           if (el.type === ElementType.LOOP_RENDER) {
             return cloned;
@@ -8768,7 +8809,6 @@ function hasLoopPage(pages) {
   return !!pages && pages.some((p) => !!p.loopDataVariable);
 }
 function collapseLoopPages(currentPages, originalTemplatePages) {
-  var _a;
   if (!Array.isArray(currentPages) || !Array.isArray(originalTemplatePages)) {
     return currentPages;
   }
@@ -8777,41 +8817,40 @@ function collapseLoopPages(currentPages, originalTemplatePages) {
     return currentPages;
   }
   const result = [];
-  for (const originalLoopPage of originalLoopPages) {
-    const basePageId = originalLoopPage.id;
-    const loopVar = originalLoopPage.loopDataVariable;
-    const expandedGroupPages = currentPages.filter(
-      (p) => p.id === basePageId || typeof p.id === "string" && p.id.startsWith(`${basePageId}-`)
+  const emittedLoopPageIds = /* @__PURE__ */ new Set();
+  for (const page of currentPages) {
+    const originalLoopPage = originalLoopPages.find(
+      (orig) => page.id === orig.id || typeof page.id === "string" && page.id.startsWith(`${orig.id}-`)
     );
-    if (expandedGroupPages.length === 0) {
-      result.push(originalLoopPage);
+    if (!originalLoopPage) {
+      result.push(page);
+      continue;
+    }
+    if (emittedLoopPageIds.has(originalLoopPage.id)) {
       continue;
     }
-    const mergedElements = cloneDeep$1(expandedGroupPages[0].elements || []);
-    const origElMap = new Map(((_a = originalLoopPage.elements) == null ? void 0 : _a.map((e) => [e.type, e])) || []);
-    for (const el of mergedElements) {
-      const orig = origElMap.get(el.type);
-      if (orig == null ? void 0 : orig.variable) {
-        el.variable = orig.variable;
+    emittedLoopPageIds.add(originalLoopPage.id);
+    const mergedElements = cloneDeep$1(page.elements || []);
+    const originalElements = originalLoopPage.elements || [];
+    const originalElementMap = new Map(originalElements.map((element) => [element.id, element]));
+    mergedElements.forEach((element, index) => {
+      const baseElementId = typeof element.id === "string" ? element.id.replace(/-loop-\d+$/, "") : element.id;
+      const originalElement = originalElementMap.get(baseElementId) || originalElements[index];
+      if (originalElement == null ? void 0 : originalElement.variable) {
+        element.variable = originalElement.variable;
       }
-      if ((orig == null ? void 0 : orig.content) && /\{#/.test(orig.content)) {
-        el.content = orig.content;
+      if ((originalElement == null ? void 0 : originalElement.content) && /\{#/.test(originalElement.content)) {
+        element.content = originalElement.content;
       }
-    }
+    });
     result.push({
       ...originalLoopPage,
-      elements: mergedElements,
-      loopDataVariable: loopVar,
-      loopFields: originalLoopPage.loopFields
+      elements: mergedElements
     });
   }
-  new Set(originalLoopPages.map((p) => p.id));
-  for (const page of currentPages) {
-    const belongsToLoop = originalLoopPages.some(
-      (orig) => page.id === orig.id || typeof page.id === "string" && page.id.startsWith(`${orig.id}-`)
-    );
-    if (!belongsToLoop) {
-      result.push(page);
+  for (const originalLoopPage of originalLoopPages) {
+    if (!emittedLoopPageIds.has(originalLoopPage.id)) {
+      result.push(cloneDeep$1(originalLoopPage));
     }
   }
   return result;
@@ -8834,7 +8873,7 @@ function useRenderContext() {
   }
   return computed(buildStoreRenderContext);
 }
-const _hoisted_1$i = ["data-auto-height"];
+const _hoisted_1$h = ["data-auto-height"];
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "TextElement",
   props: {
@@ -9002,11 +9041,11 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         ]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
           createTextVNode(toDisplayString(resolvedText.value), 1)
         ], 64))
-      ], 44, _hoisted_1$i);
+      ], 44, _hoisted_1$h);
     };
   }
 });
-const _hoisted_1$h = ["src"];
+const _hoisted_1$g = ["src"];
 const _hoisted_2$8 = {
   key: 1,
   class: "text-gray-400 text-xs"
@@ -9093,7 +9132,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           src: resolvedContent.value,
           class: normalizeClass(["w-full h-full pointer-events-none", imageFitClass.value]),
           alt: "Element"
-        }, null, 10, _hoisted_1$h)) : (openBlock(), createElementBlock("span", _hoisted_2$8, toDisplayString(placeholderText.value), 1)),
+        }, null, 10, _hoisted_1$g)) : (openBlock(), createElementBlock("span", _hoisted_2$8, toDisplayString(placeholderText.value), 1)),
         createElementVNode("input", {
           ref_key: "fileInputRef",
           ref: fileInputRef,
@@ -9158,7 +9197,7 @@ function shouldPaginate(options) {
   const { totalPages } = calculatePagination(options);
   return totalPages > 1;
 }
-const _hoisted_1$g = {
+const _hoisted_1$f = {
   key: 0,
   class: "absolute top-0 right-0 bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-bl z-50"
 };
@@ -9860,7 +9899,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           "data-table-container": "",
           style: normalizeStyle({ ...tableContainerStyle.value, backgroundColor: __props.element.style.backgroundColor || "transparent" })
         }, [
-          needsPagination.value && !unref(store).isExporting && !usesReportPaginatedLayout.value && unref(store).showVariableNames ? (openBlock(), createElementBlock("div", _hoisted_1$g, toDisplayString(paginationInfo.value.totalPages) + " 页 · 每页 " + toDisplayString(paginationInfo.value.rowsPerPage) + " 行 ", 1)) : createCommentVNode("", true),
+          needsPagination.value && !unref(store).isExporting && !usesReportPaginatedLayout.value && unref(store).showVariableNames ? (openBlock(), createElementBlock("div", _hoisted_1$f, toDisplayString(paginationInfo.value.totalPages) + " 页 · 每页 " + toDisplayString(paginationInfo.value.rowsPerPage) + " 行 ", 1)) : createCommentVNode("", true),
           !unref(store).isExporting && !usesReportPaginatedLayout.value && !isHeaderLeft.value ? (openBlock(), createElementBlock("div", _hoisted_2$7, [
             createElementVNode("table", {
               class: "w-full border-collapse flex-shrink-0",
@@ -10623,13 +10662,13 @@ const buildFieldCatalog = ({
     mappedCount: items.filter((item) => item.mapped).length
   };
 };
-const _hoisted_1$f = {
+const _hoisted_1$e = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
 function render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$f, [..._cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$e, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       d: "m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
@@ -10637,13 +10676,13 @@ function render$1(_ctx, _cache) {
   ])]);
 }
 const SearchIcon = markRaw({ name: "material-symbols-search", render: render$1 });
-const _hoisted_1$e = {
+const _hoisted_1$d = {
   viewBox: "0 0 24 24",
   width: "1.2em",
   height: "1.2em"
 };
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$e, [..._cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$d, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       fill: "currentColor",
       d: "M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z"
@@ -10651,7 +10690,7 @@ function render(_ctx, _cache) {
   ])]);
 }
 const CloseIcon = markRaw({ name: "material-symbols-close", render });
-const _hoisted_1$d = {
+const _hoisted_1$c = {
   class: "field-picker-dialog",
   role: "dialog",
   "aria-modal": "true"
@@ -10825,7 +10864,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           onClick: _cache[2] || (_cache[2] = withModifiers(($event) => emit("close"), ["self"])),
           onKeydown: handleKeydown
         }, [
-          createElementVNode("section", _hoisted_1$d, [
+          createElementVNode("section", _hoisted_1$c, [
             createElementVNode("header", _hoisted_2$6, [
               createElementVNode("div", _hoisted_3$4, [
                 _cache[3] || (_cache[3] = createElementVNode("div", { class: "field-picker-mark" }, "F", -1)),
@@ -10938,7 +10977,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const FieldSelectModal = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-774c4c6c"]]);
-const _hoisted_1$c = ["rowspan", "colspan", "onMousedown", "onMouseenter", "onDblclick"];
+const _hoisted_1$b = ["rowspan", "colspan", "onMousedown", "onMouseenter", "onDblclick"];
 const _hoisted_2$5 = ["src"];
 const _hoisted_3$3 = { key: 0 };
 const _hoisted_4$1 = {
@@ -11759,7 +11798,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                       }), 128)),
                       getCellRichTextSegments(row - 1, col - 1).length === 0 ? (openBlock(), createElementBlock("span", _hoisted_3$3, " ")) : createCommentVNode("", true)
                     ], 64))
-                  ], 46, _hoisted_1$c)), [
+                  ], 46, _hoisted_1$b)), [
                     [vShow, shouldRenderCell(row - 1, col - 1)]
                   ]);
                 }), 128))
@@ -12144,7 +12183,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 const CustomTableElement = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-a367d5a2"]]);
-const _hoisted_1$b = { class: "page-number-text" };
+const _hoisted_1$a = { class: "page-number-text" };
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "PageNumberElement",
   props: {
@@ -12199,7 +12238,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             padding: "0 4px"
           })
         }, toDisplayString(__props.element.labelText), 5)) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_1$b, toDisplayString(pageText.value), 1),
+        createElementVNode("span", _hoisted_1$a, toDisplayString(pageText.value), 1),
         __props.element.labelText && __props.element.labelPosition === "after" ? (openBlock(), createElementBlock("span", {
           key: 1,
           style: normalizeStyle({
@@ -12219,7 +12258,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$a = { class: "w-full h-full flex items-center justify-center overflow-hidden" };
+const _hoisted_1$9 = { class: "w-full h-full flex items-center justify-center overflow-hidden" };
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "BarcodeElement",
   props: {
@@ -12247,7 +12286,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     const renderBarcode = async () => {
       if (!barcodeRef.value) return;
       try {
-        const jsBarcodeModule = await import("./JsBarcode-5g1FBqni.js").then((n) => n.JsBarcode);
+        const jsBarcodeModule = await import("./JsBarcode-XYc3_qaJ.js").then((n) => n.JsBarcode);
         const JsBarcode = (jsBarcodeModule == null ? void 0 : jsBarcodeModule.default) || jsBarcodeModule;
         const content = resolvedContent.value;
         const style = props.element.style;
@@ -12279,7 +12318,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       if (registerRenderTask) registerRenderTask(task);
     }, { deep: true });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
         createElementVNode("img", {
           ref_key: "barcodeRef",
           ref: barcodeRef,
@@ -12289,7 +12328,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$9 = { class: "w-full h-full flex items-center justify-center overflow-hidden" };
+const _hoisted_1$8 = { class: "w-full h-full flex items-center justify-center overflow-hidden" };
 const _hoisted_2$4 = ["src"];
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "QRCodeElement",
@@ -12317,7 +12356,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     });
     const renderQR = async () => {
       try {
-        const qrcodeModule = await import("./browser-CdoI5PCM.js").then((n) => n.browser);
+        const qrcodeModule = await import("./browser-C2DOr3jW.js").then((n) => n.browser);
         const QRCode = (qrcodeModule == null ? void 0 : qrcodeModule.default) || qrcodeModule;
         const content = resolvedContent.value;
         qrSrc.value = await QRCode.toDataURL(content, {
@@ -12341,7 +12380,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       if (registerRenderTask) registerRenderTask(task);
     }, { deep: true });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
         qrSrc.value ? (openBlock(), createElementBlock("img", {
           key: 0,
           src: qrSrc.value,
@@ -12352,7 +12391,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$8 = { class: "w-full h-full flex items-center justify-center" };
+const _hoisted_1$7 = { class: "w-full h-full flex items-center justify-center" };
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "LineElement",
   props: {
@@ -12360,7 +12399,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
         createElementVNode("div", {
           class: "w-full",
           style: normalizeStyle({
@@ -12412,7 +12451,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$7 = { class: "w-full h-full relative" };
+const _hoisted_1$6 = { class: "w-full h-full relative" };
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "ChartElement",
   props: {
@@ -12963,7 +13002,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       }
     }, { deep: true });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$7, [
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
         createElementVNode("div", {
           ref_key: "chartRef",
           ref: chartRef,
@@ -12978,7 +13017,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$6 = ["data-auto-height"];
+const _hoisted_1$5 = ["data-auto-height"];
 const _hoisted_2$3 = {
   key: 1,
   class: "whitespace-pre-wrap"
@@ -13199,11 +13238,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             }, toDisplayString(seg.text), 5);
           }), 128))
         ])) : (openBlock(), createElementBlock("div", _hoisted_3$2, toDisplayString(unref(t)("properties.label.longTextPlaceholder").split("\n")[0]), 1))
-      ], 44, _hoisted_1$6);
+      ], 44, _hoisted_1$5);
     };
   }
 });
-const _hoisted_1$5 = ["innerHTML"];
+const _hoisted_1$4 = ["innerHTML"];
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "RichTextElement",
   props: {
@@ -13233,12 +13272,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           padding: `${((_e = __props.element.style) == null ? void 0 : _e.padding) || 4}px`
         }),
         innerHTML: displayContent.value
-      }, null, 12, _hoisted_1$5);
+      }, null, 12, _hoisted_1$4);
     };
   }
 });
 const RichTextElement = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-4f64b16f"]]);
-const _hoisted_1$4 = { key: 0 };
+const _hoisted_1$3 = { key: 0 };
 const _hoisted_2$2 = { key: 1 };
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "DateElement",
@@ -13283,12 +13322,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           padding: `${((_e = __props.element.style) == null ? void 0 : _e.padding) || 4}px`
         })
       }, [
-        unref(renderContext).showVariableNames && __props.element.variable ? (openBlock(), createElementBlock("span", _hoisted_1$4, "{#" + toDisplayString(__props.element.variable) + "}", 1)) : (openBlock(), createElementBlock("span", _hoisted_2$2, toDisplayString(currentDate.value), 1))
+        unref(renderContext).showVariableNames && __props.element.variable ? (openBlock(), createElementBlock("span", _hoisted_1$3, "{#" + toDisplayString(__props.element.variable) + "}", 1)) : (openBlock(), createElementBlock("span", _hoisted_2$2, toDisplayString(currentDate.value), 1))
       ], 4);
     };
   }
 });
-const _hoisted_1$3 = { class: "flex items-baseline gap-1" };
+const _hoisted_1$2 = { class: "flex items-baseline gap-1" };
 const _hoisted_2$1 = {
   key: 0,
   class: "text-gray-400 text-sm"
@@ -13376,7 +13415,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           class: "text-gray-500 mb-2",
           style: normalizeStyle({ fontSize: `${__props.element.labelFontSize || 12}px` })
         }, toDisplayString(resolvedData.value.label), 5),
-        createElementVNode("div", _hoisted_1$3, [
+        createElementVNode("div", _hoisted_1$2, [
           createElementVNode("span", {
             class: "font-bold text-gray-900",
             style: normalizeStyle({ fontSize: `${__props.element.valueFontSize || 32}px` })
@@ -13414,7 +13453,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$2 = {
+const _hoisted_1$1 = {
   key: 4,
   class: "text-xs text-gray-400"
 };
@@ -13497,7 +13536,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           class: "text-sm font-medium text-gray-700",
           style: normalizeStyle({ minWidth: "40px", textAlign: __props.element.progressLabelPosition === "outside" ? "left" : "right" })
         }, toDisplayString(resolvedProgress.value.percent) + "% ", 5)) : createCommentVNode("", true),
-        unref(renderContext).showVariableNames && __props.element.variable ? (openBlock(), createElementBlock("div", _hoisted_1$2, " {#" + toDisplayString(__props.element.variable) + "} ", 1)) : createCommentVNode("", true)
+        unref(renderContext).showVariableNames && __props.element.variable ? (openBlock(), createElementBlock("div", _hoisted_1$1, " {#" + toDisplayString(__props.element.variable) + "} ", 1)) : createCommentVNode("", true)
       ], 4);
     };
   }
@@ -13564,7 +13603,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$1 = ["src", "alt"];
+const _hoisted_1 = ["src", "alt"];
 const _hoisted_2 = {
   key: 0,
   class: "text-center text-xs text-gray-500 mt-1"
@@ -13602,7 +13641,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             src: displayImage.value,
             alt: __props.element.label || "印章/签名",
             class: "max-w-full max-h-full object-contain"
-          }, null, 8, _hoisted_1$1),
+          }, null, 8, _hoisted_1),
           __props.element.label ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(__props.element.label), 1)) : createCommentVNode("", true)
         ], 64)) : showPlaceholder.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
           _cache[0] || (_cache[0] = createElementVNode("svg", {
@@ -13624,7 +13663,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1 = { class: "preview-page" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "PreviewPage",
   props: {
@@ -13791,6 +13829,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const elementWrapperStyle = (element) => {
       var _a, _b, _c, _d;
       const base = {
+        position: "absolute",
         left: `${element.x}px`,
         top: `${element.y}px`,
         width: `${element.width}px`,
@@ -13863,6 +13902,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     };
     const totalPages = computed(() => pages.value.length);
+    const containerStyle = {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: "20px",
+      padding: "20px",
+      backgroundColor: "#f3f4f6"
+    };
+    const printPageBaseStyle = {
+      background: "white",
+      flexShrink: 0
+    };
     const triggerRender = async () => {
       if (!props.autoRender) return;
       store.setIsExporting(true);
@@ -13892,17 +13943,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       isReady
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
+      return openBlock(), createElementBlock("div", { style: containerStyle }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(pages.value, (page, index) => {
           return openBlock(), createElementBlock("div", {
             key: page.id,
-            class: "print-page relative shadow-lg overflow-hidden",
-            style: normalizeStyle([pageStyle.value, watermarkStyle.value ? watermarkStyle.value : {}])
+            style: normalizeStyle([printPageBaseStyle, { position: "relative", boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)", overflow: "hidden" }, pageStyle.value, watermarkStyle.value ? watermarkStyle.value : {}])
           }, [
             index > 0 && pages.value.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(getGlobalElements(), (element) => {
               return openBlock(), createElementBlock("div", {
                 key: `global-${element.id}`,
-                class: "absolute",
                 style: normalizeStyle(elementWrapperStyle(element))
               }, [
                 (openBlock(), createBlock(resolveDynamicComponent(getComponent(element.type)), {
@@ -13915,7 +13964,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             (openBlock(true), createElementBlock(Fragment, null, renderList(getRenderableElements(page.elements), (element) => {
               return openBlock(), createElementBlock("div", {
                 key: element.id,
-                class: "absolute",
                 style: normalizeStyle(elementWrapperStyle(element))
               }, [
                 (openBlock(), createBlock(resolveDynamicComponent(getComponent(element.type)), {
@@ -13931,10 +13979,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const PreviewPage = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9fd7d897"]]);
 export {
   PREVIEW_RENDER_CONTEXT_KEY,
-  PreviewPage,
+  _sfc_main,
   collapseLoopPages,
   expandLoopPages,
   getDefaultExportFromCjs,