z-certificate-editor 1.0.3 → 1.0.4

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

@@ -0,0 +1,2128 @@
+import { ref, computed, createElementBlock, openBlock, createElementVNode, normalizeClass, createCommentVNode, createTextVNode, toDisplayString, Fragment, renderList, normalizeStyle, onUnmounted, withModifiers, withDirectives, vModelText, watch, createVNode, vModelSelect, createStaticVNode, vModelRadio, onMounted, createBlock } from "vue";
+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 = ref("elements");
+    const templateType = ref("vertical");
+    const fileInputRef = ref(null);
+    const filteredTemplates = 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 openBlock(), createElementBlock("div", _hoisted_1$6, [
+        createElementVNode("div", _hoisted_2$6, [
+          createElementVNode("div", {
+            class: normalizeClass(["tab-item", { active: activeTab.value === "elements" }]),
+            onClick: _cache[0] || (_cache[0] = ($event) => activeTab.value = "elements")
+          }, " 设计元素 ", 2),
+          createElementVNode("div", {
+            class: normalizeClass(["tab-item", { active: activeTab.value === "templates" }]),
+            onClick: _cache[1] || (_cache[1] = ($event) => activeTab.value = "templates")
+          }, " 底图模板 ", 2)
+        ]),
+        createElementVNode("div", _hoisted_3$6, [
+          activeTab.value === "elements" ? (openBlock(), createElementBlock("div", _hoisted_4$6, [
+            createElementVNode("div", _hoisted_5$5, [
+              createElementVNode("div", {
+                class: "element-item",
+                onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("add-element", "text"))
+              }, [..._cache[8] || (_cache[8] = [
+                createElementVNode("div", { class: "element-icon" }, "📝", -1),
+                createElementVNode("div", { class: "element-label" }, "短文本", -1)
+              ])]),
+              createElementVNode("div", {
+                class: "element-item",
+                onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("add-element", "longtext"))
+              }, [..._cache[9] || (_cache[9] = [
+                createElementVNode("div", { class: "element-icon" }, "📄", -1),
+                createElementVNode("div", { class: "element-label" }, "长文本", -1)
+              ])]),
+              createElementVNode("div", {
+                class: "element-item",
+                onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("add-element", "image"))
+              }, [..._cache[10] || (_cache[10] = [
+                createElementVNode("div", { class: "element-icon" }, "🖼️", -1),
+                createElementVNode("div", { class: "element-label" }, "图片", -1)
+              ])]),
+              createElementVNode("div", {
+                class: "element-item",
+                onClick: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("add-element", "qrcode"))
+              }, [..._cache[11] || (_cache[11] = [
+                createElementVNode("div", { class: "element-icon" }, "🔲", -1),
+                createElementVNode("div", { class: "element-label" }, "二维码", -1)
+              ])])
+            ])
+          ])) : createCommentVNode("", true),
+          activeTab.value === "templates" ? (openBlock(), createElementBlock("div", _hoisted_6$5, [
+            createElementVNode("div", _hoisted_7$5, [
+              createElementVNode("input", {
+                ref_key: "fileInputRef",
+                ref: fileInputRef,
+                type: "file",
+                accept: "image/jpeg,image/jpg,image/png",
+                onChange: handleFileUpload,
+                style: { "display": "none" }
+              }, null, 544),
+              createElementVNode("button", {
+                class: "upload-btn",
+                onClick: triggerUpload
+              }, [..._cache[12] || (_cache[12] = [
+                createElementVNode("span", null, "📁", -1),
+                createElementVNode("span", null, "上传模板", -1)
+              ])]),
+              createElementVNode("div", _hoisted_8$4, [
+                _cache[13] || (_cache[13] = createTextVNode(" 支持：jpg、jpeg、png 小于2M", -1)),
+                _cache[14] || (_cache[14] = createElementVNode("br", null, null, -1)),
+                createTextVNode(" 建议尺寸：" + toDisplayString(templateType.value === "vertical" ? "972 x 1378" : "1303 x 897"), 1)
+              ])
+            ]),
+            createElementVNode("div", _hoisted_9$4, [
+              createElementVNode("button", {
+                class: normalizeClass(["switch-btn", { active: templateType.value === "vertical" }]),
+                onClick: _cache[6] || (_cache[6] = ($event) => templateType.value = "vertical")
+              }, " 竖版 ", 2),
+              createElementVNode("button", {
+                class: normalizeClass(["switch-btn", { active: templateType.value === "horizontal" }]),
+                onClick: _cache[7] || (_cache[7] = ($event) => templateType.value = "horizontal")
+              }, " 横版 ", 2)
+            ]),
+            createElementVNode("div", _hoisted_10$4, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(filteredTemplates.value, (template) => {
+                return openBlock(), createElementBlock("div", {
+                  key: template.id,
+                  class: "template-item",
+                  onClick: ($event) => handleSelectTemplate(template)
+                }, [
+                  createElementVNode("div", {
+                    class: "template-preview",
+                    style: normalizeStyle({ background: template.background })
+                  }, null, 4),
+                  createElementVNode("div", _hoisted_12$3, toDisplayString(template.name), 1)
+                ], 8, _hoisted_11$3);
+              }), 128))
+            ])
+          ])) : 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 = ref(null);
+    const isDragging = ref(false);
+    const isResizing = ref(false);
+    const dragStart = ref({ x: 0, y: 0 });
+    const resizeStart = ref({ x: 0, y: 0, width: 0, height: 0 });
+    const currentElement = ref(null);
+    const resizeDirection = 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);
+    };
+    onUnmounted(() => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+        createElementVNode("div", {
+          class: "certificate-canvas",
+          ref_key: "canvasRef",
+          ref: canvasRef,
+          style: normalizeStyle(getCanvasStyle())
+        }, [
+          !props.template || !props.template.background ? (openBlock(), createElementBlock("div", _hoisted_2$5)) : createCommentVNode("", true),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.elements, (element) => {
+            var _a, _b, _c;
+            return openBlock(), createElementBlock("div", {
+              key: element.id,
+              class: normalizeClass(["editable-element", element.type, { selected: ((_a = __props.selectedElement) == null ? void 0 : _a.id) === element.id }]),
+              style: normalizeStyle(getElementStyle(element)),
+              onClick: withModifiers(($event) => _ctx.$emit("select-element", element), ["stop"]),
+              onMousedown: ($event) => handleMouseDown($event, element)
+            }, [
+              element.type === "text" || element.type === "longtext" ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
+                createElementVNode("span", {
+                  innerHTML: renderTextWithFields(element.content)
+                }, null, 8, _hoisted_5$4)
+              ])) : element.type === "image" ? (openBlock(), createElementBlock("div", _hoisted_6$4, [
+                getImageSrc(element) ? (openBlock(), createElementBlock("img", {
+                  key: 0,
+                  src: getImageSrc(element),
+                  alt: "图片",
+                  class: "element-image"
+                }, null, 8, _hoisted_7$4)) : (openBlock(), createElementBlock("div", _hoisted_8$3, [..._cache[0] || (_cache[0] = [
+                  createElementVNode("span", null, "🖼️ 请设置图片", -1)
+                ])]))
+              ])) : element.type === "qrcode" ? (openBlock(), createElementBlock("div", _hoisted_9$3, [
+                getQrcodeContent(element) && isImageUrl(getQrcodeContent(element)) ? (openBlock(), createElementBlock("img", {
+                  key: 0,
+                  src: getQrcodeContent(element),
+                  alt: "二维码",
+                  class: "element-image"
+                }, null, 8, _hoisted_10$3)) : getQrcodeContent(element) ? (openBlock(), createElementBlock("div", _hoisted_11$2, [
+                  _cache[1] || (_cache[1] = createElementVNode("div", { class: "qrcode-placeholder-text" }, "二维码", -1)),
+                  createElementVNode("div", _hoisted_12$2, toDisplayString(getQrcodeContent(element)), 1)
+                ])) : (openBlock(), createElementBlock("div", _hoisted_13$1, [..._cache[2] || (_cache[2] = [
+                  createElementVNode("span", null, "🔲 请设置二维码", -1)
+                ])]))
+              ])) : createCommentVNode("", true),
+              ((_b = __props.selectedElement) == null ? void 0 : _b.id) === element.id ? (openBlock(), createElementBlock("div", _hoisted_14$1, [
+                createElementVNode("div", {
+                  class: "handle handle-nw",
+                  onMousedown: withModifiers(($event) => handleResizeStart($event, element, "nw"), ["stop"])
+                }, null, 40, _hoisted_15$1),
+                createElementVNode("div", {
+                  class: "handle handle-ne",
+                  onMousedown: withModifiers(($event) => handleResizeStart($event, element, "ne"), ["stop"])
+                }, null, 40, _hoisted_16$1),
+                createElementVNode("div", {
+                  class: "handle handle-sw",
+                  onMousedown: withModifiers(($event) => handleResizeStart($event, element, "sw"), ["stop"])
+                }, null, 40, _hoisted_17$1),
+                createElementVNode("div", {
+                  class: "handle handle-se",
+                  onMousedown: withModifiers(($event) => handleResizeStart($event, element, "se"), ["stop"])
+                }, null, 40, _hoisted_18$1)
+              ])) : createCommentVNode("", true),
+              ((_c = __props.selectedElement) == null ? void 0 : _c.id) === element.id ? (openBlock(), createElementBlock("button", {
+                key: 4,
+                class: "delete-btn",
+                onClick: withModifiers(($event) => _ctx.$emit("delete-element", element.id), ["stop"])
+              }, " × ", 8, _hoisted_19$1)) : 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 = ref("");
+    const currentPage = ref(1);
+    const filteredFields = 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 = computed(() => {
+      return Math.ceil(filteredFields.value.length / pageSize);
+    });
+    const paginatedFields = 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 ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "field-dialog-overlay",
+        onClick: withModifiers(handleClose, ["self"])
+      }, [
+        createElementVNode("div", _hoisted_1$4, [
+          createElementVNode("div", { class: "dialog-header" }, [
+            _cache[3] || (_cache[3] = createElementVNode("h3", null, "选择字段", -1)),
+            createElementVNode("button", {
+              class: "close-btn",
+              onClick: handleClose
+            }, "×")
+          ]),
+          createElementVNode("div", _hoisted_2$4, [
+            createElementVNode("div", _hoisted_3$4, [
+              withDirectives(createElementVNode("input", {
+                type: "text",
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchText.value = $event),
+                placeholder: "搜索字段...",
+                class: "search-input",
+                onInput: handleSearch
+              }, null, 544), [
+                [vModelText, searchText.value]
+              ])
+            ]),
+            createElementVNode("div", _hoisted_4$4, [
+              createElementVNode("table", _hoisted_5$3, [
+                _cache[4] || (_cache[4] = createElementVNode("thead", null, [
+                  createElementVNode("tr", null, [
+                    createElementVNode("th", null, "系统字段"),
+                    createElementVNode("th", null, "操作")
+                  ])
+                ], -1)),
+                createElementVNode("tbody", null, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(paginatedFields.value, (field) => {
+                    return openBlock(), createElementBlock("tr", {
+                      key: field.key,
+                      class: "field-row"
+                    }, [
+                      createElementVNode("td", _hoisted_6$3, toDisplayString(field.label), 1),
+                      createElementVNode("td", _hoisted_7$3, [
+                        createElementVNode("button", {
+                          class: "select-btn",
+                          onClick: ($event) => handleSelectField(field)
+                        }, " 选择 ", 8, _hoisted_8$2)
+                      ])
+                    ]);
+                  }), 128))
+                ])
+              ])
+            ]),
+            totalPages.value > 1 ? (openBlock(), createElementBlock("div", _hoisted_9$2, [
+              createElementVNode("button", {
+                class: "page-btn",
+                disabled: currentPage.value === 1,
+                onClick: _cache[1] || (_cache[1] = ($event) => goToPage(currentPage.value - 1))
+              }, " < ", 8, _hoisted_10$2),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(totalPages.value, (page) => {
+                return openBlock(), createElementBlock("button", {
+                  key: page,
+                  class: normalizeClass(["page-btn", { active: page === currentPage.value }]),
+                  onClick: ($event) => goToPage(page)
+                }, toDisplayString(page), 11, _hoisted_11$1);
+              }), 128)),
+              createElementVNode("button", {
+                class: "page-btn",
+                disabled: currentPage.value === totalPages.value,
+                onClick: _cache[2] || (_cache[2] = ($event) => goToPage(currentPage.value + 1))
+              }, " > ", 8, _hoisted_12$1)
+            ])) : createCommentVNode("", true)
+          ])
+        ])
+      ])) : 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 = ref("");
+    const localStyle = ref({});
+    const localImageSource = ref("url");
+    const localImageUrl = ref("");
+    const localImageField = ref("");
+    const localQrcodeSource = ref("url");
+    const localQrcodeContent = ref("");
+    const localQrcodeField = ref("");
+    const showFieldDialog = ref(false);
+    const selectionStart = ref(0);
+    const selectionEnd = ref(0);
+    const contentTextareaRef = ref(null);
+    const imageFileInputRef = ref(null);
+    const qrcodeFileInputRef = 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 || "";
+      }
+    };
+    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 openBlock(), createElementBlock("div", _hoisted_1$3, [
+        _cache[63] || (_cache[63] = createElementVNode("div", { class: "panel-header" }, [
+          createElementVNode("h3", null, "属性设置")
+        ], -1)),
+        createElementVNode("div", _hoisted_2$3, [
+          __props.element.type === "text" || __props.element.type === "longtext" ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
+            createElementVNode("div", _hoisted_4$3, [
+              _cache[26] || (_cache[26] = createElementVNode("label", { class: "form-label" }, "内容", -1)),
+              createElementVNode("div", _hoisted_5$2, [
+                withDirectives(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), [
+                  [vModelText, localContent.value]
+                ]),
+                createElementVNode("button", {
+                  class: "insert-field-btn",
+                  onClick: _cache[1] || (_cache[1] = ($event) => showFieldDialog.value = true)
+                }, [..._cache[25] || (_cache[25] = [
+                  createElementVNode("span", null, "+", -1),
+                  createElementVNode("span", null, "在内容中关联系统字段", -1)
+                ])])
+              ])
+            ])
+          ])) : createCommentVNode("", true),
+          __props.element.type === "text" || __props.element.type === "longtext" ? (openBlock(), createElementBlock("div", _hoisted_7$2, [
+            _cache[38] || (_cache[38] = createElementVNode("div", { class: "section-title" }, "文本样式", -1)),
+            createElementVNode("div", _hoisted_8$1, [
+              _cache[28] || (_cache[28] = createElementVNode("label", { class: "form-label" }, "字体大小", -1)),
+              withDirectives(createElementVNode("select", {
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => localStyle.value.fontSize = $event),
+                onChange: updateElement,
+                class: "form-select"
+              }, [..._cache[27] || (_cache[27] = [
+                createElementVNode("option", { value: 12 }, "12px", -1),
+                createElementVNode("option", { value: 14 }, "14px", -1),
+                createElementVNode("option", { value: 16 }, "16px", -1),
+                createElementVNode("option", { value: 18 }, "18px", -1),
+                createElementVNode("option", { value: 20 }, "20px", -1),
+                createElementVNode("option", { value: 24 }, "24px", -1),
+                createElementVNode("option", { value: 28 }, "28px", -1),
+                createElementVNode("option", { value: 32 }, "32px", -1),
+                createElementVNode("option", { value: 36 }, "36px", -1),
+                createElementVNode("option", { value: 48 }, "48px", -1)
+              ])], 544), [
+                [
+                  vModelSelect,
+                  localStyle.value.fontSize,
+                  void 0,
+                  { number: true }
+                ]
+              ])
+            ]),
+            createElementVNode("div", _hoisted_9$1, [
+              _cache[30] || (_cache[30] = createElementVNode("label", { class: "form-label" }, "字体", -1)),
+              withDirectives(createElementVNode("select", {
+                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => localStyle.value.fontFamily = $event),
+                onChange: updateElement,
+                class: "form-select"
+              }, [..._cache[29] || (_cache[29] = [
+                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), [
+                [vModelSelect, localStyle.value.fontFamily]
+              ])
+            ]),
+            createElementVNode("div", _hoisted_10$1, [
+              _cache[34] || (_cache[34] = createElementVNode("label", { class: "form-label" }, "文字样式", -1)),
+              createElementVNode("div", _hoisted_11, [
+                createElementVNode("button", {
+                  class: normalizeClass(["style-btn", { active: localStyle.value.fontWeight === "bold" }]),
+                  onClick: _cache[4] || (_cache[4] = ($event) => toggleStyle("fontWeight", "bold", "normal"))
+                }, [..._cache[31] || (_cache[31] = [
+                  createElementVNode("strong", null, "B", -1)
+                ])], 2),
+                createElementVNode("button", {
+                  class: normalizeClass(["style-btn", { active: localStyle.value.fontStyle === "italic" }]),
+                  onClick: _cache[5] || (_cache[5] = ($event) => toggleStyle("fontStyle", "italic", "normal"))
+                }, [..._cache[32] || (_cache[32] = [
+                  createElementVNode("em", null, "I", -1)
+                ])], 2),
+                createElementVNode("button", {
+                  class: normalizeClass(["style-btn", { active: localStyle.value.textDecoration === "underline" }]),
+                  onClick: _cache[6] || (_cache[6] = ($event) => toggleStyle("textDecoration", "underline", "none"))
+                }, [..._cache[33] || (_cache[33] = [
+                  createElementVNode("u", null, "U", -1)
+                ])], 2)
+              ])
+            ]),
+            createElementVNode("div", _hoisted_12, [
+              _cache[35] || (_cache[35] = createElementVNode("label", { class: "form-label" }, "颜色", -1)),
+              withDirectives(createElementVNode("input", {
+                type: "color",
+                "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => localStyle.value.color = $event),
+                onChange: updateElement,
+                class: "color-input"
+              }, null, 544), [
+                [vModelText, localStyle.value.color]
+              ])
+            ]),
+            createElementVNode("div", _hoisted_13, [
+              _cache[36] || (_cache[36] = createElementVNode("label", { class: "form-label" }, "对齐方式", -1)),
+              createElementVNode("div", _hoisted_14, [
+                createElementVNode("button", {
+                  class: normalizeClass(["align-btn", { active: localStyle.value.textAlign === "left" }]),
+                  onClick: _cache[8] || (_cache[8] = ($event) => setAlign("left"))
+                }, " 左对齐 ", 2),
+                createElementVNode("button", {
+                  class: normalizeClass(["align-btn", { active: localStyle.value.textAlign === "center" }]),
+                  onClick: _cache[9] || (_cache[9] = ($event) => setAlign("center"))
+                }, " 居中 ", 2),
+                createElementVNode("button", {
+                  class: normalizeClass(["align-btn", { active: localStyle.value.textAlign === "right" }]),
+                  onClick: _cache[10] || (_cache[10] = ($event) => setAlign("right"))
+                }, " 右对齐 ", 2)
+              ])
+            ]),
+            createElementVNode("div", _hoisted_15, [
+              _cache[37] || (_cache[37] = createElementVNode("label", { class: "form-label" }, "行高", -1)),
+              withDirectives(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), [
+                [
+                  vModelText,
+                  localStyle.value.lineHeight,
+                  void 0,
+                  { number: true }
+                ]
+              ])
+            ])
+          ])) : createCommentVNode("", true),
+          __props.element.type === "image" ? (openBlock(), createElementBlock("div", _hoisted_16, [
+            _cache[49] || (_cache[49] = createElementVNode("div", { class: "section-title" }, "图片设置", -1)),
+            createElementVNode("div", _hoisted_17, [
+              _cache[41] || (_cache[41] = createElementVNode("label", { class: "form-label" }, "图片来源", -1)),
+              createElementVNode("div", _hoisted_18, [
+                createElementVNode("label", _hoisted_19, [
+                  withDirectives(createElementVNode("input", {
+                    type: "radio",
+                    value: "url",
+                    "onUpdate:modelValue": _cache[12] || (_cache[12] = ($event) => localImageSource.value = $event),
+                    onChange: handleImageSourceChange
+                  }, null, 544), [
+                    [vModelRadio, localImageSource.value]
+                  ]),
+                  _cache[39] || (_cache[39] = createElementVNode("span", null, "URL", -1))
+                ]),
+                createElementVNode("label", _hoisted_20, [
+                  withDirectives(createElementVNode("input", {
+                    type: "radio",
+                    value: "field",
+                    "onUpdate:modelValue": _cache[13] || (_cache[13] = ($event) => localImageSource.value = $event),
+                    onChange: handleImageSourceChange
+                  }, null, 544), [
+                    [vModelRadio, localImageSource.value]
+                  ]),
+                  _cache[40] || (_cache[40] = createElementVNode("span", null, "关联字段", -1))
+                ])
+              ])
+            ]),
+            localImageSource.value === "url" ? (openBlock(), createElementBlock("div", _hoisted_21, [
+              _cache[43] || (_cache[43] = createElementVNode("label", { class: "form-label" }, "图片URL", -1)),
+              createElementVNode("div", _hoisted_22, [
+                createElementVNode("input", {
+                  ref_key: "imageFileInputRef",
+                  ref: imageFileInputRef,
+                  type: "file",
+                  accept: "image/jpeg,image/jpg,image/png",
+                  onChange: handleImageUpload,
+                  style: { "display": "none" }
+                }, null, 544),
+                createElementVNode("button", {
+                  class: "upload-btn",
+                  onClick: triggerImageUpload
+                }, [..._cache[42] || (_cache[42] = [
+                  createElementVNode("span", null, "📁", -1),
+                  createElementVNode("span", null, "本地上传", -1)
+                ])]),
+                withDirectives(createElementVNode("input", {
+                  type: "text",
+                  "onUpdate:modelValue": _cache[14] || (_cache[14] = ($event) => localImageUrl.value = $event),
+                  onInput: updateElement,
+                  placeholder: "请输入图片URL",
+                  class: "image-url-input"
+                }, null, 544), [
+                  [vModelText, localImageUrl.value]
+                ]),
+                localImageUrl.value ? (openBlock(), createElementBlock("button", {
+                  key: 0,
+                  class: "remove-btn",
+                  onClick: removeImage
+                }, "移除")) : createCommentVNode("", true)
+              ]),
+              localImageUrl.value ? (openBlock(), createElementBlock("div", _hoisted_23, [
+                createElementVNode("img", {
+                  src: localImageUrl.value,
+                  alt: "预览"
+                }, null, 8, _hoisted_24)
+              ])) : createCommentVNode("", true)
+            ])) : createCommentVNode("", true),
+            localImageSource.value === "field" ? (openBlock(), createElementBlock("div", _hoisted_25, [
+              _cache[48] || (_cache[48] = createElementVNode("label", { class: "form-label" }, "关联字段", -1)),
+              withDirectives(createElementVNode("select", {
+                "onUpdate:modelValue": _cache[15] || (_cache[15] = ($event) => localImageField.value = $event),
+                onChange: updateElement,
+                class: "form-select"
+              }, [
+                _cache[44] || (_cache[44] = createElementVNode("option", { value: "" }, "请选择字段", -1)),
+                _cache[45] || (_cache[45] = createElementVNode("option", { value: "avatar" }, "头像 (avatar)", -1)),
+                _cache[46] || (_cache[46] = createElementVNode("option", { value: "photo" }, "照片 (photo)", -1)),
+                _cache[47] || (_cache[47] = createElementVNode("option", { value: "headImage" }, "头像图片 (headImage)", -1)),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.systemFields, (field) => {
+                  return openBlock(), createElementBlock("option", {
+                    key: field.key,
+                    value: field.key
+                  }, toDisplayString(field.label) + " (" + toDisplayString(field.placeholder) + ") ", 9, _hoisted_26);
+                }), 128))
+              ], 544), [
+                [vModelSelect, localImageField.value]
+              ]),
+              localImageField.value ? (openBlock(), createElementBlock("div", _hoisted_27, " 字段: " + toDisplayString(getFieldLabel(localImageField.value)), 1)) : createCommentVNode("", true)
+            ])) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true),
+          __props.element.type === "qrcode" ? (openBlock(), createElementBlock("div", _hoisted_28, [
+            _cache[57] || (_cache[57] = createElementVNode("div", { class: "section-title" }, "二维码设置", -1)),
+            createElementVNode("div", _hoisted_29, [
+              _cache[52] || (_cache[52] = createElementVNode("label", { class: "form-label" }, "二维码来源", -1)),
+              createElementVNode("div", _hoisted_30, [
+                createElementVNode("label", _hoisted_31, [
+                  withDirectives(createElementVNode("input", {
+                    type: "radio",
+                    value: "url",
+                    "onUpdate:modelValue": _cache[16] || (_cache[16] = ($event) => localQrcodeSource.value = $event),
+                    onChange: handleQrcodeSourceChange
+                  }, null, 544), [
+                    [vModelRadio, localQrcodeSource.value]
+                  ]),
+                  _cache[50] || (_cache[50] = createElementVNode("span", null, "URL/内容", -1))
+                ]),
+                createElementVNode("label", _hoisted_32, [
+                  withDirectives(createElementVNode("input", {
+                    type: "radio",
+                    value: "field",
+                    "onUpdate:modelValue": _cache[17] || (_cache[17] = ($event) => localQrcodeSource.value = $event),
+                    onChange: handleQrcodeSourceChange
+                  }, null, 544), [
+                    [vModelRadio, localQrcodeSource.value]
+                  ]),
+                  _cache[51] || (_cache[51] = createElementVNode("span", null, "关联字段", -1))
+                ])
+              ])
+            ]),
+            localQrcodeSource.value === "url" ? (openBlock(), createElementBlock("div", _hoisted_33, [
+              _cache[54] || (_cache[54] = createElementVNode("label", { class: "form-label" }, "二维码内容/图片URL", -1)),
+              createElementVNode("div", _hoisted_34, [
+                createElementVNode("input", {
+                  ref_key: "qrcodeFileInputRef",
+                  ref: qrcodeFileInputRef,
+                  type: "file",
+                  accept: "image/jpeg,image/jpg,image/png",
+                  onChange: handleQrcodeUpload,
+                  style: { "display": "none" }
+                }, null, 544),
+                createElementVNode("button", {
+                  class: "upload-btn",
+                  onClick: triggerQrcodeUpload
+                }, [..._cache[53] || (_cache[53] = [
+                  createElementVNode("span", null, "📁", -1),
+                  createElementVNode("span", null, "本地上传", -1)
+                ])]),
+                withDirectives(createElementVNode("input", {
+                  type: "text",
+                  "onUpdate:modelValue": _cache[18] || (_cache[18] = ($event) => localQrcodeContent.value = $event),
+                  onInput: updateElement,
+                  placeholder: "请输入二维码内容或图片URL",
+                  class: "qrcode-input"
+                }, null, 544), [
+                  [vModelText, localQrcodeContent.value]
+                ]),
+                localQrcodeContent.value ? (openBlock(), createElementBlock("button", {
+                  key: 0,
+                  class: "remove-btn",
+                  onClick: removeQrcode
+                }, "移除")) : createCommentVNode("", true)
+              ]),
+              localQrcodeContent.value && isImageUrl(localQrcodeContent.value) ? (openBlock(), createElementBlock("div", _hoisted_35, [
+                createElementVNode("img", {
+                  src: localQrcodeContent.value,
+                  alt: "预览"
+                }, null, 8, _hoisted_36)
+              ])) : createCommentVNode("", true)
+            ])) : createCommentVNode("", true),
+            localQrcodeSource.value === "field" ? (openBlock(), createElementBlock("div", _hoisted_37, [
+              _cache[56] || (_cache[56] = createElementVNode("label", { class: "form-label" }, "关联字段", -1)),
+              withDirectives(createElementVNode("select", {
+                "onUpdate:modelValue": _cache[19] || (_cache[19] = ($event) => localQrcodeField.value = $event),
+                onChange: updateElement,
+                class: "form-select"
+              }, [
+                _cache[55] || (_cache[55] = 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)),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.systemFields, (field) => {
+                  return openBlock(), createElementBlock("option", {
+                    key: field.key,
+                    value: field.key
+                  }, toDisplayString(field.label) + " (" + toDisplayString(field.placeholder) + ") ", 9, _hoisted_38);
+                }), 128))
+              ], 544), [
+                [vModelSelect, localQrcodeField.value]
+              ]),
+              localQrcodeField.value ? (openBlock(), createElementBlock("div", _hoisted_39, " 字段: " + toDisplayString(getFieldLabel(localQrcodeField.value)), 1)) : createCommentVNode("", true)
+            ])) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_40, [
+            _cache[62] || (_cache[62] = createElementVNode("div", { class: "section-title" }, "位置和尺寸", -1)),
+            createElementVNode("div", _hoisted_41, [
+              createElementVNode("div", _hoisted_42, [
+                _cache[58] || (_cache[58] = createElementVNode("label", { class: "form-label" }, "X", -1)),
+                withDirectives(createElementVNode("input", {
+                  type: "number",
+                  "onUpdate:modelValue": _cache[20] || (_cache[20] = ($event) => __props.element.x = $event),
+                  onInput: updateElement,
+                  class: "form-input"
+                }, null, 544), [
+                  [
+                    vModelText,
+                    __props.element.x,
+                    void 0,
+                    { number: true }
+                  ]
+                ])
+              ]),
+              createElementVNode("div", _hoisted_43, [
+                _cache[59] || (_cache[59] = createElementVNode("label", { class: "form-label" }, "Y", -1)),
+                withDirectives(createElementVNode("input", {
+                  type: "number",
+                  "onUpdate:modelValue": _cache[21] || (_cache[21] = ($event) => __props.element.y = $event),
+                  onInput: updateElement,
+                  class: "form-input"
+                }, null, 544), [
+                  [
+                    vModelText,
+                    __props.element.y,
+                    void 0,
+                    { number: true }
+                  ]
+                ])
+              ])
+            ]),
+            createElementVNode("div", _hoisted_44, [
+              createElementVNode("div", _hoisted_45, [
+                _cache[60] || (_cache[60] = createElementVNode("label", { class: "form-label" }, "宽度", -1)),
+                withDirectives(createElementVNode("input", {
+                  type: "number",
+                  "onUpdate:modelValue": _cache[22] || (_cache[22] = ($event) => __props.element.width = $event),
+                  onInput: updateElement,
+                  class: "form-input"
+                }, null, 544), [
+                  [
+                    vModelText,
+                    __props.element.width,
+                    void 0,
+                    { number: true }
+                  ]
+                ])
+              ]),
+              createElementVNode("div", _hoisted_46, [
+                _cache[61] || (_cache[61] = createElementVNode("label", { class: "form-label" }, "高度", -1)),
+                withDirectives(createElementVNode("input", {
+                  type: "number",
+                  "onUpdate:modelValue": _cache[23] || (_cache[23] = ($event) => __props.element.height = $event),
+                  onInput: updateElement,
+                  class: "form-input"
+                }, null, 544), [
+                  [
+                    vModelText,
+                    __props.element.height,
+                    void 0,
+                    { number: true }
+                  ]
+                ])
+              ])
+            ])
+          ])
+        ]),
+        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 = ref({ ...props.fieldData });
+    const fieldsByCategory = computed(() => FIELDS_BY_CATEGORY);
+    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 openBlock(), createElementBlock("div", _hoisted_1$2, [
+        createElementVNode("div", { class: "panel-header" }, [
+          _cache[0] || (_cache[0] = createElementVNode("h3", null, "字段数据", -1)),
+          createElementVNode("button", {
+            class: "reset-btn",
+            onClick: resetData
+          }, "重置")
+        ]),
+        createElementVNode("div", _hoisted_2$2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(fieldsByCategory.value, (fields, category) => {
+            return openBlock(), createElementBlock("div", {
+              key: category,
+              class: "field-category"
+            }, [
+              createElementVNode("div", _hoisted_3$2, toDisplayString(category), 1),
+              createElementVNode("div", _hoisted_4$2, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(fields, (field) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: field.key,
+                    class: "field-item"
+                  }, [
+                    createElementVNode("label", _hoisted_5$1, toDisplayString(field.label), 1),
+                    withDirectives(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), [
+                      [vModelText, localFieldData.value[field.key]]
+                    ]),
+                    createElementVNode("div", _hoisted_7$1, 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 ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "preview-overlay",
+        onClick: withModifiers(handleClose, ["self"])
+      }, [
+        createElementVNode("div", _hoisted_1$1, [
+          createElementVNode("div", { class: "preview-header" }, [
+            _cache[0] || (_cache[0] = createElementVNode("h3", null, "证书预览", -1)),
+            createElementVNode("button", {
+              class: "close-btn",
+              onClick: handleClose
+            }, "×")
+          ]),
+          createElementVNode("div", _hoisted_2$1, [
+            createElementVNode("div", _hoisted_3$1, [
+              createElementVNode("div", {
+                class: "preview-canvas",
+                style: normalizeStyle(getCanvasStyle())
+              }, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.elements, (element) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: element.id,
+                    class: normalizeClass(["preview-element", element.type]),
+                    style: normalizeStyle(getElementStyle(element))
+                  }, [
+                    element.type === "text" || element.type === "longtext" ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
+                      createElementVNode("span", {
+                        innerHTML: renderTextWithFields(element.content)
+                      }, null, 8, _hoisted_5)
+                    ])) : element.type === "image" ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                      getImageSrc(element) ? (openBlock(), createElementBlock("img", {
+                        key: 0,
+                        src: getImageSrc(element),
+                        alt: "图片",
+                        class: "preview-element-image"
+                      }, null, 8, _hoisted_7)) : createCommentVNode("", true)
+                    ])) : element.type === "qrcode" ? (openBlock(), createElementBlock("div", _hoisted_8, [
+                      getQrcodeContent(element) && isImageUrl(getQrcodeContent(element)) ? (openBlock(), createElementBlock("img", {
+                        key: 0,
+                        src: getQrcodeContent(element),
+                        alt: "二维码",
+                        class: "preview-element-image"
+                      }, null, 8, _hoisted_9)) : getQrcodeContent(element) ? (openBlock(), createElementBlock("div", _hoisted_10, toDisplayString(getQrcodeContent(element)), 1)) : createCommentVNode("", true)
+                    ])) : createCommentVNode("", true)
+                  ], 6);
+                }), 128))
+              ], 4)
+            ])
+          ])
+        ])
+      ])) : 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 = ref([]);
+    const selectedElement = ref(null);
+    const fieldData = ref({});
+    const showPreview = ref(false);
+    const currentTemplate = ref(PRESET_TEMPLATES.find((t) => t.type === "vertical") || PRESET_TEMPLATES[0]);
+    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 openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("button", {
+            class: "toolbar-btn preview-btn",
+            onClick: _cache[0] || (_cache[0] = ($event) => showPreview.value = true)
+          }, [..._cache[2] || (_cache[2] = [
+            createElementVNode("span", null, "👁️", -1),
+            createElementVNode("span", null, "预览", -1)
+          ])]),
+          createElementVNode("button", {
+            class: "toolbar-btn save-btn",
+            onClick: handleSave
+          }, [..._cache[3] || (_cache[3] = [
+            createElementVNode("span", null, "💾", -1),
+            createElementVNode("span", null, "保存", -1)
+          ])])
+        ]),
+        createElementVNode("div", _hoisted_3, [
+          createVNode(DesignPanel, {
+            onAddElement: handleAddElement,
+            onSelectTemplate: handleSelectTemplate,
+            onUploadTemplate: handleUploadTemplate,
+            class: "left-panel"
+          }),
+          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"]),
+          createElementVNode("div", _hoisted_4, [
+            selectedElement.value ? (openBlock(), createBlock(PropertiesPanel, {
+              key: 0,
+              element: selectedElement.value,
+              "system-fields": __props.systemFields,
+              onUpdateElement: handleUpdateElement,
+              class: "properties-section"
+            }, null, 8, ["element", "system-fields"])) : createCommentVNode("", true),
+            createVNode(FieldDataPanel, {
+              "field-data": fieldData.value,
+              onUpdateFieldData: handleUpdateFieldData,
+              class: "field-data-section"
+            }, null, 8, ["field-data"])
+          ])
+        ]),
+        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"]]);
+export {
+  CanvasArea,
+  CertificateEditor,
+  CertificatePreview,
+  DEFAULT_FIELD_DATA,
+  DesignPanel,
+  FieldDataPanel,
+  FieldDialog,
+  PRESET_TEMPLATES,
+  PropertiesPanel,
+  SYSTEM_FIELDS,
+  CertificateEditor as default,
+  extractFields,
+  fileToBase64,
+  getFieldByKey,
+  getPlaceholderByKey,
+  getTemplateSizeSuggestion,
+  hasFields,
+  replaceFields,
+  validateImageFile
+};
+//# sourceMappingURL=z-certificate-editor.es.js.map