linkmore-design 1.1.23 → 1.1.25-beta.1

package/lib/LmUpload/body/UploadPicture.js

@@ -1,28 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _linkmoreDesign = require("linkmore-design");
-
 var _Progress = _interopRequireDefault(require("./Progress"));
-
 // 预设卡片上传样式
 var uploadPicture = function uploadPicture(_ref) {
   var instance = _ref.instance;
   var size = instance.size,
-      getUploadStatus = instance.getUploadStatus; // 是否上传中状态
-
+    getUploadStatus = instance.getUploadStatus;
+  // 是否上传中状态
   var isUploading = _react.default.useMemo(function () {
     return getUploadStatus().uploading;
   }, [getUploadStatus]);
-
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "lm_upload_core_picture",
     style: {
@@ -44,7 +38,5 @@ var uploadPicture = function uploadPicture(_ref) {
     instance: instance
   })));
 };
-
 var _default = /*#__PURE__*/_react.default.memo(uploadPicture);
-
 exports.default = _default;

package/lib/LmUpload/components/Crop.js

@@ -1,22 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _linkmoreDesign = require("linkmore-design");
-
 var Crop = function Crop(_ref) {
   var instance = _ref.instance;
   var enableCrop = instance.enableCrop,
-      state = instance.state,
-      cropConfig = instance.cropConfig,
-      checkOver = instance.checkOver;
+    state = instance.state,
+    cropConfig = instance.cropConfig,
+    checkOver = instance.checkOver;
   if (!enableCrop) return null;
   var config = Object.assign(Object.assign({}, cropConfig), {
     file: state.cropFile,
@@ -29,7 +25,5 @@ var Crop = function Crop(_ref) {
   });
   return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.CropImg, Object.assign({}, config));
 };
-
 var _default = /*#__PURE__*/_react.default.memo(Crop);
-
 exports.default = _default;

package/lib/LmUpload/components/Preview.js

@@ -1,35 +1,30 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _linkmoreDesign = require("linkmore-design");
-
 var Preview = function Preview(_ref) {
   var instance = _ref.instance;
   var enabledPreview = instance.enabledPreview,
-      state = instance.state,
-      dispatch = instance.dispatch,
-      getFileList = instance.getFileList;
-  if (!enabledPreview) return null; // 与展示顺序保持一致
-
+    state = instance.state,
+    dispatch = instance.dispatch,
+    getFileList = instance.getFileList;
+  if (!enabledPreview) return null;
+  // 与展示顺序保持一致
   var fileList = (0, _react.useMemo)(function () {
     var _a;
-
     return (_a = getFileList()) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) {
       return a.seq - b.seq;
     });
   }, [getFileList]);
   var config = (0, _react.useMemo)(function () {
     var _state$preview = state.preview,
-        index = _state$preview.index,
-        visible = _state$preview.visible;
+      index = _state$preview.index,
+      visible = _state$preview.visible;
     return {
       urlList: fileList === null || fileList === void 0 ? void 0 : fileList.map(function (_ref2) {
         var url = _ref2.url;
@@ -49,7 +44,5 @@ var Preview = function Preview(_ref) {
   }, [fileList, state.preview]);
   return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.ImageViewer, Object.assign({}, config));
 };
-
 var _default = /*#__PURE__*/_react.default.memo(Preview);
-
 exports.default = _default;

package/lib/LmUpload/fns/index.js

@@ -1,29 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _react = require("react");
-
 var _linkmoreDesign = require("linkmore-design");
-
 var _aliOss = _interopRequireDefault(require("ali-oss"));
-
 var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
       resolve(value);
     });
   }
-
   return new (P || (P = Promise))(function (resolve, reject) {
     function fulfilled(value) {
       try {
@@ -32,7 +24,6 @@ var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P
         reject(e);
       }
     }
-
     function rejected(value) {
       try {
         step(generator["throw"](value));
@@ -40,32 +31,28 @@ var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P
         reject(e);
       }
     }
-
     function step(result) {
       result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
     }
-
     step((generator = generator.apply(thisArg, _arguments || [])).next());
   });
 };
-
 var useCoreOptions = function useCoreOptions(_ref) {
   var state = _ref.state,
-      dispatch = _ref.dispatch,
-      props = _ref.props;
+    dispatch = _ref.dispatch,
+    props = _ref.props;
   var uid = props.uid,
-      onChange = props.onChange,
-      type = props.type,
-      fileSize = props.fileSize,
-      fileSizeType = props.fileSizeType,
-      fileAreaSize = props.fileAreaSize,
-      enabledOss = props.enabledOss,
-      enableCrop = props.enableCrop,
-      ossConfig = props.ossConfig;
+    onChange = props.onChange,
+    type = props.type,
+    fileSize = props.fileSize,
+    fileSizeType = props.fileSizeType,
+    fileAreaSize = props.fileAreaSize,
+    enabledOss = props.enabledOss,
+    enableCrop = props.enableCrop,
+    ossConfig = props.ossConfig;
   /* 获取两个对象是否存在指定值相等
    * 取用户定义的列字段，如果读取不到则取'fileName'对比
    */
-
   var getHasEqual = (0, _react.useCallback)(function (obj1, obj2) {
     var extend = [uid, 'fileName'];
     var flag = false;
@@ -75,8 +62,8 @@ var useCoreOptions = function useCoreOptions(_ref) {
       }
     });
     return flag;
-  }, [uid]); // 从对象中读取存在的指定属性
-
+  }, [uid]);
+  // 从对象中读取存在的指定属性
   var getFileHasValue = (0, _react.useCallback)(function (obj) {
     if (!obj) return '';
     var extend = [uid, 'fileName'];
@@ -85,49 +72,45 @@ var useCoreOptions = function useCoreOptions(_ref) {
       if (!val && obj[v]) val = obj[v];
     });
     return val;
-  }, [uid]); // 获取当前的文件列表
-
+  }, [uid]);
+  // 获取当前的文件列表
   var getFileList = (0, _react.useCallback)(function () {
     return props.fileList || state.fileList;
-  }, [props.fileList, state.fileList]); // 获取上传状态
-
+  }, [props.fileList, state.fileList]);
+  // 获取上传状态
   var getUploadStatus = (0, _react.useCallback)(function () {
     var uploading = typeof state.percent === 'number';
     return {
       uploading: uploading
     };
-  }, [state.percent]); // 获取文件字段值
-
+  }, [state.percent]);
+  // 获取文件字段值
   var getFileFields = (0, _react.useCallback)(function (fileParams) {
     var fileNames = props.fileNames;
     var obj = {};
     Object.entries(fileNames).forEach(function (v) {
       var itemKey = v[0];
       var itemValue = v[1];
-
       if (fileParams[itemKey]) {
         obj[itemKey] = fileParams[itemValue];
       }
     });
     return obj;
-  }, [props]); // 获取是否达到最大上传数量
-
+  }, [props]);
+  // 获取是否达到最大上传数量
   var getIsMaxCount = (0, _react.useCallback)(function () {
     var maxCount = props.maxCount,
-        limit = props.limit;
+      limit = props.limit;
     var flag = false;
     var num = maxCount || limit;
-
     if (num && typeof num === 'number') {
       flag = !(getFileList().length < num);
     }
-
     return flag;
-  }, [getFileList, props]); // 上传成功事件: File, fileParams
-
+  }, [getFileList, props]);
+  // 上传成功事件: File, fileParams
   var uploadSuccess = (0, _react.useCallback)(function (file, params, ossCallBack) {
     var _a;
-
     var fileList = [params].concat((0, _toConsumableArray2.default)(getFileList()));
     dispatch({
       type: 'changeFileList',
@@ -136,8 +119,8 @@ var useCoreOptions = function useCoreOptions(_ref) {
     dispatch({
       type: 'changePercent',
       percent: null
-    }); // 上传事件：抛出 file: 文件  filelist: 文件列表 event: 上传进度信息
-
+    });
+    // 上传事件：抛出 file: 文件  filelist: 文件列表 event: 上传进度信息
     (_a = props.onSuccess) === null || _a === void 0 ? void 0 : _a.call(props, {
       file: file,
       fileList: fileList
@@ -147,15 +130,13 @@ var useCoreOptions = function useCoreOptions(_ref) {
       fileList: fileList
     });
     ossCallBack === null || ossCallBack === void 0 ? void 0 : ossCallBack(params);
-  }, [getFileList, props.onSuccess, onChange, dispatch]); // 上传进度事件
-
+  }, [getFileList, props.onSuccess, onChange, dispatch]);
+  // 上传进度事件
   var uploadProgress = (0, _react.useCallback)(function (file, _ref2) {
     var progress = _ref2.progress,
-        checkPoint = _ref2.checkPoint,
-        result = _ref2.result;
-
+      checkPoint = _ref2.checkPoint,
+      result = _ref2.result;
     var _a;
-
     var params = {
       file: file,
       fileList: getFileList(),
@@ -172,11 +153,11 @@ var useCoreOptions = function useCoreOptions(_ref) {
       type: 'changePercent',
       percent: Number((progress * 100).toFixed(2))
     });
-  }, [getFileList, props.onProgress, onChange, dispatch]); // 上传失败事件
-
+  }, [getFileList, props.onProgress, onChange, dispatch]);
+  // 上传失败事件
   var uploadError = (0, _react.useCallback)(function (_ref3) {
     var error = _ref3.error,
-        file = _ref3.file;
+      file = _ref3.file;
     console.log('上传报错:', error);
     props.onError ? props.onError({
       error: error,
@@ -190,12 +171,11 @@ var useCoreOptions = function useCoreOptions(_ref) {
         status: 'error'
       }
     });
-  }, [props.onError, getFileList, onChange]); // 上传至ali-oss
-
+  }, [props.onError, getFileList, onChange]);
+  // 上传至ali-oss
   var uploadOss = (0, _react.useCallback)(function (file) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
       var _ossConfig, _ossConfig$dir, filePath, shortlink, _ossConfig$region, region, accessKeyId, accessKeySecret, stsToken, _ossConfig$bucket, bucket, ossCallBack, client, timestamp, fileName, pathName, url, params;
-
       return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -225,9 +205,7 @@ var useCoreOptions = function useCoreOptions(_ref) {
                 },
                 parallel: 4,
                 partSize: 1024 * 1024 // 分片大小
-
               });
-
             case 9:
               params = props.fileConfig({
                 file: file,
@@ -240,7 +218,6 @@ var useCoreOptions = function useCoreOptions(_ref) {
               uploadSuccess(file, params, ossCallBack);
               _context.next = 16;
               break;
-
             case 13:
               _context.prev = 13;
               _context.t0 = _context["catch"](0);
@@ -248,7 +225,6 @@ var useCoreOptions = function useCoreOptions(_ref) {
                 error: _context.t0,
                 file: file
               });
-
             case 16:
             case "end":
               return _context.stop();
@@ -256,23 +232,22 @@ var useCoreOptions = function useCoreOptions(_ref) {
         }
       }, _callee, null, [[0, 13]]);
     }));
-  }, [ossConfig, uploadProgress, props.fileConfig, uploadSuccess, uploadError]); // 自定义使用外部上传
-
+  }, [ossConfig, uploadProgress, props.fileConfig, uploadSuccess, uploadError]);
+  // 自定义使用外部上传
   var customUpload = (0, _react.useCallback)(function (file) {
     var _a;
-
     (_a = props.fileUpload) === null || _a === void 0 ? void 0 : _a.call(props, {
       file: file,
       value: getFileList(),
       onChange: uploadSuccess
     });
-  }, [props.fileUpload, getFileList, uploadSuccess]); // 调用上传方法: 执行 uploadOss && customUpload事件
-
+  }, [props.fileUpload, getFileList, uploadSuccess]);
+  // 调用上传方法: 执行 uploadOss && customUpload事件
   var uploadFile = (0, _react.useCallback)(function (file) {
     enabledOss && uploadOss(file);
     customUpload(file);
-  }, [enabledOss, uploadOss, customUpload]); // 检测完成, 执行外部 `beforeUpload` 事件
-
+  }, [enabledOss, uploadOss, customUpload]);
+  // 检测完成, 执行外部 `beforeUpload` 事件
   var checkOver = (0, _react.useCallback)(function (file) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
       var res, newFile;
@@ -284,48 +259,37 @@ var useCoreOptions = function useCoreOptions(_ref) {
                 _context2.next = 3;
                 break;
               }
-
               uploadFile(file);
               return _context2.abrupt("return");
-
             case 3:
               res = props.beforeUpload(file, getFileList()); // Promise
-
               if (!(res === null || res === void 0 ? void 0 : res.then)) {
                 _context2.next = 16;
                 break;
               }
-
               _context2.prev = 5;
               _context2.next = 8;
               return res;
-
             case 8:
               newFile = _context2.sent;
               uploadFile(newFile);
               _context2.next = 15;
               break;
-
             case 12:
               _context2.prev = 12;
               _context2.t0 = _context2["catch"](5);
               console.log('上传失败!');
-
             case 15:
               return _context2.abrupt("return");
-
             case 16:
               if (res) {
                 _context2.next = 18;
                 break;
               }
-
               return _context2.abrupt("return");
-
             case 18:
               // () => true
               uploadFile(file);
-
             case 19:
             case "end":
               return _context2.stop();
@@ -333,40 +297,34 @@ var useCoreOptions = function useCoreOptions(_ref) {
         }
       }, _callee2, null, [[5, 12]]);
     }));
-  }, [props.beforeUpload, getFileList, uploadFile]); // 单个文件异步校验
-
+  }, [props.beforeUpload, getFileList, uploadFile]);
+  // 单个文件异步校验
   var fileCheckAsync = (0, _react.useCallback)(function (file) {
     return new Promise(function (resolve, reject) {
       // 文件类型校验是否通过 | 存在通配符或符合规定类型
-      var isCheckType = type.includes('*') || type.includes(file.name.replace(/.*\./, '').toLowerCase()); // 大小校验是否通过
-
+      var isCheckType = type.includes('*') || type.includes(file.name.replace(/.*\./, '').toLowerCase());
+      // 大小校验是否通过
       var isCheckSize = file.size / 1024 / (fileSizeType.toLowerCase().includes('m') ? 1024 : 1) <= fileSize;
-
       if (!isCheckType) {
         var content = type.join('、');
         reject(new Error("\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\uFF01\u4EC5\u652F\u6301".concat(content, "\u7684\u6587\u4EF6\u7C7B\u578B\uFF01")));
       }
-
       if (!isCheckSize) {
         reject(new Error("\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\uFF01\u9644\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7".concat(fileSize).concat(fileSizeType, "\uFF01")));
-      } // 是否需要校验图片宽高
-
-
+      }
+      // 是否需要校验图片宽高
       if (fileAreaSize) {
         var reader = new FileReader();
         reader.readAsDataURL(file);
-
         reader.onload = function (evt) {
           var res = evt.target.result;
           var imageObj = new Image();
           imageObj.src = res;
-
           imageObj.onload = function () {
             var maxWidth = fileAreaSize.maxWidth,
-                maxHeight = fileAreaSize.maxHeight;
+              maxHeight = fileAreaSize.maxHeight;
             var isCheckAreaSizeMaxWidth = !maxWidth || imageObj.width <= maxWidth;
             var isCheckAreaSizeMaxHeight = !maxHeight || imageObj.height <= maxHeight;
-
             if (!isCheckAreaSizeMaxWidth || !isCheckAreaSizeMaxHeight) {
               reject(new Error("\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\uFF01\u56FE\u7247\u5C3A\u5BF8\u4E0D\u7B26\u5408"));
             } else {
@@ -378,8 +336,8 @@ var useCoreOptions = function useCoreOptions(_ref) {
         resolve(file);
       }
     });
-  }, [type, fileSize, fileSizeType, fileAreaSize]); // 文件循环校验，返回校验后的文件数组
-
+  }, [type, fileSize, fileSizeType, fileAreaSize]);
+  // 文件循环校验，返回校验后的文件数组
   var filesLoopCheck = (0, _react.useCallback)(function (files) {
     return Promise.all(files.map(fileCheckAsync));
   }, []);
@@ -391,7 +349,6 @@ var useCoreOptions = function useCoreOptions(_ref) {
    * => uploadProgress =>  uploadSuccess || uploadError
    * => Props.onChange && (Props.onSuccess || Props.onError)
    */
-
   var beforeUpload = (0, _react.useCallback)(function (e) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3() {
       var files, res;
@@ -403,10 +360,8 @@ var useCoreOptions = function useCoreOptions(_ref) {
               _context3.prev = 1;
               _context3.next = 4;
               return filesLoopCheck(files);
-
             case 4:
               res = _context3.sent;
-
               // 仅单文件上传时可剪裁
               if (enableCrop) {
                 dispatch({
@@ -417,17 +372,13 @@ var useCoreOptions = function useCoreOptions(_ref) {
                 // 校验完成开始执行上传
                 res.forEach(checkOver);
               }
-
               _context3.next = 12;
               break;
-
             case 8:
               _context3.prev = 8;
               _context3.t0 = _context3["catch"](1);
               console.log('文件校验未通过！', _context3.t0.message);
-
               _linkmoreDesign.message.warning(_context3.t0.message, 1.5);
-
             case 12:
             case "end":
               return _context3.stop();
@@ -435,22 +386,19 @@ var useCoreOptions = function useCoreOptions(_ref) {
         }
       }, _callee3, null, [[1, 8]]);
     }));
-  }, [filesLoopCheck, enableCrop, checkOver]); // 删除事件
-
+  }, [filesLoopCheck, enableCrop, checkOver]);
+  // 删除事件
   var remove = (0, _react.useCallback)(function (file) {
     return __awaiter(void 0, void 0, void 0, /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee4() {
       var _a, _b, res, fileList;
-
       return (0, _regeneratorRuntime2.default)().wrap(function _callee4$(_context4) {
         while (1) {
           switch (_context4.prev = _context4.next) {
             case 0:
               _context4.next = 2;
               return (_a = props.onRemove) === null || _a === void 0 ? void 0 : _a.call(props, file);
-
             case 2:
               res = _context4.sent;
-
               if (res) {
                 fileList = (_b = getFileList()) === null || _b === void 0 ? void 0 : _b.filter(function (v) {
                   return !getHasEqual(v, file);
@@ -464,7 +412,6 @@ var useCoreOptions = function useCoreOptions(_ref) {
                   fileList: fileList
                 });
               }
-
             case 4:
             case "end":
               return _context4.stop();
@@ -472,23 +419,20 @@ var useCoreOptions = function useCoreOptions(_ref) {
         }
       }, _callee4);
     }));
-  }, [props.onRemove, getFileList, onChange, dispatch, getHasEqual]); // 点击文件链接或预览图标时的回调
-
+  }, [props.onRemove, getFileList, onChange, dispatch, getHasEqual]);
+  // 点击文件链接或预览图标时的回调
   var preview = (0, _react.useCallback)(function (file) {
     var _a;
-
     (_a = props.onPreview) === null || _a === void 0 ? void 0 : _a.call(props, file);
-  }, [props.onPreview]); // 点击下载文件时的回调
-
+  }, [props.onPreview]);
+  // 点击下载文件时的回调
   var download = (0, _react.useCallback)(function (file) {
     var _a;
-
     (_a = props.onDownload) === null || _a === void 0 ? void 0 : _a.call(props, file);
-  }, [props.onDownload]); // 拖拽移动事件
-
+  }, [props.onDownload]);
+  // 拖拽移动事件
   var move = (0, _react.useCallback)(function (active, over, fileList) {
     var _a;
-
     (_a = props.onMove) === null || _a === void 0 ? void 0 : _a.call(props, active, over, fileList);
     onChange === null || onChange === void 0 ? void 0 : onChange({
       file: active,
@@ -523,6 +467,5 @@ var useCoreOptions = function useCoreOptions(_ref) {
     RefMethods: RefMethods
   };
 };
-
 var _default = useCoreOptions;
 exports.default = _default;

package/lib/LmUpload/index.js

@@ -1,13 +1,10 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _LmUpload = _interopRequireDefault(require("./LmUpload"));
-
 var _default = _LmUpload.default;
 exports.default = _default;

package/lib/LmUpload/style/index.css

@@ -122,6 +122,7 @@
   gap: 8px;
 }
 .lm_upload_wrapper .lm_upload_core {
+  position: relative;
   display: inline-flex;
   vertical-align: middle;
 }
@@ -136,6 +137,12 @@
   cursor: pointer;
   transition: all 0.3s;
 }
+.lm_upload_wrapper .lm_upload_core .lm_upload_core_picture::after {
+  position: absolute;
+  background-color: var(--disabled-bg-color);
+  cursor: not-allowed;
+  inset: 0;
+}
 .lm_upload_wrapper .lm_upload_core .lm_upload_core_picture:hover {
   border-color: var(--primary-color);
 }
@@ -151,6 +158,16 @@
   margin-top: var(--gap);
   color: var(--color-45);
 }
+.lm_upload_wrapper .lm_upload_core.disabled .lm_upload_core_picture {
+  border-color: var(--disabled-border-color);
+}
+.lm_upload_wrapper .lm_upload_core.disabled .lm_upload_core_picture::after {
+  content: '';
+}
+.lm_upload_wrapper .lm_upload_core.disabled .lm_upload_core_picture .lm_upload_core_picture_action .action_plus,
+.lm_upload_wrapper .lm_upload_core.disabled .lm_upload_core_picture .lm_upload_core_picture_action .tip {
+  color: var(--disabled-font-color);
+}
 .lm_upload_wrapper .lm_upload_progress {
   width: 100%;
   height: 2px;

package/lib/LmUpload/style/variables.css

@@ -122,6 +122,7 @@
   gap: 8px;
 }
 .lm_upload_wrapper .lm_upload_core {
+  position: relative;
   display: inline-flex;
   vertical-align: middle;
 }
@@ -136,6 +137,12 @@
   cursor: pointer;
   transition: all 0.3s;
 }
+.lm_upload_wrapper .lm_upload_core .lm_upload_core_picture::after {
+  position: absolute;
+  background-color: var(--disabled-bg-color);
+  cursor: not-allowed;
+  inset: 0;
+}
 .lm_upload_wrapper .lm_upload_core .lm_upload_core_picture:hover {
   border-color: var(--primary-color);
 }
@@ -151,6 +158,16 @@
   margin-top: var(--gap);
   color: var(--color-45);
 }
+.lm_upload_wrapper .lm_upload_core.disabled .lm_upload_core_picture {
+  border-color: var(--disabled-border-color);
+}
+.lm_upload_wrapper .lm_upload_core.disabled .lm_upload_core_picture::after {
+  content: '';
+}
+.lm_upload_wrapper .lm_upload_core.disabled .lm_upload_core_picture .lm_upload_core_picture_action .action_plus,
+.lm_upload_wrapper .lm_upload_core.disabled .lm_upload_core_picture .lm_upload_core_picture_action .tip {
+  color: var(--disabled-font-color);
+}
 .lm_upload_wrapper .lm_upload_progress {
   width: 100%;
   height: 2px;