@smallwei/avue 3.9.2 → 3.9.4

package/es/packages/element-plus/license/index2.mjs

@@ -1,121 +1,235 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 import create from '../../../src/core/create.mjs';
 import { downFile } from '../../../src/utils/util.mjs';
 
 var script = create({
-  name: 'license',
+  name: "license",
+  emits: ["ready", "change", "error", "asset-error", "download"],
   props: {
     id: {
-      type: String,
-      default: ''
+      type: [String, Number],
+      default: ""
     },
     option: {
       type: Object,
-      default: () => {
-        return {}
-      }
+      default: () => ({})
+    },
+    showStatus: Boolean
+  },
+  data() {
+    return {
+      base64: "",
+      draw: false,
+      canvas: null,
+      context: null,
+      loading: false,
+      error: "",
+      renderVersion: 0,
+      renderPromise: Promise.resolve(null)
+    };
+  },
+  computed: {
+    img() {
+      return this.option.img;
+    },
+    list() {
+      return Array.isArray(this.option.list) ? this.option.list : [];
+    },
+    mimeType() {
+      return this.option.mimeType || this.option.type || "image/jpeg";
+    },
+    imageQuality() {
+      const quality = Number(this.option.quality);
+      return Number.isFinite(quality) ? Math.min(1, Math.max(0, quality)) : 0.92;
     }
   },
   watch: {
     option: {
-      handler () {
+      handler() {
         this.init();
       },
       deep: true
     }
   },
-  data () {
-    return {
-      base64: '',
-      draw: false,
-      canvas: '',
-      context: '',
-    }
-  },
-  computed: {
-    img () {
-      return this.option.img
-    },
-    list () {
-      return this.option.list || []
-    }
-  },
-  mounted () {
-    this.canvas = document.getElementById("canvas" + this.id);
-    this.context = this.canvas.getContext("2d");
+  mounted() {
+    this.canvas = this.$refs.canvas;
+    this.context = this.canvas && this.canvas.getContext("2d");
     this.init();
   },
+  beforeUnmount() {
+    this.renderVersion += 1;
+  },
   methods: {
-    init () {
+    init() {
+      if (!this.canvas) return Promise.resolve(null);
+      const version = ++this.renderVersion;
+      this.renderPromise = this.render(version);
+      return this.renderPromise;
+    },
+    async render(version) {
       this.draw = false;
-      const beauty = new Image();
-      beauty.src = this.img;
-      beauty.onload = () => {
-        const width = this.option.width || beauty.width;        const height = this.option.width ? ((beauty.height / beauty.width) * this.option.width) : beauty.height;
-        this.$refs.canvas.width = width;
-        this.$refs.canvas.height = height;
-        this.context.clearRect(0, 0, width, height);
-        this.context.drawImage(beauty, 0, 0, width, height);
-        this.list.forEach((ele, index) => {
-          const callback = () => {
-            if (index == this.list.length - 1) {
-              setTimeout(() => {
-                this.draw = true;
-              }, 0);
-            }
-          };
-          if (ele.img) {
-            const img = new Image();
-            img.src = ele.img;
-            img.onload = () => {
-              const widths = ele.width || img.width;              const heights = ele.width ? ((img.height / img.width) * ele.width) : img.height;
-              this.context.drawImage(img, ele.left, ele.top, widths, heights);
-              callback();
-            };
-          } else {
-            if (ele.bold) {
-              this.context.font = `bold ${ele.size}px ${ele.style}`;
-            } else {
-              this.context.font = `${ele.size}px ${ele.style}`;
-            }
-            this.context.fillStyle = ele.color;
+      this.loading = true;
+      this.error = "";
+      this.base64 = "";
 
-            this.context.fillText(ele.text, ele.left, ele.top);
-            this.context.stroke();
-            callback();
-          }
-        });
+      try {
+        const background = this.img ? await this.loadImage(this.img, this.option.crossOrigin) : null;
+        if (version !== this.renderVersion) return null;
 
-      };
-    },
-    getFile (name = new Date().getTime()) {
-      return new Promise((resolve) => {
-        const time = setInterval(() => {
-          if (this.draw) {
-            const data = this.canvas.toDataURL('image/jpeg', 1.0);
-            const file = this.dataURLtoFile(data, name);
-            clearInterval(time);
-            resolve(file);
-          }
-        }, 1000);
-      })
-    },
-    downFile (filename = new Date().getTime()) {
-      downFile(this.base64, filename);
-    },
-    getBase64 () {
-      return new Promise((resolve) => {
-        const time = setInterval(() => {
-          if (this.draw) {
-            const data = this.canvas.toDataURL('image/jpeg', 1.0);
-            this.base64 = data;
-            clearInterval(time);
-            resolve(data);
+        const width = this.getSize(this.option.width, background ? background.width : 600);
+        const height = this.getHeight(background, width);
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.context = this.canvas.getContext("2d");
+        this.context.imageSmoothingEnabled = true;
+        this.clearCanvas(width, height);
+
+        if (background) this.context.drawImage(background, 0, 0, width, height);
+        for (let index = 0; index < this.list.length; index++) {
+          if (version !== this.renderVersion) return null;
+          await this.drawLayer(this.list[index], index);
+        }
+        if (version !== this.renderVersion) return null;
+
+        this.base64 = this.toDataURL();
+        this.draw = true;
+        this.loading = false;
+        const payload = { base64: this.base64, width, height };
+        this.$emit("change", payload);
+        this.$emit("ready", payload);
+        return payload;
+      } catch (error) {
+        if (version !== this.renderVersion) return null;
+        this.draw = false;
+        this.loading = false;
+        this.error = error && error.message ? error.message : "授权凭证生成失败，请检查素材地址。";
+        this.$emit("error", { error, message: this.error });
+        return null;
+      }
+    },
+    getSize(value, fallback) {
+      const size = Number(value);
+      return Number.isFinite(size) && size > 0 ? Math.round(size) : Math.max(1, Math.round(fallback));
+    },
+    getHeight(background, width) {
+      if (this.option.height !== undefined && this.option.height !== null && this.option.height !== "") {
+        return this.getSize(this.option.height, 340);
+      }
+      if (background && this.option.width) {
+        return Math.max(1, Math.round((background.height / background.width) * width));
+      }
+      return background ? background.height : 340;
+    },
+    clearCanvas(width, height) {
+      this.context.clearRect(0, 0, width, height);
+      if (this.option.backgroundColor !== "transparent") {
+        this.context.save();
+        this.context.fillStyle = this.option.backgroundColor || "#ffffff";
+        this.context.fillRect(0, 0, width, height);
+        this.context.restore();
+      }
+    },
+    loadImage(src, crossOrigin) {
+      return new Promise((resolve, reject) => {
+        const image = new Image();
+        if (crossOrigin) image.crossOrigin = crossOrigin;
+        image.onload = () => resolve(image);
+        image.onerror = () => reject(new Error(`素材加载失败：${src}`));
+        image.src = src;
+      });
+    },
+    async drawLayer(layer, index) {
+      if (!layer || typeof layer !== "object") return;
+      if (layer.img) {
+        try {
+          const image = await this.loadImage(layer.img, layer.crossOrigin || this.option.crossOrigin);
+          const width = this.getSize(layer.width, image.width);
+          const height = layer.height !== undefined && layer.height !== null && layer.height !== ""
+            ? this.getSize(layer.height, image.height)
+            : Math.max(1, Math.round((image.height / image.width) * width));
+          this.context.drawImage(image, this.toNumber(layer.left), this.toNumber(layer.top), width, height);
+        } catch (error) {
+          this.$emit("asset-error", { error, layer, index });
+        }
+        return;
+      }
+      this.drawText(layer);
+    },
+    drawText(layer) {
+      const size = this.getSize(layer.size, 16);
+      const lineHeight = this.getSize(layer.lineHeight, Math.round(size * 1.5));
+      const maxWidth = Number(layer.maxWidth);
+      const text = String(layer.text === undefined || layer.text === null ? "" : layer.text);
+      this.context.save();
+      this.context.translate(this.toNumber(layer.left), this.toNumber(layer.top));
+      if (layer.rotate) this.context.rotate((Number(layer.rotate) * Math.PI) / 180);
+      this.context.font = `${layer.bold ? "bold " : ""}${size}px ${layer.style || layer.fontFamily || "sans-serif"}`;
+      this.context.fillStyle = layer.color || "#000000";
+      this.context.globalAlpha = layer.opacity === undefined ? 1 : Math.min(1, Math.max(0, Number(layer.opacity)));
+      this.context.textAlign = layer.align || "left";
+      this.context.textBaseline = layer.baseline || "alphabetic";
+
+      const lines = maxWidth > 0 ? this.wrapText(text, maxWidth) : text.split(/\r?\n/);
+      lines.forEach((line, index) => this.context.fillText(line, 0, index * lineHeight, maxWidth > 0 ? maxWidth : undefined));
+      this.context.restore();
+    },
+    wrapText(text, maxWidth) {
+      const lines = [];
+      text.split(/\r?\n/).forEach((paragraph) => {
+        let line = "";
+        Array.from(paragraph).forEach((char) => {
+          const next = line + char;
+          if (line && this.context.measureText(next).width > maxWidth) {
+            lines.push(line);
+            line = char;
+          } else {
+            line = next;
           }
-        }, 100);
-      })
+        });
+        lines.push(line);
+      });
+      return lines;
+    },
+    toNumber(value, fallback = 0) {
+      const number = Number(value);
+      return Number.isFinite(number) ? number : fallback;
+    },
+    toDataURL(type = this.mimeType, quality = this.imageQuality) {
+      if (!this.canvas) return "";
+      return this.canvas.toDataURL(type || "image/jpeg", quality);
+    },
+    async waitForRender() {
+      const result = await this.renderPromise;
+      if (!result || !this.draw) throw new Error(this.error || "授权凭证尚未生成完成。");
+      return result;
     },
-    getPdf (name = new Date().getTime()) {
+    async getFile(name = `${Date.now()}.jpg`, type, quality) {
+      await this.waitForRender();
+      const data = this.toDataURL(type, quality);
+      this.base64 = data;
+      return this.dataURLtoFile(data, name);
+    },
+    async downFile(filename = `${Date.now()}.jpg`, type, quality) {
+      await this.waitForRender();
+      const data = this.toDataURL(type, quality);
+      this.base64 = data;
+      downFile(data, filename);
+      this.$emit("download", { type: "image", filename, base64: data });
+      return data;
+    },
+    async getBase64(type, quality) {
+      await this.waitForRender();
+      const data = this.toDataURL(type, quality);
+      this.base64 = data;
+      return data;
+    },
+    async getPdf(name = Date.now()) {
+      await this.waitForRender();
+      if (typeof window === "undefined" || !window.jsPDF) {
+        const error = new Error("未检测到 jsPDF，请先引入 jsPDF 后再导出 PDF。");
+        this.$emit("error", { error, message: error.message });
+        throw error;
+      }
       const contentWidth = this.canvas.width;
       const contentHeight = this.canvas.height;
       const pageHeight = (contentWidth / 592.28) * 841.89;
@@ -123,21 +237,17 @@ var script = create({
       let position = 0;
       const imgWidth = 595.28;
       const imgHeight = (592.28 / contentWidth) * contentHeight;
-      const pageData = this.canvas.toDataURL('image/jpeg', 1.0);
-      const PDF = new window.jsPDF('', 'pt', 'a4');
-      if (leftHeight < pageHeight) {
-        PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
-      } else {
-        while (leftHeight > 0) {
-          PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
-          leftHeight -= pageHeight;
-          position -= 841.89;
-          if (leftHeight > 0) {
-            PDF.addPage();
-          }
-        }
+      const pageData = this.toDataURL("image/jpeg", 1);
+      const PDF = new window.jsPDF("", "pt", "a4");
+      while (leftHeight > 0) {
+        PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
+        leftHeight -= pageHeight;
+        position -= 841.89;
+        if (leftHeight > 0) PDF.addPage();
       }
-      PDF.save(`${name}.pdf`);
+      const filename = `${name}.pdf`;
+      PDF.save(filename);
+      this.$emit("download", { type: "pdf", filename });
     }
   }
 });

package/es/packages/element-plus/license/index3.mjs

@@ -1,18 +1,53 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
-import { openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot } from 'vue';
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, renderSlot } from 'vue';
 
-const _hoisted_1 = ["id"];
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = { key: 1 };
+const _hoisted_3 = { key: 2 };
+const _hoisted_4 = { key: 3 };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
-    class: normalizeClass(_ctx.b()),
-    style: {"position":"relative"}
+    class: normalizeClass(_ctx.b())
   }, [
-    createElementVNode("canvas", {
-      id: 'canvas'+_ctx.id,
-      ref: "canvas"
-    }, null, 8 /* PROPS */, _hoisted_1),
-    renderSlot(_ctx.$slots, "default")
+    createElementVNode("div", {
+      class: normalizeClass(_ctx.b('canvas-wrap'))
+    }, [
+      createElementVNode("canvas", {
+        ref: "canvas",
+        class: normalizeClass(_ctx.b('canvas'))
+      }, "当前浏览器不支持生成授权凭证。", 2 /* CLASS */),
+      (_ctx.loading)
+        ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.b('loading'))
+          }, "正在生成授权凭证…", 2 /* CLASS */))
+        : (_ctx.error)
+          ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass(_ctx.b('error'))
+            }, toDisplayString(_ctx.error), 3 /* TEXT, CLASS */))
+          : createCommentVNode("v-if", true)
+    ], 2 /* CLASS */),
+    (_ctx.showStatus)
+      ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass([_ctx.b('status'), { 'is-ready': _ctx.draw, 'is-error': _ctx.error }])
+        }, [
+          (_ctx.loading)
+            ? (openBlock(), createElementBlock("span", _hoisted_1, "素材加载中"))
+            : (_ctx.error)
+              ? (openBlock(), createElementBlock("span", _hoisted_2, "生成失败"))
+              : (_ctx.draw)
+                ? (openBlock(), createElementBlock("span", _hoisted_3, "已生成，可导出图片或 PDF"))
+                : (openBlock(), createElementBlock("span", _hoisted_4, "等待生成"))
+        ], 2 /* CLASS */))
+      : createCommentVNode("v-if", true),
+    renderSlot(_ctx.$slots, "default", {
+      ready: _ctx.draw,
+      loading: _ctx.loading,
+      error: _ctx.error
+    })
   ], 2 /* CLASS */))
 }
 

package/es/packages/element-plus/login/index.mjs

@@ -1,4 +1,4 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 import script from './index2.mjs';
 import { render } from './index3.mjs';
 

package/es/packages/element-plus/login/index2.mjs

@@ -1,34 +1,30 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 import create from '../../../src/core/create.mjs';
 import locale from '../../../src/core/locale.mjs';
 
 var script = create({
   name: 'login',
   mixins: [locale],
-  emits: ['update:modelValue','send','refresh','submit'],
+  emits: ['update:modelValue', 'send', 'refresh', 'submit', 'invalid'],
   props: {
     modelValue: {
       type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    codesrc: {
-      type: String,
+      default: () => ({})
     },
+    codesrc: String,
     option: {
       type: Object,
-      default: () => {
-        return {};
-      }
-    }
+      default: () => ({})
+    },
+    loading: Boolean,
+    disabled: Boolean
   },
   computed: {
-    labelWidth () {
-      return this.option.labelWidth || 80
+    formLabelWidth () {
+      return this.setPx(this.option.labelWidth || 88)
     },
     time () {
-      return this.option.time || 60
+      return Number(this.option.time) || 60
     },
     isImg () {
       return this.codeType === 'img'
@@ -52,74 +48,104 @@ var script = create({
       return this.column.code || {}
     },
     column () {
-      return this.option.column || {};
+      return this.option.column || {}
     },
     sendDisabled () {
-      return !this.validatenull(this.check)
+      return this.nowtime > 0 || this.sending
     },
     sendText () {
       return this.nowtime > 0
         ? this.t('login.resendCode', { time: this.nowtime })
-        : this.t('login.sendCode');
+        : this.t('login.sendCode')
+    },
+    submitText () {
+      return this.option.submitText || this.t('login.submitBtn')
     }
-
   },
   watch: {
     modelValue: {
-      handler () {
-        this.form = this.modelValue;
+      handler (value) {
+        const nextForm = {
+          username: '',
+          password: '',
+          code: '',
+          ...(value || {})
+        };
+        const same = Object.keys(nextForm).length === Object.keys(this.form).length &&
+          Object.keys(nextForm).every((key) => nextForm[key] === this.form[key]);
+        if (same) return;
+        this.syncing = true;
+        this.form = nextForm;
+        this.$nextTick(() => {
+          this.syncing = false;
+        });
       },
-      deep: true
+      deep: true,
+      immediate: true
     },
     form: {
-      handler () {
-        this.$emit('update:modelValue', this.form);
+      handler (value) {
+        if (!this.syncing) this.$emit('update:modelValue', { ...value });
       },
-      deep: true,
-      immediate: true
+      deep: true
     }
   },
   data () {
     return {
       nowtime: 0,
       check: null,
-      form: {}
+      form: {},
+      sending: false,
+      syncing: false
     }
   },
+  beforeUnmount () {
+    this.clearTimer();
+  },
   methods: {
     onSend () {
-      const callback = () => {
+      if (this.sendDisabled || this.disabled || this.loading) return;
+      this.sending = true;
+      let completed = false;
+      const done = () => {
+        if (completed) return;
+        completed = true;
+        this.sending = false;
+        this.clearTimer();
         this.nowtime = this.time;
         this.check = setInterval(() => {
-          this.nowtime--;
-          if (this.nowtime === 0) {
-            clearInterval(this.check);
-            this.check = null;
-          }
+          this.nowtime -= 1;
+          if (this.nowtime <= 0) this.clearTimer();
         }, 1000);
       };
-      if (this.sendDisabled) return
-      this.$emit('send', callback);
+      this.$emit('send', done, { ...this.form });
+      this.$nextTick(() => {
+        if (!completed) this.sending = false;
+      });
     },
     onRefresh () {
-      this.$emit('refresh');
+      if (!this.disabled && !this.loading) this.$emit('refresh');
+    },
+    clearTimer () {
+      if (this.check) {
+        clearInterval(this.check);
+        this.check = null;
+      }
+      this.nowtime = 0;
     },
     onSubmit () {
-      const onCover = () => {
-        const form = {};
-        for (let o in this.form) {
-          let key = o;
-          if (this[o].prop) {
-            key = this[o].prop;
-          }
-          form[key] = this.form[o];
-        }
-        return form;
-      };
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.$emit('submit', onCover());
+      if (this.disabled || this.loading || !this.$refs.form) return;
+      this.$refs.form.validate((valid, fields) => {
+        if (!valid) {
+          this.$emit('invalid', fields);
+          return;
         }
+        const result = {};
+        Object.keys(this.form).forEach((key) => {
+          const column = this[key] || {};
+          result[column.prop || key] = this.form[key];
+        });
+        this.$emit('submit', result);
       });
     }
   }