@cmstops/pro-compo 0.3.48 → 0.3.50

package/lib/selectResourceModal/components/ListCardWrapper/index.js

@@ -1,5 +1,6 @@
 "use strict";
 var vue = require("vue");
+var index = require("../../../thumbCard/index.js");
 const _hoisted_1 = /* @__PURE__ */ vue.createElementVNode("div", { class: "mask" }, null, -1);
 const _hoisted_2 = { class: "card-alias" };
 const _hoisted_3 = {
@@ -14,23 +15,53 @@ const _sfc_main = vue.defineComponent({
   __name: "index",
   props: {
     item: {},
+    extraKeys: {},
     selectKeys: {},
     disable: { type: Boolean }
   },
-  emits: ["select"],
+  emits: ["select", "select-one", "options"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
+    const filterOptions = vue.inject("filterOptions");
     const selectedOrder = vue.computed(() => {
       var _a;
       const result = {};
-      (_a = props.selectKeys) == null ? void 0 : _a.forEach((key, index) => {
-        result[key] = index + 1;
+      (_a = props.selectKeys) == null ? void 0 : _a.forEach((key, index2) => {
+        result[key] = index2 + 1;
       });
       return result;
     });
+    const canIUse = vue.computed(() => {
+      if (props.disable)
+        return false;
+      if (filterOptions == null ? void 0 : filterOptions.value) {
+        const { mediaType, mediaTypeStrict } = filterOptions.value;
+        if (mediaTypeStrict)
+          return props.item.catalog === mediaType;
+      }
+      if (props.item.progress >= 0)
+        return false;
+      return true;
+    });
+    const handlersKey = vue.computed(() => {
+      var _a;
+      if (props.item.status === 2) {
+        return [
+          { label: "\u91CD\u65B0\u4E0A\u4F20", key: "reupload" },
+          { label: "\u5220\u9664\u8BB0\u5F55", key: "remove" }
+        ];
+      }
+      if (props.item.status === 3) {
+        return [{ label: "\u91CD\u65B0\u8F6C\u7801", key: "retranscode" }];
+      }
+      if (((_a = props.selectKeys) == null ? void 0 : _a.length) > 0 || props.disable || !canIUse.value) {
+        return [];
+      }
+      return [{ label: "\u9009\u7528", key: "select-one" }].concat(props.extraKeys || []);
+    });
     function handleCheck() {
-      if (props.disable && !selectedOrder.value[props.item.id])
+      if (!canIUse.value && !selectedOrder.value[props.item.id])
         return;
       emits("select", props.item);
     }
@@ -40,9 +71,20 @@ const _sfc_main = vue.defineComponent({
         onClick: vue.withModifiers(handleCheck, ["stop"])
       }, [
         vue.createElementVNode("div", {
-          class: vue.normalizeClass(["card-wrapper", { disable: _ctx.disable, active: selectedOrder.value[_ctx.item.id] }])
+          class: vue.normalizeClass(["card-wrapper", { disable: !canIUse.value, active: selectedOrder.value[_ctx.item.id] }])
         }, [
-          vue.renderSlot(_ctx.$slots, "default"),
+          vue.createVNode(vue.unref(index), {
+            url: _ctx.item.url,
+            thumb: _ctx.item.thumb || _ctx.item.url,
+            catalog: _ctx.item.catalog,
+            meta: _ctx.item,
+            options: {
+              fit: _ctx.item.catalog === "image" ? "contain" : "cover"
+            },
+            "use-mask": true,
+            "handlers-key": handlersKey.value,
+            onHandle: _cache[0] || (_cache[0] = (e) => emits("options", e))
+          }, null, 8, ["url", "thumb", "catalog", "meta", "options", "handlers-key"]),
           _hoisted_1
         ], 2),
         vue.createElementVNode("div", _hoisted_2, vue.toDisplayString(_ctx.item.alias), 1),
@@ -50,7 +92,7 @@ const _sfc_main = vue.defineComponent({
           class: "check-box-wrapper",
           onClick: vue.withModifiers(handleCheck, ["stop"])
         }, [
-          selectedOrder.value[_ctx.item.id] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, vue.toDisplayString(selectedOrder.value[_ctx.item.id]), 1)) : !_ctx.disable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4)) : vue.createCommentVNode("v-if", true)
+          selectedOrder.value[_ctx.item.id] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, vue.toDisplayString(selectedOrder.value[_ctx.item.id]), 1)) : canIUse.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4)) : vue.createCommentVNode("v-if", true)
         ])
       ]);
     };

package/lib/selectResourceModal/components/ListContent/index.js

@@ -1,8 +1,7 @@
 "use strict";
 var vue = require("vue");
 var webVue = require("@arco-design/web-vue");
-var index$2 = require("../../../emptyData/index.js");
-var index$1 = require("../../../thumbCard/index.js");
+var index$1 = require("../../../emptyData/index.js");
 var index = require("../ListCardWrapper/index.js");
 const _hoisted_1 = { class: "card-list-wrapper" };
 const _sfc_main = vue.defineComponent({
@@ -15,19 +14,9 @@ const _sfc_main = vue.defineComponent({
   },
   emits: ["select", "select-one"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
     const emits = __emit;
-    const handlersKey = vue.computed(() => {
-      var _a;
-      if (((_a = props.selectKeys) == null ? void 0 : _a.length) > 0 || props.disable)
-        return [];
-      return [{ label: "\u9009\u7528", key: "select" }];
-    });
-    function handleOption(params) {
-      const { key, item } = params;
-      if (key === "select") {
-        emits("select-one", item);
-      }
+    function handleOptions(e) {
+      emits(e.key, e.item);
     }
     return (_ctx, _cache) => {
       var _a, _b;
@@ -38,30 +27,15 @@ const _sfc_main = vue.defineComponent({
             item,
             "select-keys": _ctx.selectKeys,
             disable: _ctx.disable,
-            onSelect: () => emits("select", item)
-          }, {
-            default: vue.withCtx(() => [
-              vue.createVNode(vue.unref(index$1), {
-                url: item.url,
-                thumb: item.thumb,
-                catalog: item.catalog,
-                meta: item,
-                "use-mask": true,
-                "handlers-key": handlersKey.value,
-                options: {
-                  fit: item.catalog === "image" ? "contain" : "cover"
-                },
-                onHandle: handleOption
-              }, null, 8, ["url", "thumb", "catalog", "meta", "handlers-key", "options"])
-            ]),
-            _: 2
-          }, 1032, ["item", "select-keys", "disable", "onSelect"]);
+            onSelect: () => emits("select", item),
+            onOptions: handleOptions
+          }, null, 8, ["item", "select-keys", "disable", "onSelect"]);
         }), 128)),
         vue.createCommentVNode(" \u7A7A\u72B6\u6001 "),
         ((_a = _ctx.list) == null ? void 0 : _a.length) === 0 && _ctx.loading ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Spin), {
           key: 0,
           loading: true
-        })) : !((_b = _ctx.list) == null ? void 0 : _b.length) ? (vue.openBlock(), vue.createBlock(vue.unref(index$2), {
+        })) : !((_b = _ctx.list) == null ? void 0 : _b.length) ? (vue.openBlock(), vue.createBlock(vue.unref(index$1), {
           key: 1,
           type: "empty",
           customTip: "\u6682\u65E0\u6570\u636E"

package/lib/selectResourceModal/components/ListContentLocal/index.js

@@ -2,7 +2,6 @@
 var vue = require("vue");
 var Upload = require("./components/Upload.js");
 var useUpload = require("../../../hooks/useUpload.js");
-var index$1 = require("../../../thumbCard/index.js");
 var index = require("../ListCardWrapper/index.js");
 const _hoisted_1 = { class: "upload-list-wrapper" };
 const _hoisted_2 = { class: "list-upload" };
@@ -18,9 +17,8 @@ const _sfc_main = vue.defineComponent({
     selectKeys: {},
     disable: { type: Boolean }
   },
-  emits: ["select", "select-one"],
+  emits: ["select", "select-one", "reupload"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
     const emits = __emit;
     const userInfo = vue.inject("userInfo");
     const baseAPI = vue.inject("baseAPI");
@@ -28,19 +26,7 @@ const _sfc_main = vue.defineComponent({
       var _a;
       return (_a = userInfo == null ? void 0 : userInfo.value) == null ? void 0 : _a.repository_id;
     });
-    const handlersKey = vue.computed(() => {
-      var _a;
-      if (((_a = props.selectKeys) == null ? void 0 : _a.length) > 0 || props.disable)
-        return [];
-      return [{ label: "\u9009\u7528", key: "select" }];
-    });
-    function handleOption(params) {
-      const { key, item } = params;
-      if (key === "select") {
-        emits("select-one", item);
-      }
-    }
-    const { list, uploadFile, transcodingFile } = useUpload["default"]();
+    const { list, uploadFile, transcodingFile, removeRecord } = useUpload["default"]();
     function handleChange(file) {
       if (!baseAPI || !repoId.value)
         return;
@@ -52,6 +38,30 @@ const _sfc_main = vue.defineComponent({
         (media) => transcodingFile(baseAPI, media)
       );
     }
+    function handleOptions(e) {
+      var _a, _b;
+      if (e.key === "reupload") {
+        if (!e.item || !((_a = e.item) == null ? void 0 : _a.originFile))
+          return;
+        e.item.originFile.sig_id = e.item.sig_id;
+        e.item.originFile.id = e.item.id;
+        handleChange({ file: e.item.originFile });
+        return;
+      }
+      if (e.key === "retranscode") {
+        if (!baseAPI || !((_b = e.item) == null ? void 0 : _b.mediaFile))
+          return;
+        transcodingFile(baseAPI, e.item.mediaFile);
+        return;
+      }
+      if (e.key === "remove") {
+        if (!e.item)
+          return;
+        removeRecord(e.item);
+        return;
+      }
+      emits(e.key, e.item);
+    }
     return (_ctx, _cache) => {
       var _a, _b;
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
@@ -69,24 +79,9 @@ const _sfc_main = vue.defineComponent({
                 item,
                 "select-keys": _ctx.selectKeys,
                 disable: _ctx.disable,
-                onSelect: () => emits("select", item)
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(index$1), {
-                    url: item.url,
-                    thumb: item.thumb || item.url,
-                    catalog: item.catalog,
-                    meta: item,
-                    options: {
-                      fit: item.catalog === "image" ? "contain" : "cover"
-                    },
-                    "use-mask": true,
-                    "handlers-key": handlersKey.value,
-                    onHandle: handleOption
-                  }, null, 8, ["url", "thumb", "catalog", "meta", "options", "handlers-key"])
-                ]),
-                _: 2
-              }, 1032, ["item", "select-keys", "disable", "onSelect"]);
+                onSelect: () => emits("select", item),
+                onOptions: handleOptions
+              }, null, 8, ["item", "select-keys", "disable", "onSelect"]);
             }), 128))
           ])
         ])

package/lib/selectResourceModal/components/ListFilter/index.js

@@ -75,8 +75,18 @@ const _sfc_main = vue.defineComponent({
       set(val) {
         if (val) {
           const [start, end] = val;
-          filter.value.created_begin = +new Date(start) / 1e3;
-          filter.value.created_end = +new Date(end) / 1e3;
+          const created_begin = new Date(start);
+          const created_end = new Date(end);
+          created_begin.setHours(0, 0, 0, 0);
+          created_end.setHours(23, 59, 59, 0);
+          filter.value.created_begin = parseInt(
+            (created_begin.getTime() / 1e3).toFixed(0),
+            10
+          );
+          filter.value.created_end = parseInt(
+            (created_end.getTime() / 1e3).toFixed(0),
+            10
+          );
         } else {
           filter.value.created_begin = "";
           filter.value.created_end = "";
@@ -104,9 +114,7 @@ const _sfc_main = vue.defineComponent({
     vue.watch(
       () => searchType.value,
       () => {
-        filter.value.sf = "";
-        filter.value.precise_keyword = "";
-        filter.value.keyword = "";
+        searchInput.value = filter.value.keyword || filter.value.precise_keyword;
       }
     );
     const isEmpty = vue.computed(() => {
@@ -136,17 +144,15 @@ const _sfc_main = vue.defineComponent({
         var _a;
         if ((_a = props.filterOptions) == null ? void 0 : _a.mediaType) {
           filter.value.catalog = props.filterOptions.mediaType;
+          if (props.filterOptions.mediaTypeStrict) {
+            originFilter.catalog = props.filterOptions.mediaType;
+          }
         }
       },
-      { immediate: true }
+      { immediate: true, deep: true }
     );
     vue.onMounted(() => {
-      var _a;
       load();
-      if (((_a = props.filterOptions) == null ? void 0 : _a.mediaType) && !props.filterOptions.mediaTypeStrict) {
-        filter.value.catalog = props.filterOptions.mediaType;
-        originFilter.catalog = props.filterOptions.mediaType;
-      }
     });
     __expose({
       resetFilter: handleReset

package/lib/selectResourceModal/style/index.css

@@ -135,6 +135,8 @@
 .card-wrapper-image {
   position: relative;
   overflow: hidden;
+  user-select: none;
+  -webkit-user-drag: none;
 }
 .card-wrapper-image .card-wrapper {
   position: relative;
@@ -143,9 +145,13 @@
   transition: all 0.3s ease-in-out;
   aspect-ratio: 4 / 3;
 }
-.card-wrapper-image .card-wrapper.disable:not(.active) {
+.card-wrapper-image .card-wrapper.disable:not(.active) .thumb-image {
+  cursor: not-allowed;
   opacity: 0.4;
 }
+.card-wrapper-image .card-wrapper.disable:not(.active) .thumb-upload-loading {
+  cursor: not-allowed;
+}
 .card-wrapper-image .card-wrapper .mask {
   position: absolute;
   top: 0;

package/lib/selectResourceModal/style/listCardWrapper.less

@@ -1,6 +1,8 @@
 .card-wrapper-image {
   position: relative;
   overflow: hidden;
+  user-select: none;
+  -webkit-user-drag: none;
 
   .card-wrapper {
     position: relative;
@@ -11,7 +13,15 @@
     aspect-ratio: 4 / 3;
 
     &.disable:not(.active) {
-      opacity: 0.4;
+      // disabled 下禁用
+      .thumb-image {
+        cursor: not-allowed;
+        opacity: 0.4;
+      }
+
+      .thumb-upload-loading {
+        cursor: not-allowed;
+      }
     }
 
     .mask {

package/lib/thumbCard/component.js

@@ -4,21 +4,13 @@ var vueCmstopIcons = require("@arco-iconbox/vue-cmstop-icons");
 var webVue = require("@arco-design/web-vue");
 var magic = require("./assets/magic.js");
 var config = require("../config.js");
-var index = require("../utils/index.js");
+var index$1 = require("../utils/index.js");
+var index = require("./components/ThumbUploading/index.js");
 const _hoisted_1 = {
-  key: 0,
-  class: "thumb-upload-loading"
-};
-const _hoisted_2 = {
-  key: 0,
-  class: "thumb-upload-text"
-};
-const _hoisted_3 = { class: "thumb-handler-list" };
-const _hoisted_4 = ["onClick"];
-const _hoisted_5 = {
   key: 2,
   class: "thumb-select-tag"
 };
+const _hoisted_2 = ["onClick"];
 const _sfc_main = vue.defineComponent({
   ...{ name: "thumbCard" },
   __name: "component",
@@ -30,7 +22,8 @@ const _sfc_main = vue.defineComponent({
     options: {},
     meta: {},
     catalog: {},
-    handlersKey: {}
+    handlersKey: {},
+    handlersAlways: { type: Boolean }
   },
   emits: ["handle", "edit"],
   setup(__props, { emit: __emit }) {
@@ -62,6 +55,13 @@ const _sfc_main = vue.defineComponent({
       }
       return list;
     });
+    const thumbHandlerClass = vue.computed(() => {
+      const list = [];
+      if (props.handlersAlways) {
+        list.push("thumb-handler-always");
+      }
+      return list;
+    });
     const aImageAttr = vue.computed(() => {
       return {
         fit: "contain",
@@ -75,40 +75,41 @@ const _sfc_main = vue.defineComponent({
       emits("handle", { key, item: props.meta });
     }
     return (_ctx, _cache) => {
-      var _a, _b, _c;
+      var _a;
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(["thumb-select-wrapper", classList.value]),
         style: vue.normalizeStyle(styleObject.value)
       }, [
-        isUploading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-          vue.createVNode(vue.unref(webVue.Progress), {
-            type: "circle",
-            percent: (_a = _ctx.meta) == null ? void 0 : _a.progress
-          }, null, 8, ["percent"]),
-          ((_b = _ctx.meta) == null ? void 0 : _b.isTrans) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, "\u8F6C\u7801\u4E2D...")) : vue.createCommentVNode("v-if", true)
-        ])) : _ctx.catalog && _ctx.url ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+        isUploading.value ? (vue.openBlock(), vue.createBlock(index, {
+          key: 0,
+          meta: _ctx.meta
+        }, null, 8, ["meta"])) : _ctx.catalog && _ctx.url ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
           vue.createCommentVNode(" \u6709\u7C7B\u578B\u7684\u5C01\u9762 "),
           vue.createCommentVNode(" \u56FE\u7247 "),
           _ctx.catalog ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Image), vue.mergeProps({
             key: 0,
             class: "thumb-image",
             src: realThumb.value
-          }, aImageAttr.value), null, 16, ["src"])) : vue.createCommentVNode("v-if", true),
-          vue.createCommentVNode(" \u5C55\u793A\u6A21\u5F0F "),
-          vue.createElementVNode("div", _hoisted_3, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.handlersKey, (item) => {
-              return vue.openBlock(), vue.createElementBlock("div", {
-                key: item.key,
-                class: "handler-item",
-                onClick: vue.withModifiers(() => handleOption(item.key), ["stop"])
-              }, vue.toDisplayString(item.label), 9, _hoisted_4);
-            }), 128))
-          ])
+          }, aImageAttr.value), null, 16, ["src"])) : vue.createCommentVNode("v-if", true)
         ], 64)) : vue.createCommentVNode("v-if", true),
-        ["video", "audio"].includes(_ctx.catalog) && _ctx.meta ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+        vue.createCommentVNode(" \u4E00\u4E9B\u6807\u7B7E\uFF08\u56DB\u4E2A\u89D2\uFF09 "),
+        ["video", "audio"].includes(_ctx.catalog) && _ctx.meta ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
           _ctx.catalog === "video" ? (vue.openBlock(), vue.createBlock(vue.unref(vueCmstopIcons.IconVideoTag), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(vueCmstopIcons.IconAudioTag), { key: 1 })),
-          vue.createTextVNode(" " + vue.toDisplayString(vue.unref(index.mediaTime)((_c = _ctx.meta) == null ? void 0 : _c.length)), 1)
-        ])) : vue.createCommentVNode("v-if", true)
+          vue.createTextVNode(" " + vue.toDisplayString(vue.unref(index$1.mediaTime)((_a = _ctx.meta) == null ? void 0 : _a.length)), 1)
+        ])) : vue.createCommentVNode("v-if", true),
+        vue.createCommentVNode(" \u5916\u6302\u9009\u9879 "),
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(["thumb-handler-list", thumbHandlerClass.value])
+        }, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.handlersKey, (item) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              key: item.key,
+              class: "handler-item",
+              onClick: vue.withModifiers(() => handleOption(item.key), ["stop"])
+            }, vue.toDisplayString(item.label), 9, _hoisted_2);
+          }), 128)),
+          vue.renderSlot(_ctx.$slots, "handlers")
+        ], 2)
       ], 6);
     };
   }

package/lib/thumbCard/components/ThumbUploading/index.js

@@ -0,0 +1,43 @@
+"use strict";
+var vue = require("vue");
+var webVue = require("@arco-design/web-vue");
+const _hoisted_1 = { class: "thumb-upload-loading" };
+const _sfc_main = vue.defineComponent({
+  __name: "index",
+  props: {
+    meta: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const isFaild = vue.computed(() => {
+      return [2, 3].includes(props.meta.status);
+    });
+    const isSuccess = vue.computed(() => {
+      return [0].includes(props.meta.status);
+    });
+    const textStatusClass = vue.computed(() => {
+      if (isFaild.value) {
+        return "thumb-upload-text-error";
+      }
+      if (isSuccess.value) {
+        return "thumb-upload-text-success";
+      }
+      return "";
+    });
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        !isFaild.value ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Progress), {
+          key: 0,
+          type: "circle",
+          percent: (_a = _ctx.meta) == null ? void 0 : _a.progress
+        }, null, 8, ["percent"])) : vue.createCommentVNode("v-if", true),
+        _ctx.meta.msg ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          class: vue.normalizeClass(["thumb-upload-text", textStatusClass.value])
+        }, vue.toDisplayString((_b = _ctx.meta) == null ? void 0 : _b.msg), 3)) : vue.createCommentVNode("v-if", true)
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/thumbCard/style/index.css

@@ -1,26 +1,34 @@
-.thumb-select-wrapper {
-  position: relative;
+.thumb-upload-loading {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
-  overflow: hidden;
-  border-radius: 2px;
-  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.thumb-upload-loading .arco-progress-circle-text {
+  color: #fff;
+}
+.thumb-upload-loading .thumb-upload-text {
+  color: #fff;
+}
+.thumb-upload-loading .thumb-upload-text-success {
+  color: rgb(var(--success-2));
 }
-.thumb-select-wrapper .thumb-upload-loading {
+.thumb-upload-loading .thumb-upload-text-error {
+  color: rgb(var(--danger-6));
+}
+.thumb-select-wrapper {
+  position: relative;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
-  color: #fff;
-  background-color: rgba(0, 0, 0, 0.5);
-}
-.thumb-select-wrapper .thumb-upload-loading .arco-progress-circle-text {
-  color: #fff;
+  overflow: hidden;
+  border-radius: 2px;
+  cursor: pointer;
 }
 .thumb-select-wrapper .thumb-image img {
   width: 100%;
@@ -40,6 +48,9 @@
   opacity: 0;
   transition: all 0.3s ease-in-out;
 }
+.thumb-select-wrapper .thumb-handler-list.thumb-handler-always {
+  opacity: 1 !important;
+}
 .thumb-select-wrapper .thumb-handler-list .handler-item {
   padding: 0 8px;
   color: #fff;

package/lib/thumbCard/style/index.less

@@ -1,3 +1,5 @@
+@import './thumbUploading.less';
+
 .thumb-select-wrapper {
   position: relative;
   display: flex;
@@ -10,22 +12,6 @@
   border-radius: 2px;
   cursor: pointer;
 
-  // loading 模式
-  .thumb-upload-loading {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    color: #fff;
-    background-color: rgba(0, 0, 0, 0.5);
-
-    .arco-progress-circle-text {
-      color: #fff;
-    }
-  }
-
   // 样式
   .thumb-image {
     img {
@@ -49,6 +35,10 @@
     opacity: 0;
     transition: all 0.3s ease-in-out;
 
+    &.thumb-handler-always {
+      opacity: 1 !important;
+    }
+
     .handler-item {
       padding: 0 8px;
       color: #fff;

package/lib/thumbCard/style/thumbUploading.less

@@ -0,0 +1,26 @@
+// loading 模式
+.thumb-upload-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+
+  .arco-progress-circle-text {
+    color: #fff;
+  }
+
+  .thumb-upload-text {
+    color: #fff;
+
+    &-success {
+      color: rgb(var(--success-2));
+    }
+
+    &-error {
+      color: rgb(var(--danger-6));
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmstops/pro-compo",
-  "version": "0.3.48",
+  "version": "0.3.50",
   "description": "",
   "keywords": [
     "vue",