@cmstops/pro-compo 0.1.9 → 0.1.11

package/es/uploadBefore/component.js

@@ -0,0 +1,81 @@
+import { defineComponent, ref, openBlock, createElementBlock, Fragment, createVNode, unref, isRef } from "vue";
+import { fileAdapter } from "./script/fileTypeAdapter.js";
+import { uploadFile, uploadAddRequest } from "./script/fileUpload.js";
+import _sfc_main$1 from "./components/UploadForClick.js";
+import _sfc_main$2 from "./components/UploadBefore.js";
+import { DEFAULT_BASE_API } from "../config.js";
+import { useToggle } from "../hooks/toggle.js";
+import { to } from "../utils/index.js";
+import { usePreUploadOptions, useUplaodList } from "./script/uploadHooks.js";
+const _sfc_main = defineComponent({
+  ...{ name: "uploadBefore" },
+  __name: "component",
+  props: {
+    BASE_API: {},
+    uploadMethod: {}
+  },
+  emits: ["onProgress", "onListReady"],
+  setup(__props, { emit: __emit }) {
+    const { state: visBeforeUpload, open: openBeforePannel } = useToggle();
+    const { state: visUploadList, open: openListPannel } = useToggle();
+    const props = __props;
+    const emits = __emit;
+    const baseApi = ref(props.BASE_API || DEFAULT_BASE_API);
+    const { preOptionsList, uploadFileToShowFileTrans } = usePreUploadOptions();
+    const { fileList, uploadFileAdd } = useUplaodList();
+    const afterChoose = (file) => {
+      const retFile = fileAdapter(file);
+      if (!retFile)
+        return;
+      uploadFileAdd(retFile);
+      uploadFileToShowFileTrans(retFile);
+      !visBeforeUpload.value && openBeforePannel();
+    };
+    const afterPayload = (fl) => {
+      emits("onListReady", fl);
+      !visUploadList.value && openListPannel();
+      for (const file of fileList.value) {
+        handleProcess(file, fl);
+      }
+    };
+    async function handleProcess(file, fl) {
+      file.id;
+      const sId = file.dirId || file.id;
+      const [err, uploadRet] = await to(
+        uploadFile(file.file, (p) => emits("onProgress", sId, p, 0))
+      );
+      if (err || !uploadRet || !uploadRet.url)
+        return emits("onProgress", sId, 0, -1);
+      emits("onProgress", sId, 100, 2);
+      const showFileData = fl.find((item) => item.id === sId);
+      if (!showFileData)
+        return false;
+      uploadAddRequest(
+        showFileData,
+        { rid: 4, dirId: 0, url: uploadRet.url },
+        baseApi.value,
+        (data) => {
+          console.log(data);
+        }
+      );
+      return true;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_sfc_main$1, {
+          "upload-method": _ctx.uploadMethod,
+          onAfterChoose: afterChoose
+        }, null, 8, ["upload-method"]),
+        createVNode(_sfc_main$2, {
+          visable: unref(visBeforeUpload),
+          "onUpdate:visable": _cache[0] || (_cache[0] = ($event) => isRef(visBeforeUpload) ? visBeforeUpload.value = $event : null),
+          "file-list": unref(preOptionsList),
+          "onUpdate:fileList": _cache[1] || (_cache[1] = ($event) => isRef(preOptionsList) ? preOptionsList.value = $event : null),
+          "b-a-s-e-a-p-i": baseApi.value,
+          onConfirm: afterPayload
+        }, null, 8, ["visable", "file-list", "b-a-s-e-a-p-i"])
+      ], 64);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/uploadBefore/components/UploadBefore.js

@@ -0,0 +1,228 @@
+import { defineComponent, toRef, ref, watch, onMounted, openBlock, createBlock, unref, withCtx, createTextVNode, createElementVNode, createVNode, createElementBlock, Fragment, renderList, toDisplayString } from "vue";
+import { Modal, Table, Switch, Select, Option } from "@arco-design/web-vue";
+import { getWaterMark, getVideoTransTemplate, getAudioTransTrempalte } from "../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 = 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 = toRef(props, "visable");
+    const fileList = 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 = ref([]);
+    const curChoseWm = ref([]);
+    const curVideoW = ref([]);
+    const curAudioW = ref([]);
+    const waterMarkList = ref([]);
+    const videoTempList = ref([]);
+    const audioTempList = ref([]);
+    const templateDict = /* @__PURE__ */ new Map();
+    const defaultWm = ref();
+    const defaultVm = ref();
+    const defaultAm = ref();
+    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 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 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 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();
+    };
+    onMounted(() => {
+      templateDataInit();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Modal), {
+        visible: modalVis.value,
+        "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => modalVis.value = $event),
+        width: "80%",
+        onOk: handleOk,
+        onCancel: handleClose
+      }, {
+        title: withCtx(() => [
+          createTextVNode("\u4E0A\u4F20\u914D\u7F6E")
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(unref(Table), {
+              columns: column,
+              data: fileList.value,
+              hoverable: false,
+              bordered: false,
+              pagination: false,
+              scroll
+            }, {
+              analize: withCtx(({ rowIndex }) => [
+                createVNode(unref(Switch), {
+                  modelValue: switched.value[rowIndex],
+                  "onUpdate:modelValue": ($event) => switched.value[rowIndex] = $event
+                }, null, 8, ["modelValue", "onUpdate:modelValue"])
+              ]),
+              watermark: withCtx(({ rowIndex, record }) => [
+                ["dir", "image"].includes(record.type) ? (openBlock(), createBlock(unref(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: withCtx(() => [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(waterMarkList.value, (item) => {
+                      return openBlock(), createBlock(unref(Option), {
+                        key: item.id,
+                        value: item.id
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(item.title), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["value"]);
+                    }), 128))
+                  ]),
+                  _: 2
+                }, 1032, ["modelValue", "onUpdate:modelValue"])) : (openBlock(), createElementBlock("div", _hoisted_2, "\u2014 \u2014"))
+              ]),
+              vTransTemp: withCtx(({ rowIndex, record }) => [
+                ["dir", "video"].includes(record.type) ? (openBlock(), createBlock(unref(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: withCtx(() => [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(videoTempList.value, (item) => {
+                      return openBlock(), createBlock(unref(Option), {
+                        key: item.id,
+                        value: item.id
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(item.title), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["value"]);
+                    }), 128))
+                  ]),
+                  _: 2
+                }, 1032, ["modelValue", "onUpdate:modelValue"])) : (openBlock(), createElementBlock("div", _hoisted_3, "\u2014 \u2014"))
+              ]),
+              aTransTemp: withCtx(({ record, rowIndex }) => [
+                ["dir", "audio"].includes(record.type) ? (openBlock(), createBlock(unref(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: withCtx(() => [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(audioTempList.value, (item) => {
+                      return openBlock(), createBlock(unref(Option), {
+                        key: item.id,
+                        value: item.id
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(item.title), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["value"]);
+                    }), 128))
+                  ]),
+                  _: 2
+                }, 1032, ["modelValue", "onUpdate:modelValue"])) : (openBlock(), createElementBlock("div", _hoisted_4, "\u2014 \u2014"))
+              ]),
+              _: 1
+            }, 8, ["data"])
+          ])
+        ]),
+        _: 1
+      }, 8, ["visible"]);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/uploadBefore/components/UploadForClick.js

@@ -0,0 +1,28 @@
+import { defineComponent, openBlock, createBlock, unref } from "vue";
+import { Upload } from "@arco-design/web-vue";
+const _sfc_main = 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 openBlock(), createBlock(unref(Upload), {
+        multiple: "",
+        "show-file-list": false,
+        "custom-request": tusUpload
+      });
+    };
+  }
+});
+export { _sfc_main as default };

package/es/uploadBefore/index.d.ts

@@ -0,0 +1,2 @@
+declare const uploadBefore: any;
+export default uploadBefore;

package/es/uploadBefore/index.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./component.js";
+const uploadBefore = Object.assign(_sfc_main, {
+  install: (app) => {
+    app.component(_sfc_main.name, _sfc_main);
+  }
+});
+export { uploadBefore as default };

package/es/uploadBefore/script/api.d.ts

@@ -0,0 +1,16 @@
+export declare function getWaterMark(BASE_API: string): import("axios").AxiosPromise<any>;
+export declare function getVideoTransTemplate(BASE_API: string): import("axios").AxiosPromise<any>;
+export declare function getAudioTransTrempalte(BASE_API: string): import("axios").AxiosPromise<any>;
+export declare type TypeAddMediaParam = {
+    url: string;
+    alias: string;
+    catalog: string;
+    repository_id: number;
+    directory_id: number;
+    size: number;
+    enable_ai_catalog?: 0 | 1;
+    watermark?: any;
+    video_transcode_template?: any;
+    audio_transcode_template?: any;
+};
+export declare function addMedia(BASE_API: string, params: TypeAddMediaParam): import("axios").AxiosPromise<any>;

package/es/uploadBefore/script/api.js

@@ -0,0 +1,27 @@
+import request from "../../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
+  });
+}
+export { addMedia, getAudioTransTrempalte, getVideoTransTemplate, getWaterMark };

package/es/uploadBefore/script/fileTypeAdapter.d.ts

@@ -0,0 +1,39 @@
+/** @description 文件类型适配器 @author LilMartin */
+import type { FileItem } from '@arco-design/web-vue';
+export interface CFileItem {
+    file: File;
+    id: string;
+    url?: string;
+    dirId?: string;
+}
+export interface SFileItem {
+    name: string;
+    size: number;
+    sizeCN: string;
+    type: string;
+    typeCN?: string;
+    id: string;
+    dirId?: string;
+}
+export interface BFileItem extends SFileItem {
+    isAnalize?: 0 | 1;
+    watermark?: any;
+    videotemp?: any;
+    audiotemp?: any;
+}
+export interface LFileItem extends BFileItem {
+    percent: number;
+    state: number;
+    count?: number;
+}
+declare type FileMaybeType = File | FileItem;
+export declare function fileAdapter(fileMeta: FileMaybeType): {
+    url: string;
+    file: File;
+    id: string;
+    dirId?: string | undefined;
+} | undefined;
+export declare function checkType(type: string): "其他" | "图片" | "目录";
+export declare function getMediaType(type: string): string;
+export declare function getSize(value: number): string;
+export {};

package/es/uploadBefore/script/fileTypeAdapter.js

@@ -0,0 +1,48 @@
+import { generateUUID } from "../../utils/index.js";
+function fileAdapter(fileMeta) {
+  let coreInfo = null;
+  if (fileMeta instanceof File) {
+    coreInfo = { file: fileMeta, id: 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];
+}
+export { checkType, fileAdapter, getMediaType, getSize };

package/es/uploadBefore/script/fileUpload.d.ts

@@ -0,0 +1,7 @@
+import { BFileItem } from './fileTypeAdapter';
+export declare function uploadFile(file: File, cb: (p: number) => void): Promise<false | import("tus-js-client").Upload>;
+export declare function uploadAddRequest(file: BFileItem, metaData: {
+    rid: number;
+    dirId: number;
+    url: string;
+}, BASE_API: string, cb?: (cbData: any) => void): Promise<void>;

package/es/uploadBefore/script/fileUpload.js

@@ -0,0 +1,39 @@
+import { uploadByTUS } from "../../utils/tusUpload.js";
+import { addMedia } from "./api.js";
+async function uploadFile(file, cb) {
+  try {
+    const uploadRet = await 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 addMedia(BASE_API, params);
+    if (code !== 0)
+      return;
+    cb && cb(message);
+  } catch (e) {
+    console.log(e);
+  }
+}
+export { uploadAddRequest, uploadFile };

package/es/uploadBefore/script/uploadHooks.d.ts

@@ -0,0 +1,55 @@
+import { CFileItem, LFileItem } from './fileTypeAdapter';
+export declare function usePannelList(): {
+    panelList: import("vue").Ref<{
+        percent: number;
+        state: number;
+        count?: number | undefined;
+        isAnalize?: 0 | 1 | undefined;
+        watermark?: any;
+        videotemp?: any;
+        audiotemp?: any;
+        name: string;
+        size: number;
+        sizeCN: string;
+        type: string;
+        typeCN?: string | undefined;
+        id: string;
+        dirId?: string | undefined;
+    }[]>;
+    panelFIleAdd: (fileMetaData: LFileItem) => void;
+    panelFileStatusChange: (id: string, p: number, s: number) => void;
+};
+export declare function usePreUploadOptions(): {
+    preOptionsList: import("vue").Ref<{
+        isAnalize?: 0 | 1 | undefined;
+        watermark?: any;
+        videotemp?: any;
+        audiotemp?: any;
+        name: string;
+        size: number;
+        sizeCN: string;
+        type: string;
+        typeCN?: string | undefined;
+        id: string;
+        dirId?: string | undefined;
+    }[]>;
+    uploadFileToShowFileTrans: (file: CFileItem) => void;
+};
+export declare function useUplaodList(): {
+    fileList: import("vue").Ref<{
+        file: {
+            readonly lastModified: number;
+            readonly name: string;
+            readonly size: number;
+            readonly type: string;
+            arrayBuffer: () => Promise<ArrayBuffer>;
+            slice: (start?: number | undefined, end?: number | undefined, contentType?: string | undefined) => Blob;
+            stream: () => ReadableStream<any>;
+            text: () => Promise<string>;
+        };
+        id: string;
+        url?: string | undefined;
+        dirId?: string | undefined;
+    }[]>;
+    uploadFileAdd: (file: CFileItem) => void;
+};

package/es/uploadBefore/script/uploadHooks.js

@@ -0,0 +1,33 @@
+import { ref } from "vue";
+import { getSize, getMediaType, checkType } from "./fileTypeAdapter.js";
+function usePreUploadOptions() {
+  const preOptionsList = ref([]);
+  function uploadFileToShowFileTrans(file) {
+    if (file.dirId) {
+      return;
+    }
+    preOptionsList.value.push({
+      id: file.id,
+      name: file.file.name,
+      size: file.file.size,
+      sizeCN: getSize(file.file.size),
+      type: getMediaType(file.file.type),
+      typeCN: checkType(file.file.type)
+    });
+  }
+  return {
+    preOptionsList,
+    uploadFileToShowFileTrans
+  };
+}
+function useUplaodList() {
+  const fileList = ref([]);
+  function uploadFileAdd(file) {
+    fileList.value.push(file);
+  }
+  return {
+    fileList,
+    uploadFileAdd
+  };
+}
+export { usePreUploadOptions, useUplaodList };

package/es/uploadBefore/style/css.js

@@ -0,0 +1 @@
+import "./index.css";