{"_id":"z-certificate-editor","_rev":"12-7a504f274acf4eaa0af4c6aa5f3cd1c6","name":"z-certificate-editor","dist-tags":{"latest":"1.0.12"},"versions":{"1.0.0":{"name":"z-certificate-editor","version":"1.0.0","keywords":["vue","vue3","certificate","editor","certificate-editor","certificate-generator","drag-and-drop","template","可视化编辑器","证书编辑器"],"author":"","license":"MIT","_id":"z-certificate-editor@1.0.0","maintainers":[{"name":"error-zjq","email":"1299566691@qq.com"}],"dist":{"shasum":"fcee97d043757fec2c4fda1c9890e545930aec58","tarball":"https://registry.npmjs.org/z-certificate-editor/-/z-certificate-editor-1.0.0.tgz","fileCount":5,"integrity":"sha512-gkH1Zb0x8geWdFuBr1YIQhuZbJ/QmrtYKjjann++sbK6o7/r3qcMh8D8396w43aWcmeVBIlsNy7dMLBj8cL3og==","signatures":[{"sig":"MEQCIGIBPfK95I/Fc/hZku2WAe4agx91owP/kekC/ESBCYC7AiBvd8Qz9TFhE58mhskAuyYuIB7q8Vbs3rzhqJZ7ElbPLw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":136597},"main":"./dist/z-certificate-editor.umd.js","type":"module","module":"./dist/z-certificate-editor.es.js","exports":{".":{"import":"./dist/z-certificate-editor.es.js","require":"./dist/z-certificate-editor.umd.js"},"./style.css":"./dist/style.css"},"scripts":{"dev":"vite","build":"vite build","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"error-zjq","email":"1299566691@qq.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.2","description":"一个功能强大的基于 Vue 3 的可视化证书编辑器，支持拖拽编辑、系统字段关联、模板管理、图片/二维码处理等功能","directories":{},"_nodeVersion":"22.21.0","dependencies":{"vue":"^3.4.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/z-certificate-editor_1.0.0_1768442177539_0.989195788583279","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"z-certificate-editor","version":"1.0.2","keywords":["vue","vue3","certificate","editor","certificate-editor","certificate-generator","drag-and-drop","template","可视化编辑器","证书编辑器"],"author":"","license":"MIT","_id":"z-certificate-editor@1.0.2","maintainers":[{"name":"error-zjq","email":"1299566691@qq.com"}],"dist":{"shasum":"6c37a61b9cab300471280bc975fc94a00f352973","tarball":"https://registry.npmjs.org/z-certificate-editor/-/z-certificate-editor-1.0.2.tgz","fileCount":5,"integrity":"sha512-G0gw3E2n4yEmjTouLxD62gnr5k6tEOgkAnBRjYromN224YpMHsFpQpDtihsYM/K3XQQTiMZyFlH79jkEXTxkwQ==","signatures":[{"sig":"MEUCIAx8lWRQakpk3LpOD97MobFF9D7sc/W/R2HRNqZfSC0qAiEAg9ndK6BNGTypMoD4Yg39CAndzVUXz2XmgvVUB5OeMPg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":136029},"main":"./dist/z-certificate-editor.umd.js","type":"module","module":"./dist/z-certificate-editor.es.js","exports":{".":{"import":"./dist/z-certificate-editor.es.js","require":"./dist/z-certificate-editor.umd.js"},"./style.css":"./dist/style.css"},"scripts":{"dev":"vite","build":"vite build","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"error-zjq","email":"1299566691@qq.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.2","description":"一个功能强大的基于 Vue 3 的可视化证书编辑器，支持拖拽编辑、系统字段关联、模板管理、图片/二维码处理等功能","directories":{},"_nodeVersion":"22.21.0","dependencies":{"vue":"^3.4.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/z-certificate-editor_1.0.2_1768443157884_0.04612817433877403","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"z-certificate-editor","version":"1.0.3","keywords":["vue3","certificate","editor","certificate-editor","可视化编辑器","证书编辑器","拖拽编辑","证书生成"],"author":"","license":"MIT","_id":"z-certificate-editor@1.0.3","maintainers":[{"name":"error-zjq","email":"1299566691@qq.com"}],"dist":{"shasum":"a4508c2676d5959c030291843c1562ee9c912c09","tarball":"https://registry.npmjs.org/z-certificate-editor/-/z-certificate-editor-1.0.3.tgz","fileCount":6,"integrity":"sha512-BmJB7F4nWafTfE1iz3Mw3jbsuCaJlvsnzXrwTMlUgWxj4Mf208YGgtATclkgjx6XIWxswiP0Du5D05LfJ6bUBQ==","signatures":[{"sig":"MEQCIBE3HA7Bc0PS2iAlMxJRnrudzUF9gP9C4lpu7FkiCBCVAiBWpg/KooUc1e30UhQewobMPYSSTuIO1t3Ldhd72B0vCg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":146397},"main":"./dist/z-certificate-editor.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/z-certificate-editor.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/z-certificate-editor.es.js","require":"./dist/z-certificate-editor.umd.js"},"./style.css":"./dist/style.css"},"gitHead":"07bc40538fa4e36f3d001fe66fa8411b027f2d2a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build:lib":"vite build --mode lib"},"_npmUser":{"name":"error-zjq","email":"1299566691@qq.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.2","description":"一个功能强大的基于 Vue 3 的可视化证书编辑器，支持拖拽编辑、系统字段关联、模板管理、图片/二维码处理等功能","directories":{},"_nodeVersion":"22.21.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/z-certificate-editor_1.0.3_1768445993442_0.23958381407778462","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"z-certificate-editor","version":"1.0.4","keywords":["vue3","certificate","editor","certificate-editor","可视化编辑器","证书编辑器","拖拽编辑","证书生成"],"author":"","license":"MIT","_id":"z-certificate-editor@1.0.4","maintainers":[{"name":"error-zjq","email":"1299566691@qq.com"}],"dist":{"shasum":"82b248ca1d2a3c32dc73f3ffc803e82c1f951585","tarball":"https://registry.npmjs.org/z-certificate-editor/-/z-certificate-editor-1.0.4.tgz","fileCount":8,"integrity":"sha512-6BhmN74apLLIlkAiNWspa8yIH/PTOAhq7Vf2yy7J03l4mkQip20iS71aAou5Pza+CzNAUsgFTzrw5sBeQylOhg==","signatures":[{"sig":"MEYCIQC8BPO3iFjNF3cUO9MAzc5qT5q5g0NFdAD0SUj4QWRCkAIhAPbvk5dkoD3sv8TCsQBpZ1miBrT/RWaaeskXcQ5g78gp","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":483979},"main":"./dist/z-certificate-editor.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/z-certificate-editor.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/z-certificate-editor.es.js","default":"./dist/z-certificate-editor.es.js","require":"./dist/z-certificate-editor.umd.js"},"./style.css":"./dist/style.css","./package.json":"./package.json"},"gitHead":"07bc40538fa4e36f3d001fe66fa8411b027f2d2a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build:lib":"vite build --mode lib"},"_npmUser":{"name":"error-zjq","email":"1299566691@qq.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.2","description":"一个功能强大的基于 Vue 3 的可视化证书编辑器，支持拖拽编辑、系统字段关联、模板管理、图片/二维码处理等功能","directories":{},"sideEffects":["*.css","./dist/style.css"],"_nodeVersion":"22.21.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/z-certificate-editor_1.0.4_1768446571522_0.7994410132982557","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"z-certificate-editor","version":"1.0.5","keywords":["vue3","certificate","editor","certificate-editor","可视化编辑器","证书编辑器","拖拽编辑","证书生成"],"author":"","license":"MIT","_id":"z-certificate-editor@1.0.5","maintainers":[{"name":"error-zjq","email":"1299566691@qq.com"}],"dist":{"shasum":"a525444f593f1160b8434385949a0e93dbb8e857","tarball":"https://registry.npmjs.org/z-certificate-editor/-/z-certificate-editor-1.0.5.tgz","fileCount":8,"integrity":"sha512-pX3venH/junyk2Ryz9ZsjoH4lOW3P+pqtKiNyrvEZm3Yh5StshX6ILVD/myvonzTi87RV9O6LdgbSODN4Y7g4Q==","signatures":[{"sig":"MEYCIQD/RCobRgQGD2EOIHHROu2V1Uu707FtGZOHNZXBuZqFsQIhALqniYuzAc0joIIEJcNw5XgG0S+hMWJQBaorazqat713","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":484022},"main":"./dist/z-certificate-editor.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/z-certificate-editor.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/z-certificate-editor.es.js","default":"./dist/z-certificate-editor.es.js","require":"./dist/z-certificate-editor.umd.js"},"./style.css":"./dist/style.css","./package.json":"./package.json"},"gitHead":"07bc40538fa4e36f3d001fe66fa8411b027f2d2a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build:lib":"vite build --mode lib"},"_npmUser":{"name":"error-zjq","email":"1299566691@qq.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.2","description":"一个功能强大的基于 Vue 3 的可视化证书编辑器，支持拖拽编辑、系统字段关联、模板管理、图片/二维码处理等功能","directories":{},"sideEffects":["*.css","./dist/style.css"],"_nodeVersion":"22.21.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/z-certificate-editor_1.0.5_1768447451980_0.7642174352672881","host":"s3://npm-registry-packages-npm-production"}},"1.0.6":{"name":"z-certificate-editor","version":"1.0.6","keywords":["vue3","certificate","editor","certificate-editor","可视化编辑器","证书编辑器","拖拽编辑","证书生成"],"author":"","license":"MIT","_id":"z-certificate-editor@1.0.6","maintainers":[{"name":"error-zjq","email":"1299566691@qq.com"}],"dist":{"shasum":"4fb88e81acfec264b81f64622db2fbf393d93090","tarball":"https://registry.npmjs.org/z-certificate-editor/-/z-certificate-editor-1.0.6.tgz","fileCount":8,"integrity":"sha512-y9wZiNR0mfPJco84JDQomi+JZ+3ATWHro6nDreICHngFwhEr4MnYQxhJGXDVzCTryrLEtK++HvjT3wUCjjdjdw==","signatures":[{"sig":"MEYCIQCNiYWftpCSm3NSVfp+7gskiHRJMWKmjYoMKTkxLZm1GAIhALsb1KoMZEbkPqUrh1xW4aLpDRIjcUuSTMafk7sYfOH7","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":484022},"main":"./dist/z-certificate-editor.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/z-certificate-editor.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/z-certificate-editor.es.js","default":"./dist/z-certificate-editor.es.js","require":"./dist/z-certificate-editor.umd.js"},"./style.css":"./dist/style.css","./package.json":"./package.json"},"gitHead":"07bc40538fa4e36f3d001fe66fa8411b027f2d2a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build:lib":"vite build --mode lib"},"_npmUser":{"name":"error-zjq","email":"1299566691@qq.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.2","description":"一个功能强大的基于 Vue 3 的可视化证书编辑器，支持拖拽编辑、系统字段关联、模板管理、图片/二维码处理等功能","directories":{},"sideEffects":["*.css","./dist/style.css"],"_nodeVersion":"22.21.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/z-certificate-editor_1.0.6_1768447724727_0.9904466018263425","host":"s3://npm-registry-packages-npm-production"}},"1.0.7":{"name":"z-certificate-editor","version":"1.0.7","keywords":["vue3","certificate","editor","certificate-editor","可视化编辑器","证书编辑器","拖拽编辑","证书生成"],"author":"","license":"MIT","_id":"z-certificate-editor@1.0.7","maintainers":[{"name":"error-zjq","email":"1299566691@qq.com"}],"dist":{"shasum":"5aa5ee00394d039456b15cfe59edb44c07e875af","tarball":"https://registry.npmjs.org/z-certificate-editor/-/z-certificate-editor-1.0.7.tgz","fileCount":6,"integrity":"sha512-xmkFEXxln+HbOnr0ucgD2H1+fmUTA1vtd7Js01hcskwG98gWbv3T9lv0KobBgRpzdpID1ZSxNpIzdxNQ19FMmQ==","signatures":[{"sig":"MEUCIGPKP9pWZg33mE8phG9w9Vqy3mx15Z60yfhBVBySvOCJAiEA9nqqkrOT00hWU6u1w56Mqjf6pwCRpEzqdi58l0DSsrQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":146601},"main":"./dist/z-certificate-editor.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/z-certificate-editor.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/z-certificate-editor.es.js","default":"./dist/z-certificate-editor.es.js","require":"./dist/z-certificate-editor.umd.js"},"./style.css":"./dist/style.css","./package.json":"./package.json"},"gitHead":"07bc40538fa4e36f3d001fe66fa8411b027f2d2a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build:lib":"vite build --mode lib"},"_npmUser":{"name":"error-zjq","email":"1299566691@qq.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.2","description":"一个功能强大的基于 Vue 3 的可视化证书编辑器，支持拖拽编辑、系统字段关联、模板管理、图片/二维码处理等功能","directories":{},"sideEffects":["*.css","./dist/style.css"],"_nodeVersion":"22.21.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/z-certificate-editor_1.0.7_1768448003867_0.6088884892801787","host":"s3://npm-registry-packages-npm-production"}},"1.0.8":{"name":"z-certificate-editor","version":"1.0.8","keywords":["vue3","certificate","editor","certificate-editor","可视化编辑器","证书编辑器","拖拽编辑","证书生成"],"author":"","license":"MIT","_id":"z-certificate-editor@1.0.8","maintainers":[{"name":"error-zjq","email":"1299566691@qq.com"}],"dist":{"shasum":"295bcbfad949e2996bbe3e02cb96343e598019a6","tarball":"https://registry.npmjs.org/z-certificate-editor/-/z-certificate-editor-1.0.8.tgz","fileCount":8,"integrity":"sha512-qqc8p22pI2dpZnXtNd3S3KTe96SshNmVbu17Jvj+fKF9kQX+h90iIshGwNw6+DrjodSCQcrHFiV6ADQhP5IJSw==","signatures":[{"sig":"MEYCIQDNY9WfpwFZLvssimt/p29KaJG4pBqv5CZXQiovQCwWYAIhAKQhJV4iszJ9qjalf7HzElGynG3hSh6cw4CKe5VWOyf9","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":484069},"main":"./dist/z-certificate-editor.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/z-certificate-editor.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/z-certificate-editor.es.js","default":"./dist/z-certificate-editor.es.js","require":"./dist/z-certificate-editor.umd.js"},"./style.css":"./dist/style.css","./package.json":"./package.json"},"gitHead":"07bc40538fa4e36f3d001fe66fa8411b027f2d2a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build:lib":"vite build --mode lib","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"error-zjq","email":"1299566691@qq.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.2","description":"一个功能强大的基于 Vue 3 的可视化证书编辑器，支持拖拽编辑、系统字段关联、模板管理、图片/二维码处理等功能","directories":{},"sideEffects":["*.css","./dist/style.css"],"_nodeVersion":"22.21.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/z-certificate-editor_1.0.8_1768448383186_0.54729424892433","host":"s3://npm-registry-packages-npm-production"}},"1.0.9":{"name":"z-certificate-editor","version":"1.0.9","keywords":["vue3","certificate","editor","certificate-editor","可视化编辑器","证书编辑器","拖拽编辑","证书生成"],"author":"","license":"MIT","_id":"z-certificate-editor@1.0.9","maintainers":[{"name":"error-zjq","email":"1299566691@qq.com"}],"dist":{"shasum":"8679a3d6f7fc49fd216f15a68a2222e42123b32d","tarball":"https://registry.npmjs.org/z-certificate-editor/-/z-certificate-editor-1.0.9.tgz","fileCount":8,"integrity":"sha512-53VPME4jt3tK54GBkHsVAs1jLuFNhlq6ewvtxknjWBm7me3x++ZRn/HTkeIG5eTSt0acn0vJEtP24eoU9uVAmQ==","signatures":[{"sig":"MEUCIQCCpicIiLzsVX0TZigCawAaE0rqui+M+58veTpjlKHFaQIgYMH82Q2c7vcd0epyXhM1NsxeObwnbWuJzmBoyvFM1x0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":484069},"main":"./dist/z-certificate-editor.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/z-certificate-editor.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/z-certificate-editor.es.js","default":"./dist/z-certificate-editor.es.js","require":"./dist/z-certificate-editor.umd.js"},"./style.css":"./dist/style.css","./package.json":"./package.json"},"gitHead":"07bc40538fa4e36f3d001fe66fa8411b027f2d2a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build:lib":"vite build --mode lib","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"error-zjq","email":"1299566691@qq.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.2","description":"一个功能强大的基于 Vue 3 的可视化证书编辑器，支持拖拽编辑、系统字段关联、模板管理、图片/二维码处理等功能","directories":{},"sideEffects":["*.css","./dist/style.css"],"_nodeVersion":"22.21.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/z-certificate-editor_1.0.9_1768448418970_0.8382858916280869","host":"s3://npm-registry-packages-npm-production"}},"1.0.10":{"name":"z-certificate-editor","version":"1.0.10","keywords":["vue3","certificate","editor","certificate-editor","可视化编辑器","证书编辑器","拖拽编辑","证书生成"],"author":"","license":"MIT","_id":"z-certificate-editor@1.0.10","maintainers":[{"name":"error-zjq","email":"1299566691@qq.com"}],"dist":{"shasum":"6779f1c8c2a675225dd32047ed0cd54d0a493b6c","tarball":"https://registry.npmjs.org/z-certificate-editor/-/z-certificate-editor-1.0.10.tgz","fileCount":8,"integrity":"sha512-Bj+d7caS1+uchHVVemUXBRwdGpK7K/Aw+eIMmHFdpxhQeri1hvUQxFWcYSfnmXml+67lMFqSt1eDeDsZ/lOFUQ==","signatures":[{"sig":"MEQCIDuH7qIoU6QGh5GChWny8N34g48Pw9XHf6w8oN0e3ioqAiA4u7g9+E/YJY/41lgq8NNabJcneQHQZitznWd4kI7gGg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":484070},"main":"./dist/z-certificate-editor.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/z-certificate-editor.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/z-certificate-editor.es.js","default":"./dist/z-certificate-editor.es.js","require":"./dist/z-certificate-editor.umd.js"},"./style.css":"./dist/style.css","./package.json":"./package.json"},"gitHead":"07bc40538fa4e36f3d001fe66fa8411b027f2d2a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build:lib":"vite build --mode lib","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"error-zjq","email":"1299566691@qq.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.2","description":"一个功能强大的基于 Vue 3 的可视化证书编辑器，支持拖拽编辑、系统字段关联、模板管理、图片/二维码处理等功能","directories":{},"sideEffects":["*.css","./dist/style.css"],"_nodeVersion":"22.21.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/z-certificate-editor_1.0.10_1768448588417_0.5255769902570591","host":"s3://npm-registry-packages-npm-production"}},"1.0.11":{"name":"z-certificate-editor","version":"1.0.11","keywords":["vue3","certificate","editor","certificate-editor","可视化编辑器","证书编辑器","拖拽编辑","证书生成"],"author":"","license":"MIT","_id":"z-certificate-editor@1.0.11","maintainers":[{"name":"error-zjq","email":"1299566691@qq.com"}],"dist":{"shasum":"74b211f0a9bf5732d570c724a908d31fb20b5358","tarball":"https://registry.npmjs.org/z-certificate-editor/-/z-certificate-editor-1.0.11.tgz","fileCount":8,"integrity":"sha512-PQoJLAtZ79WEBR6l6JpGRfxz6W87XK+nwRhokRlu2BZdLrWz7vDIdCitryXw/5YKqulrSDgHwte4x/moDHotwg==","signatures":[{"sig":"MEUCIQDR5xZEsWeJ9xWnym/X00Wc+Ty+V9s45VQi/BOIGe4XXgIgLCNllVDXeoRreF74EF5nnnzMM+R26GmtY9xXJiyzuaQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":609014},"main":"./dist/z-certificate-editor.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/z-certificate-editor.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/z-certificate-editor.es.js","default":"./dist/z-certificate-editor.es.js","require":"./dist/z-certificate-editor.umd.js"},"./style.css":"./dist/style.css","./package.json":"./package.json"},"gitHead":"07bc40538fa4e36f3d001fe66fa8411b027f2d2a","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","build:lib":"vite build --mode lib","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"error-zjq","email":"1299566691@qq.com"},"repository":{"url":"","type":"git"},"_npmVersion":"11.6.2","description":"一个功能强大的基于 Vue 3 的可视化证书编辑器，支持拖拽编辑、系统字段关联、模板管理、图片/二维码处理等功能","directories":{},"sideEffects":["*.css","./dist/style.css"],"_nodeVersion":"22.21.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/z-certificate-editor_1.0.11_1768549784141_0.7883288974306408","host":"s3://npm-registry-packages-npm-production"}},"1.0.12":{"name":"z-certificate-editor","version":"1.0.12","description":"一个功能强大的基于 Vue 3 的可视化证书编辑器，支持拖拽编辑、系统字段关联、模板管理、图片/二维码处理等功能","type":"module","main":"./dist/z-certificate-editor.umd.js","module":"./dist/z-certificate-editor.es.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/z-certificate-editor.es.js","require":"./dist/z-certificate-editor.umd.js","default":"./dist/z-certificate-editor.es.js"},"./style.css":"./dist/style.css","./package.json":"./package.json"},"keywords":["vue3","certificate","editor","certificate-editor","可视化编辑器","证书编辑器","拖拽编辑","证书生成"],"author":"","license":"MIT","repository":{"type":"git","url":""},"scripts":{"dev":"vite","build":"vite build","build:lib":"vite build --mode lib","preview":"vite preview","prepublishOnly":"npm run build:lib"},"sideEffects":["*.css","./dist/style.css"],"peerDependencies":{"vue":"^3.0.0"},"dependencies":{},"devDependencies":{"@vitejs/plugin-vue":"^5.0.0","vite":"^5.0.0","vue":"^3.4.0"},"gitHead":"d121ae87eacd6c41e6540e224ad74e72d90fc112","_id":"z-certificate-editor@1.0.12","_nodeVersion":"22.21.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-BCY/67LjOfh9u3MDFprxvjW44Yo5fK+M7t/aOtSR5SytHhJV6PEvceJf4N6rlJD/EDYdvMXrT91m8T4ufqkz6w==","shasum":"004c13f29856849088c0ae98e2ce216279bcf375","tarball":"https://registry.npmjs.org/z-certificate-editor/-/z-certificate-editor-1.0.12.tgz","fileCount":8,"unpackedSize":627656,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCuMt57lspXtc7FdzJJd23Yr9btGdK8avwLUYejLD1C4wIhAIuwarBCCHolOwJxV/ss6llzn/vs+v/h6u0zv1ddAU2R"}]},"_npmUser":{"name":"error-zjq","email":"1299566691@qq.com"},"directories":{},"maintainers":[{"name":"error-zjq","email":"1299566691@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/z-certificate-editor_1.0.12_1768960482387_0.6333087825386239"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-15T01:56:17.538Z","modified":"2026-01-21T01:54:42.647Z","1.0.0":"2026-01-15T01:56:17.686Z","1.0.2":"2026-01-15T02:12:38.024Z","1.0.3":"2026-01-15T02:59:53.624Z","1.0.4":"2026-01-15T03:09:31.686Z","1.0.5":"2026-01-15T03:24:12.164Z","1.0.6":"2026-01-15T03:28:44.870Z","1.0.7":"2026-01-15T03:33:24.036Z","1.0.8":"2026-01-15T03:39:43.335Z","1.0.9":"2026-01-15T03:40:19.119Z","1.0.10":"2026-01-15T03:43:08.611Z","1.0.11":"2026-01-16T07:49:44.323Z","1.0.12":"2026-01-21T01:54:42.534Z"},"license":"MIT","keywords":["vue3","certificate","editor","certificate-editor","可视化编辑器","证书编辑器","拖拽编辑","证书生成"],"repository":{"type":"git","url":""},"description":"一个功能强大的基于 Vue 3 的可视化证书编辑器，支持拖拽编辑、系统字段关联、模板管理、图片/二维码处理等功能","maintainers":[{"name":"error-zjq","email":"1299566691@qq.com"}],"readme":"# z-certificate-editor\r\n\r\n一个功能强大的基于 Vue 3 的可视化证书编辑器，支持拖拽编辑、系统字段关联、模板管理、图片/二维码处理等功能。\r\n\r\n## 📦 安装\r\n\r\n```bash\r\nnpm install z-certificate-editor\r\n```\r\n\r\n或使用 yarn：\r\n\r\n```bash\r\nyarn add z-certificate-editor\r\n```\r\n\r\n或使用 pnpm：\r\n\r\n```bash\r\npnpm add z-certificate-editor\r\n```\r\n\r\n## 🚀 快速开始\r\n\r\n### 基础使用\r\n\r\n```vue\r\n<template>\r\n  <CertificateEditor @save=\"handleSave\" />\r\n</template>\r\n\r\n<script setup>\r\nimport { CertificateEditor } from 'z-certificate-editor'\r\nimport 'z-certificate-editor/style.css'\r\n\r\nconst handleSave = (certificateData) => {\r\n  console.log('证书配置数据：', certificateData)\r\n}\r\n</script>\r\n```\r\n\r\n### 使用自定义系统字段\r\n\r\n```vue\r\n<template>\r\n  <CertificateEditor \r\n    :system-fields=\"customSystemFields\"\r\n    @save=\"handleSave\"\r\n  />\r\n</template>\r\n\r\n<script setup>\r\nimport {\r\n  CertificateEditor,\r\n  SYSTEM_FIELDS\r\n} from 'z-certificate-editor'\r\nimport 'z-certificate-editor/style.css'\r\n\r\nconst customSystemFields = [\r\n  {\r\n    key: 'studentId',\r\n    label: '学号',\r\n    placeholder: '{{学号}}',\r\n    category: '学生信息',\r\n    description: '学生的学号'\r\n  },\r\n  ...SYSTEM_FIELDS\r\n]\r\n\r\nconst handleSave = (certificateData) => {\r\n  console.log('证书配置数据：', certificateData)\r\n}\r\n</script>\r\n```\r\n\r\n### 通过组件引用获取数据\r\n\r\n```vue\r\n<template>\r\n  <CertificateEditor \r\n    ref=\"certificateEditorRef\"\r\n    @save=\"handleSave\"\r\n  />\r\n  <button @click=\"getCurrentData\">获取当前配置</button>\r\n</template>\r\n\r\n<script setup>\r\nimport { ref } from 'vue'\r\nimport { CertificateEditor } from 'z-certificate-editor'\r\nimport 'z-certificate-editor/style.css'\r\n\r\nconst certificateEditorRef = ref(null)\r\n\r\nconst handleSave = (certificateData) => {\r\n  console.log('保存的数据：', certificateData)\r\n}\r\n\r\nconst getCurrentData = () => {\r\n  if (certificateEditorRef.value) {\r\n    const data = certificateEditorRef.value.getCertificateData()\r\n    console.log('当前配置：', data)\r\n  }\r\n}\r\n</script>\r\n```\r\n\r\n### 配置服务器上传\r\n\r\n```vue\r\n<template>\r\n  <CertificateEditor \r\n    :upload-config=\"uploadConfig\"\r\n    @save=\"handleSave\"\r\n  />\r\n</template>\r\n\r\n<script setup>\r\nimport { ref } from 'vue'\r\nimport { CertificateEditor } from 'z-certificate-editor'\r\nimport 'z-certificate-editor/style.css'\r\n\r\n// 上传配置\r\nconst uploadConfig = ref({\r\n  url: 'http://localhost:8000/api/upload', // 上传接口地址\r\n  method: 'POST', // 请求方法\r\n  fileField: 'file', // 文件字段名\r\n  params: {\r\n    // 额外的表单参数（可选）\r\n    type: 'image',\r\n    category: 'certificate'\r\n  },\r\n  headers: {\r\n    // 请求头（可选）\r\n    'Authorization': 'Bearer your-token-here',\r\n    'X-Custom-Header': 'value'\r\n  }\r\n})\r\n\r\nconst handleSave = (certificateData) => {\r\n  console.log('证书配置数据：', certificateData)\r\n}\r\n</script>\r\n```\r\n\r\n### 自定义默认模板尺寸\r\n\r\n```vue\r\n<template>\r\n  <CertificateEditor \r\n    :default-template-sizes=\"customSizes\"\r\n    @save=\"handleSave\"\r\n  />\r\n</template>\r\n\r\n<script setup>\r\nimport { ref } from 'vue'\r\nimport { CertificateEditor } from 'z-certificate-editor'\r\nimport 'z-certificate-editor/style.css'\r\n\r\n// 自定义默认模板尺寸\r\nconst customSizes = ref({\r\n  vertical: { width: 1200, height: 1600 },   // 自定义竖版默认尺寸\r\n  horizontal: { width: 1600, height: 1200 }  // 自定义横版默认尺寸\r\n})\r\n\r\nconst handleSave = (certificateData) => {\r\n  console.log('证书配置数据：', certificateData)\r\n}\r\n</script>\r\n```\r\n\r\n## 📖 完整文档\r\n\r\n以下是完整的项目文档和使用说明。\r\n\r\n## ✨ 功能特性\r\n\r\n### 核心功能\r\n\r\n- 🎨 **可视化编辑**: 直观的拖拽式编辑界面，所见即所得\r\n- 📝 **文本元素**: 支持短文本和长文本元素，丰富的格式化选项\r\n- 🖼️ **图片元素**: 支持本地上传（服务器上传或Base64）、URL输入、关联系统字段（如用户头像）\r\n- 🔲 **二维码元素**: 支持文本内容、图片上传（服务器上传或Base64）、URL输入、关联系统字段（如证书编号、身份证号）\r\n- ☁️ **服务器上传**: 支持配置上传接口，所有图片上传可自动上传到服务器并获取网络URL\r\n- 🎯 **系统字段关联**: 动态关联系统字段，实现证书内容的自动化填充\r\n- ⚙️ **自定义系统字段**: 支持通过 props 传入自定义系统字段配置，灵活适配不同业务场景\r\n- 📐 **精确定位**: 支持精确的位置（X、Y）和尺寸（宽度、高度）设置\r\n- 🎨 **丰富的文本格式**: 字体大小、字体族、粗体、斜体、下划线、颜色、对齐方式、行高等\r\n\r\n### 模板管理\r\n\r\n- 📄 **预设模板**: 提供横版和竖版预设证书模板\r\n- 🔄 **模板切换**: 支持横版/竖版模板快速切换\r\n- 📤 **自定义模板**: 支持上传自定义背景图片（JPG、JPEG、PNG等格式，最大10MB），支持服务器上传\r\n- 📏 **智能尺寸建议**: 根据模板类型（横版/竖版）自动推荐合适的尺寸\r\n\r\n### 数据管理\r\n\r\n- 📊 **字段数据管理**: 可视化编辑和预览字段数据\r\n- 🔍 **字段分类**: 系统字段按类别组织（基本信息、考试信息、证书信息、日期信息等）\r\n- 💾 **配置保存**: 一键保存证书配置（模板、元素、字段数据）到控制台\r\n- 👁️ **实时预览**: 支持预览最终证书效果，自动替换字段占位符为实际数据\r\n\r\n### 交互功能\r\n\r\n- 🖱️ **拖拽移动**: 选中元素后可拖拽移动位置\r\n- 🔄 **调整大小**: 选中元素后拖动四角控制点调整大小\r\n- ✏️ **属性编辑**: 右侧属性面板实时编辑选中元素的各项属性\r\n- 🗑️ **元素删除**: 支持删除不需要的元素\r\n\r\n## 🚀 安装和运行\r\n\r\n### 环境要求\r\n\r\n- Node.js >= 22.21.0\r\n- npm >= 11.6.2\r\n\r\n### 安装依赖\r\n\r\n```bash\r\nnpm install\r\n```\r\n\r\n### 开发模式\r\n\r\n```bash\r\nnpm run dev\r\n```\r\n\r\n启动后访问 `http://localhost:3000`（或终端显示的地址）\r\n\r\n### 构建生产版本\r\n\r\n```bash\r\nnpm run build\r\n```\r\n\r\n构建产物将输出到 `dist` 目录\r\n\r\n### 预览生产版本\r\n\r\n```bash\r\nnpm run preview\r\n```\r\n\r\n## 📖 使用说明\r\n\r\n### 自定义系统字段\r\n\r\n`CertificateEditor` 组件支持通过 `systemFields` prop 传入自定义系统字段配置，实现灵活的字段管理。\r\n\r\n#### 在项目中使用\r\n\r\n```vue\r\n<template>\r\n  <CertificateEditor :system-fields=\"customSystemFields\" />\r\n</template>\r\n\r\n<script setup>\r\nimport { ref } from 'vue'\r\nimport {\r\n  CertificateEditor,\r\n  SYSTEM_FIELDS\r\n} from 'z-certificate-editor'\r\nimport 'z-certificate-editor/style.css'\r\n\r\n// 定义自定义系统字段\r\nconst customSystemFields = ref([\r\n  // 添加自定义字段\r\n  {\r\n    key: 'studentId',\r\n    label: '学号',\r\n    placeholder: '{{学号}}',\r\n    category: '学生信息',\r\n    description: '学生的学号'\r\n  },\r\n  {\r\n    key: 'className',\r\n    label: '班级名称',\r\n    placeholder: '{{班级名称}}',\r\n    category: '学生信息',\r\n    description: '学生所在班级'\r\n  },\r\n  // 保留默认字段\r\n  ...SYSTEM_FIELDS\r\n])\r\n</script>\r\n```\r\n\r\n#### 字段对象格式\r\n\r\n每个系统字段对象必须包含以下属性：\r\n\r\n- `key` (String, 必需): 字段的唯一标识符，用于在代码中引用\r\n- `label` (String, 必需): 字段的显示名称，显示在界面上\r\n- `placeholder` (String, 必需): 字段的占位符格式，如 `{{姓名}}`\r\n- `category` (String, 可选): 字段的分类，用于分组显示\r\n- `description` (String, 可选): 字段的描述信息\r\n\r\n#### 注意事项\r\n\r\n- 如果不传入 `systemFields` prop，组件将使用默认的 `SYSTEM_FIELDS`\r\n- 自定义字段的 `key` 必须唯一，避免与默认字段冲突\r\n- 字段的 `placeholder` 格式必须为 `{{字段名}}` 的形式\r\n- 自定义字段会自动在字段选择对话框、属性面板等位置显示\r\n\r\n### 基本操作流程\r\n\r\n1. **选择模板**\r\n   - 点击左侧面板的\"底图模板\"标签\r\n   - 选择横版或竖版预设模板，或上传自定义背景图片\r\n   - 模板背景将自动铺满整个证书画布\r\n\r\n2. **添加元素**\r\n   - 点击左侧面板的\"设计元素\"标签\r\n   - 选择要添加的元素类型：\r\n     - **短文本**: 适合标题、姓名等简短文本\r\n     - **长文本**: 适合描述、说明等较长文本\r\n     - **图片**: 支持上传图片或关联用户头像字段\r\n     - **二维码**: 支持文本内容或关联证书编号等字段\r\n\r\n3. **编辑元素**\r\n   - 点击画布上的元素进行选择（选中后显示边框和控制点）\r\n   - 在右侧属性面板编辑元素的各种属性\r\n   - 可以拖拽移动元素位置\r\n   - 可以拖动四角控制点调整元素大小\r\n\r\n4. **关联系统字段**\r\n   - 对于文本元素：点击内容输入框右侧的\"+\"按钮，打开字段关联对话框\r\n   - 选择要关联的系统字段，字段占位符将插入到文本中\r\n   - 在字段数据面板中编辑字段的实际值\r\n\r\n5. **预览和保存**\r\n   - 点击顶部工具栏的\"预览\"按钮，查看最终证书效果\r\n   - 点击\"保存\"按钮，将当前配置保存到浏览器控制台\r\n\r\n### 文本元素\r\n\r\n#### 文本格式化选项\r\n\r\n- **字体大小**: 从下拉菜单选择预设大小（12px - 72px）\r\n- **字体**: 选择字体族（如：宋体、微软雅黑、Arial等）\r\n- **样式**: \r\n  - 粗体 (B)\r\n  - 斜体 (I)\r\n  - 下划线 (U)\r\n- **颜色**: 点击颜色选择器设置文字颜色\r\n- **对齐**: 左对齐、居中、右对齐、两端对齐\r\n- **行高**: 设置文本行高（1.0 - 3.0）\r\n\r\n#### 字段关联\r\n\r\n- 在文本内容中插入字段占位符，如：`{{姓名}}`、`{{考试名称}}`\r\n- 系统会自动识别并高亮显示字段占位符\r\n- 在字段数据面板中编辑字段的实际值\r\n\r\n### 图片元素\r\n\r\n#### 图片来源\r\n\r\n1. **本地上传**\r\n   - 点击\"本地上传\"按钮选择本地图片文件\r\n   - 支持格式：JPG、JPEG、PNG、GIF、WEBP、SVG、BMP\r\n   - 文件大小限制：最大 2MB\r\n   - 如果配置了 `uploadConfig`，会上传到服务器并获取网络URL\r\n   - 如果未配置 `uploadConfig`，会自动转换为 Base64 格式\r\n\r\n2. **URL输入**\r\n   - 在URL输入框中输入图片的网络地址\r\n   - 支持 http/https 协议的图片链接\r\n   - 支持协议相对URL（// 开头），会自动转换为完整URL\r\n\r\n3. **关联字段**\r\n   - 选择关联的系统字段（如：头像、照片、头像图片）\r\n   - 系统会使用字段数据中的图片URL或Base64数据\r\n\r\n#### 图片尺寸\r\n\r\n- 可以自由设置图片的宽度和高度\r\n- 支持像素（px）单位\r\n\r\n### 二维码元素\r\n\r\n#### 二维码内容来源\r\n\r\n1. **本地上传**\r\n   - 点击\"本地上传\"按钮选择二维码图片\r\n   - 支持格式：JPG、JPEG、PNG、GIF、WEBP、SVG、BMP\r\n   - 文件大小限制：最大 2MB\r\n   - 如果配置了 `uploadConfig`，会上传到服务器并获取网络URL\r\n   - 如果未配置 `uploadConfig`，会自动转换为 Base64 格式\r\n\r\n2. **URL/内容输入**\r\n   - 输入文本内容（将生成二维码）\r\n   - 输入图片URL（直接显示二维码图片）\r\n   - 支持协议相对URL（// 开头），会自动转换为完整URL\r\n\r\n3. **关联字段**\r\n   - 选择关联的系统字段（如：证书编号、身份证号、链接地址、考试名称）\r\n   - 系统会使用字段数据中的内容生成二维码\r\n\r\n#### 二维码尺寸\r\n\r\n- 可以自由设置二维码的宽度和高度\r\n- 支持像素（px）单位\r\n\r\n### 模板管理\r\n\r\n#### 预设模板\r\n\r\n- 系统提供多套预设的横版和竖版证书模板\r\n- 点击\"底图模板\"标签切换到模板管理\r\n- 点击模板类型按钮（\"竖版\"或\"横版\"）筛选模板\r\n- 点击模板卡片选择并应用模板\r\n\r\n#### 自定义模板上传\r\n\r\n1. 点击\"上传自定义模板\"按钮\r\n2. 选择要上传的背景图片文件\r\n3. 在尺寸设置区域输入模板的宽度和高度（单位：px）\r\n4. 如果配置了 `uploadConfig`，会上传到服务器并获取网络URL\r\n5. 如果未配置 `uploadConfig`，会自动转换为 Base64 格式\r\n6. 上传成功后，模板将自动应用\r\n\r\n**上传要求**:\r\n- 支持格式：JPG、JPEG、PNG、GIF、WEBP、SVG、BMP\r\n- 文件大小：最大 2MB\r\n\r\n#### 模板尺寸设置\r\n\r\n- **自由设置尺寸**：在上传模板区域的\"模板尺寸\"设置中，可以自由输入宽度和高度（单位：px）\r\n- **默认尺寸**：\r\n  - 竖版默认：972 x 1378 px\r\n  - 横版默认：1303 x 897 px\r\n- **自动切换**：切换\"竖版\"/\"横版\"按钮时，尺寸会自动更新为对应类型的默认值\r\n- **实时预览**：输入尺寸后，画布会实时响应变化，立即显示新的尺寸\r\n- **模板选择同步**：选择预设模板时，尺寸输入框会自动同步显示该模板的尺寸\r\n\r\n### 字段数据管理\r\n\r\n- 在右侧面板底部的\"字段数据\"区域管理字段值\r\n- 系统会根据证书中使用的字段自动显示相应的输入框\r\n- 编辑字段值后，画布上的占位符会自动更新（预览模式）\r\n\r\n### 服务器上传配置\r\n\r\n组件支持配置上传接口，所有图片上传（模板背景、图片元素、二维码元素）都可以自动上传到服务器并获取网络URL。\r\n\r\n#### 配置上传接口\r\n\r\n```vue\r\n<template>\r\n  <CertificateEditor \r\n    :upload-config=\"uploadConfig\"\r\n    @save=\"handleSave\"\r\n  />\r\n</template>\r\n\r\n<script setup>\r\nimport { ref } from 'vue'\r\nimport { CertificateEditor } from 'z-certificate-editor'\r\nimport 'z-certificate-editor/style.css'\r\n\r\n// 上传配置\r\nconst uploadConfig = ref({\r\n  url: 'http://localhost:8000/api/upload', // 上传接口地址（必需）\r\n  method: 'POST', // 请求方法，默认 'POST'\r\n  fileField: 'file', // 文件字段名，默认 'file'\r\n  params: {\r\n    // 额外的表单参数（可选）\r\n    type: 'image',\r\n    category: 'certificate'\r\n  },\r\n  headers: {\r\n    // 请求头（可选）\r\n    'Authorization': 'Bearer your-token-here',\r\n    'X-Custom-Header': 'value'\r\n  }\r\n})\r\n\r\nconst handleSave = (certificateData) => {\r\n  console.log('证书配置数据：', certificateData)\r\n}\r\n</script>\r\n```\r\n\r\n#### 服务器返回格式\r\n\r\n组件支持多种服务器返回格式，会自动识别并提取图片URL：\r\n\r\n```javascript\r\n// 格式1：直接返回 url 字段\r\n{ \"url\": \"http://example.com/image.jpg\" }\r\n\r\n// 格式2：嵌套在 data.file 中\r\n{ \r\n  \"data\": { \r\n    \"file\": { \r\n      \"full_url\": \"http://example.com/image.jpg\",\r\n      \"url\": \"http://example.com/image.jpg\"\r\n    } \r\n  } \r\n}\r\n\r\n// 格式3：嵌套在 data 中\r\n{ \"data\": { \"url\": \"http://example.com/image.jpg\" } }\r\n\r\n// 格式4：直接返回 URL 字符串\r\n{ \"data\": \"http://example.com/image.jpg\" }\r\n\r\n// 格式5：直接返回字符串\r\n\"http://example.com/image.jpg\"\r\n```\r\n\r\n#### 兼容性说明\r\n\r\n- 如果未配置 `uploadConfig` 或设置为 `null`，所有图片上传会自动使用 Base64 方式\r\n- 保持向后兼容，不影响现有功能\r\n- 支持协议相对URL（`//` 开头），会自动转换为完整URL\r\n\r\n### 预览功能\r\n\r\n- 点击顶部工具栏的\"预览\"按钮打开预览模态框\r\n- 预览模式下，所有字段占位符会被替换为实际字段数据\r\n- 预览的证书即为最终效果\r\n\r\n### 保存功能\r\n\r\n- 点击顶部工具栏的\"保存\"按钮\r\n- 系统会将当前证书配置（模板、元素列表、字段数据）输出到浏览器控制台\r\n- 同时触发 `save` 事件，将数据传递给父组件\r\n- 父组件可以通过事件处理函数接收保存的数据\r\n\r\n**保存的数据结构**:\r\n```json\r\n{\r\n  \"template\": {\r\n    \"id\": \"template-id\",\r\n    \"name\": \"模板名称\",\r\n    \"background\": \"背景图片或颜色\",\r\n    \"width\": 972,\r\n    \"height\": 1378\r\n  },\r\n  \"elements\": [\r\n    {\r\n      \"id\": 1234567890,\r\n      \"type\": \"text\",\r\n      \"content\": \"{{姓名}}（{{性别称呼}}）\",\r\n      \"x\": 100,\r\n      \"y\": 200,\r\n      \"width\": 300,\r\n      \"fontSize\": 24,\r\n      // ... 其他属性\r\n    }\r\n  ],\r\n  \"fieldData\": {\r\n    \"name\": \"张三\",\r\n    \"gender\": \"先生\",\r\n    // ... 其他字段数据\r\n  },\r\n  \"timestamp\": \"2024-01-01T00:00:00.000Z\"\r\n}\r\n```\r\n\r\n#### 在父组件中获取保存的数据\r\n\r\n有两种方式可以在父组件中获取证书配置数据：\r\n\r\n**方式一：通过事件监听（推荐）**\r\n\r\n当用户点击保存按钮时，组件会触发 `save` 事件，父组件可以通过监听该事件获取数据：\r\n\r\n```vue\r\n<template>\r\n  <CertificateEditor \r\n    :system-fields=\"customSystemFields\"\r\n    @save=\"handleSave\"\r\n  />\r\n</template>\r\n\r\n<script setup>\r\nimport { ref } from 'vue'\r\nimport { CertificateEditor } from 'z-certificate-editor'\r\nimport 'z-certificate-editor/style.css'\r\n\r\nconst handleSave = (certificateData) => {\r\n  console.log('接收到保存的数据：', certificateData)\r\n  \r\n  // 在这里可以处理保存的数据，例如：\r\n  // - 发送到服务器\r\n  // - 保存到本地存储\r\n  // - 进行数据验证\r\n  // 等等...\r\n}\r\n</script>\r\n```\r\n\r\n**方式二：通过组件方法主动获取**\r\n\r\n父组件可以通过组件引用调用 `getCertificateData()` 方法，随时获取当前的证书配置数据（无需点击保存按钮）：\r\n\r\n```vue\r\n<template>\r\n  <CertificateEditor \r\n    ref=\"certificateEditorRef\"\r\n    :system-fields=\"customSystemFields\"\r\n  />\r\n  <button @click=\"getData\">获取当前配置</button>\r\n</template>\r\n\r\n<script setup>\r\nimport { ref } from 'vue'\r\nimport { CertificateEditor } from 'z-certificate-editor'\r\nimport 'z-certificate-editor/style.css'\r\n\r\nconst certificateEditorRef = ref(null)\r\n\r\nconst getData = () => {\r\n  if (certificateEditorRef.value) {\r\n    const data = certificateEditorRef.value.getCertificateData()\r\n    console.log('当前证书配置：', data)\r\n    // 处理数据...\r\n  }\r\n}\r\n</script>\r\n```\r\n\r\n**完整示例**：\r\n\r\n```vue\r\n<template>\r\n  <CertificateEditor \r\n    ref=\"certificateEditorRef\"\r\n    :system-fields=\"customSystemFields\"\r\n    @save=\"handleSave\"\r\n  />\r\n  <button @click=\"getCurrentData\">获取当前配置</button>\r\n</template>\r\n\r\n<script setup>\r\nimport { ref } from 'vue'\r\nimport {\r\n  CertificateEditor,\r\n  SYSTEM_FIELDS\r\n} from 'z-certificate-editor'\r\nimport 'z-certificate-editor/style.css'\r\n\r\nconst customSystemFields = ref([...SYSTEM_FIELDS])\r\nconst certificateEditorRef = ref(null)\r\n\r\n// 方式一：监听保存事件\r\nconst handleSave = (certificateData) => {\r\n  console.log('用户点击保存，数据：', certificateData)\r\n  \r\n  // 示例：保存到本地存储\r\n  localStorage.setItem('certificateConfig', JSON.stringify(certificateData))\r\n  \r\n  // 示例：发送到服务器\r\n  // fetch('/api/certificate/save', {\r\n  //   method: 'POST',\r\n  //   headers: { 'Content-Type': 'application/json' },\r\n  //   body: JSON.stringify(certificateData)\r\n  // })\r\n}\r\n\r\n// 方式二：主动获取数据\r\nconst getCurrentData = () => {\r\n  if (certificateEditorRef.value) {\r\n    const data = certificateEditorRef.value.getCertificateData()\r\n    console.log('当前配置数据：', data)\r\n    return data\r\n  }\r\n}\r\n</script>\r\n```\r\n\r\n## 🛠️ 技术栈\r\n\r\n- **Vue 3**: 使用 Composition API 进行组件开发\r\n- **Vite**: 快速的前端构建工具\r\n- **原生 CSS**: 无第三方CSS框架，纯原生样式\r\n- **Canvas/HTML**: 基于HTML和CSS的渲染，非Canvas绘制\r\n\r\n## 🔌 API 参考\r\n\r\n### CertificateEditor Props\r\n\r\n| 属性名 | 类型 | 默认值 | 说明 |\r\n|--------|------|--------|------|\r\n| `systemFields` | `Array` | `SYSTEM_FIELDS` | 自定义系统字段配置数组 |\r\n| `uploadConfig` | `Object` | `null` | 上传配置对象，配置后所有图片上传会请求服务器 |\r\n| `templates` | `Array` | `PRESET_TEMPLATES` | 自定义模板数组 |\r\n| `initialData` | `Object` | `null` | 初始证书配置数据 |\r\n| `defaultTemplateSizes` | `Object` | `{ vertical: { width: 972, height: 1378 }, horizontal: { width: 1303, height: 897 } }` | 默认模板尺寸配置 |\r\n\r\n### CertificateEditor Events\r\n\r\n| 事件名 | 参数 | 说明 |\r\n|--------|------|------|\r\n| `save` | `certificateData: Object` | 当用户点击保存按钮时触发，传递证书配置数据 |\r\n\r\n### CertificateEditor Exposed Methods\r\n\r\n| 方法名 | 参数 | 返回值 | 说明 |\r\n|--------|------|--------|------|\r\n| `getCertificateData()` | - | `Object` | 获取当前证书配置数据，无需点击保存按钮 |\r\n\r\n### 系统字段对象格式\r\n\r\n```typescript\r\ninterface SystemField {\r\n  key: string          // 字段唯一标识\r\n  label: string        // 字段显示名称\r\n  placeholder: string  // 占位符格式，如 \"{{姓名}}\"\r\n  category?: string    // 字段分类（可选）\r\n  description?: string // 字段描述（可选）\r\n}\r\n```\r\n\r\n### 证书配置数据格式\r\n\r\n```typescript\r\ninterface CertificateData {\r\n  template: {\r\n    id: string\r\n    name: string\r\n    type: 'vertical' | 'horizontal'\r\n    background: string\r\n    width: number\r\n    height: number\r\n  }\r\n  elements: Array<{\r\n    id: number\r\n    type: 'text' | 'longtext' | 'image' | 'qrcode'\r\n    x: number\r\n    y: number\r\n    width: number\r\n    height?: number\r\n    content?: string\r\n    style?: object\r\n    imageSource?: 'url' | 'field'\r\n    imageUrl?: string\r\n    imageField?: string\r\n    qrcodeSource?: 'url' | 'field'\r\n    qrcodeContent?: string\r\n    qrcodeField?: string\r\n  }>\r\n  fieldData: Record<string, any>\r\n  timestamp: string\r\n}\r\n```\r\n\r\n## 📋 系统字段列表\r\n\r\n系统内置了丰富的字段类型，按类别组织：\r\n\r\n### 基本信息\r\n- 姓名 (name)\r\n- 性别称呼 (gender)\r\n- 账号 (account)\r\n\r\n### 考试信息\r\n- 考试名称 (examName)\r\n- 成绩 (score)\r\n- 成绩等级 (scoreLevel)\r\n- 考试分数 (examScore)\r\n\r\n### 证书信息\r\n- 证书编号 (certificateNumber)\r\n- 有效期 (validityPeriod)\r\n\r\n### 日期信息\r\n- 签发日期 (issueDate)\r\n- 签发日期-年 (issueDateYear)\r\n- 签发日期-月 (issueDateMonth)\r\n- 签发日期-日 (issueDateDay)\r\n- 生效日期 (effectiveDate)\r\n- 到期日期 (expiryDate)\r\n\r\n### 其他信息\r\n- 身份证号 (idNumber)\r\n- 手机号 (phone)\r\n- 邮箱 (email)\r\n- 地址 (address)\r\n- 机构名称 (organization)\r\n- 链接地址 (url)\r\n\r\n### 图片字段\r\n- 头像 (avatar)\r\n- 照片 (photo)\r\n- 头像图片 (headImage)\r\n\r\n## 🌐 浏览器支持\r\n\r\n- ✅ Chrome (最新版)\r\n- ✅ Firefox (最新版)\r\n- ✅ Safari (最新版)\r\n- ✅ Edge (最新版)\r\n\r\n## 📝 开发计划\r\n\r\n### 已完成功能 ✅\r\n\r\n- [x] 可视化拖拽编辑\r\n- [x] 文本元素（短文本、长文本）\r\n- [x] 图片元素（本地上传、URL、关联字段）\r\n- [x] 二维码元素（文本内容、URL、关联字段）\r\n- [x] 服务器上传功能（支持配置上传接口）\r\n- [x] 自定义模板尺寸设置（支持自由设置宽度和高度）\r\n- [x] 默认模板尺寸配置（支持自定义竖版和横版默认尺寸）\r\n- [x] 实时尺寸预览（输入尺寸后画布立即响应变化）\r\n- [x] 系统字段关联\r\n- [x] 自定义系统字段支持（通过 props 传入）\r\n- [x] 预设模板管理\r\n- [x] 自定义模板上传\r\n- [x] 字段数据管理\r\n- [x] 预览功能\r\n- [x] 配置保存功能\r\n\r\n### 计划中功能 🚧\r\n\r\n- [ ] 二维码生成（根据文本内容自动生成二维码图片）\r\n- [ ] 撤销/重做功能\r\n- [ ] 元素复制/粘贴\r\n- [ ] 元素对齐辅助线\r\n- [ ] 导出功能（PNG、PDF）\r\n- [ ] 导入功能（导入保存的配置）\r\n- [ ] 元素层级管理（置顶、置底、上移、下移）\r\n- [ ] 批量操作（多选、批量移动、批量删除）\r\n- [ ] 模板收藏和分类\r\n- [ ] 响应式设计适配\r\n\r\n\r\n## 📄 许可证\r\n\r\nMIT\r\n\r\n## 📝 版本历史\r\n\r\n### 1.0.3\r\n- 初始版本发布\r\n- 支持可视化证书编辑\r\n- 支持系统字段关联\r\n- 支持模板管理\r\n- 支持图片和二维码元素\r\n- 支持保存和预览功能\r\n- 支持自定义系统字段\r\n- 支持通过事件和方法获取保存的数据\r\n- 发布为 npm 包，支持 ES 模块和 UMD 格式\r\n\r\n### 1.0.4+\r\n- 新增服务器上传功能\r\n  - 支持配置上传接口（URL、请求方法、请求头、请求参数）\r\n  - 所有图片上传（模板、图片元素、二维码元素）都支持服务器上传\r\n  - 支持多种服务器返回格式\r\n  - 未配置上传接口时自动使用 Base64 方式（向后兼容）\r\n- 支持协议相对URL（// 开头），自动转换为完整URL\r\n- 优化图片和二维码显示逻辑\r\n- 提取上传功能到公共工具函数（`utils/common.js`）\r\n\r\n### 1.0.5+\r\n- 新增模板尺寸设置功能\r\n  - 支持在底图模板区域自由设置模板尺寸（宽度和高度，单位：px）\r\n  - 默认竖版尺寸：972 x 1378 px\r\n  - 默认横版尺寸：1303 x 897 px\r\n  - 切换模板类型时自动更新为对应默认尺寸\r\n  - 选择预设模板时自动同步显示模板尺寸\r\n- 新增自定义默认模板尺寸配置\r\n  - 支持通过 `defaultTemplateSizes` prop 自定义竖版和横版的默认尺寸\r\n- 实时尺寸预览\r\n  - 输入尺寸后画布立即响应变化，无需上传模板即可看到效果\r\n  - 使用 Vue 3 的响应式系统，确保尺寸变化实时反映在画布上\r\n\r\n## 👨‍💻 开发说明\r\n\r\n### 核心概念\r\n\r\n1. **元素系统**: 所有可编辑的元素（文本、图片、二维码）都遵循统一的数据结构\r\n2. **字段系统**: 使用占位符（如 `{{姓名}}`）实现动态内容替换\r\n3. **模板系统**: 支持预设模板和自定义模板，背景自动铺满画布\r\n4. **状态管理**: 使用 Vue 3 Composition API 的 `ref` 和 `reactive` 管理状态\r\n\r\n### 代码规范\r\n\r\n- 使用 Composition API\r\n- 组件采用单文件组件（SFC）格式\r\n- 使用语义化的CSS类名\r\n- 保持组件的单一职责原则\r\n\r\n## 🤝 贡献\r\n\r\n欢迎提交 Issue 和 Pull Request！\r\n\r\n## 📞 联系方式\r\n\r\n如有问题或建议，请提交 Issue。\r\n","readmeFilename":"README.md"}