@cmstops/pro-compo 0.3.43 → 0.3.45

package/lib/selectResourceModal/component.js

@@ -1,8 +1,32 @@
 "use strict";
 var vue = require("vue");
 var webVue = require("@arco-design/web-vue");
-var index = require("./components/Main/index.js");
+var index$5 = require("../emptyData/index.js");
+var index = require("./components/ListTabs/index.js");
+var index$1 = require("./components/ListFilter/index.js");
+var index$2 = require("./components/ListContent/index.js");
+var index$4 = require("./components/ListSelected/index.js");
+var index$3 = require("./components/ListContentLocal/index.js");
+var useAttachement = require("../hooks/useAttachement.js");
+var config = require("../config.js");
+var useResourceSelect = require("./scripts/useResourceSelect.js");
 const _hoisted_1 = { class: "resource-select-wrap" };
+const _hoisted_2 = { class: "resource-select-main" };
+const _hoisted_3 = {
+  key: 0,
+  class: "resource-select-container"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "resource-select-filter"
+};
+const _hoisted_5 = { class: "resource-select-content" };
+const _hoisted_6 = { class: "resource-select-footer" };
+const _hoisted_7 = { class: "footer-left" };
+const _hoisted_8 = {
+  key: 0,
+  class: "footer-right"
+};
 const _sfc_main = vue.defineComponent({
   ...{ name: "selectResourceModal" },
   __name: "component",
@@ -18,55 +42,164 @@ const _sfc_main = vue.defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const wrapMode = vue.ref(props.wrap || "modal");
-    const handleClose = () => {
+    const BASE_API = props.BASE_API || config.DEFAULT_BASE_API;
+    const wrapProps = vue.computed(() => {
+      if (props.wrap === "drawer") {
+        return {
+          class: "resource-select-drawer",
+          header: false,
+          width: "1024px",
+          footer: false
+        };
+      }
+      return {
+        bodyClass: "resource-select-modal-body",
+        width: "986px",
+        closable: false,
+        hideTitle: false,
+        footer: false
+      };
+    });
+    const activeKey = vue.ref("all");
+    vue.provide("userInfo", vue.computed(() => props.userInfo));
+    vue.provide("baseAPI", BASE_API);
+    const {
+      list,
+      total,
+      limit,
+      loading,
+      changeKey,
+      changeFilter,
+      changePage,
+      changeSize
+    } = useAttachement["default"]({ key: "all", BASE_API });
+    const {
+      selected,
+      selectedKeys,
+      disableSelect,
+      handleSelect,
+      handleClear
+    } = useResourceSelect.useResourceSelect(props);
+    function handleClose() {
+      handleClear();
       emits("update:visible", false);
-    };
+    }
     const handleSubmit = (data) => {
       emits("submit", JSON.parse(JSON.stringify(data)));
     };
+    const handleSelectOne = (params) => {
+      if (Array.isArray(params))
+        handleSubmit(params);
+      else
+        handleSubmit([params]);
+      handleClose();
+    };
+    function handleConfirm() {
+      handleSelectOne(selected.value);
+    }
+    function handleToUpload() {
+      changeKey("local");
+      activeKey.value = "local";
+    }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        wrapMode.value === "drawer" ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Drawer), {
-          key: 0,
-          visible: _ctx.visible,
-          width: "1024px",
-          header: false,
-          footer: false,
-          class: "resource-select-drawer"
-        }, {
-          default: vue.withCtx(() => [
-            vue.createVNode(index, {
-              BASE_API: _ctx.BASE_API,
-              userInfo: _ctx.userInfo,
-              maxcount: _ctx.maxcount,
-              filterOptions: _ctx.filterOptions,
-              onClose: handleClose,
-              onSubmit: handleSubmit
-            }, null, 8, ["BASE_API", "userInfo", "maxcount", "filterOptions"])
-          ]),
-          _: 1
-        }, 8, ["visible"])) : wrapMode.value === "modal" ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Modal), {
-          key: 1,
-          visible: _ctx.visible,
-          width: "986px",
-          "body-class": "resource-select-modal-body",
-          "hide-title": false,
-          closable: false,
-          footer: false
-        }, {
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.wrap === "drawer" ? vue.unref(webVue.Drawer) : vue.unref(webVue.Modal)), vue.mergeProps({ visible: _ctx.visible }, wrapProps.value), {
           default: vue.withCtx(() => [
-            vue.createVNode(index, {
-              BASE_API: _ctx.BASE_API,
-              userInfo: _ctx.userInfo,
-              maxcount: _ctx.maxcount,
-              filterOptions: _ctx.filterOptions,
-              onClose: handleClose,
-              onSubmit: handleSubmit
-            }, null, 8, ["BASE_API", "userInfo", "maxcount", "filterOptions"])
+            vue.createElementVNode("div", _hoisted_2, [
+              _ctx.userInfo ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                vue.createCommentVNode(" \u5934\u90E8 "),
+                vue.createVNode(index, {
+                  "model-value": activeKey.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeKey.value = $event),
+                  onChange: vue.unref(changeKey),
+                  onClose: handleClose
+                }, null, 8, ["model-value", "onChange"]),
+                vue.createCommentVNode(" \u7B5B\u9009  "),
+                activeKey.value !== "local" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+                  vue.createVNode(index$1, {
+                    "disable-upload-by": !["all", "remind"].includes(activeKey.value),
+                    filterOptions: _ctx.filterOptions,
+                    onChange: vue.unref(changeFilter),
+                    onUpload: handleToUpload
+                  }, null, 8, ["disable-upload-by", "filterOptions", "onChange"])
+                ])) : vue.createCommentVNode("v-if", true),
+                vue.createCommentVNode(" \u5217\u8868\u90E8\u5206 "),
+                vue.createElementVNode("div", _hoisted_5, [
+                  vue.createVNode(vue.unref(webVue.Scrollbar), {
+                    "outer-style": { height: "100%" },
+                    style: { "height": "100%", "overflow": "auto" }
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.withDirectives(vue.createVNode(index$2, {
+                        loading: vue.unref(loading),
+                        list: vue.unref(list),
+                        disable: vue.unref(disableSelect),
+                        "select-keys": vue.unref(selectedKeys),
+                        onSelect: vue.unref(handleSelect),
+                        onSelectOne: handleSelectOne
+                      }, null, 8, ["loading", "list", "disable", "select-keys", "onSelect"]), [
+                        [vue.vShow, activeKey.value !== "local"]
+                      ]),
+                      vue.withDirectives(vue.createVNode(index$3, {
+                        disable: vue.unref(disableSelect),
+                        "select-keys": vue.unref(selectedKeys),
+                        onSelect: vue.unref(handleSelect),
+                        onSelectOne: handleSelectOne
+                      }, null, 8, ["disable", "select-keys", "onSelect"]), [
+                        [vue.vShow, activeKey.value === "local"]
+                      ])
+                    ]),
+                    _: 1
+                  })
+                ]),
+                vue.createCommentVNode(" \u5E95\u90E8 "),
+                vue.createElementVNode("div", _hoisted_6, [
+                  vue.createElementVNode("div", _hoisted_7, [
+                    activeKey.value !== "local" ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Pagination), {
+                      key: 0,
+                      total: vue.unref(total),
+                      "page-size": vue.unref(limit),
+                      "show-total": "",
+                      "show-page-size": "",
+                      "base-size": 3,
+                      "buffer-size": 1,
+                      onChange: _cache[1] || (_cache[1] = (e) => vue.unref(changePage)((e - 1) * vue.unref(limit))),
+                      onPageSizeChange: vue.unref(changeSize)
+                    }, null, 8, ["total", "page-size", "onPageSizeChange"])) : vue.createCommentVNode("v-if", true)
+                  ]),
+                  vue.unref(selected).length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+                    vue.createVNode(index$4, {
+                      maxcount: _ctx.maxcount,
+                      selected: vue.unref(selected),
+                      onRemove: vue.unref(handleSelect),
+                      onClear: vue.unref(handleClear)
+                    }, null, 8, ["maxcount", "selected", "onRemove", "onClear"]),
+                    vue.createVNode(vue.unref(webVue.Button), { onClick: handleClose }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode("\u53D6\u6D88")
+                      ]),
+                      _: 1
+                    }),
+                    vue.createVNode(vue.unref(webVue.Button), {
+                      type: "primary",
+                      onClick: handleConfirm
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode("\u786E\u5B9A")
+                      ]),
+                      _: 1
+                    })
+                  ])) : vue.createCommentVNode("v-if", true)
+                ])
+              ])) : (vue.openBlock(), vue.createBlock(vue.unref(index$5), {
+                key: 1,
+                type: "empty",
+                customTip: "\u6682\u65E0\u6743\u9650"
+              }))
+            ])
           ]),
           _: 1
-        }, 8, ["visible"])) : vue.createCommentVNode("v-if", true)
+        }, 16, ["visible"]))
       ]);
     };
   }

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

@@ -1,11 +1,12 @@
 "use strict";
 var vue = require("vue");
-const _hoisted_1 = { class: "card-alias" };
-const _hoisted_2 = {
+const _hoisted_1 = /* @__PURE__ */ vue.createElementVNode("div", { class: "mask" }, null, -1);
+const _hoisted_2 = { class: "card-alias" };
+const _hoisted_3 = {
   key: 0,
   class: "check-box active"
 };
-const _hoisted_3 = {
+const _hoisted_4 = {
   key: 1,
   class: "check-box"
 };
@@ -39,16 +40,17 @@ const _sfc_main = vue.defineComponent({
         onClick: vue.withModifiers(handleCheck, ["stop"])
       }, [
         vue.createElementVNode("div", {
-          class: vue.normalizeClass(["card-wrapper", { active: selectedOrder.value[_ctx.item.id] }])
+          class: vue.normalizeClass(["card-wrapper", { disable: _ctx.disable, active: selectedOrder.value[_ctx.item.id] }])
         }, [
-          vue.renderSlot(_ctx.$slots, "default")
+          vue.renderSlot(_ctx.$slots, "default"),
+          _hoisted_1
         ], 2),
-        vue.createElementVNode("div", _hoisted_1, vue.toDisplayString(_ctx.item.alias), 1),
+        vue.createElementVNode("div", _hoisted_2, vue.toDisplayString(_ctx.item.alias), 1),
         vue.createElementVNode("div", {
           class: "check-box-wrapper",
           onClick: vue.withModifiers(handleCheck, ["stop"])
         }, [
-          selectedOrder.value[_ctx.item.id] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, vue.toDisplayString(selectedOrder.value[_ctx.item.id]), 1)) : !_ctx.disable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3)) : 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)) : !_ctx.disable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4)) : vue.createCommentVNode("v-if", true)
         ])
       ]);
     };

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

@@ -22,6 +22,12 @@ const _sfc_main = vue.defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
+    const userInfo = vue.inject("userInfo");
+    const baseAPI = vue.inject("baseAPI");
+    const repoId = vue.computed(() => {
+      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)
@@ -34,17 +40,17 @@ const _sfc_main = vue.defineComponent({
         emits("select-one", item);
       }
     }
-    const { list, uploadFile } = useUpload["default"]();
-    const userInfo = vue.inject("userInfo");
-    const baseAPI = vue.inject("baseAPI");
-    const repoId = vue.computed(() => {
-      var _a;
-      return (_a = userInfo == null ? void 0 : userInfo.value) == null ? void 0 : _a.repository_id;
-    });
+    const { list, uploadFile, transcodingFile } = useUpload["default"]();
     function handleChange(file) {
       if (!baseAPI || !repoId.value)
         return;
-      uploadFile(baseAPI, file.file, 0, repoId.value);
+      uploadFile(
+        baseAPI,
+        file.file,
+        0,
+        repoId.value,
+        (media) => transcodingFile(baseAPI, media)
+      );
     }
     return (_ctx, _cache) => {
       var _a, _b;

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

@@ -2,13 +2,15 @@
 var vue = require("vue");
 var webVue = require("@arco-design/web-vue");
 var icon = require("@arco-design/web-vue/es/icon");
+var vueCmstopIcons = require("@arco-iconbox/vue-cmstop-icons");
 const _hoisted_1 = { class: "list-selected-wrapper" };
 const _hoisted_2 = { key: 0 };
 const _hoisted_3 = { class: "list-panel-header" };
 const _hoisted_4 = { class: "header-options" };
 const _hoisted_5 = { class: "list-selected-record" };
 const _hoisted_6 = { class: "item-thumb" };
-const _hoisted_7 = { class: "item-alias" };
+const _hoisted_7 = { class: "item-tag" };
+const _hoisted_8 = { class: "item-alias" };
 const _sfc_main = vue.defineComponent({
   __name: "index",
   props: {
@@ -18,6 +20,10 @@ const _sfc_main = vue.defineComponent({
   emits: ["remove", "clear"],
   setup(__props, { emit: __emit }) {
     const emits = __emit;
+    const baseAPI = vue.inject("baseAPI");
+    const audioThumb = vue.computed(() => {
+      return `${baseAPI}/static/img/music.2ee269c.png`;
+    });
     const visible = vue.ref(false);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
@@ -57,11 +63,18 @@ const _sfc_main = vue.defineComponent({
                       height: "100%",
                       src: item.thumb || item.url
                     }, null, 8, ["src"])) : vue.createCommentVNode("v-if", true),
-                    ["audio"].includes(item.catalog) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                      vue.createTextVNode(" \u97F3\u9891 ")
-                    ], 64)) : vue.createCommentVNode("v-if", true)
+                    ["audio"].includes(item.catalog) ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Image), {
+                      key: 1,
+                      width: "100%",
+                      height: "100%",
+                      fit: "cover",
+                      src: audioThumb.value
+                    }, null, 8, ["src"])) : vue.createCommentVNode("v-if", true),
+                    vue.createElementVNode("div", _hoisted_7, [
+                      item.catalog === "video" ? (vue.openBlock(), vue.createBlock(vue.unref(vueCmstopIcons.IconVideoTag), { key: 0 })) : vue.createCommentVNode("v-if", true)
+                    ])
                   ]),
-                  vue.createElementVNode("div", _hoisted_7, vue.toDisplayString(item.alias), 1),
+                  vue.createElementVNode("div", _hoisted_8, vue.toDisplayString(item.alias), 1),
                   vue.createVNode(vue.unref(webVue.Button), {
                     type: "text",
                     onClick: ($event) => emits("remove", item)

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

@@ -0,0 +1,62 @@
+"use strict";
+var vue = require("vue");
+var icon = require("@arco-design/web-vue/es/icon");
+var webVue = require("@arco-design/web-vue");
+const _hoisted_1 = { class: "resource-select-header" };
+const _sfc_main = vue.defineComponent({
+  __name: "index",
+  props: {
+    modelValue: {}
+  },
+  emits: ["update:model-value", "change", "close"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const activeKey = vue.computed({
+      get: () => props.modelValue,
+      set: (value) => emits("update:model-value", value)
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(vue.unref(webVue.Tabs), {
+          "active-key": activeKey.value,
+          "onUpdate:activeKey": _cache[1] || (_cache[1] = ($event) => activeKey.value = $event),
+          onChange: _cache[2] || (_cache[2] = (e) => emits("change", e))
+        }, {
+          extra: vue.withCtx(() => [
+            vue.createVNode(vue.unref(webVue.Button), {
+              type: "secondary",
+              shape: "round",
+              onClick: _cache[0] || (_cache[0] = ($event) => emits("close"))
+            }, {
+              icon: vue.withCtx(() => [
+                vue.createVNode(vue.unref(icon.IconClose))
+              ]),
+              _: 1
+            })
+          ]),
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(webVue.TabPane), {
+              key: "all",
+              title: "\u5168\u90E8\u7D20\u6750"
+            }),
+            vue.createVNode(vue.unref(webVue.TabPane), {
+              key: "my",
+              title: "\u6211\u7684\u7D20\u6750"
+            }),
+            vue.createVNode(vue.unref(webVue.TabPane), {
+              key: "remind",
+              title: "\u63D0\u9192\u6211\u7684"
+            }),
+            vue.createVNode(vue.unref(webVue.TabPane), {
+              key: "local",
+              title: "\u672C\u5730\u7D20\u6750"
+            })
+          ]),
+          _: 1
+        }, 8, ["active-key"])
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/selectResourceModal/scripts/useResourceSelect.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var vue = require("vue");
+function useResourceSelect(props) {
+  const selected = vue.ref([]);
+  const selectedKeys = vue.computed(() => selected.value.map((item) => item.id));
+  const disableSelect = vue.computed(() => props.maxcount && selected.value.length >= props.maxcount);
+  function handleSelect(params) {
+    const { id } = params;
+    const index = selected.value.findIndex((item) => item.id === id);
+    if (index > -1)
+      selected.value.splice(index, 1);
+    else
+      selected.value.push(params);
+  }
+  function handleClear() {
+    selected.value = [];
+  }
+  return {
+    selected,
+    selectedKeys,
+    disableSelect,
+    handleSelect,
+    handleClear
+  };
+}
+exports.useResourceSelect = useResourceSelect;

package/lib/selectResourceModal/style/index.css

@@ -71,10 +71,18 @@
   overflow: hidden;
 }
 .list-panel-wrapper .list-selected-record .list-selected-item .item-thumb {
+  position: relative;
   width: 50px;
   height: 38px;
   overflow: hidden;
 }
+.list-panel-wrapper .list-selected-record .list-selected-item .item-thumb .item-tag {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  color: white;
+  transform: translate(-50%, -50%);
+}
 .list-panel-wrapper .list-selected-record .list-selected-item .item-alias {
   flex: 1;
   overflow: hidden;
@@ -104,13 +112,31 @@
 .card-wrapper-image {
   position: relative;
   overflow: hidden;
-  cursor: pointer;
 }
 .card-wrapper-image .card-wrapper {
   position: relative;
   overflow: hidden;
+  border-radius: 2px;
+  transition: all 0.3s ease-in-out;
   aspect-ratio: 4 / 3;
 }
+.card-wrapper-image .card-wrapper.disable:not(.active) {
+  opacity: 0.4;
+}
+.card-wrapper-image .card-wrapper .mask {
+  position: absolute;
+  top: 0;
+  z-index: 9;
+  display: none;
+  width: 100%;
+  height: 100%;
+  font-size: 18px;
+  background: rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+}
+.card-wrapper-image .card-wrapper.active .mask {
+  display: block;
+}
 .card-wrapper-image .card-alias {
   width: 100%;
   margin-top: 6px;
@@ -120,6 +146,8 @@
   line-height: 22px;
   white-space: nowrap;
   text-overflow: ellipsis;
+  user-select: none;
+  -webkit-user-drag: none;
 }
 .card-wrapper-image:hover .check-box-wrapper .check-box,
 .card-wrapper-image .check-box-wrapper .check-box.active {
@@ -129,6 +157,7 @@
   position: absolute;
   top: 8px;
   left: 8px;
+  z-index: 10;
   cursor: pointer;
 }
 .card-wrapper-image .check-box-wrapper .check-box {

package/lib/selectResourceModal/style/listCardWrapper.less

@@ -1,13 +1,34 @@
 .card-wrapper-image {
   position: relative;
   overflow: hidden;
-  cursor: pointer;
 
   .card-wrapper {
     position: relative;
     overflow: hidden;
+    border-radius: 2px;
+    transition: all 0.3s ease-in-out;
     // 宽高：43
     aspect-ratio: 4 / 3;
+
+    &.disable:not(.active) {
+      opacity: 0.4;
+    }
+
+    .mask {
+      position: absolute;
+      top: 0;
+      z-index: 9;
+      display: none;
+      width: 100%;
+      height: 100%;
+      font-size: 18px;
+      background: rgba(0, 0, 0, 0.3);
+      cursor: pointer;
+    }
+
+    &.active .mask {
+      display: block;
+    }
   }
 
   .card-alias {
@@ -19,6 +40,8 @@
     line-height: 22px;
     white-space: nowrap;
     text-overflow: ellipsis;
+    user-select: none;
+    -webkit-user-drag: none;
   }
 
   &:hover .check-box-wrapper .check-box,
@@ -30,6 +53,7 @@
     position: absolute;
     top: 8px;
     left: 8px;
+    z-index: 10;
     cursor: pointer;
 
     .check-box {

package/lib/selectResourceModal/style/listSelected.less

@@ -59,9 +59,18 @@
       overflow: hidden;
 
       .item-thumb {
+        position: relative;
         width: 50px;
         height: 38px;
         overflow: hidden;
+
+        .item-tag {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          color: white;
+          transform: translate(-50%, -50%);
+        }
       }
 
       .item-alias {

package/lib/thumbCard/component.js

@@ -10,9 +10,13 @@ const _hoisted_1 = {
   key: 0,
   class: "thumb-upload-loading"
 };
-const _hoisted_2 = { class: "thumb-handler-list" };
-const _hoisted_3 = ["onClick"];
-const _hoisted_4 = {
+const _hoisted_2 = {
+  key: 0,
+  class: "thumb-upload-text"
+};
+const _hoisted_3 = { class: "thumb-handler-list" };
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = {
   key: 3,
   class: "thumb-select-tag"
 };
@@ -40,7 +44,7 @@ const _sfc_main = vue.defineComponent({
       var _a;
       return ((_a = props.meta) == null ? void 0 : _a.progress) != null;
     });
-    const thumb = vue.computed(() => {
+    const realThumb = vue.computed(() => {
       if (["image", "video"].includes(props.catalog || "")) {
         return props.thumb || props.url || "";
       }
@@ -76,7 +80,7 @@ const _sfc_main = vue.defineComponent({
       emits("edit", { key });
     }
     return (_ctx, _cache) => {
-      var _a, _b;
+      var _a, _b, _c;
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(["thumb-select-wrapper", classList.value]),
         style: vue.normalizeStyle(styleObject.value)
@@ -84,8 +88,9 @@ const _sfc_main = vue.defineComponent({
         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) / 10
-          }, null, 8, ["percent"])
+            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.isEdit && !_ctx.url ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
           vue.createCommentVNode(" \u7F16\u8F91\u6A21\u5F0F\u4E0B\u53EF\u4F7F\u7528\u60AC\u6D6E\u6846\u5FEB\u901F\u63D2\u5165\u7D20\u6750 "),
           vue.createVNode(vue.unref(webVue.Dropdown), {
@@ -124,20 +129,23 @@ const _sfc_main = vue.defineComponent({
           _ctx.catalog ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Image), vue.mergeProps({
             key: 0,
             class: "thumb-image",
-            src: thumb.value
+            src: realThumb.value
           }, aImageAttr.value), null, 16, ["src"])) : vue.createCommentVNode("v-if", true),
           vue.createCommentVNode(" \u5C55\u793A\u6A21\u5F0F "),
-          vue.createElementVNode("div", _hoisted_2, [
+          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_3);
+              }, vue.toDisplayString(item.label), 9, _hoisted_4);
             }), 128))
           ])
         ], 64)) : vue.createCommentVNode("v-if", true),
-        ["video", "audio"].includes(_ctx.catalog) && _ctx.meta ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, vue.toDisplayString(vue.unref(index.mediaTime)((_b = _ctx.meta) == null ? void 0 : _b.length)), 1)) : vue.createCommentVNode("v-if", true)
+        ["video", "audio"].includes(_ctx.catalog) && _ctx.meta ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+          _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)
       ], 6);
     };
   }