@opendesign-plus-test/components 0.0.1-rc.206 → 0.0.1-rc.207

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

@@ -1,455 +0,0 @@
-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
-};