@cmstops/pro-compo 0.1.9 → 0.1.11

package/lib/uploadBefore/components/UploadBefore.js

@@ -0,0 +1,229 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+var api = require("../script/api.js");
+const _hoisted_1 = { class: "table_wrp" };
+const _hoisted_2 = { key: 1 };
+const _hoisted_3 = { key: 1 };
+const _hoisted_4 = { key: 1 };
+const _sfc_main = vue.defineComponent({
+  __name: "UploadBefore",
+  props: {
+    visable: { type: Boolean },
+    fileList: {},
+    BASE_API: {}
+  },
+  emits: ["confirm", "update:visable", "update:file-list"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const modalVis = vue.toRef(props, "visable");
+    const fileList = vue.toRef(props, "fileList");
+    const column = [
+      {
+        title: "\u6587\u4EF6\u540D\u79F0",
+        dataIndex: "name",
+        ellipsis: true,
+        tooltip: true,
+        width: 200
+      },
+      { title: "\u6587\u4EF6\u7C7B\u578B", dataIndex: "typeCN", width: 100 },
+      { title: "\u6587\u4EF6\u5927\u5C0F", dataIndex: "sizeCN", width: 120 },
+      { title: "\u667A\u80FD\u7F16\u76EE", slotName: "analize", width: 100 },
+      { title: "\u6C34\u5370\u9009\u62E9", slotName: "watermark", width: 180 },
+      { title: "\u89C6\u9891\u8F6C\u7801\u6A21\u7248\u7EC4\u9009\u62E9", slotName: "vTransTemp", width: 180 },
+      { title: "\u97F3\u9891\u8F6C\u7801\u6A21\u7248\u7EC4\u9009\u62E9", slotName: "aTransTemp", width: 180 }
+    ];
+    const scroll = { y: "100%" };
+    const switched = vue.ref([]);
+    const curChoseWm = vue.ref([]);
+    const curVideoW = vue.ref([]);
+    const curAudioW = vue.ref([]);
+    const waterMarkList = vue.ref([]);
+    const videoTempList = vue.ref([]);
+    const audioTempList = vue.ref([]);
+    const templateDict = /* @__PURE__ */ new Map();
+    const defaultWm = vue.ref();
+    const defaultVm = vue.ref();
+    const defaultAm = vue.ref();
+    vue.watch(
+      () => fileList.value,
+      (n) => {
+        n.forEach((item) => {
+          switched.value.push(false);
+          curChoseWm.value.push(
+            ["dir", "image"].includes(item.type) ? defaultWm.value : ""
+          );
+          curVideoW.value.push(
+            ["dir", "video"].includes(item.type) ? defaultVm.value : ""
+          );
+          curAudioW.value.push(
+            ["dir", "audio"].includes(item.type) ? defaultAm.value : ""
+          );
+        });
+      },
+      { deep: true }
+    );
+    const templateDataInit = async () => {
+      try {
+        let allTemp = [];
+        const wM = await api.getWaterMark(props.BASE_API);
+        if (wM.code === 0) {
+          waterMarkList.value = wM.message.images;
+          defaultWm.value = wM.message.default;
+          allTemp = allTemp.concat(wM.message.images);
+        }
+        const vM = await api.getVideoTransTemplate(props.BASE_API);
+        if (vM.code === 0) {
+          videoTempList.value = vM.message.templates;
+          defaultVm.value = vM.message.default;
+          allTemp = allTemp.concat(vM.message.templates);
+        }
+        const aM = await api.getAudioTransTrempalte(props.BASE_API);
+        if (aM.code === 0) {
+          audioTempList.value = aM.message.templates;
+          defaultAm.value = aM.message.default;
+          allTemp = allTemp.concat(aM.message.templates);
+        }
+        allTemp.forEach((item) => {
+          templateDict.set(item.id, item);
+        });
+      } catch (e) {
+        console.log(e);
+      }
+    };
+    const handleClose = () => {
+      emits("update:visable", false);
+      emits("update:file-list", []);
+    };
+    const handleOk = () => {
+      const ret = JSON.parse(JSON.stringify(fileList.value));
+      emits(
+        "confirm",
+        ret.map((item, idx) => {
+          return {
+            ...item,
+            isAnalize: switched.value[idx] ? 1 : 0,
+            watermark: templateDict.get(curChoseWm.value[idx]),
+            videotemp: templateDict.get(curVideoW.value[idx]),
+            audiotemp: templateDict.get(curAudioW.value[idx])
+          };
+        })
+      );
+      handleClose();
+    };
+    vue.onMounted(() => {
+      templateDataInit();
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(webVue.Modal), {
+        visible: modalVis.value,
+        "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => modalVis.value = $event),
+        width: "80%",
+        onOk: handleOk,
+        onCancel: handleClose
+      }, {
+        title: vue.withCtx(() => [
+          vue.createTextVNode("\u4E0A\u4F20\u914D\u7F6E")
+        ]),
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.createVNode(vue.unref(webVue.Table), {
+              columns: column,
+              data: fileList.value,
+              hoverable: false,
+              bordered: false,
+              pagination: false,
+              scroll
+            }, {
+              analize: vue.withCtx(({ rowIndex }) => [
+                vue.createVNode(vue.unref(webVue.Switch), {
+                  modelValue: switched.value[rowIndex],
+                  "onUpdate:modelValue": ($event) => switched.value[rowIndex] = $event
+                }, null, 8, ["modelValue", "onUpdate:modelValue"])
+              ]),
+              watermark: vue.withCtx(({ rowIndex, record }) => [
+                ["dir", "image"].includes(record.type) ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Select), {
+                  key: 0,
+                  modelValue: curChoseWm.value[rowIndex],
+                  "onUpdate:modelValue": ($event) => curChoseWm.value[rowIndex] = $event,
+                  placeholder: "\u8BF7\u9009\u62E9\u6C34\u5370",
+                  "value-key": "id",
+                  "allow-clear": ""
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(waterMarkList.value, (item) => {
+                      return vue.openBlock(), vue.createBlock(vue.unref(webVue.Option), {
+                        key: item.id,
+                        value: item.id
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode(vue.toDisplayString(item.title), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["value"]);
+                    }), 128))
+                  ]),
+                  _: 2
+                }, 1032, ["modelValue", "onUpdate:modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, "\u2014 \u2014"))
+              ]),
+              vTransTemp: vue.withCtx(({ rowIndex, record }) => [
+                ["dir", "video"].includes(record.type) ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Select), {
+                  key: 0,
+                  modelValue: curVideoW.value[rowIndex],
+                  "onUpdate:modelValue": ($event) => curVideoW.value[rowIndex] = $event,
+                  placeholder: "\u8BF7\u9009\u62E9\u8F6C\u7801\u6A21\u7248",
+                  "value-key": "id",
+                  "allow-clear": ""
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(videoTempList.value, (item) => {
+                      return vue.openBlock(), vue.createBlock(vue.unref(webVue.Option), {
+                        key: item.id,
+                        value: item.id
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode(vue.toDisplayString(item.title), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["value"]);
+                    }), 128))
+                  ]),
+                  _: 2
+                }, 1032, ["modelValue", "onUpdate:modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, "\u2014 \u2014"))
+              ]),
+              aTransTemp: vue.withCtx(({ record, rowIndex }) => [
+                ["dir", "audio"].includes(record.type) ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Select), {
+                  key: 0,
+                  modelValue: curAudioW.value[rowIndex],
+                  "onUpdate:modelValue": ($event) => curAudioW.value[rowIndex] = $event,
+                  placeholder: "\u8BF7\u9009\u62E9\u8F6C\u7801\u6A21\u7248",
+                  "value-key": "id",
+                  "allow-clear": ""
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(audioTempList.value, (item) => {
+                      return vue.openBlock(), vue.createBlock(vue.unref(webVue.Option), {
+                        key: item.id,
+                        value: item.id
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode(vue.toDisplayString(item.title), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["value"]);
+                    }), 128))
+                  ]),
+                  _: 2
+                }, 1032, ["modelValue", "onUpdate:modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, "\u2014 \u2014"))
+              ]),
+              _: 1
+            }, 8, ["data"])
+          ])
+        ]),
+        _: 1
+      }, 8, ["visible"]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/uploadBefore/components/UploadForClick.js

@@ -0,0 +1,29 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+const _sfc_main = vue.defineComponent({
+  __name: "UploadForClick",
+  props: {
+    uploadMethod: {}
+  },
+  emits: ["after-choose"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const tusUpload = (option) => {
+      const { fileItem } = option;
+      emits("after-choose", fileItem);
+      return {
+        abort() {
+        }
+      };
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(webVue.Upload), {
+        multiple: "",
+        "show-file-list": false,
+        "custom-request": tusUpload
+      });
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/uploadBefore/index.js

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

package/lib/uploadBefore/script/api.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var request = require("../../utils/request.js");
+function getWaterMark(BASE_API) {
+  return request(BASE_API, {
+    url: `/poplar/v2/material/image/watermark`,
+    method: "get"
+  });
+}
+function getVideoTransTemplate(BASE_API) {
+  return request(BASE_API, {
+    url: "/poplar/v2/material/video/templates",
+    method: "get"
+  });
+}
+function getAudioTransTrempalte(BASE_API) {
+  return request(BASE_API, {
+    url: "/poplar/v2/material/audio/templates",
+    method: "get"
+  });
+}
+function addMedia(BASE_API, params) {
+  return request(BASE_API, {
+    url: "/poplar/v2/media/add",
+    method: "post",
+    data: params
+  });
+}
+exports.addMedia = addMedia;
+exports.getAudioTransTrempalte = getAudioTransTrempalte;
+exports.getVideoTransTemplate = getVideoTransTemplate;
+exports.getWaterMark = getWaterMark;

package/lib/uploadBefore/script/fileTypeAdapter.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var index = require("../../utils/index.js");
+function fileAdapter(fileMeta) {
+  let coreInfo = null;
+  if (fileMeta instanceof File) {
+    coreInfo = { file: fileMeta, id: index.generateUUID() };
+  } else if (isFileType(fileMeta, "uid")) {
+    if (!fileMeta.file)
+      return void 0;
+    coreInfo = { file: fileMeta.file, id: fileMeta.uid };
+  } else
+    ;
+  if (!coreInfo)
+    return void 0;
+  return { ...coreInfo, url: "" };
+}
+function isFileType(fileType, key) {
+  return fileType[key] !== void 0;
+}
+function checkType(type) {
+  const t = getMediaType(type);
+  if (t === "image")
+    return "\u56FE\u7247";
+  if (t === "video")
+    return "\u56FE\u7247";
+  if (t === "audio")
+    return "\u56FE\u7247";
+  if (t === "dir")
+    return "\u76EE\u5F55";
+  return "\u5176\u4ED6";
+}
+function getMediaType(type) {
+  if (!type)
+    return "";
+  const t = type.split("/");
+  return t[0];
+}
+function getSize(value) {
+  if (!value)
+    return "";
+  let i = -1;
+  const byteUnits = [" KB", " MB", " GB", " TB", " PB", " EB", " ZB", " YB"];
+  do {
+    value /= 1024;
+    i++;
+  } while (value > 1024);
+  return value.toFixed(2) + byteUnits[i];
+}
+exports.checkType = checkType;
+exports.fileAdapter = fileAdapter;
+exports.getMediaType = getMediaType;
+exports.getSize = getSize;

package/lib/uploadBefore/script/fileUpload.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var tusUpload = require("../../utils/tusUpload.js");
+var api = require("./api.js");
+async function uploadFile(file, cb) {
+  try {
+    const uploadRet = await tusUpload.uploadByTUS(file, (b, t) => {
+      cb(parseFloat((b / t * 100).toFixed(2)));
+    });
+    return uploadRet;
+  } catch (e) {
+    return false;
+  }
+}
+async function uploadAddRequest(file, metaData, BASE_API, cb) {
+  const params = {
+    url: metaData.url,
+    alias: file.name,
+    catalog: file.type,
+    repository_id: metaData.rid,
+    directory_id: metaData.dirId,
+    size: file.size
+  };
+  if (file.isAnalize !== void 0)
+    params.enable_ai_catalog = file.isAnalize;
+  if (file.watermark)
+    params.watermark = file.watermark;
+  if (file.videotemp)
+    params.video_transcode_template = file.videotemp;
+  if (file.audiotemp)
+    params.audio_transcode_template = file.audiotemp;
+  try {
+    const { code, message } = await api.addMedia(BASE_API, params);
+    if (code !== 0)
+      return;
+    cb && cb(message);
+  } catch (e) {
+    console.log(e);
+  }
+}
+exports.uploadAddRequest = uploadAddRequest;
+exports.uploadFile = uploadFile;

package/lib/uploadBefore/script/uploadHooks.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var vue = require("vue");
+var fileTypeAdapter = require("./fileTypeAdapter.js");
+function usePreUploadOptions() {
+  const preOptionsList = vue.ref([]);
+  function uploadFileToShowFileTrans(file) {
+    if (file.dirId) {
+      return;
+    }
+    preOptionsList.value.push({
+      id: file.id,
+      name: file.file.name,
+      size: file.file.size,
+      sizeCN: fileTypeAdapter.getSize(file.file.size),
+      type: fileTypeAdapter.getMediaType(file.file.type),
+      typeCN: fileTypeAdapter.checkType(file.file.type)
+    });
+  }
+  return {
+    preOptionsList,
+    uploadFileToShowFileTrans
+  };
+}
+function useUplaodList() {
+  const fileList = vue.ref([]);
+  function uploadFileAdd(file) {
+    fileList.value.push(file);
+  }
+  return {
+    fileList,
+    uploadFileAdd
+  };
+}
+exports.usePreUploadOptions = usePreUploadOptions;
+exports.useUplaodList = useUplaodList;

package/lib/uploadBefore/style/css.js

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.css");

package/lib/uploadBefore/style/index.css

@@ -0,0 +1,111 @@
+.tooltip-button {
+  height: auto;
+  padding: 20px;
+}
+.table_wrp {
+  height: 50vh;
+}
+/** 上传列表面板 */
+.panel_wrp {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+}
+.panel_wrp .panel_card .panel_header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.panel_wrp .panel_card .panel_header .opt {
+  display: flex;
+  flex-direction: row;
+  gap: 15px;
+}
+.panel_wrp .panel_card .panel_list {
+  display: flex;
+  flex-direction: column;
+}
+.panel_wrp .panel_card .panel_list .panel_item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.panel_wrp .panel_card .panel_list .panel_item .panel_column {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.panel_wrp .panel_card .panel_list .panel_item .panel_column.flex-1 {
+  flex: 1;
+}
+.panel_wrp .panel_card .panel_list .panel_item .panel_column.flex-3 {
+  flex: 3;
+}
+.panel_wrp {
+  width: auto;
+  overflow: hidden;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+.panel_wrp *::selection {
+  display: none;
+}
+.panel_wrp .panel_card {
+  width: 350px;
+  transition: all 0.3s;
+}
+.panel_wrp .panel_card.expend {
+  width: 420px;
+}
+.panel_wrp .panel_card .panel_header {
+  width: 90%;
+  height: 50px;
+  padding: 0 5%;
+  color: white;
+  background-color: rgb(var(--arcoblue-5));
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+.panel_wrp .panel_card .panel_header .title {
+  white-space: nowrap;
+}
+.panel_wrp .panel_card .panel_header .opt {
+  font-size: 18px;
+}
+.panel_wrp .panel_card .panel_header .opt::selection {
+  display: none;
+}
+.panel_wrp .panel_card .panel_header .opt .bar {
+  cursor: pointer;
+}
+.panel_wrp .panel_card .panel_list {
+  width: 100%;
+  height: 120px;
+  overflow-y: scroll;
+  transition: all 0.3s;
+}
+.panel_wrp .panel_card .panel_list::-webkit-scrollbar {
+  display: none;
+}
+.panel_wrp .panel_card .panel_list.un_expend {
+  height: 0;
+  overflow: hidden;
+}
+.panel_wrp .panel_card .panel_list .panel_item {
+  height: 35px;
+  padding: 5px 15px;
+}
+.panel_wrp .panel_card .panel_list .panel_item .panel_column {
+  white-space: nowrap;
+}
+.panel_wrp .panel_card .panel_list .panel_item .panel_column .media_alias {
+  width: 160px;
+  cursor: pointer;
+}
+/** 公用 */
+.ellips {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/lib/uploadBefore/style/index.js

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.less");

package/lib/uploadBefore/style/index.less

@@ -0,0 +1,144 @@
+.tooltip-button {
+  height: auto;
+  padding: 20px;
+}
+
+.table_wrp {
+  height: 50vh;
+}
+
+._brTop(@p) {
+  border-top-left-radius: @p;
+  border-top-right-radius: @p;
+}
+
+/** 上传列表面板 */
+
+// 布局部分
+.panel_wrp {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+
+  .panel_card {
+    .panel_header {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+
+      .opt {
+        display: flex;
+        flex-direction: row;
+        gap: 15px;
+      }
+    }
+
+    .panel_list {
+      display: flex;
+      flex-direction: column;
+
+      .panel_item {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .panel_column {
+          display: flex;
+          gap: 10px;
+          align-items: center;
+
+          &.flex-1 {
+            flex: 1;
+          }
+
+          &.flex-3 {
+            flex: 3;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 样式部分
+.panel_wrp {
+  width: auto;
+  overflow: hidden;
+
+  & *::selection {
+    display: none;
+  }
+  ._brTop(12px);
+
+  .panel_card {
+    width: 350px;
+    transition: all 0.3s;
+
+    &.expend {
+      width: 420px;
+    }
+
+    .panel_header {
+      width: 90%;
+      height: 50px;
+      padding: 0 5%;
+      color: white;
+      background-color: rgb(var(--arcoblue-5));
+      ._brTop(10px);
+
+      .title {
+        white-space: nowrap;
+      }
+
+      .opt {
+        font-size: 18px;
+
+        &::selection {
+          display: none;
+        }
+
+        .bar {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .panel_list {
+      width: 100%;
+      height: 120px;
+      overflow-y: scroll;
+      transition: all 0.3s;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      &.un_expend {
+        height: 0;
+        overflow: hidden;
+      }
+
+      .panel_item {
+        height: 35px;
+        padding: 5px 15px;
+
+        .panel_column {
+          white-space: nowrap;
+
+          .media_alias {
+            width: 160px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
+
+/** 公用 */
+.ellips {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}