@opendesign-plus-test/components 0.0.1-rc.20 → 0.0.1-rc.201

package/dist/treeshaking/components/user-center/internal/OUploadAvatar.vue2.mjs

@@ -0,0 +1,455 @@
+import { defineComponent, ref, watch, onUnmounted, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, Fragment, createVNode, createCommentVNode, toDisplayString, normalizeClass, createTextVNode, nextTick } from "vue";
+import { useMessage, ODialog, OIcon, OButton, OUpload } from "@opensig/opendesign";
+import '../../../_virtual/cropperjs/dist/cropper.css';
+import Cropper from "../../../_virtual/cropperjs/dist/cropper.esm.js.mjs";
+import IconAdd from "../../../_virtual/icon-add-new.mjs";
+import IconMinus from "../../../_virtual/icon-minus-new.mjs";
+import IconAddDark from "../../../_virtual/icon-add-dark.mjs";
+import IconMinusDark from "../../../_virtual/icon-minus-dark.mjs";
+import IconLoading from "../../../_virtual/icon-loading.mjs";
+import { useI18n } from "../../../i18n/index.mjs";
+import { useScreen } from "@opendesign-plus/composables";
+import { useTheme } from "../../../shared/theme.mjs";
+import { ElSlider } from "element-plus";
+import "element-plus/es/components/slider/style/css";
+import AppAvatar from "../../common/AppAvatar.vue.mjs";
+const _hoisted_1 = { class: "dlg-content" };
+const _hoisted_2 = { class: "dlg-avatar" };
+const _hoisted_3 = ["src"];
+const _hoisted_4 = {
+  key: 2,
+  class: "upload-mask"
+};
+const _hoisted_5 = {
+  key: 0,
+  class: "avatar-slider"
+};
+const _hoisted_6 = { class: "dlg-desc" };
+const _hoisted_7 = {
+  key: 0,
+  class: "divider"
+};
+const MAX_AVATAR_FILE_SIZE = 2097152;
+const SCALE_MAX = 4;
+const SCALE_MIN = 1;
+const SCALE_STEP = 0.1;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OUploadAvatar",
+  props: {
+    // 头像
+    avatar: {
+      type: String,
+      default: ""
+    },
+    // 账号
+    account: {
+      type: String,
+      default: ""
+    },
+    // 显示弹窗
+    avatarVisible: {
+      type: Boolean,
+      default: false
+    },
+    // 宿主用户名（由使用方传入，无头像时展示文字头像）
+    username: {
+      type: String,
+      default: ""
+    },
+    // API 由使用方传入：修改头像
+    modifyPhoto: {
+      type: Function,
+      required: true
+    }
+  },
+  emits: ["close"],
+  setup(__props, { emit: __emit }) {
+    const ALLOW_IMAGE_EXTENSION = [".png", ".jpg", ".jpeg"];
+    const message = useMessage(null);
+    const { t } = useI18n();
+    const { isLight } = useTheme();
+    const props = __props;
+    const emits = __emit;
+    const showAvatarDlg = ref(false);
+    const avatarImg = ref("");
+    const avatarUrl = ref();
+    const cropper = ref();
+    const avatarRef = ref();
+    const zoomValue = ref(1);
+    const sliderValue = ref(1);
+    const fileName = ref();
+    const imgFile = ref();
+    const maskVisible = ref(false);
+    const wheeling = ref(false);
+    const imgVisible = ref(false);
+    const format = ref();
+    const formatExt = ref();
+    const { lePadV } = useScreen();
+    watch(
+      () => props.avatarVisible,
+      () => {
+        zoomValue.value = 1;
+        sliderValue.value = 1;
+        showAvatarDlg.value = props.avatarVisible;
+      },
+      { immediate: true }
+    );
+    const zoomImg = (val) => {
+      let current = sliderValue.value;
+      if (current + val > SCALE_MAX) {
+        current = SCALE_MAX;
+      } else if (current + val < SCALE_MIN) {
+        current = SCALE_MIN;
+      } else {
+        current = val + current;
+      }
+      changeSlider(current);
+    };
+    const changeSlider = (input) => {
+      let val = Array.isArray(input) ? input[0] : input;
+      if (val > SCALE_MAX) {
+        val = SCALE_MAX;
+      }
+      if (val < SCALE_MIN) {
+        val = SCALE_MIN;
+      }
+      const arr = cropper.value.getCroppedCanvas().toDataURL(`image/${formatExt.value}`).split(",");
+      if (arr[1]) {
+        cropper.value.zoomTo(val);
+      }
+      if (sliderValue.value < val) {
+        const arr1 = cropper.value.getCroppedCanvas().toDataURL(`image/${formatExt.value}`).split(",");
+        if (!arr1[1]) {
+          cropper.value.zoom(-0.1);
+        }
+      }
+      sliderValue.value = val;
+      zoomValue.value = val;
+    };
+    const blobToFile = (blob, filename) => {
+      return new File([blob], filename, {
+        type: blob.type
+      });
+    };
+    const base64ToBolb = (urlData, type) => {
+      const arr = urlData.split(",");
+      const mime = arr[0].match(/:(.*?);/)[1] || type;
+      const bytes = window.atob(arr[1]);
+      const ab = new ArrayBuffer(bytes.length);
+      const ia = new Uint8Array(ab);
+      for (let i = 0; i < bytes.length; i++) {
+        ia[i] = bytes.charCodeAt(i);
+      }
+      return new Blob([ab], {
+        type: mime
+      });
+    };
+    const uploadImg = async () => {
+      var _a;
+      try {
+        maskVisible.value = true;
+        const imgBolb = blobToFile(
+          base64ToBolb((_a = cropper.value) == null ? void 0 : _a.getCroppedCanvas().toDataURL(`image/${formatExt.value}`), `image/${format.value}`),
+          fileName.value || `${props.account.charAt(0)}.${format.value}`
+        );
+        imgFile.value = imgBolb;
+        const formData = new FormData();
+        formData.append("file", imgFile.value);
+        const res = await props.modifyPhoto(formData);
+        message.success({
+          content: t("common.SAVE_SUCCESS")
+        });
+        if ((res == null ? void 0 : res.code) === 200) {
+          emits("close", true);
+        }
+      } finally {
+        maskVisible.value = false;
+      }
+    };
+    const onAfterSelect = (fileList) => {
+      const files = [];
+      Array.from(fileList).forEach((f) => {
+        fileName.value = f.name;
+        const arr = f.name.split(".");
+        format.value = arr[arr.length - 1].toLowerCase();
+        formatExt.value = format.value === "jpg" ? "jpeg" : format.value;
+        if (!ALLOW_IMAGE_EXTENSION.includes(`.${formatExt.value}`)) {
+          message.danger({
+            content: t("common.ONLY_IMAGE")
+          });
+          return false;
+        }
+        zoomValue.value = 0;
+        sliderValue.value = 0;
+        if (!(f.size < MAX_AVATAR_FILE_SIZE)) {
+          message.danger({
+            content: t("common.FILE_SIZE_EXCEED")
+          });
+          return false;
+        }
+        avatarImg.value = URL.createObjectURL(f);
+        files.push(f);
+        nextTick(() => {
+          var _a;
+          (_a = cropper.value) == null ? void 0 : _a.destroy();
+          cropper.value = new Cropper(avatarRef.value, {
+            aspectRatio: 1,
+            // 宽高比
+            guides: false,
+            // 是否显示裁剪框的虚线
+            cropBoxResizable: false,
+            // 是否可以改变裁剪框的尺寸
+            center: false,
+            // 是否显示裁剪框中间的 ‘+’ 指示器
+            highlight: false,
+            // 是否显示裁剪框上面的白色蒙版
+            background: false,
+            // 是否在容器内显示网格状的背景
+            dragMode: "move",
+            // 裁剪框的拖拽模式
+            cropBoxMovable: false,
+            // 是否可以拖拽裁剪框
+            movable: true,
+            // 是否可以移动图片
+            zoomOnWheel: true,
+            // 是否可以通过鼠标滚轮缩放图片
+            checkCrossOrigin: true,
+            // 检查图片是否跨域
+            viewMode: 3,
+            // 限制裁剪框不能超出图片的范围
+            autoCropArea: 1
+            // 设置裁剪区域占图片的大小 值为 0-1
+          });
+        });
+      });
+      return Promise.resolve(
+        files.map((file) => {
+          return {
+            id: file.name,
+            name: file.name,
+            file
+          };
+        })
+      );
+    };
+    const changeDlg = (val) => {
+      if (!val) {
+        emits("close", false);
+        imgVisible.value = false;
+      }
+    };
+    const zoomWheel = (event) => {
+      if (wheeling.value) {
+        return;
+      }
+      wheeling.value = true;
+      setTimeout(() => {
+        wheeling.value = false;
+      }, 50);
+      if (event.deltaY > 0) {
+        zoomValue.value = -0.1 + zoomValue.value;
+      } else {
+        zoomValue.value = 0.1 + zoomValue.value;
+      }
+      sliderValue.value = zoomValue.value;
+    };
+    const wheel = (event) => {
+      if (zoomValue.value > 3.9) {
+        event.preventDefault();
+      }
+      window.addEventListener("wheel", zoomWheel);
+    };
+    const initImg = () => {
+      const image = new Image();
+      image.src = avatarUrl.value + "?" + window.crypto.getRandomValues(new Uint32Array(2)).join("");
+      image.crossOrigin = "anonymous";
+      image.onload = () => {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        const size = image.width > image.height ? image.height : image.width;
+        canvas.width = size;
+        canvas.height = size;
+        ctx == null ? void 0 : ctx.drawImage(image, 0, 0, image.width, image.height);
+        format.value = avatarUrl.value.substring(avatarUrl.value.lastIndexOf(".") + 1).toLowerCase();
+        formatExt.value = format.value === "jpg" ? "jpeg" : format.value;
+        const file = canvas.toDataURL("image/" + formatExt.value);
+        const conversions = base64ToBolb(file, "image/" + format.value);
+        window.URL = window.URL || window.webkitURL;
+        let url = window.URL.createObjectURL(conversions);
+        avatarImg.value = url;
+        const imgBolb = blobToFile(base64ToBolb(file, "image/" + formatExt.value), fileName.value || `${props.account.charAt(0)}.${format.value}`);
+        imgFile.value = imgBolb;
+        imgVisible.value = true;
+      };
+    };
+    watch(
+      () => [props.avatar, props.avatarVisible],
+      (val) => {
+        if (val) {
+          avatarUrl.value = val[0];
+          if (typeof window !== "undefined") {
+            initImg();
+          }
+        }
+        if (!val[0]) {
+          imgVisible.value = true;
+        }
+      },
+      { immediate: true }
+    );
+    watch(
+      () => avatarRef.value,
+      (val) => {
+        var _a;
+        if (val) {
+          cropper.value = new Cropper(avatarRef.value, {
+            aspectRatio: 1,
+            // 宽高比
+            guides: false,
+            // 是否显示裁剪框的虚线
+            cropBoxResizable: false,
+            // 是否可以改变裁剪框的尺寸
+            center: false,
+            // 是否显示裁剪框中间的 ‘+’ 指示器
+            highlight: false,
+            // 是否显示裁剪框上面的白色蒙版
+            background: false,
+            // 是否在容器内显示网格状的背景
+            dragMode: "move",
+            // 裁剪框的拖拽模式
+            cropBoxMovable: false,
+            // 是否可以拖拽裁剪框
+            movable: true,
+            // 是否可以移动图片
+            zoomOnWheel: true,
+            // 是否可以通过鼠标滚轮缩放图片
+            checkCrossOrigin: true,
+            // 检查图片是否跨域
+            viewMode: 3,
+            // 限制裁剪框不能超出图片的范围
+            autoCropArea: 1
+            // 设置裁剪区域占图片的大小 值为 0-1
+          });
+          (_a = avatarRef.value) == null ? void 0 : _a.addEventListener("zoom", wheel);
+        }
+      }
+    );
+    onUnmounted(() => {
+      var _a;
+      (_a = avatarRef.value) == null ? void 0 : _a.removeEventListener("zoom", wheel);
+      window.removeEventListener("wheel", zoomWheel);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ODialog), {
+        visible: showAvatarDlg.value,
+        "onUpdate:visible": _cache[3] || (_cache[3] = ($event) => showAvatarDlg.value = $event),
+        onChange: changeDlg,
+        "main-class": "avatar-dialog"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              imgVisible.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                __props.avatar || avatarImg.value ? (openBlock(), createElementBlock("img", {
+                  key: 0,
+                  src: avatarImg.value,
+                  ref_key: "avatarRef",
+                  ref: avatarRef,
+                  class: "avatar-dlg"
+                }, null, 8, _hoisted_3)) : (openBlock(), createBlock(AppAvatar, {
+                  key: 1,
+                  name: __props.username,
+                  "custom-size": 200
+                }, null, 8, ["name"])),
+                maskVisible.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                  createVNode(unref(OIcon), null, {
+                    default: withCtx(() => [
+                      createVNode(unref(IconLoading))
+                    ]),
+                    _: 1
+                  })
+                ])) : createCommentVNode("", true)
+              ], 64)) : createCommentVNode("", true)
+            ]),
+            avatarImg.value ? (openBlock(), createElementBlock("div", _hoisted_5, [
+              createVNode(unref(OIcon), {
+                class: "avatar-slider-btn",
+                onClick: _cache[0] || (_cache[0] = ($event) => zoomImg(0 - SCALE_STEP))
+              }, {
+                default: withCtx(() => [
+                  unref(isLight) ? (openBlock(), createBlock(unref(IconMinus), { key: 0 })) : (openBlock(), createBlock(unref(IconMinusDark), { key: 1 }))
+                ]),
+                _: 1
+              }),
+              createVNode(unref(ElSlider), {
+                modelValue: zoomValue.value,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => zoomValue.value = $event),
+                class: "slider",
+                size: "small",
+                height: "2px",
+                "show-tooltip": false,
+                max: SCALE_MAX,
+                min: SCALE_MIN,
+                step: SCALE_STEP,
+                onInput: changeSlider
+              }, null, 8, ["modelValue"]),
+              createVNode(unref(OIcon), {
+                class: "avatar-slider-btn",
+                onClick: _cache[2] || (_cache[2] = ($event) => zoomImg(SCALE_STEP))
+              }, {
+                default: withCtx(() => [
+                  unref(isLight) ? (openBlock(), createBlock(unref(IconAdd), { key: 0 })) : (openBlock(), createBlock(unref(IconAddDark), { key: 1 }))
+                ]),
+                _: 1
+              })
+            ])) : createCommentVNode("", true),
+            createElementVNode("p", _hoisted_6, toDisplayString(unref(t)("common.UPLOAD_PIC_TIPS")), 1),
+            createElementVNode("div", {
+              class: normalizeClass(["dlg-btn", { "dlg-btn-pad": unref(lePadV) }])
+            }, [
+              createVNode(unref(OButton), {
+                round: "pill",
+                size: "large",
+                disabled: !__props.avatar && !avatarImg.value,
+                color: "primary",
+                variant: "solid",
+                loading: maskVisible.value,
+                onClick: uploadImg
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t)("common.SAVE_AVATAR")), 1)
+                ]),
+                _: 1
+              }, 8, ["disabled", "loading"]),
+              unref(lePadV) ? (openBlock(), createElementBlock("div", _hoisted_7)) : createCommentVNode("", true),
+              createVNode(unref(OUpload), {
+                accept: ".jpg,.png",
+                "lazy-upload": true,
+                "on-after-select": onAfterSelect
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(OButton), {
+                    round: "pill",
+                    size: "large",
+                    color: "primary",
+                    variant: "outline"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(t)("common.SELECT_PHOTO")), 1)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ], 2)
+          ])
+        ]),
+        _: 1
+      }, 8, ["visible"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};