@cmstops/pro-compo 0.3.49 → 0.3.50

package/es/docPreview/component.js

@@ -6,23 +6,22 @@ import _sfc_main$1 from "./components/PreviewIframe.js";
 import { useDocPreview, EXPIRE_TIME_OPTIONS } from "./scripts/hook.js";
 const _hoisted_1 = { class: "preview-close" };
 const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "doc-preview-share" }, null, -1);
-const _hoisted_3 = { class: "doc-preview-share" };
-const _hoisted_4 = { class: "doc-preview-share-img" };
-const _hoisted_5 = ["src"];
-const _hoisted_6 = /* @__PURE__ */ createElementVNode("div", { class: "doc-preview-share-tips" }, "\u626B\u63CF\u4E8C\u7EF4\u7801\u8BBF\u95EE", -1);
-const _hoisted_7 = { class: "doc-preview-share-header" };
-const _hoisted_8 = /* @__PURE__ */ createElementVNode("span", null, "\u9884\u89C8\u5730\u5740", -1);
-const _hoisted_9 = { class: "doc-preview-share-link" };
-const _hoisted_10 = { class: "doc-preview-share-link-value" };
-const _hoisted_11 = { class: "doc-preview-share-link-hint" };
-const _hoisted_12 = { class: "doc-preview-share-action" };
-const _hoisted_13 = /* @__PURE__ */ createElementVNode("div", { class: "doc-preview-share-img" }, [
+const _hoisted_3 = { class: "doc-preview-share-img" };
+const _hoisted_4 = ["src"];
+const _hoisted_5 = /* @__PURE__ */ createElementVNode("div", { class: "doc-preview-share-tips" }, "\u626B\u63CF\u4E8C\u7EF4\u7801\u8BBF\u95EE", -1);
+const _hoisted_6 = { class: "doc-preview-share-header" };
+const _hoisted_7 = /* @__PURE__ */ createElementVNode("span", null, "\u9884\u89C8\u5730\u5740", -1);
+const _hoisted_8 = { class: "doc-preview-share-link" };
+const _hoisted_9 = { class: "doc-preview-share-link-value" };
+const _hoisted_10 = { class: "doc-preview-share-link-hint" };
+const _hoisted_11 = { class: "doc-preview-share-action" };
+const _hoisted_12 = /* @__PURE__ */ createElementVNode("div", { class: "doc-preview-share-img" }, [
   /* @__PURE__ */ createElementVNode("div", { class: "doc-preview-share-img-hint" }, " \u6682\u65E0\u9884\u89C8 ")
 ], -1);
-const _hoisted_14 = /* @__PURE__ */ createElementVNode("div", { class: "doc-preview-share-tips" }, " \u5185\u5BB9\u6682\u65E0\u9884\u89C8\u94FE\u63A5\uFF0C\u53EF\u751F\u6210\u9884\u89C8\u94FE\u63A5 ", -1);
-const _hoisted_15 = { class: "doc-preview-share-header" };
-const _hoisted_16 = /* @__PURE__ */ createElementVNode("span", null, "\u94FE\u63A5\u6709\u6548\u65F6\u957F", -1);
-const _hoisted_17 = { class: "doc-preview-share-action" };
+const _hoisted_13 = /* @__PURE__ */ createElementVNode("div", { class: "doc-preview-share-tips" }, " \u5185\u5BB9\u6682\u65E0\u9884\u89C8\u94FE\u63A5\uFF0C\u53EF\u751F\u6210\u9884\u89C8\u94FE\u63A5 ", -1);
+const _hoisted_14 = { class: "doc-preview-share-header" };
+const _hoisted_15 = /* @__PURE__ */ createElementVNode("span", null, "\u94FE\u63A5\u6709\u6548\u65F6\u957F", -1);
+const _hoisted_16 = { class: "doc-preview-share-action" };
 const _sfc_main = defineComponent({
   ...{ name: "docPreview" },
   __name: "component",
@@ -51,7 +50,7 @@ const _sfc_main = defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "doc-preview-container",
-        onClick: _cache[6] || (_cache[6] = ($event) => emits("close"))
+        onClick: _cache[7] || (_cache[7] = ($event) => emits("close"))
       }, [
         createElementVNode("div", _hoisted_1, [
           createVNode(unref(IconClose), {
@@ -66,20 +65,24 @@ const _sfc_main = defineComponent({
         }, null, 8, ["src"]),
         createVNode(unref(Spin), { loading: unref(loading) }, {
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_3, [
+            createElementVNode("div", {
+              class: "doc-preview-share",
+              onClick: _cache[6] || (_cache[6] = withModifiers(() => {
+              }, ["stop"]))
+            }, [
               unref(shareData) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                 createCommentVNode(" \u4E8C\u7EF4\u7801 "),
-                createElementVNode("div", _hoisted_4, [
+                createElementVNode("div", _hoisted_3, [
                   createElementVNode("img", {
                     src: unref(shareData).qrCode,
                     alt: ""
-                  }, null, 8, _hoisted_5)
+                  }, null, 8, _hoisted_4)
                 ]),
                 createCommentVNode(" \u5907\u6CE8 "),
-                _hoisted_6,
+                _hoisted_5,
                 createCommentVNode(" \u94FE\u63A5\u524D\u7F6E\u64CD\u4F5C "),
-                createElementVNode("div", _hoisted_7, [
-                  _hoisted_8,
+                createElementVNode("div", _hoisted_6, [
+                  _hoisted_7,
                   createVNode(unref(Link), {
                     type: "text",
                     onClick: unref(copy)
@@ -91,12 +94,12 @@ const _sfc_main = defineComponent({
                   }, 8, ["onClick"])
                 ]),
                 createCommentVNode(" \u94FE\u63A5 "),
-                createElementVNode("div", _hoisted_9, [
-                  createElementVNode("div", _hoisted_10, toDisplayString(unref(shareData).shareUrl), 1),
-                  createElementVNode("div", _hoisted_11, " \u94FE\u63A5\u5269\u4F59\u65F6\u95F4\uFF1A" + toDisplayString(unref(intervalTime)), 1)
+                createElementVNode("div", _hoisted_8, [
+                  createElementVNode("div", _hoisted_9, toDisplayString(unref(shareData).shareUrl), 1),
+                  createElementVNode("div", _hoisted_10, " \u94FE\u63A5\u5269\u4F59\u65F6\u95F4\uFF1A" + toDisplayString(unref(intervalTime)), 1)
                 ]),
                 createCommentVNode(" \u64CD\u4F5C "),
-                createElementVNode("div", _hoisted_12, [
+                createElementVNode("div", _hoisted_11, [
                   createVNode(unref(Button), {
                     onClick: _cache[2] || (_cache[2] = ($event) => unref(cancel)())
                   }, {
@@ -116,10 +119,10 @@ const _sfc_main = defineComponent({
                   })
                 ])
               ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                _hoisted_12,
                 _hoisted_13,
-                _hoisted_14,
-                createElementVNode("div", _hoisted_15, [
-                  _hoisted_16,
+                createElementVNode("div", _hoisted_14, [
+                  _hoisted_15,
                   createVNode(unref(Select), {
                     modelValue: unref(expireTime),
                     "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isRef(expireTime) ? expireTime.value = $event : null),
@@ -138,7 +141,7 @@ const _sfc_main = defineComponent({
                     _: 1
                   }, 8, ["modelValue"])
                 ]),
-                createElementVNode("div", _hoisted_17, [
+                createElementVNode("div", _hoisted_16, [
                   createVNode(unref(Button), {
                     type: "primary",
                     onClick: _cache[5] || (_cache[5] = () => unref(generate)())

package/es/hooks/useUpload.d.ts

@@ -13,4 +13,5 @@ export default function useUpload(): {
     uploadFile: (BASE_API: string, file: any, dir: number | undefined, repoId: number, callback?: CallbackFunc | undefined) => void;
     transcodingFile: (BASE_API: string, file: any) => void;
     recordTaskStatusChange: (file: any, progress: number, isTrans?: boolean | undefined) => void;
+    removeRecord: (file: any) => void;
 };

package/es/hooks/useUpload.js

@@ -40,19 +40,28 @@ function useUpload() {
     }
     list.value = originList;
   }
+  const removeRecord = (file) => {
+    const originList = list.value;
+    const taskIndex = originList.findIndex((task) => task.id === file.id);
+    if (taskIndex !== -1) {
+      originList.splice(taskIndex, 1);
+      list.value = originList;
+    }
+  };
   const uploadFile = (BASE_API, file, dir = 0, repoId, callback) => {
     const newFile = {
-      id: generateUUID(),
+      id: file.id || generateUUID(),
       sig_id: file.sig_id || generateUUID(),
       name: file.name,
       url: "",
       size: file.size,
       isUpload: true,
-      type: file.type
+      type: file.type,
+      originFile: file
     };
     const upload = new TusUploadTask(file);
     newFile.abort = () => upload.abort();
-    recordTaskStatusChange(newFile, 0);
+    recordTaskStatusChange({ ...newFile, status: 1, msg: "\u4E0A\u4F20\u4E2D\u2026\u2026" }, 0);
     const progress = (percent, total) => {
       const progress2 = percent / total;
       recordTaskStatusChange(newFile, progress2);
@@ -82,7 +91,9 @@ function useUpload() {
       callback && callback({ ...message, sig_id: newFile.sig_id }, "success");
     }).catch((e) => {
       console.log("\u{1F525}\u{1F525}\u{1F525}\u{1F525}\u{1F525} \u4E0A\u4F20\u5931\u8D25\uFF1A", e);
-      recordTaskStatusChange({ ...newFile, status: 2, msg: "\u5931\u8D25" }, -1);
+      setTimeout(() => {
+        recordTaskStatusChange({ ...newFile, status: 2, msg: "\u4E0A\u4F20\u5931\u8D25" }, -1);
+      }, 1e3);
       callback && callback(newFile, "fail");
     });
   };
@@ -96,7 +107,7 @@ function useUpload() {
     if (idx === -1)
       return;
     const item = list.value[idx];
-    recordTaskStatusChange(item, 0, true);
+    recordTaskStatusChange({ ...item, status: 1, msg: "\u8F6C\u7801\u4E2D\u2026\u2026" }, 0, true);
     const progress = (progress2) => recordTaskStatusChange(item, progress2);
     const transing = task.start(BASE_API, progress);
     transing.then(async (res) => {
@@ -106,11 +117,17 @@ function useUpload() {
         setTimeout(() => uploadSuccess(file), 200);
       } else {
         console.log("\u{1F525}\u{1F525}\u{1F525}\u{1F525}\u{1F525} \u8F6C\u7801\u5931\u8D25\uFF1A", item);
-        recordTaskStatusChange({ ...item, status: 2, msg: "\u8F6C\u7801\u5931\u8D25" }, -1);
+        recordTaskStatusChange(
+          { ...item, mediaFile: file, status: 3, msg: "\u8F6C\u7801\u5931\u8D25" },
+          -1
+        );
       }
     }).catch((e) => {
       console.log("\u{1F525}\u{1F525}\u{1F525}\u{1F525}\u{1F525} \u8F6C\u7801\u5931\u8D25", e);
-      recordTaskStatusChange({ ...item, status: 2, msg: "\u8F6C\u7801\u5931\u8D25" }, -1);
+      recordTaskStatusChange(
+        { ...item, mediaFile: file, status: 3, msg: "\u8F6C\u7801\u5931\u8D25" },
+        -1
+      );
     });
   };
   watch(() => list.value, set, { deep: true });
@@ -119,7 +136,8 @@ function useUpload() {
     list,
     uploadFile,
     transcodingFile,
-    recordTaskStatusChange
+    recordTaskStatusChange,
+    removeRecord
   };
 }
 export { addMedia, useUpload as default };

package/es/index.css

@@ -4246,29 +4246,37 @@
   color: #fff;
   font-size: 18px;
 }
-.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-select-wrapper .thumb-upload-loading {
+.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-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%;
@@ -4288,6 +4296,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;
@@ -4463,6 +4474,8 @@
 .card-wrapper-image {
   position: relative;
   overflow: hidden;
+  user-select: none;
+  -webkit-user-drag: none;
 }
 .card-wrapper-image .card-wrapper {
   position: relative;
@@ -4471,9 +4484,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/es/selectResourceModal/components/ListCardWrapper/index.js

@@ -18,7 +18,7 @@ const _sfc_main = defineComponent({
     selectKeys: {},
     disable: { type: Boolean }
   },
-  emits: ["select", "select-one"],
+  emits: ["select", "select-one", "options"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
@@ -31,17 +31,6 @@ const _sfc_main = defineComponent({
       });
       return result;
     });
-    function handleCheck() {
-      if (props.disable && !selectedOrder.value[props.item.id])
-        return;
-      emits("select", props.item);
-    }
-    function handleOption(params) {
-      const { key, item } = params;
-      if (key === "select") {
-        emits("select-one", item);
-      }
-    }
     const canIUse = computed(() => {
       if (props.disable)
         return false;
@@ -56,10 +45,25 @@ const _sfc_main = defineComponent({
     });
     const handlersKey = computed(() => {
       var _a;
-      if (((_a = props.selectKeys) == null ? void 0 : _a.length) > 0 || props.disable || !canIUse.value)
+      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" }].concat(props.extraKeys || []);
+      }
+      return [{ label: "\u9009\u7528", key: "select-one" }].concat(props.extraKeys || []);
     });
+    function handleCheck() {
+      if (!canIUse.value && !selectedOrder.value[props.item.id])
+        return;
+      emits("select", props.item);
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "card-wrapper-image",
@@ -78,7 +82,7 @@ const _sfc_main = defineComponent({
             },
             "use-mask": true,
             "handlers-key": handlersKey.value,
-            onHandle: handleOption
+            onHandle: _cache[0] || (_cache[0] = (e) => emits("options", e))
           }, null, 8, ["url", "thumb", "catalog", "meta", "options", "handlers-key"]),
           _hoisted_1
         ], 2),

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

@@ -14,6 +14,9 @@ const _sfc_main = defineComponent({
   emits: ["select", "select-one"],
   setup(__props, { emit: __emit }) {
     const emits = __emit;
+    function handleOptions(e) {
+      emits(e.key, e.item);
+    }
     return (_ctx, _cache) => {
       var _a, _b;
       return openBlock(), createElementBlock("div", _hoisted_1, [
@@ -24,8 +27,8 @@ const _sfc_main = defineComponent({
             "select-keys": _ctx.selectKeys,
             disable: _ctx.disable,
             onSelect: () => emits("select", item),
-            onSelectOne: () => emits("select-one", item)
-          }, null, 8, ["item", "select-keys", "disable", "onSelect", "onSelectOne"]);
+            onOptions: handleOptions
+          }, null, 8, ["item", "select-keys", "disable", "onSelect"]);
         }), 128)),
         createCommentVNode(" \u7A7A\u72B6\u6001 "),
         ((_a = _ctx.list) == null ? void 0 : _a.length) === 0 && _ctx.loading ? (openBlock(), createBlock(unref(Spin), {

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

@@ -16,7 +16,7 @@ const _sfc_main = defineComponent({
     selectKeys: {},
     disable: { type: Boolean }
   },
-  emits: ["select", "select-one"],
+  emits: ["select", "select-one", "reupload"],
   setup(__props, { emit: __emit }) {
     const emits = __emit;
     const userInfo = inject("userInfo");
@@ -25,7 +25,7 @@ const _sfc_main = defineComponent({
       var _a;
       return (_a = userInfo == null ? void 0 : userInfo.value) == null ? void 0 : _a.repository_id;
     });
-    const { list, uploadFile, transcodingFile } = useUpload();
+    const { list, uploadFile, transcodingFile, removeRecord } = useUpload();
     function handleChange(file) {
       if (!baseAPI || !repoId.value)
         return;
@@ -37,6 +37,30 @@ const _sfc_main = 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 openBlock(), createElementBlock("div", _hoisted_1, [
@@ -55,8 +79,8 @@ const _sfc_main = defineComponent({
                 "select-keys": _ctx.selectKeys,
                 disable: _ctx.disable,
                 onSelect: () => emits("select", item),
-                onSelectOne: () => emits("select-one", item)
-              }, null, 8, ["item", "select-keys", "disable", "onSelect", "onSelectOne"]);
+                onOptions: handleOptions
+              }, null, 8, ["item", "select-keys", "disable", "onSelect"]);
             }), 128))
           ])
         ])

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

@@ -74,8 +74,18 @@ const _sfc_main = 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 = "";

package/es/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/es/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/es/thumbCard/component.js

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

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

@@ -0,0 +1,42 @@
+import { defineComponent, computed, openBlock, createElementBlock, createBlock, unref, createCommentVNode, normalizeClass, toDisplayString } from "vue";
+import { Progress } from "@arco-design/web-vue";
+const _hoisted_1 = { class: "thumb-upload-loading" };
+const _sfc_main = defineComponent({
+  __name: "index",
+  props: {
+    meta: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const isFaild = computed(() => {
+      return [2, 3].includes(props.meta.status);
+    });
+    const isSuccess = computed(() => {
+      return [0].includes(props.meta.status);
+    });
+    const textStatusClass = 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 openBlock(), createElementBlock("div", _hoisted_1, [
+        !isFaild.value ? (openBlock(), createBlock(unref(Progress), {
+          key: 0,
+          type: "circle",
+          percent: (_a = _ctx.meta) == null ? void 0 : _a.progress
+        }, null, 8, ["percent"])) : createCommentVNode("v-if", true),
+        _ctx.meta.msg ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass(["thumb-upload-text", textStatusClass.value])
+        }, toDisplayString((_b = _ctx.meta) == null ? void 0 : _b.msg), 3)) : createCommentVNode("v-if", true)
+      ]);
+    };
+  }
+});
+export { _sfc_main as default };