z-certificate-editor 1.0.3 → 1.0.4

package/dist/z-certificate-editor.umd.js

@@ -0,0 +1,2131 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue")) : typeof define === "function" && define.amd ? define(["exports", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.ZCertificateEditor = {}, global.Vue));
+})(this, function(exports2, vue) {
+  "use strict";
+  const PRESET_TEMPLATES = [
+    {
+      id: "vertical-1",
+      name: "竖版模板1",
+      type: "vertical",
+      width: 972,
+      height: 1378,
+      background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+      description: "经典竖版证书模板"
+    },
+    {
+      id: "vertical-2",
+      name: "竖版模板2",
+      type: "vertical",
+      width: 972,
+      height: 1378,
+      background: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
+      description: "优雅竖版证书模板"
+    },
+    {
+      id: "vertical-3",
+      name: "竖版模板3",
+      type: "vertical",
+      width: 972,
+      height: 1378,
+      background: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
+      description: "现代竖版证书模板"
+    },
+    {
+      id: "horizontal-1",
+      name: "横版模板1",
+      type: "horizontal",
+      width: 1303,
+      height: 897,
+      background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+      description: "经典横版证书模板"
+    },
+    {
+      id: "horizontal-2",
+      name: "横版模板2",
+      type: "horizontal",
+      width: 1303,
+      height: 897,
+      background: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
+      description: "优雅横版证书模板"
+    },
+    {
+      id: "horizontal-3",
+      name: "横版模板3",
+      type: "horizontal",
+      width: 1303,
+      height: 897,
+      background: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
+      description: "现代横版证书模板"
+    }
+  ];
+  const validateImageFile = (file) => {
+    const allowedTypes = ["image/jpeg", "image/jpg", "image/png"];
+    const maxSize = 2 * 1024 * 1024;
+    if (!allowedTypes.includes(file.type)) {
+      return { valid: false, error: "只支持 JPG、JPEG、PNG 格式的图片" };
+    }
+    if (file.size > maxSize) {
+      return { valid: false, error: "图片大小不能超过 2MB" };
+    }
+    return { valid: true };
+  };
+  const fileToBase64 = (file) => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  };
+  const getTemplateSizeSuggestion = (type) => {
+    if (type === "vertical") {
+      return { width: 972, height: 1378 };
+    } else {
+      return { width: 1303, height: 897 };
+    }
+  };
+  const _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+  const _hoisted_1$6 = { class: "design-panel" };
+  const _hoisted_2$6 = { class: "panel-tabs" };
+  const _hoisted_3$6 = { class: "panel-content" };
+  const _hoisted_4$6 = {
+    key: 0,
+    class: "elements-section"
+  };
+  const _hoisted_5$5 = { class: "elements-grid" };
+  const _hoisted_6$5 = {
+    key: 1,
+    class: "templates-section"
+  };
+  const _hoisted_7$5 = { class: "upload-section" };
+  const _hoisted_8$4 = { class: "upload-hint" };
+  const _hoisted_9$4 = { class: "template-type-switch" };
+  const _hoisted_10$4 = { class: "templates-list" };
+  const _hoisted_11$3 = ["onClick"];
+  const _hoisted_12$3 = { class: "template-name" };
+  const _sfc_main$6 = {
+    __name: "DesignPanel",
+    emits: ["add-element", "select-template", "upload-template"],
+    setup(__props, { emit: __emit }) {
+      const emit = __emit;
+      const activeTab = vue.ref("elements");
+      const templateType = vue.ref("vertical");
+      const fileInputRef = vue.ref(null);
+      const filteredTemplates = vue.computed(() => {
+        return PRESET_TEMPLATES.filter((t) => t.type === templateType.value);
+      });
+      const handleSelectTemplate = (template) => {
+        emit("select-template", template);
+      };
+      const triggerUpload = () => {
+        var _a;
+        (_a = fileInputRef.value) == null ? void 0 : _a.click();
+      };
+      const handleFileUpload = async (event) => {
+        var _a;
+        const file = (_a = event.target.files) == null ? void 0 : _a[0];
+        if (!file) return;
+        const validation = validateImageFile(file);
+        if (!validation.valid) {
+          alert(validation.error);
+          return;
+        }
+        try {
+          const base64 = await fileToBase64(file);
+          const suggestion = getTemplateSizeSuggestion(templateType.value);
+          const customTemplate = {
+            id: `custom-${Date.now()}`,
+            name: "自定义模板",
+            type: templateType.value,
+            width: suggestion.width,
+            height: suggestion.height,
+            background: base64,
+            description: "自定义上传的模板"
+          };
+          emit("upload-template", customTemplate);
+        } catch (error) {
+          alert("上传失败，请重试");
+          console.error(error);
+        }
+        if (fileInputRef.value) {
+          fileInputRef.value.value = "";
+        }
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
+          vue.createElementVNode("div", _hoisted_2$6, [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(["tab-item", { active: activeTab.value === "elements" }]),
+              onClick: _cache[0] || (_cache[0] = ($event) => activeTab.value = "elements")
+            }, " 设计元素 ", 2),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(["tab-item", { active: activeTab.value === "templates" }]),
+              onClick: _cache[1] || (_cache[1] = ($event) => activeTab.value = "templates")
+            }, " 底图模板 ", 2)
+          ]),
+          vue.createElementVNode("div", _hoisted_3$6, [
+            activeTab.value === "elements" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$6, [
+              vue.createElementVNode("div", _hoisted_5$5, [
+                vue.createElementVNode("div", {
+                  class: "element-item",
+                  onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("add-element", "text"))
+                }, [..._cache[8] || (_cache[8] = [
+                  vue.createElementVNode("div", { class: "element-icon" }, "📝", -1),
+                  vue.createElementVNode("div", { class: "element-label" }, "短文本", -1)
+                ])]),
+                vue.createElementVNode("div", {
+                  class: "element-item",
+                  onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("add-element", "longtext"))
+                }, [..._cache[9] || (_cache[9] = [
+                  vue.createElementVNode("div", { class: "element-icon" }, "📄", -1),
+                  vue.createElementVNode("div", { class: "element-label" }, "长文本", -1)
+                ])]),
+                vue.createElementVNode("div", {
+                  class: "element-item",
+                  onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("add-element", "image"))
+                }, [..._cache[10] || (_cache[10] = [
+                  vue.createElementVNode("div", { class: "element-icon" }, "🖼️", -1),
+                  vue.createElementVNode("div", { class: "element-label" }, "图片", -1)
+                ])]),
+                vue.createElementVNode("div", {
+                  class: "element-item",
+                  onClick: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("add-element", "qrcode"))
+                }, [..._cache[11] || (_cache[11] = [
+                  vue.createElementVNode("div", { class: "element-icon" }, "🔲", -1),
+                  vue.createElementVNode("div", { class: "element-label" }, "二维码", -1)
+                ])])
+              ])
+            ])) : vue.createCommentVNode("", true),
+            activeTab.value === "templates" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$5, [
+              vue.createElementVNode("div", _hoisted_7$5, [
+                vue.createElementVNode("input", {
+                  ref_key: "fileInputRef",
+                  ref: fileInputRef,
+                  type: "file",
+                  accept: "image/jpeg,image/jpg,image/png",
+                  onChange: handleFileUpload,
+                  style: { "display": "none" }
+                }, null, 544),
+                vue.createElementVNode("button", {
+                  class: "upload-btn",
+                  onClick: triggerUpload
+                }, [..._cache[12] || (_cache[12] = [
+                  vue.createElementVNode("span", null, "📁", -1),
+                  vue.createElementVNode("span", null, "上传模板", -1)
+                ])]),
+                vue.createElementVNode("div", _hoisted_8$4, [
+                  _cache[13] || (_cache[13] = vue.createTextVNode(" 支持：jpg、jpeg、png 小于2M", -1)),
+                  _cache[14] || (_cache[14] = vue.createElementVNode("br", null, null, -1)),
+                  vue.createTextVNode(" 建议尺寸：" + vue.toDisplayString(templateType.value === "vertical" ? "972 x 1378" : "1303 x 897"), 1)
+                ])
+              ]),
+              vue.createElementVNode("div", _hoisted_9$4, [
+                vue.createElementVNode("button", {
+                  class: vue.normalizeClass(["switch-btn", { active: templateType.value === "vertical" }]),
+                  onClick: _cache[6] || (_cache[6] = ($event) => templateType.value = "vertical")
+                }, " 竖版 ", 2),
+                vue.createElementVNode("button", {
+                  class: vue.normalizeClass(["switch-btn", { active: templateType.value === "horizontal" }]),
+                  onClick: _cache[7] || (_cache[7] = ($event) => templateType.value = "horizontal")
+                }, " 横版 ", 2)
+              ]),
+              vue.createElementVNode("div", _hoisted_10$4, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredTemplates.value, (template) => {
+                  return vue.openBlock(), vue.createElementBlock("div", {
+                    key: template.id,
+                    class: "template-item",
+                    onClick: ($event) => handleSelectTemplate(template)
+                  }, [
+                    vue.createElementVNode("div", {
+                      class: "template-preview",
+                      style: vue.normalizeStyle({ background: template.background })
+                    }, null, 4),
+                    vue.createElementVNode("div", _hoisted_12$3, vue.toDisplayString(template.name), 1)
+                  ], 8, _hoisted_11$3);
+                }), 128))
+              ])
+            ])) : vue.createCommentVNode("", true)
+          ])
+        ]);
+      };
+    }
+  };
+  const DesignPanel = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-b694f9ff"]]);
+  const SYSTEM_FIELDS = [
+    {
+      key: "name",
+      label: "姓名",
+      placeholder: "{{姓名}}",
+      category: "基本信息",
+      description: "证书持有人的姓名"
+    },
+    {
+      key: "gender",
+      label: "性别称呼",
+      placeholder: "{{性别称呼}}",
+      category: "基本信息",
+      description: "先生/女士"
+    },
+    {
+      key: "examName",
+      label: "考试名称",
+      placeholder: "{{考试名称}}",
+      category: "考试信息",
+      description: "参加的考试名称"
+    },
+    {
+      key: "score",
+      label: "成绩",
+      placeholder: "{{成绩}}",
+      category: "考试信息",
+      description: "考试成绩"
+    },
+    {
+      key: "scoreLevel",
+      label: "成绩等级",
+      placeholder: "{{成绩等级}}",
+      category: "考试信息",
+      description: "成绩等级（如：优秀、良好、合格等）"
+    },
+    {
+      key: "certificateNumber",
+      label: "证书编号",
+      placeholder: "{{证书编号}}",
+      category: "证书信息",
+      description: "证书的唯一编号"
+    },
+    {
+      key: "validityPeriod",
+      label: "有效期",
+      placeholder: "{{有效期}}",
+      category: "证书信息",
+      description: "证书的有效期限"
+    },
+    {
+      key: "issueDate",
+      label: "颁发日期",
+      placeholder: "{{颁发日期}}",
+      category: "证书信息",
+      description: "证书颁发的日期"
+    },
+    {
+      key: "organization",
+      label: "颁发机构",
+      placeholder: "{{颁发机构}}",
+      category: "证书信息",
+      description: "颁发证书的机构名称"
+    },
+    {
+      key: "idNumber",
+      label: "身份证号",
+      placeholder: "{{身份证号}}",
+      category: "基本信息",
+      description: "身份证号码"
+    },
+    {
+      key: "phone",
+      label: "联系电话",
+      placeholder: "{{联系电话}}",
+      category: "基本信息",
+      description: "联系电话"
+    },
+    {
+      key: "email",
+      label: "电子邮箱",
+      placeholder: "{{电子邮箱}}",
+      category: "基本信息",
+      description: "电子邮箱地址"
+    },
+    {
+      key: "account",
+      label: "账号",
+      placeholder: "{{账号}}",
+      category: "基本信息",
+      description: "用户账号"
+    },
+    {
+      key: "examScore",
+      label: "考试得分",
+      placeholder: "{{考试得分}}",
+      category: "考试信息",
+      description: "考试得分"
+    },
+    {
+      key: "issueDateMonth",
+      label: "颁证时间(月)",
+      placeholder: "{{颁证时间(月)}}",
+      category: "证书信息",
+      description: "证书颁发的月份"
+    },
+    {
+      key: "issueDateDay",
+      label: "颁证时间(日)",
+      placeholder: "{{颁证时间(日)}}",
+      category: "证书信息",
+      description: "证书颁发的日期"
+    }
+  ];
+  const FIELDS_BY_CATEGORY = SYSTEM_FIELDS.reduce((acc, field) => {
+    if (!acc[field.category]) {
+      acc[field.category] = [];
+    }
+    acc[field.category].push(field);
+    return acc;
+  }, {});
+  const getFieldByKey = (key) => {
+    return SYSTEM_FIELDS.find((field) => field.key === key);
+  };
+  const getPlaceholderByKey = (key) => {
+    const field = getFieldByKey(key);
+    return field ? field.placeholder : `{{${key}}}`;
+  };
+  const replaceFields = (text, fieldData = {}) => {
+    if (!text) return "";
+    let result = text;
+    SYSTEM_FIELDS.forEach((field) => {
+      const placeholder = field.placeholder;
+      const value = fieldData[field.key] || field.placeholder;
+      const regex = new RegExp(placeholder.replace(/[{}]/g, "\\$&"), "g");
+      result = result.replace(regex, value);
+    });
+    return result;
+  };
+  const extractFields = (text) => {
+    if (!text) return [];
+    const fields = [];
+    SYSTEM_FIELDS.forEach((field) => {
+      if (text.includes(field.placeholder)) {
+        fields.push(field);
+      }
+    });
+    return fields;
+  };
+  const hasFields = (text) => {
+    if (!text) return false;
+    return SYSTEM_FIELDS.some((field) => text.includes(field.placeholder));
+  };
+  const DEFAULT_FIELD_DATA = {
+    name: "张三",
+    gender: "先生",
+    examName: "计算机应用能力考试",
+    score: "95",
+    scoreLevel: "优秀",
+    certificateNumber: "CERT-2024-001234",
+    validityPeriod: "2024-01-01 至 2027-01-01",
+    issueDate: "2024-01-01",
+    organization: "考试认证中心",
+    idNumber: "110101199001011234",
+    phone: "13800138000",
+    email: "zhangsan@example.com",
+    account: "user001",
+    examScore: "95",
+    issueDateMonth: "01",
+    issueDateDay: "01"
+  };
+  const _hoisted_1$5 = { class: "canvas-area" };
+  const _hoisted_2$5 = {
+    key: 0,
+    class: "certificate-border"
+  };
+  const _hoisted_3$5 = ["onClick", "onMousedown"];
+  const _hoisted_4$5 = {
+    key: 0,
+    class: "text-content"
+  };
+  const _hoisted_5$4 = ["innerHTML"];
+  const _hoisted_6$4 = {
+    key: 1,
+    class: "image-element"
+  };
+  const _hoisted_7$4 = ["src"];
+  const _hoisted_8$3 = {
+    key: 1,
+    class: "image-placeholder"
+  };
+  const _hoisted_9$3 = {
+    key: 2,
+    class: "qrcode-element"
+  };
+  const _hoisted_10$3 = ["src"];
+  const _hoisted_11$2 = {
+    key: 1,
+    class: "qrcode-content"
+  };
+  const _hoisted_12$2 = { class: "qrcode-info" };
+  const _hoisted_13$1 = {
+    key: 2,
+    class: "qrcode-placeholder"
+  };
+  const _hoisted_14$1 = {
+    key: 3,
+    class: "resize-handles"
+  };
+  const _hoisted_15$1 = ["onMousedown"];
+  const _hoisted_16$1 = ["onMousedown"];
+  const _hoisted_17$1 = ["onMousedown"];
+  const _hoisted_18$1 = ["onMousedown"];
+  const _hoisted_19$1 = ["onClick"];
+  const _sfc_main$5 = {
+    __name: "CanvasArea",
+    props: {
+      elements: {
+        type: Array,
+        default: () => []
+      },
+      selectedElement: {
+        type: Object,
+        default: null
+      },
+      fieldData: {
+        type: Object,
+        default: () => ({})
+      },
+      template: {
+        type: Object,
+        default: null
+      },
+      systemFields: {
+        type: Array,
+        default: () => SYSTEM_FIELDS
+      }
+    },
+    emits: ["select-element", "update-element", "delete-element"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const renderTextWithFields = (text) => {
+        if (!text) return "";
+        const fieldData = props.fieldData || {};
+        let result = text;
+        props.systemFields.forEach((field) => {
+          const placeholder = field.placeholder;
+          const value = fieldData[field.key] || placeholder;
+          if (fieldData[field.key]) {
+            const regex = new RegExp(placeholder.replace(/[{}]/g, "\\$&"), "g");
+            result = result.replace(regex, `<span class="field-value">${value}</span>`);
+          } else {
+            const regex = new RegExp(placeholder.replace(/[{}]/g, "\\$&"), "g");
+            result = result.replace(regex, `<span class="field-placeholder-highlight">${placeholder}</span>`);
+          }
+        });
+        return result;
+      };
+      const getImageSrc = (element) => {
+        if (!element) return null;
+        if (element.imageSource === "field") {
+          const fieldKey = element.imageField;
+          if (fieldKey && props.fieldData && props.fieldData[fieldKey]) {
+            return props.fieldData[fieldKey];
+          }
+          return null;
+        } else {
+          return element.imageUrl || null;
+        }
+      };
+      const getQrcodeContent = (element) => {
+        if (!element) return null;
+        if (element.qrcodeSource === "field") {
+          const fieldKey = element.qrcodeField;
+          if (fieldKey && props.fieldData && props.fieldData[fieldKey]) {
+            return props.fieldData[fieldKey];
+          }
+          return null;
+        } else {
+          return element.qrcodeContent || null;
+        }
+      };
+      const isImageUrl = (url) => {
+        if (!url) return false;
+        if (url.startsWith("data:image/")) return true;
+        if (url.startsWith("http://") || url.startsWith("https://")) {
+          const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".bmp"];
+          const lowerUrl = url.toLowerCase();
+          return imageExtensions.some((ext) => lowerUrl.includes(ext));
+        }
+        return false;
+      };
+      const getCanvasStyle = () => {
+        const baseStyle = {};
+        if (props.template) {
+          baseStyle.width = `${props.template.width}px`;
+          baseStyle.minHeight = `${props.template.height}px`;
+        } else {
+          baseStyle.width = "800px";
+          baseStyle.minHeight = "1000px";
+        }
+        if (props.template && props.template.background) {
+          if (props.template.background.startsWith("data:") || props.template.background.startsWith("http")) {
+            baseStyle.backgroundImage = `url(${props.template.background})`;
+            baseStyle.backgroundSize = "100% 100%";
+            baseStyle.backgroundPosition = "center";
+            baseStyle.backgroundRepeat = "no-repeat";
+          } else {
+            baseStyle.background = props.template.background;
+            baseStyle.backgroundSize = "100% 100%";
+            baseStyle.backgroundPosition = "center";
+            baseStyle.backgroundRepeat = "no-repeat";
+          }
+        }
+        return baseStyle;
+      };
+      const canvasRef = vue.ref(null);
+      const isDragging = vue.ref(false);
+      const isResizing = vue.ref(false);
+      const dragStart = vue.ref({ x: 0, y: 0 });
+      const resizeStart = vue.ref({ x: 0, y: 0, width: 0, height: 0 });
+      const currentElement = vue.ref(null);
+      const resizeDirection = vue.ref("");
+      const getElementStyle = (element) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const baseStyle = {
+          position: "absolute",
+          left: `${element.x}px`,
+          top: `${element.y}px`,
+          width: `${element.width}px`,
+          minHeight: `${element.height}px`
+        };
+        if (element.type === "text" || element.type === "longtext") {
+          return {
+            ...baseStyle,
+            fontSize: `${((_a = element.style) == null ? void 0 : _a.fontSize) || 18}px`,
+            fontFamily: ((_b = element.style) == null ? void 0 : _b.fontFamily) || "方正书宋简体",
+            fontWeight: ((_c = element.style) == null ? void 0 : _c.fontWeight) || "normal",
+            fontStyle: ((_d = element.style) == null ? void 0 : _d.fontStyle) || "normal",
+            textDecoration: ((_e = element.style) == null ? void 0 : _e.textDecoration) || "none",
+            color: ((_f = element.style) == null ? void 0 : _f.color) || "#000000",
+            textAlign: ((_g = element.style) == null ? void 0 : _g.textAlign) || "left",
+            lineHeight: ((_h = element.style) == null ? void 0 : _h.lineHeight) || 1.2
+          };
+        }
+        return baseStyle;
+      };
+      const handleMouseDown = (e, element) => {
+        if (e.target.closest(".handle") || e.target.closest(".delete-btn")) {
+          return;
+        }
+        isDragging.value = true;
+        currentElement.value = element;
+        dragStart.value = {
+          x: e.clientX - element.x,
+          y: e.clientY - element.y
+        };
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+      };
+      const handleMouseMove = (e) => {
+        if (isDragging.value && currentElement.value) {
+          const newX = e.clientX - dragStart.value.x;
+          const newY = e.clientY - dragStart.value.y;
+          const updatedElement = {
+            ...currentElement.value,
+            x: Math.max(0, newX),
+            y: Math.max(0, newY)
+          };
+          emit("update-element", updatedElement);
+        } else if (isResizing.value && currentElement.value) {
+          const deltaX = e.clientX - resizeStart.value.x;
+          const deltaY = e.clientY - resizeStart.value.y;
+          let newWidth = resizeStart.value.width;
+          let newHeight = resizeStart.value.height;
+          let newX = currentElement.value.x;
+          let newY = currentElement.value.y;
+          if (resizeDirection.value.includes("e")) {
+            newWidth = Math.max(50, resizeStart.value.width + deltaX);
+          }
+          if (resizeDirection.value.includes("w")) {
+            newWidth = Math.max(50, resizeStart.value.width - deltaX);
+            newX = currentElement.value.x + (resizeStart.value.width - newWidth);
+          }
+          if (resizeDirection.value.includes("s")) {
+            newHeight = Math.max(30, resizeStart.value.height + deltaY);
+          }
+          if (resizeDirection.value.includes("n")) {
+            newHeight = Math.max(30, resizeStart.value.height - deltaY);
+            newY = currentElement.value.y + (resizeStart.value.height - newHeight);
+          }
+          const updatedElement = {
+            ...currentElement.value,
+            x: newX,
+            y: newY,
+            width: newWidth,
+            height: newHeight
+          };
+          emit("update-element", updatedElement);
+        }
+      };
+      const handleMouseUp = () => {
+        isDragging.value = false;
+        isResizing.value = false;
+        currentElement.value = null;
+        resizeDirection.value = "";
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      const handleResizeStart = (e, element, direction) => {
+        e.stopPropagation();
+        isResizing.value = true;
+        currentElement.value = element;
+        resizeDirection.value = direction;
+        resizeStart.value = {
+          x: e.clientX,
+          y: e.clientY,
+          width: element.width,
+          height: element.height
+        };
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+      };
+      vue.onUnmounted(() => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+          vue.createElementVNode("div", {
+            class: "certificate-canvas",
+            ref_key: "canvasRef",
+            ref: canvasRef,
+            style: vue.normalizeStyle(getCanvasStyle())
+          }, [
+            !props.template || !props.template.background ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5)) : vue.createCommentVNode("", true),
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.elements, (element) => {
+              var _a, _b, _c;
+              return vue.openBlock(), vue.createElementBlock("div", {
+                key: element.id,
+                class: vue.normalizeClass(["editable-element", element.type, { selected: ((_a = __props.selectedElement) == null ? void 0 : _a.id) === element.id }]),
+                style: vue.normalizeStyle(getElementStyle(element)),
+                onClick: vue.withModifiers(($event) => _ctx.$emit("select-element", element), ["stop"]),
+                onMousedown: ($event) => handleMouseDown($event, element)
+              }, [
+                element.type === "text" || element.type === "longtext" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$5, [
+                  vue.createElementVNode("span", {
+                    innerHTML: renderTextWithFields(element.content)
+                  }, null, 8, _hoisted_5$4)
+                ])) : element.type === "image" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$4, [
+                  getImageSrc(element) ? (vue.openBlock(), vue.createElementBlock("img", {
+                    key: 0,
+                    src: getImageSrc(element),
+                    alt: "图片",
+                    class: "element-image"
+                  }, null, 8, _hoisted_7$4)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$3, [..._cache[0] || (_cache[0] = [
+                    vue.createElementVNode("span", null, "🖼️ 请设置图片", -1)
+                  ])]))
+                ])) : element.type === "qrcode" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$3, [
+                  getQrcodeContent(element) && isImageUrl(getQrcodeContent(element)) ? (vue.openBlock(), vue.createElementBlock("img", {
+                    key: 0,
+                    src: getQrcodeContent(element),
+                    alt: "二维码",
+                    class: "element-image"
+                  }, null, 8, _hoisted_10$3)) : getQrcodeContent(element) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$2, [
+                    _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "qrcode-placeholder-text" }, "二维码", -1)),
+                    vue.createElementVNode("div", _hoisted_12$2, vue.toDisplayString(getQrcodeContent(element)), 1)
+                  ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$1, [..._cache[2] || (_cache[2] = [
+                    vue.createElementVNode("span", null, "🔲 请设置二维码", -1)
+                  ])]))
+                ])) : vue.createCommentVNode("", true),
+                ((_b = __props.selectedElement) == null ? void 0 : _b.id) === element.id ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14$1, [
+                  vue.createElementVNode("div", {
+                    class: "handle handle-nw",
+                    onMousedown: vue.withModifiers(($event) => handleResizeStart($event, element, "nw"), ["stop"])
+                  }, null, 40, _hoisted_15$1),
+                  vue.createElementVNode("div", {
+                    class: "handle handle-ne",
+                    onMousedown: vue.withModifiers(($event) => handleResizeStart($event, element, "ne"), ["stop"])
+                  }, null, 40, _hoisted_16$1),
+                  vue.createElementVNode("div", {
+                    class: "handle handle-sw",
+                    onMousedown: vue.withModifiers(($event) => handleResizeStart($event, element, "sw"), ["stop"])
+                  }, null, 40, _hoisted_17$1),
+                  vue.createElementVNode("div", {
+                    class: "handle handle-se",
+                    onMousedown: vue.withModifiers(($event) => handleResizeStart($event, element, "se"), ["stop"])
+                  }, null, 40, _hoisted_18$1)
+                ])) : vue.createCommentVNode("", true),
+                ((_c = __props.selectedElement) == null ? void 0 : _c.id) === element.id ? (vue.openBlock(), vue.createElementBlock("button", {
+                  key: 4,
+                  class: "delete-btn",
+                  onClick: vue.withModifiers(($event) => _ctx.$emit("delete-element", element.id), ["stop"])
+                }, " × ", 8, _hoisted_19$1)) : vue.createCommentVNode("", true)
+              ], 46, _hoisted_3$5);
+            }), 128))
+          ], 4)
+        ]);
+      };
+    }
+  };
+  const CanvasArea = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-81f2131e"]]);
+  const _hoisted_1$4 = { class: "field-dialog" };
+  const _hoisted_2$4 = { class: "dialog-content" };
+  const _hoisted_3$4 = { class: "search-box" };
+  const _hoisted_4$4 = { class: "table-container" };
+  const _hoisted_5$3 = { class: "fields-table" };
+  const _hoisted_6$3 = { class: "field-name" };
+  const _hoisted_7$3 = { class: "field-action" };
+  const _hoisted_8$2 = ["onClick"];
+  const _hoisted_9$2 = {
+    key: 0,
+    class: "pagination"
+  };
+  const _hoisted_10$2 = ["disabled"];
+  const _hoisted_11$1 = ["onClick"];
+  const _hoisted_12$1 = ["disabled"];
+  const pageSize = 10;
+  const _sfc_main$4 = {
+    __name: "FieldDialog",
+    props: {
+      visible: {
+        type: Boolean,
+        default: false
+      },
+      currentText: {
+        type: String,
+        default: ""
+      },
+      selectionStart: {
+        type: Number,
+        default: 0
+      },
+      selectionEnd: {
+        type: Number,
+        default: 0
+      },
+      systemFields: {
+        type: Array,
+        default: () => SYSTEM_FIELDS
+      }
+    },
+    emits: ["close", "insert"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const searchText = vue.ref("");
+      const currentPage = vue.ref(1);
+      const filteredFields = vue.computed(() => {
+        if (!searchText.value.trim()) {
+          return props.systemFields;
+        }
+        const searchLower = searchText.value.toLowerCase();
+        return props.systemFields.filter(
+          (field) => field.label.toLowerCase().includes(searchLower) || field.key.toLowerCase().includes(searchLower) || field.description && field.description.toLowerCase().includes(searchLower)
+        );
+      });
+      const totalPages = vue.computed(() => {
+        return Math.ceil(filteredFields.value.length / pageSize);
+      });
+      const paginatedFields = vue.computed(() => {
+        const start = (currentPage.value - 1) * pageSize;
+        const end = start + pageSize;
+        return filteredFields.value.slice(start, end);
+      });
+      const handleSearch = () => {
+        currentPage.value = 1;
+      };
+      const goToPage = (page) => {
+        if (page >= 1 && page <= totalPages.value) {
+          currentPage.value = page;
+        }
+      };
+      const handleSelectField = (field) => {
+        emit("insert", [field]);
+      };
+      const handleClose = () => {
+        searchText.value = "";
+        currentPage.value = 1;
+        emit("close");
+      };
+      return (_ctx, _cache) => {
+        return __props.visible ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: "field-dialog-overlay",
+          onClick: vue.withModifiers(handleClose, ["self"])
+        }, [
+          vue.createElementVNode("div", _hoisted_1$4, [
+            vue.createElementVNode("div", { class: "dialog-header" }, [
+              _cache[3] || (_cache[3] = vue.createElementVNode("h3", null, "选择字段", -1)),
+              vue.createElementVNode("button", {
+                class: "close-btn",
+                onClick: handleClose
+              }, "×")
+            ]),
+            vue.createElementVNode("div", _hoisted_2$4, [
+              vue.createElementVNode("div", _hoisted_3$4, [
+                vue.withDirectives(vue.createElementVNode("input", {
+                  type: "text",
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchText.value = $event),
+                  placeholder: "搜索字段...",
+                  class: "search-input",
+                  onInput: handleSearch
+                }, null, 544), [
+                  [vue.vModelText, searchText.value]
+                ])
+              ]),
+              vue.createElementVNode("div", _hoisted_4$4, [
+                vue.createElementVNode("table", _hoisted_5$3, [
+                  _cache[4] || (_cache[4] = vue.createElementVNode("thead", null, [
+                    vue.createElementVNode("tr", null, [
+                      vue.createElementVNode("th", null, "系统字段"),
+                      vue.createElementVNode("th", null, "操作")
+                    ])
+                  ], -1)),
+                  vue.createElementVNode("tbody", null, [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(paginatedFields.value, (field) => {
+                      return vue.openBlock(), vue.createElementBlock("tr", {
+                        key: field.key,
+                        class: "field-row"
+                      }, [
+                        vue.createElementVNode("td", _hoisted_6$3, vue.toDisplayString(field.label), 1),
+                        vue.createElementVNode("td", _hoisted_7$3, [
+                          vue.createElementVNode("button", {
+                            class: "select-btn",
+                            onClick: ($event) => handleSelectField(field)
+                          }, " 选择 ", 8, _hoisted_8$2)
+                        ])
+                      ]);
+                    }), 128))
+                  ])
+                ])
+              ]),
+              totalPages.value > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$2, [
+                vue.createElementVNode("button", {
+                  class: "page-btn",
+                  disabled: currentPage.value === 1,
+                  onClick: _cache[1] || (_cache[1] = ($event) => goToPage(currentPage.value - 1))
+                }, " < ", 8, _hoisted_10$2),
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(totalPages.value, (page) => {
+                  return vue.openBlock(), vue.createElementBlock("button", {
+                    key: page,
+                    class: vue.normalizeClass(["page-btn", { active: page === currentPage.value }]),
+                    onClick: ($event) => goToPage(page)
+                  }, vue.toDisplayString(page), 11, _hoisted_11$1);
+                }), 128)),
+                vue.createElementVNode("button", {
+                  class: "page-btn",
+                  disabled: currentPage.value === totalPages.value,
+                  onClick: _cache[2] || (_cache[2] = ($event) => goToPage(currentPage.value + 1))
+                }, " > ", 8, _hoisted_12$1)
+              ])) : vue.createCommentVNode("", true)
+            ])
+          ])
+        ])) : vue.createCommentVNode("", true);
+      };
+    }
+  };
+  const FieldDialog = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-c4ecd92f"]]);
+  const _hoisted_1$3 = { class: "properties-panel" };
+  const _hoisted_2$3 = { class: "panel-content" };
+  const _hoisted_3$3 = {
+    key: 0,
+    class: "content-section"
+  };
+  const _hoisted_4$3 = { class: "form-group" };
+  const _hoisted_5$2 = { class: "content-input-wrapper" };
+  const _hoisted_6$2 = ["rows"];
+  const _hoisted_7$2 = {
+    key: 1,
+    class: "style-section"
+  };
+  const _hoisted_8$1 = { class: "form-group" };
+  const _hoisted_9$1 = { class: "form-group" };
+  const _hoisted_10$1 = { class: "form-group" };
+  const _hoisted_11 = { class: "style-buttons" };
+  const _hoisted_12 = { class: "form-group" };
+  const _hoisted_13 = { class: "form-group" };
+  const _hoisted_14 = { class: "align-buttons" };
+  const _hoisted_15 = { class: "form-group" };
+  const _hoisted_16 = {
+    key: 2,
+    class: "image-section"
+  };
+  const _hoisted_17 = { class: "form-group" };
+  const _hoisted_18 = { class: "radio-group" };
+  const _hoisted_19 = { class: "radio-label" };
+  const _hoisted_20 = { class: "radio-label" };
+  const _hoisted_21 = {
+    key: 0,
+    class: "form-group"
+  };
+  const _hoisted_22 = { class: "image-upload-wrapper" };
+  const _hoisted_23 = {
+    key: 0,
+    class: "image-preview"
+  };
+  const _hoisted_24 = ["src"];
+  const _hoisted_25 = {
+    key: 1,
+    class: "form-group"
+  };
+  const _hoisted_26 = ["value"];
+  const _hoisted_27 = {
+    key: 0,
+    class: "field-preview"
+  };
+  const _hoisted_28 = {
+    key: 3,
+    class: "qrcode-section"
+  };
+  const _hoisted_29 = { class: "form-group" };
+  const _hoisted_30 = { class: "radio-group" };
+  const _hoisted_31 = { class: "radio-label" };
+  const _hoisted_32 = { class: "radio-label" };
+  const _hoisted_33 = {
+    key: 0,
+    class: "form-group"
+  };
+  const _hoisted_34 = { class: "qrcode-upload-wrapper" };
+  const _hoisted_35 = {
+    key: 0,
+    class: "qrcode-preview"
+  };
+  const _hoisted_36 = ["src"];
+  const _hoisted_37 = {
+    key: 1,
+    class: "form-group"
+  };
+  const _hoisted_38 = ["value"];
+  const _hoisted_39 = {
+    key: 0,
+    class: "field-preview"
+  };
+  const _hoisted_40 = { class: "position-section" };
+  const _hoisted_41 = { class: "form-row" };
+  const _hoisted_42 = { class: "form-group" };
+  const _hoisted_43 = { class: "form-group" };
+  const _hoisted_44 = { class: "form-row" };
+  const _hoisted_45 = { class: "form-group" };
+  const _hoisted_46 = { class: "form-group" };
+  const _sfc_main$3 = {
+    __name: "PropertiesPanel",
+    props: {
+      element: {
+        type: Object,
+        required: true
+      },
+      systemFields: {
+        type: Array,
+        default: () => SYSTEM_FIELDS
+      }
+    },
+    emits: ["update-element"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const localContent = vue.ref("");
+      const localStyle = vue.ref({});
+      const localImageSource = vue.ref("url");
+      const localImageUrl = vue.ref("");
+      const localImageField = vue.ref("");
+      const localQrcodeSource = vue.ref("url");
+      const localQrcodeContent = vue.ref("");
+      const localQrcodeField = vue.ref("");
+      const showFieldDialog = vue.ref(false);
+      const selectionStart = vue.ref(0);
+      const selectionEnd = vue.ref(0);
+      const contentTextareaRef = vue.ref(null);
+      const imageFileInputRef = vue.ref(null);
+      const qrcodeFileInputRef = vue.ref(null);
+      const initLocalState = () => {
+        localContent.value = props.element.content || "";
+        localStyle.value = { ...props.element.style };
+        if (props.element.type === "image") {
+          localImageSource.value = props.element.imageSource || "url";
+          localImageUrl.value = props.element.imageUrl || "";
+          localImageField.value = props.element.imageField || "";
+        }
+        if (props.element.type === "qrcode") {
+          localQrcodeSource.value = props.element.qrcodeSource || "url";
+          localQrcodeContent.value = props.element.qrcodeContent || "";
+          localQrcodeField.value = props.element.qrcodeField || "";
+        }
+      };
+      vue.watch(() => props.element, initLocalState, { immediate: true, deep: true });
+      const updateElement = () => {
+        const updated = { ...props.element };
+        if (props.element.type === "text" || props.element.type === "longtext") {
+          updated.content = localContent.value;
+          updated.style = { ...localStyle.value };
+        }
+        if (props.element.type === "image") {
+          updated.imageSource = localImageSource.value;
+          updated.imageUrl = localImageUrl.value;
+          updated.imageField = localImageField.value;
+        }
+        if (props.element.type === "qrcode") {
+          updated.qrcodeSource = localQrcodeSource.value;
+          updated.qrcodeContent = localQrcodeContent.value;
+          updated.qrcodeField = localQrcodeField.value;
+        }
+        emit("update-element", updated);
+      };
+      const handleContentChange = () => {
+        updateElement();
+      };
+      const handleTextareaFocus = (e) => {
+        selectionStart.value = e.target.selectionStart;
+        selectionEnd.value = e.target.selectionEnd;
+      };
+      const handleInsertField = (fields) => {
+        if (fields.length > 0) {
+          const field = fields[0];
+          const textarea = contentTextareaRef.value;
+          if (textarea) {
+            const start = selectionStart.value;
+            const end = selectionEnd.value;
+            const text = localContent.value;
+            const newText = text.substring(0, start) + field.placeholder + text.substring(end);
+            localContent.value = newText;
+            setTimeout(() => {
+              const newPos = start + field.placeholder.length;
+              textarea.setSelectionRange(newPos, newPos);
+              textarea.focus();
+            }, 0);
+            updateElement();
+          }
+        }
+      };
+      const toggleStyle = (property, value1, value2) => {
+        localStyle.value[property] = localStyle.value[property] === value1 ? value2 : value1;
+        updateElement();
+      };
+      const setAlign = (align) => {
+        localStyle.value.textAlign = align;
+        updateElement();
+      };
+      const handleImageSourceChange = () => {
+        updateElement();
+      };
+      const triggerImageUpload = () => {
+        var _a;
+        (_a = imageFileInputRef.value) == null ? void 0 : _a.click();
+      };
+      const handleImageUpload = async (event) => {
+        var _a;
+        const file = (_a = event.target.files) == null ? void 0 : _a[0];
+        if (!file) return;
+        const validation = validateImageFile(file);
+        if (!validation.valid) {
+          alert(validation.error);
+          return;
+        }
+        try {
+          const base64 = await fileToBase64(file);
+          localImageUrl.value = base64;
+          localImageSource.value = "url";
+          updateElement();
+        } catch (error) {
+          alert("上传失败，请重试");
+          console.error(error);
+        }
+        if (imageFileInputRef.value) {
+          imageFileInputRef.value.value = "";
+        }
+      };
+      const removeImage = () => {
+        localImageUrl.value = "";
+        updateElement();
+      };
+      const handleQrcodeSourceChange = () => {
+        updateElement();
+      };
+      const triggerQrcodeUpload = () => {
+        var _a;
+        (_a = qrcodeFileInputRef.value) == null ? void 0 : _a.click();
+      };
+      const handleQrcodeUpload = async (event) => {
+        var _a;
+        const file = (_a = event.target.files) == null ? void 0 : _a[0];
+        if (!file) return;
+        const validation = validateImageFile(file);
+        if (!validation.valid) {
+          alert(validation.error);
+          return;
+        }
+        try {
+          const base64 = await fileToBase64(file);
+          localQrcodeContent.value = base64;
+          localQrcodeSource.value = "url";
+          updateElement();
+        } catch (error) {
+          alert("上传失败，请重试");
+          console.error(error);
+        }
+        if (qrcodeFileInputRef.value) {
+          qrcodeFileInputRef.value.value = "";
+        }
+      };
+      const removeQrcode = () => {
+        localQrcodeContent.value = "";
+        updateElement();
+      };
+      const getFieldLabel = (key) => {
+        const field = props.systemFields.find((f) => f.key === key);
+        if (field) return field.label;
+        const defaultField = getFieldByKey(key);
+        return defaultField ? defaultField.label : key;
+      };
+      const isImageUrl = (url) => {
+        if (!url) return false;
+        if (url.startsWith("data:image/")) return true;
+        if (url.startsWith("http://") || url.startsWith("https://")) {
+          const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".bmp"];
+          const lowerUrl = url.toLowerCase();
+          return imageExtensions.some((ext) => lowerUrl.includes(ext));
+        }
+        return false;
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+          _cache[63] || (_cache[63] = vue.createElementVNode("div", { class: "panel-header" }, [
+            vue.createElementVNode("h3", null, "属性设置")
+          ], -1)),
+          vue.createElementVNode("div", _hoisted_2$3, [
+            __props.element.type === "text" || __props.element.type === "longtext" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, [
+              vue.createElementVNode("div", _hoisted_4$3, [
+                _cache[26] || (_cache[26] = vue.createElementVNode("label", { class: "form-label" }, "内容", -1)),
+                vue.createElementVNode("div", _hoisted_5$2, [
+                  vue.withDirectives(vue.createElementVNode("textarea", {
+                    ref_key: "contentTextareaRef",
+                    ref: contentTextareaRef,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => localContent.value = $event),
+                    onInput: handleContentChange,
+                    onFocus: handleTextareaFocus,
+                    rows: __props.element.type === "longtext" ? 6 : 3,
+                    class: "content-textarea"
+                  }, null, 40, _hoisted_6$2), [
+                    [vue.vModelText, localContent.value]
+                  ]),
+                  vue.createElementVNode("button", {
+                    class: "insert-field-btn",
+                    onClick: _cache[1] || (_cache[1] = ($event) => showFieldDialog.value = true)
+                  }, [..._cache[25] || (_cache[25] = [
+                    vue.createElementVNode("span", null, "+", -1),
+                    vue.createElementVNode("span", null, "在内容中关联系统字段", -1)
+                  ])])
+                ])
+              ])
+            ])) : vue.createCommentVNode("", true),
+            __props.element.type === "text" || __props.element.type === "longtext" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$2, [
+              _cache[38] || (_cache[38] = vue.createElementVNode("div", { class: "section-title" }, "文本样式", -1)),
+              vue.createElementVNode("div", _hoisted_8$1, [
+                _cache[28] || (_cache[28] = vue.createElementVNode("label", { class: "form-label" }, "字体大小", -1)),
+                vue.withDirectives(vue.createElementVNode("select", {
+                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => localStyle.value.fontSize = $event),
+                  onChange: updateElement,
+                  class: "form-select"
+                }, [..._cache[27] || (_cache[27] = [
+                  vue.createElementVNode("option", { value: 12 }, "12px", -1),
+                  vue.createElementVNode("option", { value: 14 }, "14px", -1),
+                  vue.createElementVNode("option", { value: 16 }, "16px", -1),
+                  vue.createElementVNode("option", { value: 18 }, "18px", -1),
+                  vue.createElementVNode("option", { value: 20 }, "20px", -1),
+                  vue.createElementVNode("option", { value: 24 }, "24px", -1),
+                  vue.createElementVNode("option", { value: 28 }, "28px", -1),
+                  vue.createElementVNode("option", { value: 32 }, "32px", -1),
+                  vue.createElementVNode("option", { value: 36 }, "36px", -1),
+                  vue.createElementVNode("option", { value: 48 }, "48px", -1)
+                ])], 544), [
+                  [
+                    vue.vModelSelect,
+                    localStyle.value.fontSize,
+                    void 0,
+                    { number: true }
+                  ]
+                ])
+              ]),
+              vue.createElementVNode("div", _hoisted_9$1, [
+                _cache[30] || (_cache[30] = vue.createElementVNode("label", { class: "form-label" }, "字体", -1)),
+                vue.withDirectives(vue.createElementVNode("select", {
+                  "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => localStyle.value.fontFamily = $event),
+                  onChange: updateElement,
+                  class: "form-select"
+                }, [..._cache[29] || (_cache[29] = [
+                  vue.createStaticVNode('<option value="方正书宋简体" data-v-7662a3c6>方正书宋简体</option><option value="微软雅黑" data-v-7662a3c6>微软雅黑</option><option value="宋体" data-v-7662a3c6>宋体</option><option value="黑体" data-v-7662a3c6>黑体</option><option value="Arial" data-v-7662a3c6>Arial</option>', 5)
+                ])], 544), [
+                  [vue.vModelSelect, localStyle.value.fontFamily]
+                ])
+              ]),
+              vue.createElementVNode("div", _hoisted_10$1, [
+                _cache[34] || (_cache[34] = vue.createElementVNode("label", { class: "form-label" }, "文字样式", -1)),
+                vue.createElementVNode("div", _hoisted_11, [
+                  vue.createElementVNode("button", {
+                    class: vue.normalizeClass(["style-btn", { active: localStyle.value.fontWeight === "bold" }]),
+                    onClick: _cache[4] || (_cache[4] = ($event) => toggleStyle("fontWeight", "bold", "normal"))
+                  }, [..._cache[31] || (_cache[31] = [
+                    vue.createElementVNode("strong", null, "B", -1)
+                  ])], 2),
+                  vue.createElementVNode("button", {
+                    class: vue.normalizeClass(["style-btn", { active: localStyle.value.fontStyle === "italic" }]),
+                    onClick: _cache[5] || (_cache[5] = ($event) => toggleStyle("fontStyle", "italic", "normal"))
+                  }, [..._cache[32] || (_cache[32] = [
+                    vue.createElementVNode("em", null, "I", -1)
+                  ])], 2),
+                  vue.createElementVNode("button", {
+                    class: vue.normalizeClass(["style-btn", { active: localStyle.value.textDecoration === "underline" }]),
+                    onClick: _cache[6] || (_cache[6] = ($event) => toggleStyle("textDecoration", "underline", "none"))
+                  }, [..._cache[33] || (_cache[33] = [
+                    vue.createElementVNode("u", null, "U", -1)
+                  ])], 2)
+                ])
+              ]),
+              vue.createElementVNode("div", _hoisted_12, [
+                _cache[35] || (_cache[35] = vue.createElementVNode("label", { class: "form-label" }, "颜色", -1)),
+                vue.withDirectives(vue.createElementVNode("input", {
+                  type: "color",
+                  "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => localStyle.value.color = $event),
+                  onChange: updateElement,
+                  class: "color-input"
+                }, null, 544), [
+                  [vue.vModelText, localStyle.value.color]
+                ])
+              ]),
+              vue.createElementVNode("div", _hoisted_13, [
+                _cache[36] || (_cache[36] = vue.createElementVNode("label", { class: "form-label" }, "对齐方式", -1)),
+                vue.createElementVNode("div", _hoisted_14, [
+                  vue.createElementVNode("button", {
+                    class: vue.normalizeClass(["align-btn", { active: localStyle.value.textAlign === "left" }]),
+                    onClick: _cache[8] || (_cache[8] = ($event) => setAlign("left"))
+                  }, " 左对齐 ", 2),
+                  vue.createElementVNode("button", {
+                    class: vue.normalizeClass(["align-btn", { active: localStyle.value.textAlign === "center" }]),
+                    onClick: _cache[9] || (_cache[9] = ($event) => setAlign("center"))
+                  }, " 居中 ", 2),
+                  vue.createElementVNode("button", {
+                    class: vue.normalizeClass(["align-btn", { active: localStyle.value.textAlign === "right" }]),
+                    onClick: _cache[10] || (_cache[10] = ($event) => setAlign("right"))
+                  }, " 右对齐 ", 2)
+                ])
+              ]),
+              vue.createElementVNode("div", _hoisted_15, [
+                _cache[37] || (_cache[37] = vue.createElementVNode("label", { class: "form-label" }, "行高", -1)),
+                vue.withDirectives(vue.createElementVNode("input", {
+                  type: "number",
+                  "onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => localStyle.value.lineHeight = $event),
+                  onInput: updateElement,
+                  step: "0.1",
+                  min: "0.5",
+                  max: "3",
+                  class: "form-input"
+                }, null, 544), [
+                  [
+                    vue.vModelText,
+                    localStyle.value.lineHeight,
+                    void 0,
+                    { number: true }
+                  ]
+                ])
+              ])
+            ])) : vue.createCommentVNode("", true),
+            __props.element.type === "image" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16, [
+              _cache[49] || (_cache[49] = vue.createElementVNode("div", { class: "section-title" }, "图片设置", -1)),
+              vue.createElementVNode("div", _hoisted_17, [
+                _cache[41] || (_cache[41] = vue.createElementVNode("label", { class: "form-label" }, "图片来源", -1)),
+                vue.createElementVNode("div", _hoisted_18, [
+                  vue.createElementVNode("label", _hoisted_19, [
+                    vue.withDirectives(vue.createElementVNode("input", {
+                      type: "radio",
+                      value: "url",
+                      "onUpdate:modelValue": _cache[12] || (_cache[12] = ($event) => localImageSource.value = $event),
+                      onChange: handleImageSourceChange
+                    }, null, 544), [
+                      [vue.vModelRadio, localImageSource.value]
+                    ]),
+                    _cache[39] || (_cache[39] = vue.createElementVNode("span", null, "URL", -1))
+                  ]),
+                  vue.createElementVNode("label", _hoisted_20, [
+                    vue.withDirectives(vue.createElementVNode("input", {
+                      type: "radio",
+                      value: "field",
+                      "onUpdate:modelValue": _cache[13] || (_cache[13] = ($event) => localImageSource.value = $event),
+                      onChange: handleImageSourceChange
+                    }, null, 544), [
+                      [vue.vModelRadio, localImageSource.value]
+                    ]),
+                    _cache[40] || (_cache[40] = vue.createElementVNode("span", null, "关联字段", -1))
+                  ])
+                ])
+              ]),
+              localImageSource.value === "url" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_21, [
+                _cache[43] || (_cache[43] = vue.createElementVNode("label", { class: "form-label" }, "图片URL", -1)),
+                vue.createElementVNode("div", _hoisted_22, [
+                  vue.createElementVNode("input", {
+                    ref_key: "imageFileInputRef",
+                    ref: imageFileInputRef,
+                    type: "file",
+                    accept: "image/jpeg,image/jpg,image/png",
+                    onChange: handleImageUpload,
+                    style: { "display": "none" }
+                  }, null, 544),
+                  vue.createElementVNode("button", {
+                    class: "upload-btn",
+                    onClick: triggerImageUpload
+                  }, [..._cache[42] || (_cache[42] = [
+                    vue.createElementVNode("span", null, "📁", -1),
+                    vue.createElementVNode("span", null, "本地上传", -1)
+                  ])]),
+                  vue.withDirectives(vue.createElementVNode("input", {
+                    type: "text",
+                    "onUpdate:modelValue": _cache[14] || (_cache[14] = ($event) => localImageUrl.value = $event),
+                    onInput: updateElement,
+                    placeholder: "请输入图片URL",
+                    class: "image-url-input"
+                  }, null, 544), [
+                    [vue.vModelText, localImageUrl.value]
+                  ]),
+                  localImageUrl.value ? (vue.openBlock(), vue.createElementBlock("button", {
+                    key: 0,
+                    class: "remove-btn",
+                    onClick: removeImage
+                  }, "移除")) : vue.createCommentVNode("", true)
+                ]),
+                localImageUrl.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_23, [
+                  vue.createElementVNode("img", {
+                    src: localImageUrl.value,
+                    alt: "预览"
+                  }, null, 8, _hoisted_24)
+                ])) : vue.createCommentVNode("", true)
+              ])) : vue.createCommentVNode("", true),
+              localImageSource.value === "field" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_25, [
+                _cache[48] || (_cache[48] = vue.createElementVNode("label", { class: "form-label" }, "关联字段", -1)),
+                vue.withDirectives(vue.createElementVNode("select", {
+                  "onUpdate:modelValue": _cache[15] || (_cache[15] = ($event) => localImageField.value = $event),
+                  onChange: updateElement,
+                  class: "form-select"
+                }, [
+                  _cache[44] || (_cache[44] = vue.createElementVNode("option", { value: "" }, "请选择字段", -1)),
+                  _cache[45] || (_cache[45] = vue.createElementVNode("option", { value: "avatar" }, "头像 (avatar)", -1)),
+                  _cache[46] || (_cache[46] = vue.createElementVNode("option", { value: "photo" }, "照片 (photo)", -1)),
+                  _cache[47] || (_cache[47] = vue.createElementVNode("option", { value: "headImage" }, "头像图片 (headImage)", -1)),
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.systemFields, (field) => {
+                    return vue.openBlock(), vue.createElementBlock("option", {
+                      key: field.key,
+                      value: field.key
+                    }, vue.toDisplayString(field.label) + " (" + vue.toDisplayString(field.placeholder) + ") ", 9, _hoisted_26);
+                  }), 128))
+                ], 544), [
+                  [vue.vModelSelect, localImageField.value]
+                ]),
+                localImageField.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_27, " 字段: " + vue.toDisplayString(getFieldLabel(localImageField.value)), 1)) : vue.createCommentVNode("", true)
+              ])) : vue.createCommentVNode("", true)
+            ])) : vue.createCommentVNode("", true),
+            __props.element.type === "qrcode" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_28, [
+              _cache[57] || (_cache[57] = vue.createElementVNode("div", { class: "section-title" }, "二维码设置", -1)),
+              vue.createElementVNode("div", _hoisted_29, [
+                _cache[52] || (_cache[52] = vue.createElementVNode("label", { class: "form-label" }, "二维码来源", -1)),
+                vue.createElementVNode("div", _hoisted_30, [
+                  vue.createElementVNode("label", _hoisted_31, [
+                    vue.withDirectives(vue.createElementVNode("input", {
+                      type: "radio",
+                      value: "url",
+                      "onUpdate:modelValue": _cache[16] || (_cache[16] = ($event) => localQrcodeSource.value = $event),
+                      onChange: handleQrcodeSourceChange
+                    }, null, 544), [
+                      [vue.vModelRadio, localQrcodeSource.value]
+                    ]),
+                    _cache[50] || (_cache[50] = vue.createElementVNode("span", null, "URL/内容", -1))
+                  ]),
+                  vue.createElementVNode("label", _hoisted_32, [
+                    vue.withDirectives(vue.createElementVNode("input", {
+                      type: "radio",
+                      value: "field",
+                      "onUpdate:modelValue": _cache[17] || (_cache[17] = ($event) => localQrcodeSource.value = $event),
+                      onChange: handleQrcodeSourceChange
+                    }, null, 544), [
+                      [vue.vModelRadio, localQrcodeSource.value]
+                    ]),
+                    _cache[51] || (_cache[51] = vue.createElementVNode("span", null, "关联字段", -1))
+                  ])
+                ])
+              ]),
+              localQrcodeSource.value === "url" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_33, [
+                _cache[54] || (_cache[54] = vue.createElementVNode("label", { class: "form-label" }, "二维码内容/图片URL", -1)),
+                vue.createElementVNode("div", _hoisted_34, [
+                  vue.createElementVNode("input", {
+                    ref_key: "qrcodeFileInputRef",
+                    ref: qrcodeFileInputRef,
+                    type: "file",
+                    accept: "image/jpeg,image/jpg,image/png",
+                    onChange: handleQrcodeUpload,
+                    style: { "display": "none" }
+                  }, null, 544),
+                  vue.createElementVNode("button", {
+                    class: "upload-btn",
+                    onClick: triggerQrcodeUpload
+                  }, [..._cache[53] || (_cache[53] = [
+                    vue.createElementVNode("span", null, "📁", -1),
+                    vue.createElementVNode("span", null, "本地上传", -1)
+                  ])]),
+                  vue.withDirectives(vue.createElementVNode("input", {
+                    type: "text",
+                    "onUpdate:modelValue": _cache[18] || (_cache[18] = ($event) => localQrcodeContent.value = $event),
+                    onInput: updateElement,
+                    placeholder: "请输入二维码内容或图片URL",
+                    class: "qrcode-input"
+                  }, null, 544), [
+                    [vue.vModelText, localQrcodeContent.value]
+                  ]),
+                  localQrcodeContent.value ? (vue.openBlock(), vue.createElementBlock("button", {
+                    key: 0,
+                    class: "remove-btn",
+                    onClick: removeQrcode
+                  }, "移除")) : vue.createCommentVNode("", true)
+                ]),
+                localQrcodeContent.value && isImageUrl(localQrcodeContent.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_35, [
+                  vue.createElementVNode("img", {
+                    src: localQrcodeContent.value,
+                    alt: "预览"
+                  }, null, 8, _hoisted_36)
+                ])) : vue.createCommentVNode("", true)
+              ])) : vue.createCommentVNode("", true),
+              localQrcodeSource.value === "field" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_37, [
+                _cache[56] || (_cache[56] = vue.createElementVNode("label", { class: "form-label" }, "关联字段", -1)),
+                vue.withDirectives(vue.createElementVNode("select", {
+                  "onUpdate:modelValue": _cache[19] || (_cache[19] = ($event) => localQrcodeField.value = $event),
+                  onChange: updateElement,
+                  class: "form-select"
+                }, [
+                  _cache[55] || (_cache[55] = vue.createStaticVNode('<option value="" data-v-7662a3c6>请选择字段</option><option value="certificateNumber" data-v-7662a3c6>证书编号 (certificateNumber)</option><option value="idNumber" data-v-7662a3c6>身份证号 (idNumber)</option><option value="url" data-v-7662a3c6>链接地址 (url)</option><option value="examName" data-v-7662a3c6>考试名称 (examName)</option>', 5)),
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.systemFields, (field) => {
+                    return vue.openBlock(), vue.createElementBlock("option", {
+                      key: field.key,
+                      value: field.key
+                    }, vue.toDisplayString(field.label) + " (" + vue.toDisplayString(field.placeholder) + ") ", 9, _hoisted_38);
+                  }), 128))
+                ], 544), [
+                  [vue.vModelSelect, localQrcodeField.value]
+                ]),
+                localQrcodeField.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_39, " 字段: " + vue.toDisplayString(getFieldLabel(localQrcodeField.value)), 1)) : vue.createCommentVNode("", true)
+              ])) : vue.createCommentVNode("", true)
+            ])) : vue.createCommentVNode("", true),
+            vue.createElementVNode("div", _hoisted_40, [
+              _cache[62] || (_cache[62] = vue.createElementVNode("div", { class: "section-title" }, "位置和尺寸", -1)),
+              vue.createElementVNode("div", _hoisted_41, [
+                vue.createElementVNode("div", _hoisted_42, [
+                  _cache[58] || (_cache[58] = vue.createElementVNode("label", { class: "form-label" }, "X", -1)),
+                  vue.withDirectives(vue.createElementVNode("input", {
+                    type: "number",
+                    "onUpdate:modelValue": _cache[20] || (_cache[20] = ($event) => __props.element.x = $event),
+                    onInput: updateElement,
+                    class: "form-input"
+                  }, null, 544), [
+                    [
+                      vue.vModelText,
+                      __props.element.x,
+                      void 0,
+                      { number: true }
+                    ]
+                  ])
+                ]),
+                vue.createElementVNode("div", _hoisted_43, [
+                  _cache[59] || (_cache[59] = vue.createElementVNode("label", { class: "form-label" }, "Y", -1)),
+                  vue.withDirectives(vue.createElementVNode("input", {
+                    type: "number",
+                    "onUpdate:modelValue": _cache[21] || (_cache[21] = ($event) => __props.element.y = $event),
+                    onInput: updateElement,
+                    class: "form-input"
+                  }, null, 544), [
+                    [
+                      vue.vModelText,
+                      __props.element.y,
+                      void 0,
+                      { number: true }
+                    ]
+                  ])
+                ])
+              ]),
+              vue.createElementVNode("div", _hoisted_44, [
+                vue.createElementVNode("div", _hoisted_45, [
+                  _cache[60] || (_cache[60] = vue.createElementVNode("label", { class: "form-label" }, "宽度", -1)),
+                  vue.withDirectives(vue.createElementVNode("input", {
+                    type: "number",
+                    "onUpdate:modelValue": _cache[22] || (_cache[22] = ($event) => __props.element.width = $event),
+                    onInput: updateElement,
+                    class: "form-input"
+                  }, null, 544), [
+                    [
+                      vue.vModelText,
+                      __props.element.width,
+                      void 0,
+                      { number: true }
+                    ]
+                  ])
+                ]),
+                vue.createElementVNode("div", _hoisted_46, [
+                  _cache[61] || (_cache[61] = vue.createElementVNode("label", { class: "form-label" }, "高度", -1)),
+                  vue.withDirectives(vue.createElementVNode("input", {
+                    type: "number",
+                    "onUpdate:modelValue": _cache[23] || (_cache[23] = ($event) => __props.element.height = $event),
+                    onInput: updateElement,
+                    class: "form-input"
+                  }, null, 544), [
+                    [
+                      vue.vModelText,
+                      __props.element.height,
+                      void 0,
+                      { number: true }
+                    ]
+                  ])
+                ])
+              ])
+            ])
+          ]),
+          vue.createVNode(FieldDialog, {
+            visible: showFieldDialog.value,
+            "current-text": localContent.value,
+            "selection-start": selectionStart.value,
+            "selection-end": selectionEnd.value,
+            "system-fields": __props.systemFields,
+            onClose: _cache[24] || (_cache[24] = ($event) => showFieldDialog.value = false),
+            onInsert: handleInsertField
+          }, null, 8, ["visible", "current-text", "selection-start", "selection-end", "system-fields"])
+        ]);
+      };
+    }
+  };
+  const PropertiesPanel = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-7662a3c6"]]);
+  const _hoisted_1$2 = { class: "field-data-panel" };
+  const _hoisted_2$2 = { class: "panel-content" };
+  const _hoisted_3$2 = { class: "category-title" };
+  const _hoisted_4$2 = { class: "fields-list" };
+  const _hoisted_5$1 = { class: "field-label" };
+  const _hoisted_6$1 = ["onUpdate:modelValue", "placeholder"];
+  const _hoisted_7$1 = { class: "field-hint" };
+  const _sfc_main$2 = {
+    __name: "FieldDataPanel",
+    props: {
+      fieldData: {
+        type: Object,
+        default: () => ({})
+      }
+    },
+    emits: ["update-field-data"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const localFieldData = vue.ref({ ...props.fieldData });
+      const fieldsByCategory = vue.computed(() => FIELDS_BY_CATEGORY);
+      vue.watch(() => props.fieldData, (newData) => {
+        localFieldData.value = { ...newData };
+      }, { deep: true });
+      const updateFieldData = () => {
+        emit("update-field-data", { ...localFieldData.value });
+      };
+      const resetData = () => {
+        localFieldData.value = { ...DEFAULT_FIELD_DATA };
+        updateFieldData();
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+          vue.createElementVNode("div", { class: "panel-header" }, [
+            _cache[0] || (_cache[0] = vue.createElementVNode("h3", null, "字段数据", -1)),
+            vue.createElementVNode("button", {
+              class: "reset-btn",
+              onClick: resetData
+            }, "重置")
+          ]),
+          vue.createElementVNode("div", _hoisted_2$2, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(fieldsByCategory.value, (fields, category) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                key: category,
+                class: "field-category"
+              }, [
+                vue.createElementVNode("div", _hoisted_3$2, vue.toDisplayString(category), 1),
+                vue.createElementVNode("div", _hoisted_4$2, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(fields, (field) => {
+                    return vue.openBlock(), vue.createElementBlock("div", {
+                      key: field.key,
+                      class: "field-item"
+                    }, [
+                      vue.createElementVNode("label", _hoisted_5$1, vue.toDisplayString(field.label), 1),
+                      vue.withDirectives(vue.createElementVNode("input", {
+                        "onUpdate:modelValue": ($event) => localFieldData.value[field.key] = $event,
+                        onInput: updateFieldData,
+                        type: "text",
+                        class: "field-input",
+                        placeholder: field.placeholder
+                      }, null, 40, _hoisted_6$1), [
+                        [vue.vModelText, localFieldData.value[field.key]]
+                      ]),
+                      vue.createElementVNode("div", _hoisted_7$1, vue.toDisplayString(field.description), 1)
+                    ]);
+                  }), 128))
+                ])
+              ]);
+            }), 128))
+          ])
+        ]);
+      };
+    }
+  };
+  const FieldDataPanel = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-33e53b63"]]);
+  const _hoisted_1$1 = { class: "preview-dialog" };
+  const _hoisted_2$1 = { class: "preview-content" };
+  const _hoisted_3$1 = { class: "preview-canvas-wrapper" };
+  const _hoisted_4$1 = {
+    key: 0,
+    class: "preview-text-content"
+  };
+  const _hoisted_5 = ["innerHTML"];
+  const _hoisted_6 = {
+    key: 1,
+    class: "preview-image-element"
+  };
+  const _hoisted_7 = ["src"];
+  const _hoisted_8 = {
+    key: 2,
+    class: "preview-qrcode-element"
+  };
+  const _hoisted_9 = ["src"];
+  const _hoisted_10 = {
+    key: 1,
+    class: "preview-qrcode-text"
+  };
+  const _sfc_main$1 = {
+    __name: "CertificatePreview",
+    props: {
+      visible: {
+        type: Boolean,
+        default: false
+      },
+      elements: {
+        type: Array,
+        default: () => []
+      },
+      template: {
+        type: Object,
+        default: null
+      },
+      fieldData: {
+        type: Object,
+        default: () => ({})
+      },
+      systemFields: {
+        type: Array,
+        default: () => SYSTEM_FIELDS
+      }
+    },
+    emits: ["close"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const handleClose = () => {
+        emit("close");
+      };
+      const getCanvasStyle = () => {
+        const baseStyle = {};
+        if (props.template) {
+          baseStyle.width = `${props.template.width}px`;
+          baseStyle.height = `${props.template.height}px`;
+        } else {
+          baseStyle.width = "800px";
+          baseStyle.height = "1000px";
+        }
+        if (props.template && props.template.background) {
+          if (props.template.background.startsWith("data:") || props.template.background.startsWith("http")) {
+            baseStyle.backgroundImage = `url(${props.template.background})`;
+            baseStyle.backgroundSize = "100% 100%";
+            baseStyle.backgroundPosition = "center";
+            baseStyle.backgroundRepeat = "no-repeat";
+          } else {
+            baseStyle.background = props.template.background;
+            baseStyle.backgroundSize = "100% 100%";
+            baseStyle.backgroundPosition = "center";
+            baseStyle.backgroundRepeat = "no-repeat";
+          }
+        }
+        return baseStyle;
+      };
+      const getElementStyle = (element) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const baseStyle = {
+          position: "absolute",
+          left: `${element.x}px`,
+          top: `${element.y}px`,
+          width: `${element.width}px`,
+          minHeight: `${element.height}px`
+        };
+        if (element.type === "text" || element.type === "longtext") {
+          return {
+            ...baseStyle,
+            fontSize: `${((_a = element.style) == null ? void 0 : _a.fontSize) || 18}px`,
+            fontFamily: ((_b = element.style) == null ? void 0 : _b.fontFamily) || "方正书宋简体",
+            fontWeight: ((_c = element.style) == null ? void 0 : _c.fontWeight) || "normal",
+            fontStyle: ((_d = element.style) == null ? void 0 : _d.fontStyle) || "normal",
+            textDecoration: ((_e = element.style) == null ? void 0 : _e.textDecoration) || "none",
+            color: ((_f = element.style) == null ? void 0 : _f.color) || "#000000",
+            textAlign: ((_g = element.style) == null ? void 0 : _g.textAlign) || "left",
+            lineHeight: ((_h = element.style) == null ? void 0 : _h.lineHeight) || 1.2
+          };
+        }
+        return baseStyle;
+      };
+      const renderTextWithFields = (text) => {
+        if (!text) return "";
+        const fieldData = props.fieldData || {};
+        let result = text;
+        props.systemFields.forEach((field) => {
+          const placeholder = field.placeholder;
+          const value = fieldData[field.key] || placeholder;
+          const regex = new RegExp(placeholder.replace(/[{}]/g, "\\$&"), "g");
+          result = result.replace(regex, value);
+        });
+        return result;
+      };
+      const getImageSrc = (element) => {
+        if (!element) return null;
+        if (element.imageSource === "field") {
+          const fieldKey = element.imageField;
+          if (fieldKey && props.fieldData && props.fieldData[fieldKey]) {
+            return props.fieldData[fieldKey];
+          }
+          return null;
+        } else {
+          return element.imageUrl || null;
+        }
+      };
+      const getQrcodeContent = (element) => {
+        if (!element) return null;
+        if (element.qrcodeSource === "field") {
+          const fieldKey = element.qrcodeField;
+          if (fieldKey && props.fieldData && props.fieldData[fieldKey]) {
+            return props.fieldData[fieldKey];
+          }
+          return null;
+        } else {
+          return element.qrcodeContent || null;
+        }
+      };
+      const isImageUrl = (url) => {
+        if (!url) return false;
+        if (url.startsWith("data:image/")) return true;
+        if (url.startsWith("http://") || url.startsWith("https://")) {
+          const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".bmp"];
+          const lowerUrl = url.toLowerCase();
+          return imageExtensions.some((ext) => lowerUrl.includes(ext));
+        }
+        return false;
+      };
+      return (_ctx, _cache) => {
+        return __props.visible ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: "preview-overlay",
+          onClick: vue.withModifiers(handleClose, ["self"])
+        }, [
+          vue.createElementVNode("div", _hoisted_1$1, [
+            vue.createElementVNode("div", { class: "preview-header" }, [
+              _cache[0] || (_cache[0] = vue.createElementVNode("h3", null, "证书预览", -1)),
+              vue.createElementVNode("button", {
+                class: "close-btn",
+                onClick: handleClose
+              }, "×")
+            ]),
+            vue.createElementVNode("div", _hoisted_2$1, [
+              vue.createElementVNode("div", _hoisted_3$1, [
+                vue.createElementVNode("div", {
+                  class: "preview-canvas",
+                  style: vue.normalizeStyle(getCanvasStyle())
+                }, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.elements, (element) => {
+                    return vue.openBlock(), vue.createElementBlock("div", {
+                      key: element.id,
+                      class: vue.normalizeClass(["preview-element", element.type]),
+                      style: vue.normalizeStyle(getElementStyle(element))
+                    }, [
+                      element.type === "text" || element.type === "longtext" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [
+                        vue.createElementVNode("span", {
+                          innerHTML: renderTextWithFields(element.content)
+                        }, null, 8, _hoisted_5)
+                      ])) : element.type === "image" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+                        getImageSrc(element) ? (vue.openBlock(), vue.createElementBlock("img", {
+                          key: 0,
+                          src: getImageSrc(element),
+                          alt: "图片",
+                          class: "preview-element-image"
+                        }, null, 8, _hoisted_7)) : vue.createCommentVNode("", true)
+                      ])) : element.type === "qrcode" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+                        getQrcodeContent(element) && isImageUrl(getQrcodeContent(element)) ? (vue.openBlock(), vue.createElementBlock("img", {
+                          key: 0,
+                          src: getQrcodeContent(element),
+                          alt: "二维码",
+                          class: "preview-element-image"
+                        }, null, 8, _hoisted_9)) : getQrcodeContent(element) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, vue.toDisplayString(getQrcodeContent(element)), 1)) : vue.createCommentVNode("", true)
+                      ])) : vue.createCommentVNode("", true)
+                    ], 6);
+                  }), 128))
+                ], 4)
+              ])
+            ])
+          ])
+        ])) : vue.createCommentVNode("", true);
+      };
+    }
+  };
+  const CertificatePreview = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-813a5922"]]);
+  const _hoisted_1 = { class: "certificate-editor" };
+  const _hoisted_2 = { class: "toolbar" };
+  const _hoisted_3 = { class: "certificate-editor-content" };
+  const _hoisted_4 = { class: "right-panel" };
+  const _sfc_main = {
+    __name: "CertificateEditor",
+    props: {
+      systemFields: {
+        type: Array,
+        default: () => SYSTEM_FIELDS
+      }
+    },
+    emits: ["save"],
+    setup(__props, { expose: __expose, emit: __emit }) {
+      const emit = __emit;
+      const elements = vue.ref([]);
+      const selectedElement = vue.ref(null);
+      const fieldData = vue.ref({});
+      const showPreview = vue.ref(false);
+      const currentTemplate = vue.ref(PRESET_TEMPLATES.find((t) => t.type === "vertical") || PRESET_TEMPLATES[0]);
+      vue.onMounted(() => {
+        elements.value = [
+          {
+            id: 1,
+            type: "text",
+            x: 115,
+            y: 466,
+            width: 698,
+            height: 29,
+            content: "{{姓名}} ({{性别称呼}})",
+            style: {
+              fontSize: 18,
+              fontFamily: "方正书宋简体",
+              fontWeight: "normal",
+              fontStyle: "normal",
+              textDecoration: "none",
+              color: "#000000",
+              textAlign: "left",
+              lineHeight: 1.2
+            }
+          },
+          {
+            id: 2,
+            type: "longtext",
+            x: 115,
+            y: 520,
+            width: 698,
+            height: 80,
+            content: '您参加了"{{考试名称}}"考试,成绩: {{成绩等级}},经审定,准予颁发考试证书!',
+            style: {
+              fontSize: 18,
+              fontFamily: "方正书宋简体",
+              fontWeight: "normal",
+              fontStyle: "normal",
+              textDecoration: "none",
+              color: "#000000",
+              textAlign: "left",
+              lineHeight: 1.2
+            }
+          },
+          {
+            id: 3,
+            type: "text",
+            x: 115,
+            y: 620,
+            width: 698,
+            height: 29,
+            content: "证书编号: {{证书编号}}",
+            style: {
+              fontSize: 18,
+              fontFamily: "方正书宋简体",
+              fontWeight: "normal",
+              fontStyle: "normal",
+              textDecoration: "none",
+              color: "#000000",
+              textAlign: "left",
+              lineHeight: 1.2
+            }
+          },
+          {
+            id: 4,
+            type: "text",
+            x: 115,
+            y: 660,
+            width: 698,
+            height: 29,
+            content: "有效期: {{有效期}}",
+            style: {
+              fontSize: 18,
+              fontFamily: "方正书宋简体",
+              fontWeight: "normal",
+              fontStyle: "normal",
+              textDecoration: "none",
+              color: "#000000",
+              textAlign: "left",
+              lineHeight: 1.2
+            }
+          }
+        ];
+      });
+      const handleAddElement = (type) => {
+        const newElement = {
+          id: Date.now(),
+          type,
+          x: 100,
+          y: 100,
+          width: type === "text" ? 200 : type === "qrcode" ? 100 : 150,
+          height: type === "text" ? 50 : type === "qrcode" ? 100 : 150,
+          content: type === "text" ? "新文本" : "",
+          style: {
+            fontSize: 18,
+            fontFamily: "方正书宋简体",
+            fontWeight: "normal",
+            fontStyle: "normal",
+            textDecoration: "none",
+            color: "#000000",
+            textAlign: "left",
+            lineHeight: 1.2
+          }
+        };
+        if (type === "image") {
+          newElement.imageSource = "url";
+          newElement.imageUrl = "";
+          newElement.imageField = "";
+        }
+        if (type === "qrcode") {
+          newElement.qrcodeSource = "url";
+          newElement.qrcodeContent = "";
+          newElement.qrcodeField = "";
+        }
+        elements.value.push(newElement);
+        selectedElement.value = newElement;
+      };
+      const handleSelectElement = (element) => {
+        selectedElement.value = element;
+      };
+      const handleUpdateElement = (updatedElement) => {
+        const index = elements.value.findIndex((el) => el.id === updatedElement.id);
+        if (index !== -1) {
+          elements.value[index] = { ...updatedElement };
+          selectedElement.value = elements.value[index];
+        }
+      };
+      const handleDeleteElement = (elementId) => {
+        var _a;
+        elements.value = elements.value.filter((el) => el.id !== elementId);
+        if (((_a = selectedElement.value) == null ? void 0 : _a.id) === elementId) {
+          selectedElement.value = null;
+        }
+      };
+      const handleUpdateFieldData = (newFieldData) => {
+        fieldData.value = { ...newFieldData };
+      };
+      const handleSelectTemplate = (template) => {
+        currentTemplate.value = template;
+      };
+      const handleUploadTemplate = (template) => {
+        currentTemplate.value = template;
+      };
+      const getCertificateData = () => {
+        return {
+          template: currentTemplate.value,
+          elements: elements.value,
+          fieldData: fieldData.value,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        };
+      };
+      const handleSave = () => {
+        const certificateConfig = getCertificateData();
+        console.log("=== 证书配置数据 ===");
+        console.log(JSON.stringify(certificateConfig, null, 2));
+        console.log("==================");
+        emit("save", certificateConfig);
+        alert("证书配置已保存，数据已传递给父组件");
+      };
+      __expose({
+        getCertificateData
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          vue.createElementVNode("div", _hoisted_2, [
+            vue.createElementVNode("button", {
+              class: "toolbar-btn preview-btn",
+              onClick: _cache[0] || (_cache[0] = ($event) => showPreview.value = true)
+            }, [..._cache[2] || (_cache[2] = [
+              vue.createElementVNode("span", null, "👁️", -1),
+              vue.createElementVNode("span", null, "预览", -1)
+            ])]),
+            vue.createElementVNode("button", {
+              class: "toolbar-btn save-btn",
+              onClick: handleSave
+            }, [..._cache[3] || (_cache[3] = [
+              vue.createElementVNode("span", null, "💾", -1),
+              vue.createElementVNode("span", null, "保存", -1)
+            ])])
+          ]),
+          vue.createElementVNode("div", _hoisted_3, [
+            vue.createVNode(DesignPanel, {
+              onAddElement: handleAddElement,
+              onSelectTemplate: handleSelectTemplate,
+              onUploadTemplate: handleUploadTemplate,
+              class: "left-panel"
+            }),
+            vue.createVNode(CanvasArea, {
+              elements: elements.value,
+              "selected-element": selectedElement.value,
+              "field-data": fieldData.value,
+              template: currentTemplate.value,
+              "system-fields": __props.systemFields,
+              onSelectElement: handleSelectElement,
+              onUpdateElement: handleUpdateElement,
+              onDeleteElement: handleDeleteElement,
+              class: "canvas-area"
+            }, null, 8, ["elements", "selected-element", "field-data", "template", "system-fields"]),
+            vue.createElementVNode("div", _hoisted_4, [
+              selectedElement.value ? (vue.openBlock(), vue.createBlock(PropertiesPanel, {
+                key: 0,
+                element: selectedElement.value,
+                "system-fields": __props.systemFields,
+                onUpdateElement: handleUpdateElement,
+                class: "properties-section"
+              }, null, 8, ["element", "system-fields"])) : vue.createCommentVNode("", true),
+              vue.createVNode(FieldDataPanel, {
+                "field-data": fieldData.value,
+                onUpdateFieldData: handleUpdateFieldData,
+                class: "field-data-section"
+              }, null, 8, ["field-data"])
+            ])
+          ]),
+          vue.createVNode(CertificatePreview, {
+            visible: showPreview.value,
+            elements: elements.value,
+            template: currentTemplate.value,
+            "field-data": fieldData.value,
+            "system-fields": __props.systemFields,
+            onClose: _cache[1] || (_cache[1] = ($event) => showPreview.value = false)
+          }, null, 8, ["visible", "elements", "template", "field-data", "system-fields"])
+        ]);
+      };
+    }
+  };
+  const CertificateEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8565cf9a"]]);
+  exports2.CanvasArea = CanvasArea;
+  exports2.CertificateEditor = CertificateEditor;
+  exports2.CertificatePreview = CertificatePreview;
+  exports2.DEFAULT_FIELD_DATA = DEFAULT_FIELD_DATA;
+  exports2.DesignPanel = DesignPanel;
+  exports2.FieldDataPanel = FieldDataPanel;
+  exports2.FieldDialog = FieldDialog;
+  exports2.PRESET_TEMPLATES = PRESET_TEMPLATES;
+  exports2.PropertiesPanel = PropertiesPanel;
+  exports2.SYSTEM_FIELDS = SYSTEM_FIELDS;
+  exports2.default = CertificateEditor;
+  exports2.extractFields = extractFields;
+  exports2.fileToBase64 = fileToBase64;
+  exports2.getFieldByKey = getFieldByKey;
+  exports2.getPlaceholderByKey = getPlaceholderByKey;
+  exports2.getTemplateSizeSuggestion = getTemplateSizeSuggestion;
+  exports2.hasFields = hasFields;
+  exports2.replaceFields = replaceFields;
+  exports2.validateImageFile = validateImageFile;
+  Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+});
+//# sourceMappingURL=z-certificate-editor.umd.js.map