@cmstops/pro-compo 0.1.57 → 0.1.59

package/es/selectThumb/component.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, provide, computed, watch, nextTick, openBlock, createElementBlock, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, createVNode, unref, withCtx, createElementVNode, withDirectives, vShow } from "vue";
+import { defineComponent, ref, provide, computed, watch, nextTick, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, withDirectives, vShow, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, createVNode, unref, withCtx, createTextVNode } from "vue";
 import { RadioGroup, Radio, Switch } from "@arco-design/web-vue";
 import { docThumbObjMap, docThumbArrMap, docThumbRatioMap } from "../utils/doc.js";
 import _sfc_main$3 from "../resourceModal/component.js";
@@ -7,37 +7,36 @@ import _sfc_main$1 from "./components/card.js";
 import _sfc_main$2 from "./components/colorPalette.js";
 import { DEFAULT_BASE_API } from "../config.js";
 const _hoisted_1 = { class: "select-thumb-container" };
-const _hoisted_2 = {
-  key: 0,
-  class: "title"
-};
-const _hoisted_3 = {
-  key: 0,
-  class: "tip"
-};
+const _hoisted_2 = { class: "star" };
+const _hoisted_3 = { class: "thumbbox" };
 const _hoisted_4 = {
-  key: 1,
+  key: 0,
   class: "thumb-list-view"
 };
-const _hoisted_5 = { class: "banner-view" };
-const _hoisted_6 = { class: "title" };
-const _hoisted_7 = /* @__PURE__ */ createElementVNode("span", null, "\u72EC\u7ACB\u8F6E\u64AD\u56FE", -1);
+const _hoisted_5 = { style: { "margin-top": "-10px" } };
+const _hoisted_6 = /* @__PURE__ */ createElementVNode("span", { style: { "margin-right": "10px" } }, "\u72EC\u7ACB\u8F6E\u64AD\u56FE", -1);
+const _hoisted_7 = { class: "thumbbox" };
 const _hoisted_8 = { class: "title" };
 const _hoisted_9 = /* @__PURE__ */ createElementVNode("span", null, "\u72EC\u7ACB\u8F6E\u64AD\u56FE\u80CC\u666F\u989C\u8272", -1);
 const _hoisted_10 = [
   _hoisted_9
 ];
-const _hoisted_11 = { class: "banner-view" };
-const _hoisted_12 = { class: "title" };
-const _hoisted_13 = { key: 0 };
-const _hoisted_14 = { key: 1 };
+const _hoisted_11 = { key: 0 };
+const _hoisted_12 = { key: 1 };
+const _hoisted_13 = /* @__PURE__ */ createElementVNode("span", { class: "star" }, "*", -1);
+const _hoisted_14 = { key: 2 };
 const _hoisted_15 = /* @__PURE__ */ createElementVNode("span", { class: "star" }, "*", -1);
-const _hoisted_16 = { key: 2 };
-const _hoisted_17 = /* @__PURE__ */ createElementVNode("span", { class: "tip" }, "(\u5EFA\u8BAE\u5C3A\u5BF8\uFF1A1242px*662px)", -1);
-const _hoisted_18 = { class: "title" };
-const _hoisted_19 = /* @__PURE__ */ createElementVNode("span", null, "\u5934\u56FE\u80CC\u666F\u989C\u8272", -1);
-const _hoisted_20 = [
-  _hoisted_19
+const _hoisted_16 = { key: 3 };
+const _hoisted_17 = {
+  class: "tip",
+  style: { "margin-left": "10px" }
+};
+const _hoisted_18 = { class: "thumbbox" };
+const _hoisted_19 = { class: "tip" };
+const _hoisted_20 = { class: "title" };
+const _hoisted_21 = /* @__PURE__ */ createElementVNode("span", null, "\u5934\u56FE\u80CC\u666F\u989C\u8272", -1);
+const _hoisted_22 = [
+  _hoisted_21
 ];
 const _sfc_main = defineComponent({
   ...{ name: "selectThumb" },
@@ -46,7 +45,10 @@ const _sfc_main = defineComponent({
     BASE_API: {},
     mode: {},
     dataValue: {},
+    flex: { type: Boolean },
+    offset: {},
     title: {},
+    titleValid: { type: Boolean },
     showTitle: { type: Boolean },
     cropper: { type: Boolean },
     aiImages: {},
@@ -157,6 +159,8 @@ const _sfc_main = defineComponent({
           return "1,2,3,4,7";
         if (series === "h5")
           return "1,2,3,4,7";
+        if (series === "local_live")
+          return "2,3";
       }
       return "1,2,3,4,5,7";
     });
@@ -180,9 +184,13 @@ const _sfc_main = defineComponent({
     };
     const docSeriesShowTopThemeColor = computed(() => {
       const { series } = props;
-      return ["special", "special_v3", "video_album", "audio_album"].includes(
-        series
-      );
+      return [
+        "special",
+        "special_v3",
+        "video_album",
+        "audio_album",
+        "local_live"
+      ].includes(series);
     });
     const submitCallback = (data) => {
       var _a;
@@ -312,122 +320,184 @@ const _sfc_main = defineComponent({
       callback(styleData2);
     };
     return (_ctx, _cache) => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d, _e, _f;
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        _ctx.mode !== "smiple" ? (openBlock(), createElementBlock("div", _hoisted_2, [
-          createTextVNode(toDisplayString(_ctx.title ? _ctx.title : "\u5C01\u9762") + " ", 1),
-          ((_a = curtemplate.value) == null ? void 0 : _a.value) !== "4" ? (openBlock(), createElementBlock("span", _hoisted_3, "(" + toDisplayString((_b = curtemplate.value) == null ? void 0 : _b.alias) + "\u6BD4\u4F8B\uFF1A" + toDisplayString((_c = curtemplate.value) == null ? void 0 : _c.ratioStr) + ")", 1)) : createCommentVNode("v-if", true)
-        ])) : createCommentVNode("v-if", true),
-        currentModel.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(currentModel.value.maxLength, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$1, {
-              key: index,
-              id: `thumb-card-${index}`,
-              data: thumbList.value[index],
-              model: model.value,
-              "preview-list": previewList.value,
-              "thumb-model": "thumb",
-              onOpen: ($event) => openDialogMediaSelection($event, index)
-            }, null, 8, ["id", "data", "model", "preview-list", "onOpen"]);
-          }), 128))
-        ])) : createCommentVNode("v-if", true),
-        _ctx.mode === "doc" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          createCommentVNode(" \u9009\u62E9\u5927\u56FE\u3001\u4E09\u56FE\u3001\u5355\u56FE...\u7B49\u6A21\u5F0F "),
-          createVNode(unref(RadioGroup), {
-            modelValue: model.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
-            size: "small",
-            type: "button",
-            onChange: modelChange
-          }, {
-            default: withCtx(() => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(modelList.value, (item, index) => {
-                return openBlock(), createBlock(unref(Radio), {
+        createElementVNode("div", {
+          class: normalizeClass(["banner-view", { flex: _ctx.flex }])
+        }, [
+          _ctx.mode !== "smiple" ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "title",
+            style: normalizeStyle({ width: _ctx.offset })
+          }, [
+            withDirectives(createElementVNode("span", _hoisted_2, "*", 512), [
+              [vShow, _ctx.titleValid]
+            ]),
+            createElementVNode("span", null, toDisplayString(_ctx.title ? _ctx.title : "\u5C01\u9762"), 1),
+            ((_a = curtemplate.value) == null ? void 0 : _a.value) !== "4" ? withDirectives((openBlock(), createElementBlock("span", {
+              key: 0,
+              class: "tip",
+              style: { "margin-left": "10px" }
+            }, " (" + toDisplayString((_b = curtemplate.value) == null ? void 0 : _b.alias) + "\u6BD4\u4F8B\uFF1A" + toDisplayString((_c = curtemplate.value) == null ? void 0 : _c.ratioStr) + ") ", 513)), [
+              [vShow, !_ctx.flex]
+            ]) : createCommentVNode("v-if", true)
+          ], 4)) : createCommentVNode("v-if", true),
+          createElementVNode("div", _hoisted_3, [
+            currentModel.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(currentModel.value.maxLength, (item, index) => {
+                return openBlock(), createBlock(_sfc_main$1, {
                   key: index,
-                  value: item.value
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(item.alias), 1)
-                  ]),
-                  _: 2
-                }, 1032, ["value"]);
+                  id: `thumb-card-${index}`,
+                  data: thumbList.value[index],
+                  model: model.value,
+                  "preview-list": previewList.value,
+                  "thumb-model": "thumb",
+                  onOpen: ($event) => openDialogMediaSelection($event, index)
+                }, null, 8, ["id", "data", "model", "preview-list", "onOpen"]);
               }), 128))
+            ])) : createCommentVNode("v-if", true),
+            createElementVNode("div", _hoisted_5, [
+              ((_d = curtemplate.value) == null ? void 0 : _d.value) !== "4" ? withDirectives((openBlock(), createElementBlock("span", {
+                key: 0,
+                class: "tip"
+              }, " (" + toDisplayString((_e = curtemplate.value) == null ? void 0 : _e.alias) + "\u6BD4\u4F8B\uFF1A" + toDisplayString((_f = curtemplate.value) == null ? void 0 : _f.ratioStr) + ") ", 513)), [
+                [vShow, _ctx.flex]
+              ]) : createCommentVNode("v-if", true)
             ]),
-            _: 1
-          }, 8, ["modelValue"]),
+            _ctx.mode === "doc" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createCommentVNode(" \u9009\u62E9\u5927\u56FE\u3001\u4E09\u56FE\u3001\u5355\u56FE...\u7B49\u6A21\u5F0F "),
+              createVNode(unref(RadioGroup), {
+                modelValue: model.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+                size: "small",
+                type: "button",
+                style: { "margin-top": "10px" },
+                onChange: modelChange
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(modelList.value, (item, index) => {
+                    return openBlock(), createBlock(unref(Radio), {
+                      key: index,
+                      value: item.value
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(item.alias), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["value"]);
+                  }), 128))
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
+            ], 64)) : createCommentVNode("v-if", true)
+          ])
+        ], 2),
+        _ctx.mode === "doc" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createCommentVNode(" \u72EC\u7ACB\u8F6E\u535A\u56FE "),
-          createElementVNode("div", _hoisted_5, [
-            createElementVNode("div", _hoisted_6, [
-              _hoisted_7,
-              createVNode(unref(Switch), {
+          createElementVNode("div", {
+            class: normalizeClass(["banner-view", { flex: _ctx.flex }])
+          }, [
+            createElementVNode("div", {
+              class: "title",
+              style: normalizeStyle({ width: _ctx.offset })
+            }, [
+              _hoisted_6,
+              withDirectives(createVNode(unref(Switch), {
                 modelValue: hasBanner.value,
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => hasBanner.value = $event),
                 size: "small"
-              }, null, 8, ["modelValue"])
-            ]),
-            withDirectives(createVNode(_sfc_main$1, {
-              id: `banner-card`,
-              data: banner.value,
-              "preview-list": previewList.value,
-              "thumb-model": "banner",
-              onOpen: openDialogMediaSelection
-            }, null, 8, ["data", "preview-list"]), [
-              [vShow, hasBanner.value]
-            ]),
-            withDirectives(createElementVNode("div", _hoisted_8, _hoisted_10, 512), [
-              [vShow, hasBanner.value && styleData.value.banner_theme_color]
-            ]),
-            createCommentVNode(" banner\u8C03\u8272\u677F "),
-            withDirectives(createVNode(_sfc_main$2, {
-              "style-data": styleData.value,
-              model: "banner",
-              onChange: colorChange
-            }, null, 8, ["style-data"]), [
-              [vShow, hasBanner.value]
+              }, null, 8, ["modelValue"]), [
+                [vShow, !_ctx.flex]
+              ])
+            ], 4),
+            createElementVNode("div", _hoisted_7, [
+              withDirectives(createVNode(unref(Switch), {
+                modelValue: hasBanner.value,
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => hasBanner.value = $event),
+                style: { "margin-bottom": "10px" },
+                size: "small"
+              }, null, 8, ["modelValue"]), [
+                [vShow, _ctx.flex]
+              ]),
+              withDirectives(createVNode(_sfc_main$1, {
+                id: `banner-card`,
+                data: banner.value,
+                "preview-list": previewList.value,
+                "thumb-model": "banner",
+                onOpen: openDialogMediaSelection
+              }, null, 8, ["data", "preview-list"]), [
+                [vShow, hasBanner.value]
+              ]),
+              withDirectives(createElementVNode("div", _hoisted_8, _hoisted_10, 512), [
+                [vShow, hasBanner.value && styleData.value.banner_theme_color]
+              ]),
+              createCommentVNode(" banner\u8C03\u8272\u677F "),
+              withDirectives(createVNode(_sfc_main$2, {
+                "style-data": styleData.value,
+                model: "banner",
+                onChange: colorChange
+              }, null, 8, ["style-data"]), [
+                [vShow, hasBanner.value]
+              ])
             ])
-          ]),
+          ], 2),
           createCommentVNode(" pc\u5C01\u9762\u56FE\uFF08\u4E13\u9898\u5934\u56FE\u5171\u7528\u4E00\u4E2A\u5B57\u6BB5\uFF09 "),
-          createElementVNode("div", _hoisted_11, [
-            createElementVNode("div", _hoisted_12, [
-              ["special", "special_v3"].includes(props.series) ? (openBlock(), createElementBlock("span", _hoisted_13, "\u4E13\u9898\u5934\u56FE")) : ["video_album", "audio_album"].includes(props.series) ? (openBlock(), createElementBlock("span", _hoisted_14, [
-                _hoisted_15,
+          createElementVNode("div", {
+            class: normalizeClass(["banner-view", { flex: _ctx.flex }])
+          }, [
+            createElementVNode("div", {
+              class: "title",
+              style: normalizeStyle({ width: _ctx.offset })
+            }, [
+              ["special", "special_v3"].includes(props.series) ? (openBlock(), createElementBlock("span", _hoisted_11, "\u4E13\u9898\u5934\u56FE")) : ["video_album", "audio_album"].includes(props.series) ? (openBlock(), createElementBlock("span", _hoisted_12, [
+                _hoisted_13,
                 createTextVNode("\u5C01\u9762\u5934\u56FE")
+              ])) : ["local_live"].includes(props.series) ? (openBlock(), createElementBlock("span", _hoisted_14, [
+                _hoisted_15,
+                createTextVNode("\u76F4\u64AD\u5934\u56FE")
               ])) : (openBlock(), createElementBlock("span", _hoisted_16, "PC\u5C01\u9762\u56FE")),
-              _hoisted_17
-            ]),
-            createVNode(_sfc_main$1, {
-              id: `pc-banner-card`,
-              data: pcBanner.value,
-              previewList: previewList.value,
-              thumbModel: "pcBanner",
-              onOpen: openDialogMediaSelection
-            }, null, 8, ["data", "previewList"]),
-            withDirectives(createElementVNode("div", _hoisted_18, _hoisted_20, 512), [
-              [vShow, docSeriesShowTopThemeColor.value && styleData.value.top_theme_color]
-            ]),
-            withDirectives(createVNode(_sfc_main$2, {
-              styleData: styleData.value,
-              model: "top",
-              onChange: colorChange
-            }, null, 8, ["styleData"]), [
-              [vShow, docSeriesShowTopThemeColor.value]
+              withDirectives(createElementVNode("span", _hoisted_17, "(\u5EFA\u8BAE\u5C3A\u5BF8\uFF1A1242px*662px)", 512), [
+                [vShow, !_ctx.flex]
+              ])
+            ], 4),
+            createElementVNode("div", _hoisted_18, [
+              createVNode(_sfc_main$1, {
+                id: `pc-banner-card`,
+                data: pcBanner.value,
+                previewList: previewList.value,
+                thumbModel: "pcBanner",
+                onOpen: openDialogMediaSelection
+              }, null, 8, ["data", "previewList"]),
+              withDirectives(createElementVNode("span", _hoisted_19, "(\u5EFA\u8BAE\u5C3A\u5BF8\uFF1A1242px*662px)", 512), [
+                [vShow, _ctx.flex]
+              ]),
+              withDirectives(createElementVNode("div", _hoisted_20, _hoisted_22, 512), [
+                [vShow, docSeriesShowTopThemeColor.value && styleData.value.top_theme_color]
+              ]),
+              withDirectives(createVNode(_sfc_main$2, {
+                styleData: styleData.value,
+                model: "top",
+                onChange: colorChange
+              }, null, 8, ["styleData"]), [
+                [vShow, docSeriesShowTopThemeColor.value]
+              ])
             ])
-          ])
+          ], 2)
         ], 64)) : createCommentVNode("v-if", true),
         createVNode(_sfc_main$3, {
           dialogVisible: dialogMediaSelectionShow.value,
-          "onUpdate:dialogVisible": _cache[2] || (_cache[2] = ($event) => dialogMediaSelectionShow.value = $event),
+          "onUpdate:dialogVisible": _cache[3] || (_cache[3] = ($event) => dialogMediaSelectionShow.value = $event),
           preview: false,
           "catalog-props": "image",
           ai_static_covers: _ctx.aiImages,
           BASE_API: unref(BASE_API),
           onSubmit: submitCallback,
-          onUpload: _cache[3] || (_cache[3] = (cb) => _ctx.$emit("upload", cb))
+          onUpload: _cache[4] || (_cache[4] = (cb) => _ctx.$emit("upload", cb))
         }, null, 8, ["dialogVisible", "ai_static_covers", "BASE_API"]),
         refreshCrop.value ? (openBlock(), createBlock(_sfc_main$4, {
-          key: 3,
+          key: 1,
           visible: dialogCropperShow.value,
-          "onUpdate:visible": _cache[4] || (_cache[4] = ($event) => dialogCropperShow.value = $event),
+          "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => dialogCropperShow.value = $event),
           "aspect-ratio-prop": aspectRatioProp.value,
           BASE_API: unref(BASE_API),
           "corp-data": cropperData.value,

package/es/selectThumb/style/index.css

@@ -110,18 +110,18 @@
   transform-origin: center;
 }
 .select-thumb-container .title {
-  font-size: 14px;
+  margin-bottom: 10px;
   color: #4e5969;
   font-weight: 700;
-  line-height: 40px;
-  margin: 5px 0px;
-}
-.select-thumb-container .title span {
-  margin-right: 10px;
+  font-size: 14px;
 }
-.select-thumb-container .title .tip {
-  font-size: 12px;
+.select-thumb-container .tip {
+  display: inline-block;
   color: rgba(78, 89, 105, 0.4);
+  font-size: 12px;
+}
+.select-thumb-container .thumbbox {
+  margin-bottom: 10px;
 }
 .select-thumb-container .thumb-list-view {
   display: flex;
@@ -129,12 +129,15 @@
   margin-bottom: 10px;
 }
 .select-thumb-container .star {
-  color: red;
   margin-right: 2px !important;
+  color: red;
+}
+.select-thumb-container .flex {
+  display: flex;
 }
 .select-thumb-container .color-picker-input {
   width: 32px;
   height: 32px;
+  padding: 0 2px;
   border: none;
-  padding: 0px 2px;
 }

package/es/selectThumb/style/index.less

@@ -2,33 +2,43 @@
   @radio-button-size: 32px;
   @import './card.less';
   @import './colorPalette.less';
+
   .title {
-    font-size: 14px;
+    margin-bottom: 10px;
     color: #4e5969;
     font-weight: 700;
-    line-height: 40px;
-    margin: 5px 0px;
-    span {
-      margin-right: 10px;
-    }
-    .tip {
-      font-size: 12px;
-      color: rgba(78, 89, 105, 0.4);
-    }
+    font-size: 14px;
+  }
+
+  .tip {
+    display: inline-block;
+    color: rgba(78, 89, 105, 0.4);
+    font-size: 12px;
+  }
+
+  .thumbbox {
+    margin-bottom: 10px;
   }
+
   .thumb-list-view {
     display: flex;
     align-items: center;
     margin-bottom: 10px;
   }
+
   .star {
-    color: red;
     margin-right: 2px !important;
+    color: red;
+  }
+
+  .flex {
+    display: flex;
   }
+
   .color-picker-input {
     width: @radio-button-size;
     height: @radio-button-size;
+    padding: 0 2px;
     border: none;
-    padding: 0px 2px;
   }
 }

package/lib/index.css

@@ -874,6 +874,24 @@
 .file-type-thumb .transparent:hover {
   cursor: pointer;
 }
+.file-type-thumb .tag {
+  position: absolute;
+  top: 8px;
+  left: 5px;
+  padding: 2px 8px;
+  color: white;
+  font-size: 12px;
+  background-color: rgba(#000, #000, #000, 0.4);
+  border-radius: 12px;
+}
+.file-type-thumb .rate-info-tag {
+  top: 8px;
+  left: 5px;
+}
+.file-type-thumb .ai-tag {
+  top: 8px;
+  right: 5px;
+}
 .file-type-thumb .pic {
   width: 100%;
   padding-top: 56.25%;
@@ -3251,18 +3269,18 @@
   transform-origin: center;
 }
 .select-thumb-container .title {
-  font-size: 14px;
+  margin-bottom: 10px;
   color: #4e5969;
   font-weight: 700;
-  line-height: 40px;
-  margin: 5px 0px;
-}
-.select-thumb-container .title span {
-  margin-right: 10px;
+  font-size: 14px;
 }
-.select-thumb-container .title .tip {
-  font-size: 12px;
+.select-thumb-container .tip {
+  display: inline-block;
   color: rgba(78, 89, 105, 0.4);
+  font-size: 12px;
+}
+.select-thumb-container .thumbbox {
+  margin-bottom: 10px;
 }
 .select-thumb-container .thumb-list-view {
   display: flex;
@@ -3270,14 +3288,17 @@
   margin-bottom: 10px;
 }
 .select-thumb-container .star {
-  color: red;
   margin-right: 2px !important;
+  color: red;
+}
+.select-thumb-container .flex {
+  display: flex;
 }
 .select-thumb-container .color-picker-input {
   width: 32px;
   height: 32px;
+  padding: 0 2px;
   border: none;
-  padding: 0px 2px;
 }
 .edit-meta-info-dialog-body {
   padding: 0;

package/lib/resourceModal/components/MediaSelection/MainContent/FileTypeThumb/index.js

@@ -5,6 +5,22 @@ var icon = require("@arco-design/web-vue/es/icon");
 var index = require("../../../MediaPreviewer/index.js");
 const _hoisted_1 = { class: "file-type-thumb" };
 const _hoisted_2 = {
+  key: 0,
+  class: "rate-info-tag tag"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "ai-tag tag"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "rate-info-tag tag"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "ai-tag tag"
+};
+const _hoisted_6 = {
   key: 0,
   class: "mask"
 };
@@ -26,6 +42,31 @@ const _sfc_main = vue.defineComponent({
     const add = () => {
       emit("confirm", props.itemData);
     };
+    const getRate = vue.computed(() => {
+      if (!props.itemData.metas)
+        return "";
+      const { metas } = props.itemData;
+      let width = 0;
+      let height = 0;
+      metas.forEach((item) => {
+        if (item.key === "width") {
+          width = typeof item.value === "string" ? parseInt(item.value, 10) : item.value;
+        }
+        if (item.key === "height") {
+          height = typeof item.value === "string" ? parseInt(item.value, 10) : item.value;
+        }
+      });
+      const rate = (width / height).toFixed(1);
+      if (rate === (16 / 9).toFixed(1))
+        return "16:9";
+      if (rate === (4 / 3).toFixed(1))
+        return "4:3";
+      if (rate === (4 / 1).toFixed(1))
+        return "4:1";
+      if (rate === (3 / 4).toFixed(1))
+        return "3:4";
+      return "\u5176\u4ED6";
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
         vue.createElementVNode("div", _hoisted_1, [
@@ -33,13 +74,19 @@ const _sfc_main = vue.defineComponent({
             key: 0,
             class: "pic",
             style: vue.normalizeStyle({ "background-image": "url(" + _ctx.itemData.thumb + ")" })
-          }, null, 4)) : (vue.openBlock(), vue.createElementBlock("div", {
+          }, [
+            getRate.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, vue.toDisplayString(getRate.value), 1)) : vue.createCommentVNode("v-if", true),
+            _ctx.itemData.source === "ai" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, "AI\u751F\u6210")) : vue.createCommentVNode("v-if", true)
+          ], 4)) : (vue.openBlock(), vue.createElementBlock("div", {
             key: 1,
             class: vue.normalizeClass(["pic", `${_ctx.itemData.catalog} ${_ctx.itemData.series}`])
-          }, null, 2)),
+          }, [
+            getRate.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, vue.toDisplayString(getRate.value), 1)) : vue.createCommentVNode("v-if", true),
+            _ctx.itemData.source === "ai" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, "AI\u751F\u6210")) : vue.createCommentVNode("v-if", true)
+          ], 2)),
           vue.createVNode(vue.Transition, { name: "el-fade-in" }, {
             default: vue.withCtx(() => [
-              _ctx.preview ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+              _ctx.preview ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
                 vue.createElementVNode("span", {
                   class: "half",
                   onClick: vue.withModifiers(openPreview, ["stop"])

package/lib/resourceModal/style/FileTypeThumb.less

@@ -57,6 +57,27 @@
     }
   }
 
+  .tag {
+    position: absolute;
+    top: 8px;
+    left: 5px;
+    padding: 2px 8px;
+    color: white;
+    font-size: 12px;
+    background-color: rgba(#000, #000, #000, 0.4);
+    border-radius: 12px;
+  }
+
+  .rate-info-tag {
+    top: 8px;
+    left: 5px;
+  }
+
+  .ai-tag {
+    top: 8px;
+    right: 5px;
+  }
+
   .pic {
     width: 100%;
     padding-top: 56.25%;