@cmstops/pro-compo 0.3.42 → 0.3.44

package/es/thumbCard/component.js

@@ -1,6 +1,6 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createVNode, unref, Fragment, createCommentVNode, withCtx, createTextVNode, createElementVNode, createBlock, mergeProps, renderList, withModifiers, toDisplayString } from "vue";
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createVNode, unref, createCommentVNode, Fragment, withCtx, createTextVNode, createElementVNode, createBlock, mergeProps, renderList, withModifiers, toDisplayString } from "vue";
 import { IconPlus } from "@arco-design/web-vue/es/icon";
-import { IconResource, IconComputer } from "@arco-iconbox/vue-cmstop-icons";
+import { IconResource, IconComputer, IconVideoTag, IconAudioTag } from "@arco-iconbox/vue-cmstop-icons";
 import { Progress, Dropdown, Doption, Image } from "@arco-design/web-vue";
 import magic from "./assets/magic.js";
 import { DEFAULT_BASE_API } from "../config.js";
@@ -9,9 +9,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"
 };
@@ -39,7 +43,7 @@ const _sfc_main = defineComponent({
       var _a;
       return ((_a = props.meta) == null ? void 0 : _a.progress) != null;
     });
-    const thumb = computed(() => {
+    const realThumb = computed(() => {
       if (["image", "video"].includes(props.catalog || "")) {
         return props.thumb || props.url || "";
       }
@@ -75,7 +79,7 @@ const _sfc_main = defineComponent({
       emits("edit", { key });
     }
     return (_ctx, _cache) => {
-      var _a, _b;
+      var _a, _b, _c;
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["thumb-select-wrapper", classList.value]),
         style: normalizeStyle(styleObject.value)
@@ -83,8 +87,9 @@ const _sfc_main = defineComponent({
         isUploading.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
           createVNode(unref(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) ? (openBlock(), createElementBlock("div", _hoisted_2, "\u8F6C\u7801\u4E2D...")) : createCommentVNode("v-if", true)
         ])) : _ctx.isEdit && !_ctx.url ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
           createCommentVNode(" \u7F16\u8F91\u6A21\u5F0F\u4E0B\u53EF\u4F7F\u7528\u60AC\u6D6E\u6846\u5FEB\u901F\u63D2\u5165\u7D20\u6750 "),
           createVNode(unref(Dropdown), {
@@ -123,20 +128,23 @@ const _sfc_main = defineComponent({
           _ctx.catalog ? (openBlock(), createBlock(unref(Image), mergeProps({
             key: 0,
             class: "thumb-image",
-            src: thumb.value
+            src: realThumb.value
           }, aImageAttr.value), null, 16, ["src"])) : createCommentVNode("v-if", true),
           createCommentVNode(" \u5C55\u793A\u6A21\u5F0F "),
-          createElementVNode("div", _hoisted_2, [
+          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_3);
+              }, toDisplayString(item.label), 9, _hoisted_4);
             }), 128))
           ])
         ], 64)) : createCommentVNode("v-if", true),
-        ["video", "audio"].includes(_ctx.catalog) && _ctx.meta ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(unref(mediaTime)((_b = _ctx.meta) == null ? void 0 : _b.length)), 1)) : createCommentVNode("v-if", true)
+        ["video", "audio"].includes(_ctx.catalog) && _ctx.meta ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          _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)
       ], 6);
     };
   }

package/es/thumbCard/style/index.css

@@ -11,6 +11,7 @@
 }
 .thumb-select-wrapper .thumb-upload-loading {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
@@ -29,6 +30,8 @@
 .thumb-select-wrapper .thumb-image img {
   width: 100%;
   height: 100%;
+  user-select: none;
+  -webkit-user-drag: none;
 }
 .thumb-select-wrapper .thumb-handler-list {
   position: absolute;
@@ -68,9 +71,13 @@
   position: absolute;
   right: 5px;
   bottom: 5px;
-  padding: 2px 10px;
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  padding: 2px 5px;
   color: #fff;
   font-size: 12px;
+  line-height: 14px;
   background-color: rgba(0, 0, 0, 0.5);
   border-radius: 16px;
   opacity: 1;

package/es/thumbCard/style/index.less

@@ -13,6 +13,7 @@
   // loading 模式
   .thumb-upload-loading {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 100%;
@@ -37,6 +38,8 @@
     img {
       width: 100%;
       height: 100%;
+      user-select: none;
+      -webkit-user-drag: none;
     }
   }
 
@@ -89,9 +92,13 @@
     position: absolute;
     right: 5px;
     bottom: 5px;
-    padding: 2px 10px;
+    display: flex;
+    gap: 2px;
+    align-items: center;
+    padding: 2px 5px;
     color: #fff;
     font-size: 12px;
+    line-height: 14px;
     background-color: rgba(0, 0, 0, 0.5);
     border-radius: 16px;
     opacity: 1;

package/es/utils/transcodeMedia.d.ts

@@ -0,0 +1,13 @@
+export declare function getTranscodingProgress(BASE_API: string, id: number): import("axios").AxiosPromise<any>;
+/**
+ * 转码逻辑
+ * @description 转码逻辑抽离，后期所有涉及到转码的地方都可用该方法
+ */
+export declare class TranscodingTask {
+    file: any;
+    pollCount: number;
+    taskInterval: any;
+    constructor(file: any);
+    start(BASE_API: string, callback: (progress: number) => any): Promise<unknown>;
+    abort(): void;
+}

package/es/utils/transcodeMedia.js

@@ -0,0 +1,46 @@
+import request from "./request.js";
+function getTranscodingProgress(BASE_API, id) {
+  return request(BASE_API, {
+    url: `/poplar/v2/transcoding/progress?id=${id}`,
+    method: "get"
+  });
+}
+class TranscodingTask {
+  constructor(file) {
+    this.file = file;
+    this.pollCount = 0;
+  }
+  start(BASE_API, callback) {
+    if (!this.file.id)
+      return Promise.reject(new Error("file error"));
+    return new Promise((resolve, reject) => {
+      const handleTranscoding = async () => {
+        const { code, message } = await getTranscodingProgress(
+          BASE_API,
+          this.file.id
+        );
+        if (code !== 0)
+          reject(new Error(message));
+        if (message.state === 1) {
+          callback(message.progress);
+          if (message.progress === 1 && ++this.pollCount === 3) {
+            this.abort();
+            resolve(false);
+          }
+        } else if (message.state === 2) {
+          this.abort();
+          resolve(false);
+        } else if (message.state === 3) {
+          this.abort();
+          resolve(true);
+        }
+      };
+      this.taskInterval = setInterval(handleTranscoding, 5e3);
+    });
+  }
+  abort() {
+    clearInterval(this.taskInterval);
+    this.taskInterval = null;
+  }
+}
+export { TranscodingTask, getTranscodingProgress };

package/lib/docHistory/component.js

@@ -5,6 +5,7 @@ var config = require("../config.js");
 var useDocHistory = require("./scripts/useDocHistory.js");
 var index$1 = require("./components/DocHistoryList/index.js");
 var index = require("./components/DocDiffPanel/index.js");
+var index$2 = require("../emptyData/index.js");
 const _hoisted_1 = { class: "doc-history-wrap" };
 const _hoisted_2 = { class: "doc-diff-panel" };
 const _hoisted_3 = { class: "doc-history-list" };
@@ -54,43 +55,49 @@ const _sfc_main = vue.defineComponent({
       }, {
         default: vue.withCtx(() => [
           vue.createElementVNode("div", _hoisted_1, [
-            vue.createElementVNode("div", _hoisted_2, [
-              vue.createVNode(vue.unref(webVue.Spin), {
-                loading: vue.unref(loading),
-                style: { "height": "100%", "width": "100%" }
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(webVue.Scrollbar), {
-                    "outer-style": { height: "100%" },
-                    style: { "height": "100%", "overflow": "auto" }
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.unref(diffContent) ? (vue.openBlock(), vue.createBlock(index, {
-                        key: 0,
-                        doc: vue.unref(diffContent)
-                      }, null, 8, ["doc"])) : vue.createCommentVNode("v-if", true)
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }, 8, ["loading"])
-            ]),
-            vue.createElementVNode("div", _hoisted_3, [
-              vue.createVNode(vue.unref(webVue.Scrollbar), {
-                "outer-style": { height: "100%" },
-                style: { "height": "100%", "overflow": "auto" }
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(index$1, {
-                    list: vue.unref(list),
-                    current: vue.unref(current),
-                    onSelect: vue.unref(handleSelect)
-                  }, null, 8, ["list", "current", "onSelect"])
-                ]),
-                _: 1
-              })
-            ])
+            vue.unref(list).length ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              vue.createElementVNode("div", _hoisted_2, [
+                vue.createVNode(vue.unref(webVue.Spin), {
+                  loading: vue.unref(loading),
+                  style: { "height": "100%", "width": "100%" }
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(webVue.Scrollbar), {
+                      "outer-style": { height: "100%" },
+                      style: { "height": "100%", "overflow": "auto" }
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.unref(diffContent) ? (vue.openBlock(), vue.createBlock(index, {
+                          key: 0,
+                          doc: vue.unref(diffContent)
+                        }, null, 8, ["doc"])) : vue.createCommentVNode("v-if", true)
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["loading"])
+              ]),
+              vue.createElementVNode("div", _hoisted_3, [
+                vue.createVNode(vue.unref(webVue.Scrollbar), {
+                  "outer-style": { height: "100%" },
+                  style: { "height": "100%", "overflow": "auto" }
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(index$1, {
+                      list: vue.unref(list),
+                      current: vue.unref(current),
+                      onSelect: vue.unref(handleSelect)
+                    }, null, 8, ["list", "current", "onSelect"])
+                  ]),
+                  _: 1
+                })
+              ])
+            ], 64)) : (vue.openBlock(), vue.createBlock(vue.unref(index$2), {
+              key: 1,
+              type: "empty",
+              "custom-tip": "\u6682\u65E0\u5386\u53F2\u8BB0\u5F55"
+            }))
           ])
         ]),
         _: 1

package/lib/docHistory/scripts/useDocHistory.js

@@ -28,7 +28,7 @@ function useDocHistory(BASE_API) {
       const { code, message } = await getDocHistory(BASE_API, id.value, pub.value);
       if (code !== 0)
         return;
-      list.value = message;
+      list.value = message || [];
       handleSelect(0);
     } catch (e) {
       console.log(e);

package/lib/hooks/useUpload.js

@@ -4,6 +4,7 @@ var vue = require("vue");
 var index = require("../utils/index.js");
 var tusUpload = require("../utils/tusUpload.js");
 var request = require("../utils/request.js");
+var transcodeMedia = require("../utils/transcodeMedia.js");
 function addMedia(BASE_API, params) {
   return request(BASE_API, {
     url: "/poplar/v2/media/add",
@@ -23,13 +24,15 @@ function useUpload() {
       list.value = originList;
     }
   }
-  function recordTaskStatusChange(file, progress) {
+  function recordTaskStatusChange(file, progress, isTrans) {
     const originList = list.value;
     const taskIndex = originList.findIndex((task) => task.id === file.id);
     if (taskIndex !== -1) {
-      progress !== -1 && (originList[taskIndex].progress = progress);
+      progress !== -1 && (originList[taskIndex].progress = Math.round(progress));
       file.status != null && (originList[taskIndex].status = file.status);
       file.msg != null && (originList[taskIndex].msg = file.msg);
+      if (isTrans)
+        originList[taskIndex].isTrans = true;
       originList[taskIndex].url = file.url;
     } else {
       file.created_at = new Date().getTime();
@@ -66,24 +69,54 @@ function useUpload() {
       });
       if (code !== 0) {
         console.log("\u{1F525}\u{1F525}\u{1F525}\u{1F525}\u{1F525} \u4E0A\u4F20\u5931\u8D25\uFF1A", newFile.name, code, message);
-        recordTaskStatusChange({ ...newFile, status: 2, msg: "\u6DFB\u52A0\u5230\u7D20\u6750\u5E93\u5931\u8D25" }, -1);
+        recordTaskStatusChange({ ...newFile, status: 2, msg: "\u4E0A\u4F20\u5931\u8D25" }, -1);
         return;
       }
-      console.log("\u{1F680}\u{1F680}\u{1F680}\u{1F680}\u{1F680}\u{1F680} \u4E0A\u4F20\u6210\u529F\uFF1A", url);
-      recordTaskStatusChange({ ...newFile, url: message.url, status: 0 }, 1);
-      setTimeout(() => {
-        uploadSuccess({ ...message, sig_id: newFile.sig_id });
-      }, 200);
+      console.log("\u{1F680}\u{1F680}\u{1F680}\u{1F680}\u{1F680}\u{1F680} \u4E0A\u4F20\u6210\u529F\uFF1A", url, message);
+      if (!["video", "audio"].includes(message.catalog)) {
+        recordTaskStatusChange({ ...newFile, url: message.url, status: 0 }, 1);
+        setTimeout(() => uploadSuccess({ ...message, sig_id: newFile.sig_id }), 200);
+      } else {
+        recordTaskStatusChange(newFile, 0);
+      }
       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: "\u4E0A\u4F20\u4E2D\u65AD" }, -1);
+      recordTaskStatusChange({ ...newFile, status: 2, msg: "\u5931\u8D25" }, -1);
       callback && callback(newFile, "fail");
     });
   };
+  const transcodingFile = (BASE_API, file) => {
+    if (!["video", "audio"].includes(file.catalog))
+      return;
+    const task = new transcodeMedia.TranscodingTask(file);
+    const idx = list.value.findIndex(
+      (item2) => item2.sig_id === file.sig_id
+    );
+    if (idx === -1)
+      return;
+    const item = list.value[idx];
+    recordTaskStatusChange(item, 0, true);
+    const progress = (progress2) => recordTaskStatusChange(item, progress2);
+    const transing = task.start(BASE_API, progress);
+    transing.then((res) => {
+      if (res) {
+        console.log("\u{1F680}\u{1F680}\u{1F680}\u{1F680}\u{1F680}\u{1F680} \u8F6C\u7801\u6210\u529F");
+        recordTaskStatusChange({ ...item, status: 0 }, 1);
+        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);
+      }
+    }).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);
+    });
+  };
   return {
     list,
     uploadFile,
+    transcodingFile,
     recordTaskStatusChange
   };
 }

package/lib/index.css

@@ -4256,6 +4256,7 @@
 }
 .thumb-select-wrapper .thumb-upload-loading {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
@@ -4274,6 +4275,8 @@
 .thumb-select-wrapper .thumb-image img {
   width: 100%;
   height: 100%;
+  user-select: none;
+  -webkit-user-drag: none;
 }
 .thumb-select-wrapper .thumb-handler-list {
   position: absolute;
@@ -4313,9 +4316,13 @@
   position: absolute;
   right: 5px;
   bottom: 5px;
-  padding: 2px 10px;
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  padding: 2px 5px;
   color: #fff;
   font-size: 12px;
+  line-height: 14px;
   background-color: rgba(0, 0, 0, 0.5);
   border-radius: 16px;
   opacity: 1;
@@ -4400,10 +4407,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;
@@ -4433,13 +4448,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;
@@ -4449,6 +4482,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 {
@@ -4458,6 +4493,7 @@
   position: absolute;
   top: 8px;
   left: 8px;
+  z-index: 10;
   cursor: pointer;
 }
 .card-wrapper-image .check-box-wrapper .check-box {

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/Main/index.js

@@ -130,7 +130,7 @@ const _sfc_main = vue.defineComponent({
           vue.createCommentVNode(" \u7B5B\u9009  "),
           activeKey.value !== "local" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
             vue.createVNode(index, {
-              "disable-upload-by": activeKey.value !== "all",
+              "disable-upload-by": !["all", "remind"].includes(activeKey.value),
               filterOptions: _ctx.filterOptions,
               onChange: vue.unref(changeFilter),
               onUpload: handleToUpload