@cmstops/pro-compo 0.1.13 → 0.1.15

package/lib/contentModal/components/CompoList/index.js

@@ -25,10 +25,9 @@ const _sfc_main = vue.defineComponent({
     userInfo: {}
   },
   emits: ["change"],
-  setup(__props, { emit: __emit }) {
-    const columnIdMap = typeMap.compoColumnsMap();
-    const emit = __emit;
+  setup(__props, { emit }) {
     const props = __props;
+    const columnIdMap = typeMap.compoColumnsMap();
     const _maxSelect = props.maxSelect || 100;
     const selectedData = vue.ref([]);
     const tempSelectedData = vue.computed(() => {

package/lib/contentModal/components/ViewAllColumn/MediaFilter/index.js

@@ -14,10 +14,9 @@ const _sfc_main = vue.defineComponent({
     userInfo: {}
   },
   emits: ["update:group_id"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { emit }) {
     const props = __props;
     const column_id = vue.ref(0);
-    const emit = __emit;
     vue.watch(
       () => props.group_id,
       (val) => {

package/lib/contentModal/components/ViewAllColumn/columnTree/index.js

@@ -14,8 +14,7 @@ const _sfc_main = vue.defineComponent({
     userInfo: {}
   },
   emits: ["update:column_id"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
+  setup(__props, { emit }) {
     const props = __props;
     const selectAlais = vue.ref("");
     const treeOptions = {

package/lib/contentModal/components/ViewAllColumn/index.js

@@ -24,8 +24,7 @@ const _sfc_main = vue.defineComponent({
     userInfo: {}
   },
   emits: ["change"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
+  setup(__props, { emit }) {
     const props = __props;
     const _maxSelect = props.maxSelect || 100;
     const selectedData = vue.ref([]);

package/lib/contentModal/components/storeBox/index.js

@@ -15,9 +15,8 @@ const _sfc_main = vue.defineComponent({
     selectData: {}
   },
   emits: ["update:selectData"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { emit }) {
     const props = __props;
-    const emit = __emit;
     const remove = (item, index) => {
       const arr = props.selectData;
       arr.splice(index, 1);

package/lib/hooks/assets.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var request = require("../utils/request.js");
+function useGenerateAssets(BASE_API, params) {
+  return request(BASE_API, {
+    url: "/poplar/v2/media/add",
+    method: "post",
+    data: params
+  });
+}
+exports.useGenerateAssets = useGenerateAssets;

package/lib/imageCrop/component.js

@@ -0,0 +1,479 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+var icon = require("@arco-design/web-vue/es/icon");
+var Cropper = require("cropperjs");
+var ColorThief = require("colorthief");
+var gifToCanvas = require("gif-to-canvas");
+var GIF = require("gif.js/dist/gif");
+var tusUpload = require("../utils/tusUpload.js");
+var config = require("../config.js");
+var index = require("../utils/index.js");
+var api = require("./script/api.js");
+var assets = require("../hooks/assets.js");
+function _interopDefaultLegacy(e) {
+  return e && typeof e === "object" && "default" in e ? e : { "default": e };
+}
+var Cropper__default = /* @__PURE__ */ _interopDefaultLegacy(Cropper);
+var ColorThief__default = /* @__PURE__ */ _interopDefaultLegacy(ColorThief);
+var GIF__default = /* @__PURE__ */ _interopDefaultLegacy(GIF);
+const _hoisted_1 = { class: "image-cropper" };
+const _hoisted_2 = { class: "edit-cropper" };
+const _hoisted_3 = ["src"];
+const _hoisted_4 = {
+  key: 0,
+  class: "tool"
+};
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = {
+  key: 1,
+  class: "tool"
+};
+const _hoisted_7 = ["onClick"];
+const _hoisted_8 = { class: "image-crop-modal-footer" };
+const _hoisted_9 = { class: "left" };
+const _hoisted_10 = { class: "right" };
+const _sfc_main = vue.defineComponent({
+  __name: "component",
+  props: {
+    BASE_API: {},
+    visible: { type: Boolean },
+    aspectRatioProp: {},
+    corpData: {},
+    userInfo: {},
+    generateAssets: { type: Boolean }
+  },
+  emits: ["update:visible", "confirm"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const BASE_API = props.BASE_API || config.DEFAULT_BASE_API;
+    const saveLoading = vue.ref(false);
+    const editImage = vue.ref("");
+    const setVisible = (bool) => {
+      emit("update:visible", bool);
+    };
+    const cancelDialog = () => {
+      setVisible(false);
+    };
+    const croppering = vue.ref(true);
+    const aspectRatioList = [
+      { label: "\u81EA\u7531", value: null },
+      { label: "1:1", value: 1 / 1 },
+      { label: "4:3", value: 4 / 3 },
+      { label: "3:4", value: 3 / 4 },
+      { label: "16:9", value: 16 / 9 },
+      { label: "9:16", value: 9 / 16 }
+    ];
+    const customizedAspectRatioList = vue.ref([]);
+    const aspectRatioActive = vue.ref(null);
+    const mosaicObj = vue.ref(null);
+    const cropperIndex = vue.ref(0);
+    const selectedData = vue.ref([]);
+    const loadImage = () => {
+    };
+    const getBase64 = (imgUrl) => {
+      window.URL = window.URL || window.webkitURL;
+      const xhr = new XMLHttpRequest();
+      xhr.open("get", imgUrl, true);
+      xhr.responseType = "blob";
+      xhr.send();
+      xhr.onload = function() {
+        if (xhr.status === 200) {
+          const blob = xhr.response;
+          const oFileReader = new FileReader();
+          oFileReader.onloadend = (e) => {
+            const base64 = e.target.result;
+            editImage.value = base64;
+            setTimeout(() => {
+              if (props.aspectRatioProp) {
+                if (Array.isArray(props.aspectRatioProp)) {
+                  cropper(props.aspectRatioProp[0], 0);
+                } else {
+                  cropper(props.aspectRatioProp, null);
+                }
+              }
+            }, 300);
+          };
+          oFileReader.onerror = (e) => {
+          };
+          oFileReader.readAsDataURL(blob);
+        }
+      };
+    };
+    const cropper = (aspectRatio, index2) => {
+      const image = document.getElementById("cropper_img");
+      aspectRatioActive.value = index2;
+      cropperDestroy();
+      mosaicObj.value = new Cropper__default["default"](image, {
+        crop() {
+          croppering.value = false;
+        },
+        initialAspectRatio: aspectRatio,
+        aspectRatio,
+        touchDragZoom: false,
+        autoCropArea: 1,
+        rotatable: true,
+        strict: false,
+        guides: false
+      });
+    };
+    const cropperZoom = (ratio) => {
+      mosaicObj.value.zoom(ratio);
+    };
+    const cropperRotate = (degree) => {
+      mosaicObj.value.rotate(degree);
+    };
+    const cropperReset = () => {
+      mosaicObj.value.reset();
+    };
+    const cropperDestroy = () => {
+      mosaicObj.value && mosaicObj.value.destroy();
+    };
+    const dataURLtoBlob = (dataurl) => {
+      const arr = dataurl.split(",");
+      const mime = arr[0].match(/:(.*?);/)[1];
+      const bstr = atob(arr[1]);
+      let n = bstr.length;
+      const u8arr = new Uint8Array(n);
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new Blob([u8arr], { type: mime });
+    };
+    const save = () => {
+      saveLoading.value = true;
+      if (mosaicObj.value) {
+        if (mosaicObj.value.url.includes("data:image/gif")) {
+          const url = URL.createObjectURL(dataURLtoBlob(mosaicObj.value.url));
+          const cropBoxData = mosaicObj.value.getCropBoxData();
+          const canvasData = mosaicObj.value.getCanvasData();
+          const gifToCanvas$1 = new gifToCanvas.GifToCanvas(url, {
+            targetOffset: {
+              dx: cropBoxData.left - canvasData.left,
+              dy: cropBoxData.top - canvasData.top,
+              width: canvasData.width,
+              height: canvasData.height,
+              sWidth: cropBoxData.width,
+              sHeight: cropBoxData.height
+            }
+          });
+          gifToCanvas$1.init();
+          let gifWorker = "";
+          if (window.location.href.includes("localhost")) {
+            gifWorker = "./gif.worker.js";
+          } else {
+            gifWorker = `${BASE_API}/static/js/gif.worker.js`;
+          }
+          const gifObj = new GIF__default["default"]({
+            workers: 4,
+            quality: 10,
+            width: cropBoxData.width,
+            height: cropBoxData.height,
+            workerScript: gifWorker
+          });
+          const addFrame = (canvas, delay) => {
+            gifObj.addFrame(canvas, { copy: true, delay });
+          };
+          gifToCanvas$1.on("progress", (canvas, delay) => {
+            addFrame(canvas, delay);
+          });
+          gifToCanvas$1.on("finished", (canvas, delay) => {
+            addFrame(canvas, delay);
+            gifObj.render();
+          });
+          gifObj.on("finished", function(blob) {
+            handleUploadCropData(blob, "gif");
+          });
+        } else {
+          const CroppedCanvas = mosaicObj.value.getCroppedCanvas({});
+          CroppedCanvas.toBlob(
+            async (blob) => {
+              handleUploadCropData(blob, "png");
+            },
+            "image/jpeg",
+            0.75
+          );
+        }
+      } else {
+        saveLoading.value = false;
+        if (selectedData.value.length === cropperIndex.value + 1) {
+          emit("confirm", JSON.parse(JSON.stringify(selectedData.value)));
+          cancelDialog();
+        } else {
+          cropperIndex.value += 1;
+          cropperDestroy();
+          getMediaRealUrl();
+        }
+      }
+    };
+    const getUploadFileUrl = (file) => {
+      const pattern = /\+.*$/;
+      const result = file.url.replace(pattern, "").replace("upload", "static");
+      return { url: result, size: file.size || file.file.size };
+    };
+    const handleUploadCropData = async (blob, fileType) => {
+      const themeColors = getThemeColor();
+      const name = `\u88C1\u5207\u526F\u672C${new Date().getTime()}.${fileType}`;
+      const file = new File([blob], name, { type: blob.type });
+      const result = await tusUpload.uploadByTUS(file);
+      const resImg = getUploadFileUrl(result);
+      if (!props.generateAssets) {
+        afterCropperAndUploadFile({
+          url: resImg.url,
+          banner_theme_color: themeColors
+        });
+        return;
+      }
+      if (props.userInfo) {
+        const param = {
+          url: resImg.url,
+          size: resImg.size,
+          alias: index.replaceSuffix(
+            selectedData.value[cropperIndex.value].alias,
+            "\u88C1\u5207\u526F\u672C"
+          ),
+          repository_id: props.userInfo.repository_id,
+          directory_id: selectedData.value[cropperIndex.value].directory_id,
+          banner_theme_color: themeColors
+        };
+        assets.useGenerateAssets(BASE_API, param).then((response) => {
+          response.message.banner_theme_color = themeColors;
+          afterCropperAndUploadFile(response.message);
+        });
+      }
+    };
+    const afterCropperAndUploadFile = (data) => {
+      selectedData.value[cropperIndex.value] = { ...data };
+      saveLoading.value = false;
+      if (selectedData.value.length === cropperIndex.value + 1) {
+        emit("confirm", JSON.parse(JSON.stringify(selectedData.value)));
+        cancelDialog();
+      } else {
+        cropperIndex.value += 1;
+        cropperDestroy();
+        getMediaRealUrl();
+      }
+    };
+    const getThemeColor = () => {
+      const colorThief = new ColorThief__default["default"]();
+      const img = document.getElementById("cropper_img");
+      let themeColors = [];
+      const Palette = colorThief.getPalette(img);
+      if (Palette) {
+        themeColors = Palette.slice(0, 8);
+      } else {
+        themeColors = [[255, 255, 255]];
+      }
+      return themeColors;
+    };
+    const getMediaRealUrl = () => {
+      const item = selectedData.value[cropperIndex.value];
+      const flag = !item.url.includes("/poplar/v2");
+      const cape = item.url.includes("cape/v1/upload");
+      croppering.value = true;
+      getBase64(item.url);
+      if (item.realUrl && flag || cape) {
+        getBase64(item.url);
+      } else {
+        api.getFileRealUrl(BASE_API, item.url).then((res) => {
+          getBase64(res.message);
+        });
+      }
+    };
+    vue.watch(
+      () => props.visible,
+      (newVal) => {
+        if (newVal) {
+          init();
+        }
+      }
+    );
+    const init = () => {
+      cropperIndex.value = 0;
+      selectedData.value = props.corpData;
+      if (props.aspectRatioProp && Array.isArray(props.aspectRatioProp)) {
+        const aspectRatioLists = aspectRatioList.map((item) => {
+          item.buttonIndex = cropperIndex.value++;
+          return item;
+        }).filter((item) => {
+          return props.aspectRatioProp.includes(item.value);
+        });
+        if (aspectRatioLists.length) {
+          customizedAspectRatioList.value = aspectRatioLists;
+        }
+      }
+      getMediaRealUrl();
+    };
+    return (_ctx, _cache) => {
+      const _directive_loading = vue.resolveDirective("loading");
+      return vue.openBlock(), vue.createBlock(vue.unref(webVue.Modal), {
+        visible: _ctx.visible,
+        width: "986px",
+        "mask-closable": false,
+        "title-align": "center",
+        "unmount-on-close": "",
+        "modal-class": "image-crop-modal-wrapper",
+        "body-class": "image-crop-modal-body"
+      }, {
+        title: vue.withCtx(() => [
+          vue.createTextVNode(vue.toDisplayString(_ctx.aspectRatioProp ? "\u88C1\u526A\u56FE\u7247" : "\u8BF7\u9009\u62E9\u88C1\u526A\u6BD4\u4F8B"), 1)
+        ]),
+        footer: vue.withCtx(() => [
+          vue.createElementVNode("span", _hoisted_8, [
+            vue.createElementVNode("div", _hoisted_9, [
+              vue.createVNode(vue.unref(webVue.Tooltip), { content: "\u653E\u5927" }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(webVue.Button), {
+                    class: "cropper-btn",
+                    shape: "circle",
+                    onClick: _cache[0] || (_cache[0] = ($event) => cropperZoom(0.1))
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(icon.IconZoomIn))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              vue.createVNode(vue.unref(webVue.Tooltip), { content: "\u7F29\u5C0F" }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(webVue.Button), {
+                    class: "cropper-btn",
+                    shape: "circle",
+                    onClick: _cache[1] || (_cache[1] = ($event) => cropperZoom(-0.1))
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(icon.IconZoomOut))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              vue.createVNode(vue.unref(webVue.Tooltip), { content: "\u5411\u5DE6\u65CB\u8F6C45\u5EA6" }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(webVue.Button), {
+                    class: "cropper-btn",
+                    shape: "circle",
+                    onClick: _cache[2] || (_cache[2] = ($event) => cropperRotate(-45))
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(icon.IconRotateLeft))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              vue.createVNode(vue.unref(webVue.Tooltip), { content: "\u5411\u53F3\u65CB\u8F6C45\u5EA6" }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(webVue.Button), {
+                    class: "cropper-btn",
+                    shape: "circle",
+                    onClick: _cache[3] || (_cache[3] = ($event) => cropperRotate(45))
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(icon.IconRotateRight))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              vue.createVNode(vue.unref(webVue.Tooltip), { content: "\u91CD\u7F6E" }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(webVue.Button), {
+                    class: "cropper-btn",
+                    shape: "circle",
+                    onClick: cropperReset
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(icon.IconSync))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ]),
+            vue.createElementVNode("div", _hoisted_10, [
+              vue.createVNode(vue.unref(webVue.Space), null, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(webVue.Button), {
+                    size: "medium",
+                    onClick: cancelDialog
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode("\u53D6\u6D88")
+                    ]),
+                    _: 1
+                  }),
+                  vue.withDirectives(vue.createVNode(vue.unref(webVue.Button), {
+                    size: "medium",
+                    type: "primary",
+                    loading: saveLoading.value,
+                    onClick: save
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode("\u88C1\u526A")
+                    ]),
+                    _: 1
+                  }, 8, ["loading"]), [
+                    [vue.vShow, !croppering.value]
+                  ])
+                ]),
+                _: 1
+              })
+            ])
+          ])
+        ]),
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+              class: vue.normalizeClass(["edit", {
+                fullHeight: _ctx.aspectRatioProp && !Array.isArray(_ctx.aspectRatioProp)
+              }])
+            }, [
+              vue.createElementVNode("div", _hoisted_2, [
+                editImage.value ? (vue.openBlock(), vue.createElementBlock("img", {
+                  key: 0,
+                  id: "cropper_img",
+                  class: "position",
+                  crossorigin: "anonymous",
+                  src: editImage.value,
+                  onLoad: loadImage
+                }, null, 40, _hoisted_3)) : vue.createCommentVNode("v-if", true)
+              ])
+            ], 2)), [
+              [_directive_loading, croppering.value]
+            ]),
+            !_ctx.aspectRatioProp ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+              (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(aspectRatioList, (item, i) => {
+                return vue.createElementVNode("div", {
+                  key: item.lable,
+                  class: vue.normalizeClass(["btn btn" + (i + 1), { active: aspectRatioActive.value === i }]),
+                  onClick: ($event) => cropper(item.value, i)
+                }, vue.toDisplayString(item.label), 11, _hoisted_5);
+              }), 64))
+            ])) : vue.createCommentVNode("v-if", true),
+            _ctx.aspectRatioProp && Array.isArray(_ctx.aspectRatioProp) && customizedAspectRatioList.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(customizedAspectRatioList.value, (item, i) => {
+                return vue.openBlock(), vue.createElementBlock("div", {
+                  key: item.lable,
+                  class: vue.normalizeClass([
+                    "btn btn" + (item.buttonIndex + 1),
+                    { active: aspectRatioActive.value === i }
+                  ]),
+                  onClick: ($event) => cropper(item.value, i)
+                }, vue.toDisplayString(item.label), 11, _hoisted_7);
+              }), 128))
+            ])) : vue.createCommentVNode("v-if", true)
+          ])
+        ]),
+        _: 1
+      }, 8, ["visible"]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/imageCrop/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var component = require("./component.js");
+const imageCrop = Object.assign(component, {
+  install: (app) => {
+    app.component(component.name, component);
+  }
+});
+module.exports = imageCrop;

package/lib/imageCrop/script/api.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var request = require("../../utils/request.js");
+function getFileRealUrl(BASE_API, url) {
+  return request(BASE_API, {
+    url,
+    method: "get",
+    params: {
+      real_url: "true"
+    }
+  });
+}
+exports.getFileRealUrl = getFileRealUrl;