@zykj2024/much-library 1.1.7-beta.3 → 1.1.7-beta.4

package/dist/esm/McUpload/comps/McUploadTrigger/index.less

@@ -0,0 +1,204 @@
+.uploadTrigger {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
+  background: #f5f5f5;
+}
+
+.square-container {
+  width: 102px;
+  height: 102px;
+}
+
+.rectangle-container {
+  width: 90px;
+  height: 120px;
+}
+
+.circle-container {
+  width: 102px;
+  height: 102px;
+  border-radius: 50%;
+}
+
+.base {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: column;
+  border-radius: inherit;
+  gap: 8px;
+  position: relative;
+}
+
+.picture-container_default {
+  border: 1px dashed #d9d9d9;
+  transition: border-color 0.3s, color 0.3s;
+
+  &:hover {
+    border: 1px dashed #325cf7;
+    color: #325cf7;
+  }
+}
+
+.picture-container_error {
+  background: rgba(255, 77, 79, 10%);
+  border: 1px dashed #ff4d4f;
+
+  &:hover {
+    .mc-trigger-mask {
+      display: flex;
+    }
+  }
+}
+
+.mc-trigger-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: rgba(0, 0, 0, 80%) !important;
+}
+
+.img-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  border-radius: inherit;
+
+  > img {
+    width: 100%;
+    height: 100% !important;
+    object-fit: cover;
+  }
+}
+
+.picture-container_uploading {
+  &:hover {
+    .mc-trigger-mask {
+      display: flex;
+    }
+  }
+}
+
+.picture-container_done {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  gap: 8px;
+
+  &:hover {
+    .mc-trigger-mask {
+      display: flex;
+    }
+  }
+}
+
+// -----------------------------按钮样式----------------------------- //
+.button-container {
+  height: 24px;
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+  line-height: 1;
+  box-sizing: border-box;
+
+  &:hover {
+    background: #f5f5f5;
+
+    .button-content-name-delete {
+      opacity: 1 !important;
+    }
+  }
+
+  .button-icon {
+    box-sizing: inherit;
+    padding: 4px 6px 6px;
+  }
+
+  .button-content {
+    height: 24px;
+    flex: 1 1;
+    width: calc(100% - 48px);
+    display: flex;
+    flex-flow: column;
+    justify-content: flex-end;
+
+    .button-content-name {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+
+      .button-content-name-delete {
+        opacity: 0;
+        padding: 4px;
+        box-sizing: border-box;
+        border-radius: 4px;
+        cursor: pointer;
+
+        &:hover {
+          background: #d9d9d9;
+        }
+      }
+
+      .delete_error {
+        opacity: 1;
+      }
+    }
+
+    .button-content-progress {
+      line-height: 2px;
+    }
+  }
+}
+
+// -------------------拖拽部分---------------------//
+.uploadTriggerDrag {
+  display: flex;
+  align-items: center;
+  flex-flow: column;
+  box-sizing: border-box;
+  padding: 24px;
+  border: 1px dashed #d9d9d9;
+  border-radius: 4px;
+  background: #f5f5f5;
+  cursor: pointer;
+
+  .uploadTriggerDrag-icon {
+    margin-bottom: 16px;
+  }
+
+  .uploadTriggerDrag-text {
+    font-weight: 500;
+    color: #262626;
+    margin-bottom: 8px;
+  }
+
+  .uploadTriggerDrag-desc {
+    font-size: 12px;
+    color: #8c8c8c;
+  }
+}
+
+.uploadTriggerDrag.active {
+  border: 1px dashed #325cf7;
+  background: #eaeefe;
+}

package/dist/esm/McUpload/index.d.ts

@@ -0,0 +1,14 @@
+import { GetProps } from 'antd';
+import { ForwardRefExoticComponent } from 'react';
+import McFormUpload from './comps/McFormUpload';
+import McUploadCmp from './comps/McUploadCmp';
+import McUploadDragger from './comps/McUploadDragger';
+export type { McUploadProps } from './comps/McUploadCmp';
+export * from './comps/McUploadDragger';
+export * from './comps/McUploadTrigger';
+type CompoundedComponent = ForwardRefExoticComponent<GetProps<typeof McUploadCmp>> & {
+    McFormUpload: typeof McFormUpload;
+    Dragger: typeof McUploadDragger;
+};
+declare const McUpload: CompoundedComponent;
+export default McUpload;

package/dist/esm/McUpload/index.js

@@ -0,0 +1,9 @@
+import McFormUpload from "./comps/McFormUpload";
+import McUploadCmp from "./comps/McUploadCmp";
+import McUploadDragger from "./comps/McUploadDragger";
+export * from "./comps/McUploadDragger";
+export * from "./comps/McUploadTrigger";
+var McUpload = McUploadCmp;
+McUploadCmp.McFormUpload = McFormUpload;
+McUploadCmp.Dragger = McUploadDragger;
+export default McUpload;

package/dist/esm/McUpload/tools/calculateMD5/index.d.ts

@@ -0,0 +1,3 @@
+export declare const getIdleCPUCores: () => number;
+export declare const calculateByNormal: (file: File, chunkSize: number) => Promise<string | ProgressEvent<FileReader>>;
+export declare const calculateMD5: (file: File, chunkSize?: number) => Promise<string | MessageEvent['data']['error'] | ProgressEvent<FileReader>>;

package/dist/esm/McUpload/tools/calculateMD5/index.js

@@ -0,0 +1,94 @@
+import SparkMD5 from 'spark-md5';
+import { transformNumber } from "../uploadTools";
+// 创建一个纯js计算线程
+var createWebWorker = function createWebWorker() {
+  return new Worker(new URL('./md5Worker.js', import.meta.url));
+};
+
+// 获取用户cpu核心数用于控制并发线程数量
+export var getIdleCPUCores = function getIdleCPUCores() {
+  var _navigator;
+  var BROWSER_CPU_COUNT = transformNumber((_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.hardwareConcurrency);
+  // Safari总是返回1
+  return BROWSER_CPU_COUNT < 5 ? 2 : Math.min(BROWSER_CPU_COUNT - 2, 8); // 默认4核,留两核防止浏览器崩溃
+};
+
+// webwork的纯js计算
+var calculateByWebWorker = function calculateByWebWorker(file, chunkSize) {
+  return new Promise(function (resolve, reject) {
+    var worker = createWebWorker();
+    var reader = new FileReader();
+    var currentChunk = 0;
+    var totalChunks = Math.ceil(file.size / chunkSize);
+    function loadNext() {
+      var start = currentChunk * chunkSize;
+      var end = Math.min(start + chunkSize, file.size);
+      reader.readAsArrayBuffer(file.slice(start, end));
+    }
+    reader.onload = function (e) {
+      var _e$target;
+      var buffer = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.result;
+      worker.postMessage({
+        buffer: buffer,
+        isEnd: currentChunk === totalChunks - 1
+      }, [buffer]);
+      currentChunk++;
+      if (currentChunk < totalChunks) {
+        loadNext();
+      }
+    };
+    reader.onerror = function (err) {
+      reject(err);
+    };
+    worker.onmessage = function (e) {
+      if (e.data.error) {
+        reject(e.data.error);
+      } else {
+        resolve(e.data);
+      }
+      worker.terminate(); // 关闭worker
+    };
+    loadNext();
+  });
+};
+
+// 纯js串行计算
+export var calculateByNormal = function calculateByNormal(file, chunkSize) {
+  return new Promise(function (resolve, reject) {
+    var reader = new FileReader();
+    var hashTool = new SparkMD5.ArrayBuffer();
+    var currentChunk = 0;
+    var totalChunks = Math.ceil(file.size / chunkSize);
+    function loadNext() {
+      var start = currentChunk * chunkSize;
+      var end = Math.min(start + chunkSize, file.size);
+      reader.readAsArrayBuffer(file.slice(start, end));
+    }
+    reader.onload = function (e) {
+      var _e$target2;
+      var buffer = (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.result;
+      hashTool.append(buffer);
+      currentChunk++;
+      if (currentChunk < totalChunks) {
+        loadNext();
+      } else {
+        resolve(hashTool.end());
+      }
+    };
+    reader.onerror = function (err) {
+      reject(err);
+    };
+    loadNext();
+  });
+};
+
+// TODO MD5是串行算法，所以采用每个线程算一个文件的方式，而不是多个线程计算同一个文件
+export var calculateMD5 = function calculateMD5(file) {
+  var chunkSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5 * 1024 * 1024;
+  // 判断当前浏览器环境支不支持webworker
+  if (window.Worker) {
+    return calculateByWebWorker(file, chunkSize);
+  } else {
+    return calculateByNormal(file, chunkSize);
+  }
+};

package/dist/esm/McUpload/tools/calculateMD5/md5Worker.js

@@ -0,0 +1,44 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+var SparkMD5 = require('spark-md5');
+// 一期因为hash-wasm和spark-md5的兼容性问题，暂时使用spark-md5
+var hashTool = new SparkMD5.ArrayBuffer();
+self.onmessage = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
+    var _e$data, buffer, isEnd, timeoutId, md5;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _e$data = e.data, buffer = _e$data.buffer, isEnd = _e$data.isEnd; // 接收主线程传递过来的文件
+          timeoutId = setTimeout(function () {
+            self.postMessage({
+              error: 'Hash calculation timed out'
+            }); // 超时错误消息
+            self.close(); // 关闭 worker
+          }, 10000); // 设置超时时间为10秒
+          try {
+            hashTool.append(buffer); // 将文件内容添加到哈希计算中
+            if (isEnd) {
+              md5 = hashTool.end(); // 计算文件的 MD5 值
+              clearTimeout(timeoutId); // 清除超时计时器
+              self.postMessage(md5); // 将计算结果发送给主线程
+            }
+          } catch (err) {
+            clearTimeout(timeoutId); // 清除超时计时器
+            self.postMessage({
+              error: err.message
+            }); // 发送错误消息
+          }
+        case 3:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function (_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+self.onerror = function (e) {
+  self.postMessage(e);
+};

package/dist/esm/McUpload/tools/getUid.d.ts

@@ -0,0 +1 @@
+export default function getUid(): string;

package/dist/esm/McUpload/tools/getUid.js

@@ -0,0 +1,6 @@
+var now = +new Date();
+var index = 0;
+export default function getUid() {
+  // eslint-disable-next-line no-plusplus
+  return "mc-upload-".concat(now, "-").concat(++index);
+}

package/dist/esm/McUpload/tools/materialVerification.d.ts

@@ -0,0 +1,50 @@
+import { RcFile } from 'antd/es/upload';
+export interface FileInfo {
+    type: string;
+    size: number;
+    width: number;
+    height: number;
+    name: string;
+    duration?: number;
+}
+export type FileError = {
+    name?: string;
+    message?: string;
+};
+export type FileRangeInfo = {
+    min?: number;
+    max?: number;
+};
+export type DAR = [number, number];
+export interface VerifyConfig {
+    size?: FileRangeInfo;
+    width?: FileRangeInfo;
+    height?: FileRangeInfo;
+    duration?: FileRangeInfo;
+    DAR?: DAR;
+}
+export type CheckResult = {
+    isPassed: boolean;
+    errList: ('min' | 'max')[];
+};
+type FileInfoResult = {
+    error: FileError;
+    data: null;
+} | {
+    error: null;
+    data: FileInfo;
+};
+export declare const getImgInfo: (imgFile: RcFile) => Promise<FileInfoResult>;
+export declare const getVideoInfo: (videoFile: RcFile) => Promise<FileInfoResult>;
+export declare const isNumber: (num?: number) => boolean;
+export declare const isNumberInRange: (reference: number, rangeInfo: FileRangeInfo) => CheckResult;
+export type FileCheckedResult = {
+    isPassed: boolean;
+    errList?: {
+        target: string;
+        messages: string[];
+    }[];
+    fileInfo?: Partial<FileInfo>;
+};
+export declare const checkFile: (file: RcFile, config: VerifyConfig) => Promise<FileCheckedResult>;
+export {};

package/dist/esm/McUpload/tools/materialVerification.js

@@ -0,0 +1,257 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+// 图片信息获取
+// 参数校验配置
+// 数据大小范围
+// 素材校验配置参数
+var E_VerifyType = /*#__PURE__*/function (E_VerifyType) {
+  E_VerifyType["SIZE"] = "size";
+  E_VerifyType["WIDTH"] = "width";
+  E_VerifyType["HEIGHT"] = "height";
+  E_VerifyType["DURATION"] = "duration";
+  E_VerifyType["DAR"] = "DAR";
+  return E_VerifyType;
+}(E_VerifyType || {}); // 单项校验
+// 获取图片信息
+export var getImgInfo = function getImgInfo(imgFile) {
+  return new Promise(function (resolve) {
+    var img = new Image();
+    img.src = URL.createObjectURL(imgFile);
+    img.onload = function () {
+      resolve({
+        error: null,
+        data: {
+          type: imgFile.type,
+          size: imgFile.size,
+          width: img.width,
+          height: img.height,
+          name: imgFile.name
+        }
+      });
+      window.URL.revokeObjectURL(img.src); // 释放URL对象
+    };
+    img.onerror = function () {
+      window.URL.revokeObjectURL(img.src); // 释放URL对象
+      resolve({
+        error: {
+          name: imgFile.name,
+          message: '图片加载失败'
+        },
+        data: null
+      });
+    };
+  });
+};
+
+// 获取视频信息
+export var getVideoInfo = function getVideoInfo(videoFile) {
+  return new Promise(function (resolve) {
+    var video = document.createElement('video');
+    video.preload = 'metadata';
+    video.onloadedmetadata = function () {
+      resolve({
+        error: null,
+        data: {
+          type: videoFile.type,
+          size: videoFile.size,
+          width: video.videoWidth,
+          height: video.videoHeight,
+          name: videoFile.name,
+          duration: video.duration
+        }
+      });
+      window.URL.revokeObjectURL(video.src); // 释放URL对象
+    };
+    video.onerror = function () {
+      window.URL.revokeObjectURL(video.src); // 释放URL对象
+      resolve({
+        error: {
+          name: videoFile.name,
+          message: '视频加载失败'
+        },
+        data: null
+      });
+    };
+    // 创建资源
+    video.src = URL.createObjectURL(videoFile);
+  });
+};
+
+// 大小校验
+
+// 判断变量是不是数字
+export var isNumber = function isNumber(num) {
+  return typeof num === 'number' && !Number.isNaN(num);
+};
+
+// 判断数字有没有在某一个区间内
+export var isNumberInRange = function isNumberInRange(reference, rangeInfo) {
+  var min = rangeInfo.min,
+    max = rangeInfo.max;
+  var res = {
+    isPassed: true,
+    errList: []
+  };
+  if (typeof min === 'number' && !Number.isNaN(min) && reference < min) {
+    var _res$errList;
+    res.isPassed = false;
+    (_res$errList = res.errList) === null || _res$errList === void 0 || _res$errList.push('min');
+  }
+  if (typeof max === 'number' && !Number.isNaN(max) && reference > max) {
+    var _res$errList2;
+    res.isPassed = false;
+    (_res$errList2 = res.errList) === null || _res$errList2 === void 0 || _res$errList2.push('max');
+  }
+  return res;
+};
+var PARAMETER_MAP = {
+  size: {
+    title: '',
+    unit: 'MB',
+    transfer: function transfer(value) {
+      return value / 1024 / 1024;
+    }
+  },
+  width: {
+    title: '宽度',
+    unit: 'px',
+    transfer: function transfer(value) {
+      return value;
+    }
+  },
+  height: {
+    title: '高度',
+    unit: 'px',
+    transfer: function transfer(value) {
+      return value;
+    }
+  },
+  duration: {
+    title: '时长',
+    unit: 's',
+    transfer: function transfer(value) {
+      return value;
+    }
+  },
+  DAR: {
+    title: '宽高比',
+    unit: '',
+    transfer: function transfer(value) {
+      return value;
+    }
+  }
+};
+
+// 校验函数
+export var checkFile = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file, config) {
+    var _file$type;
+    var res, type, fileType, size, width, height, duration, DAR, checkItem, _ref2, err, infoRes, _res$errList4;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          res = {
+            isPassed: true,
+            errList: []
+          }; // 判断文件类型
+          type = (_file$type = file.type) === null || _file$type === void 0 || (_file$type = _file$type.split('/')) === null || _file$type === void 0 ? void 0 : _file$type[0];
+          res.fileInfo = {
+            name: file.name,
+            type: file.type
+          };
+          fileType = type === 'image' ? '图片' : type === 'video' ? '视频' : '文件';
+          size = config.size, width = config.width, height = config.height, duration = config.duration, DAR = config.DAR; // 单项校验函数
+          checkItem = function checkItem(verifyInfo, verifyValue) {
+            var verifyType = verifyInfo.type,
+              verifyRange = verifyInfo.range;
+            if (!!verifyInfo.range) {
+              res.fileInfo = _objectSpread(_objectSpread({}, res.fileInfo), {}, _defineProperty({}, verifyInfo.type, verifyValue));
+              var result = isNumberInRange(verifyValue, verifyInfo.range);
+              if (!result.isPassed) {
+                var _res$errList3, _result$errList;
+                res.isPassed = false;
+                (_res$errList3 = res.errList) === null || _res$errList3 === void 0 || _res$errList3.push({
+                  target: verifyInfo.type,
+                  messages: (_result$errList = result.errList) === null || _result$errList === void 0 ? void 0 : _result$errList.map(function (item) {
+                    var _PARAMETER_MAP$verify, _PARAMETER_MAP$verify2, _PARAMETER_MAP$verify3;
+                    return "".concat(fileType).concat(file.name).concat(PARAMETER_MAP === null || PARAMETER_MAP === void 0 || (_PARAMETER_MAP$verify = PARAMETER_MAP[verifyType]) === null || _PARAMETER_MAP$verify === void 0 ? void 0 : _PARAMETER_MAP$verify.title).concat(item === 'min' ? '不能小于' : '不能大于', ": ").concat(PARAMETER_MAP === null || PARAMETER_MAP === void 0 || (_PARAMETER_MAP$verify2 = PARAMETER_MAP[verifyType]) === null || _PARAMETER_MAP$verify2 === void 0 ? void 0 : _PARAMETER_MAP$verify2.transfer(verifyRange === null || verifyRange === void 0 ? void 0 : verifyRange[item])).concat(PARAMETER_MAP === null || PARAMETER_MAP === void 0 || (_PARAMETER_MAP$verify3 = PARAMETER_MAP[verifyType]) === null || _PARAMETER_MAP$verify3 === void 0 ? void 0 : _PARAMETER_MAP$verify3.unit);
+                  })
+                });
+              }
+            }
+          }; // 大小校验
+          checkItem({
+            type: E_VerifyType.SIZE,
+            range: size
+          }, file.size);
+          // 图片或视频才能使用以下校验
+          if (!((!!width || !!height || !!duration || !!DAR && (DAR === null || DAR === void 0 ? void 0 : DAR[0]) > 0 && (DAR === null || DAR === void 0 ? void 0 : DAR[1]) > 0) && ['image', 'video'].includes(type))) {
+            _context.next = 21;
+            break;
+          }
+          if (!(type === 'image')) {
+            _context.next = 14;
+            break;
+          }
+          _context.next = 11;
+          return getImgInfo(file);
+        case 11:
+          _context.t0 = _context.sent;
+          _context.next = 17;
+          break;
+        case 14:
+          _context.next = 16;
+          return getVideoInfo(file);
+        case 16:
+          _context.t0 = _context.sent;
+        case 17:
+          _ref2 = _context.t0;
+          err = _ref2.error;
+          infoRes = _ref2.data;
+          if (!err && res) {
+            // 宽度校验
+            checkItem({
+              type: E_VerifyType.WIDTH,
+              range: width
+            }, infoRes.width);
+            // 高度校验
+            checkItem({
+              type: E_VerifyType.HEIGHT,
+              range: height
+            }, infoRes.height);
+            if (type === 'video') {
+              // 时长校验
+              checkItem({
+                type: E_VerifyType.DURATION,
+                range: duration
+              }, infoRes.duration);
+            }
+            // 宽高比校验
+            if (!!DAR) {
+              res.fileInfo = _objectSpread(_objectSpread({}, res.fileInfo), {}, {
+                width: infoRes.width,
+                height: infoRes.height
+              });
+              if (!(infoRes.width / DAR[0] === infoRes.height / DAR[1])) {
+                res.isPassed = false;
+                (_res$errList4 = res.errList) === null || _res$errList4 === void 0 || _res$errList4.push({
+                  target: E_VerifyType.DAR,
+                  messages: ["".concat(fileType).concat(file.name, "\u5BBD\u9AD8\u6BD4\u4E0D\u6EE1\u8DB3\u4E3A: ").concat(DAR[0], ":").concat(DAR[1])]
+                });
+              }
+            }
+          }
+        case 21:
+          return _context.abrupt("return", res);
+        case 22:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function checkFile(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();

package/dist/esm/McUpload/tools/uploadTools.d.ts

@@ -0,0 +1,5 @@
+export declare function measureExecutionTime(fn: (...args: any[]) => any): (...args: any) => Promise<{
+    duration: number;
+    result: any;
+}>;
+export declare const transformNumber: (num: any) => number;