@cmstops/pro-compo 0.3.7 → 0.3.9

package/es/contentDetailList/components/ShowQRCode/QrcodeView/index.js

@@ -1,7 +1,7 @@
-import { defineComponent, ref, computed, onMounted, onBeforeUnmount, openBlock, createElementBlock, createCommentVNode, createVNode, unref, withCtx, createElementVNode, Fragment, renderList, createBlock, toDisplayString, createTextVNode, nextTick } from "vue";
-import { Spin, Select, Option, Button, Message } from "@arco-design/web-vue";
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, openBlock, createElementBlock, createCommentVNode, createElementVNode, Fragment, createVNode, unref, withCtx, renderList, createBlock, toDisplayString, createTextVNode, nextTick } from "vue";
+import { Select, Option, Button, Message } from "@arco-design/web-vue";
 import { IconQrcode } from "@arco-design/web-vue/es/icon";
-import html2canvas from "html2canvas";
+import "html2canvas";
 import QRCode from "qrcodejs2-fix";
 import { getSpaceDate } from "../../../../utils/date.js";
 import { generateDocPreviewLink } from "../../../script/api.js";
@@ -41,8 +41,10 @@ const _sfc_main = defineComponent({
     docData: {},
     BASE_API: {}
   },
-  setup(__props) {
+  emits: ["changeLoading"],
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const qrcode = ref();
     const dataInfo = ref(null);
     const expirationOptions = ref([
@@ -56,7 +58,6 @@ const _sfc_main = defineComponent({
       { label: "30\u5929", value: 60 * 60 * 24 * 30 }
     ]);
     const expiration = ref(60 * 60 * 24);
-    const loading = ref(false);
     const interval = ref(null);
     const time = ref("");
     const local_url = ref("");
@@ -84,38 +85,8 @@ const _sfc_main = defineComponent({
         return true;
       return flag;
     });
-    const clip = (data) => {
-      const clipboard = typeof data === "string" ? navigator.clipboard.writeText(data) : navigator.clipboard.write(data);
-      clipboard.then(
-        () => {
-          Message.success({
-            content: "\u5DF2\u4FDD\u5B58\u5230\u7C98\u8D34\u677F"
-          });
-        },
-        () => {
-          Message.success({
-            content: "\u4FDD\u5B58\u5931\u8D25"
-          });
-        }
-      );
-    };
-    const clipUrl = (type) => {
-      if (!dataInfo.value.share.share_url)
-        return;
-      if (type === "text") {
-        clip(dataInfo.value.share.share_url);
-      } else {
-        const img = document.querySelector(`#${dynamicQRId.value} img`);
-        html2canvas(img).then((canvas) => {
-          canvas.toBlob((blob) => {
-            const data = [new ClipboardItem({ [blob.type]: blob })];
-            clip(data);
-          }, "image/png");
-        });
-      }
-    };
     const genTimeLink = async (expiration2, force = true, tip = true) => {
-      loading.value = true;
+      emit("changeLoading", true);
       const data = {
         force,
         hash_id: dataInfo.value.hash_id || dataInfo.value.hashid
@@ -133,7 +104,7 @@ const _sfc_main = defineComponent({
           nextTick(() => {
             loadQrcode(`${message.inner_url}?reqTime=${reqTime}`);
             setTimeout(() => {
-              loading.value = false;
+              emit("changeLoading", false);
             }, 500);
           });
         } else {
@@ -162,7 +133,6 @@ const _sfc_main = defineComponent({
     };
     onMounted(() => {
       dataInfo.value = props.docData;
-      console.log(1111, dataInfo.value);
       if (needLoadQR.value) {
         genTimeLink(60 * 60 * 24, false, false);
       }
@@ -177,87 +147,60 @@ const _sfc_main = defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createCommentVNode(" \u9884\u89C8\u624B\u673A\u626B\u7801 "),
-        createVNode(unref(Spin), {
-          loading: loading.value,
-          style: { "width": "100%", "height": "100%" }
-        }, {
-          default: withCtx(() => [
-            createElementVNode("div", _hoisted_2, [
-              is_share.value ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                id: dynamicQRId.value,
-                ref_key: "qrcode",
-                ref: qrcode,
-                class: "qrcode"
-              }, null, 8, _hoisted_3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                !is_publish.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
-                  createElementVNode("div", _hoisted_5, [
-                    createVNode(unref(IconQrcode), { size: 200 })
-                  ])
-                ])) : (openBlock(), createElementBlock("div", _hoisted_6, "\u6682\u65E0\u4E8C\u7EF4\u7801"))
-              ], 64)),
-              is_share.value ? (openBlock(), createElementBlock("div", _hoisted_7, "\u626B\u63CF\u4E8C\u7EF4\u7801\u8BBF\u95EE")) : (openBlock(), createElementBlock("div", _hoisted_8, [
-                _hoisted_9,
-                createElementVNode("span", null, [
-                  createVNode(unref(Select), {
-                    modelValue: expiration.value,
-                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => expiration.value = $event),
-                    size: "mini",
-                    placeholder: "\u8BF7\u9009\u62E9"
-                  }, {
-                    default: withCtx(() => [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(expirationOptions.value, (time2, index) => {
-                        return openBlock(), createBlock(unref(Option), {
-                          key: index,
-                          label: time2.label,
-                          value: time2.value
-                        }, null, 8, ["label", "value"]);
-                      }), 128))
-                    ]),
-                    _: 1
-                  }, 8, ["modelValue"])
-                ])
-              ])),
-              is_share.value && time.value ? (openBlock(), createElementBlock("div", _hoisted_10, "\u94FE\u63A5\u5269\u4F59\u65F6\u95F4: " + toDisplayString(time.value), 1)) : is_share.value && time.value === 0 ? (openBlock(), createElementBlock("div", _hoisted_11, "\u94FE\u63A5\u5DF2\u8FC7\u671F")) : createCommentVNode("v-if", true),
-              createElementVNode("div", _hoisted_12, [
-                showGetLink.value ? (openBlock(), createBlock(unref(Button), {
-                  key: 0,
-                  type: "primary",
-                  light: "",
-                  onClick: _cache[1] || (_cache[1] = ($event) => genTimeLink(expiration.value))
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode("\u751F\u6210\u9884\u89C8\u94FE\u63A5")
-                  ]),
-                  _: 1
-                })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                  createVNode(unref(Button), {
-                    class: "auto",
-                    light: "",
-                    onClick: _cache[2] || (_cache[2] = ($event) => clipUrl("img"))
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode("\u590D\u5236\u4E8C\u7EF4\u7801")
-                    ]),
-                    _: 1
-                  }),
-                  createVNode(unref(Button), {
-                    class: "auto",
-                    type: "primary",
-                    light: "",
-                    onClick: _cache[3] || (_cache[3] = ($event) => clipUrl("text"))
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(time.value ? "\u590D\u5236\u9884\u89C8\u5730\u5740" : "\u590D\u5236\u8BBF\u95EE\u5730\u5740"), 1)
-                    ]),
-                    _: 1
-                  })
-                ], 64))
+        createElementVNode("div", _hoisted_2, [
+          is_share.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            id: dynamicQRId.value,
+            ref_key: "qrcode",
+            ref: qrcode,
+            class: "qrcode"
+          }, null, 8, _hoisted_3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            !is_publish.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              createElementVNode("div", _hoisted_5, [
+                createVNode(unref(IconQrcode), { size: 200 })
               ])
+            ])) : (openBlock(), createElementBlock("div", _hoisted_6, "\u6682\u65E0\u4E8C\u7EF4\u7801"))
+          ], 64)),
+          is_share.value ? (openBlock(), createElementBlock("div", _hoisted_7, "\u626B\u63CF\u4E8C\u7EF4\u7801\u8BBF\u95EE")) : (openBlock(), createElementBlock("div", _hoisted_8, [
+            _hoisted_9,
+            createElementVNode("span", null, [
+              createVNode(unref(Select), {
+                modelValue: expiration.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => expiration.value = $event),
+                size: "mini",
+                placeholder: "\u8BF7\u9009\u62E9"
+              }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(expirationOptions.value, (time2, index) => {
+                    return openBlock(), createBlock(unref(Option), {
+                      key: index,
+                      label: time2.label,
+                      value: time2.value
+                    }, null, 8, ["label", "value"]);
+                  }), 128))
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
             ])
-          ]),
-          _: 1
-        }, 8, ["loading"])
+          ])),
+          is_share.value && time.value ? (openBlock(), createElementBlock("div", _hoisted_10, "\u94FE\u63A5\u5269\u4F59\u65F6\u95F4: " + toDisplayString(time.value), 1)) : is_share.value && time.value === 0 ? (openBlock(), createElementBlock("div", _hoisted_11, "\u94FE\u63A5\u5DF2\u8FC7\u671F")) : createCommentVNode("v-if", true),
+          createElementVNode("div", _hoisted_12, [
+            showGetLink.value ? (openBlock(), createBlock(unref(Button), {
+              key: 0,
+              type: "primary",
+              light: "",
+              onClick: _cache[1] || (_cache[1] = ($event) => genTimeLink(expiration.value))
+            }, {
+              default: withCtx(() => [
+                createTextVNode("\u751F\u6210\u9884\u89C8\u94FE\u63A5")
+              ]),
+              _: 1
+            })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createCommentVNode("v-if", true),
+              createCommentVNode("v-if", true)
+            ], 64))
+          ])
+        ])
       ]);
     };
   }

package/es/contentDetailList/components/ShowQRCode/index.js

@@ -1,5 +1,5 @@
-import { defineComponent, ref, openBlock, createBlock, unref, withCtx, withModifiers, createCommentVNode, createElementVNode, createVNode } from "vue";
-import { Popover } from "@arco-design/web-vue";
+import { defineComponent, ref, openBlock, createBlock, unref, withCtx, createVNode, withModifiers, createCommentVNode, createElementVNode } from "vue";
+import { Popover, Spin } from "@arco-design/web-vue";
 import { IconQrcode } from "@arco-design/web-vue/es/icon";
 import { getDocDetailsNew } from "../../script/api.js";
 import _sfc_main$1 from "./QrcodeView/index.js";
@@ -12,6 +12,7 @@ const _sfc_main = defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const loading = ref(false);
     const docData = ref(null);
     const showQR = ref(false);
     const getDocDetail = async () => {
@@ -23,26 +24,44 @@ const _sfc_main = defineComponent({
       }
     };
     const openPopover = () => {
+      loading.value = true;
       getDocDetail();
       setTimeout(() => {
         showQR.value = true;
       }, 500);
     };
+    const handleChangeLoading = (val) => {
+      loading.value = val;
+      console.log(1111, loading.value);
+    };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Popover), {
+        "content-style": {
+          minWidth: "224px",
+          minHeight: "300px"
+        },
         position: "bottom",
         trigger: "click",
         onShow: openPopover,
         onHide: _cache[1] || (_cache[1] = ($event) => showQR.value = false)
       }, {
         content: withCtx(() => [
-          showQR.value ? (openBlock(), createBlock(_sfc_main$1, {
-            key: 0,
-            BASE_API: _ctx.BASE_API,
-            docData: docData.value || props.item,
-            onClick: _cache[0] || (_cache[0] = withModifiers(() => {
-            }, ["stop"]))
-          }, null, 8, ["BASE_API", "docData"])) : createCommentVNode("v-if", true)
+          createVNode(unref(Spin), {
+            loading: loading.value,
+            style: { "min-width": "224px", "min-height": "300px" }
+          }, {
+            default: withCtx(() => [
+              showQR.value ? (openBlock(), createBlock(_sfc_main$1, {
+                key: 0,
+                BASE_API: _ctx.BASE_API,
+                docData: docData.value || props.item,
+                onChangeLoading: handleChangeLoading,
+                onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                }, ["stop"]))
+              }, null, 8, ["BASE_API", "docData"])) : createCommentVNode("v-if", true)
+            ]),
+            _: 1
+          }, 8, ["loading"])
         ]),
         default: withCtx(() => [
           createElementVNode("section", _hoisted_1, [

package/es/selectThumb/component.js

@@ -87,7 +87,6 @@ const _sfc_main = defineComponent({
     const emit = __emit;
     const props = __props;
     const BASE_API = props.BASE_API || DEFAULT_BASE_API;
-    ref(props.cropper || false);
     const oldData = ref(null);
     const styleData = ref({});
     const thumbBannerModel = ref("banner");
@@ -360,10 +359,12 @@ const _sfc_main = defineComponent({
                   key: index,
                   id: `thumb-card-${index}`,
                   data: thumbList.value[index],
+                  "onUpdate:data": ($event) => thumbList.value[index] = $event,
                   "preview-list": previewList.value,
                   "thumb-model": "thumb",
+                  onUploadLocal: _cache[0] || (_cache[0] = (cb) => _ctx.$emit("upload", cb)),
                   onOpen: ($event) => openDialogMediaSelection($event, index)
-                }, null, 8, ["id", "data", "preview-list", "onOpen"]);
+                }, null, 8, ["id", "data", "onUpdate:data", "preview-list", "onOpen"]);
               }), 128))
             ])) : currentModel.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
               createCommentVNode(" \u5C01\u9762\u56FEcard "),
@@ -373,11 +374,13 @@ const _sfc_main = defineComponent({
                     key: index,
                     id: `thumb-card-${index}`,
                     data: thumbList.value[index],
+                    "onUpdate:data": ($event) => thumbList.value[index] = $event,
                     model: model.value,
                     "preview-list": previewList.value,
                     "thumb-model": "thumb",
+                    onUploadLocal: _cache[1] || (_cache[1] = (cb) => _ctx.$emit("upload", cb)),
                     onOpen: ($event) => openDialogMediaSelection($event, index)
-                  }, null, 8, ["id", "data", "model", "preview-list", "onOpen"]);
+                  }, null, 8, ["id", "data", "onUpdate:data", "model", "preview-list", "onOpen"]);
                 }), 128))
               ])
             ], 2112)) : createCommentVNode("v-if", true),
@@ -389,7 +392,7 @@ const _sfc_main = defineComponent({
               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),
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => model.value = $event),
                 size: "small",
                 type: "button",
                 style: { "margin-top": "10px" },
@@ -427,7 +430,7 @@ const _sfc_main = defineComponent({
               !_ctx.flex ? (openBlock(), createBlock(unref(Switch), {
                 key: 0,
                 modelValue: hasBanner.value,
-                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => hasBanner.value = $event),
+                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => hasBanner.value = $event),
                 size: "small"
               }, null, 8, ["modelValue"])) : createCommentVNode("v-if", true)
             ], 4),
@@ -436,7 +439,7 @@ const _sfc_main = defineComponent({
               _ctx.flex ? (openBlock(), createBlock(unref(Switch), {
                 key: 0,
                 modelValue: hasBanner.value,
-                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => hasBanner.value = $event),
+                "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => hasBanner.value = $event),
                 style: { "margin-bottom": "10px" },
                 size: "small"
               }, null, 8, ["modelValue"])) : createCommentVNode("v-if", true),
@@ -444,8 +447,10 @@ const _sfc_main = defineComponent({
                 key: 1,
                 id: `banner-card`,
                 data: banner.value,
+                "onUpdate:data": _cache[5] || (_cache[5] = ($event) => banner.value = $event),
                 "preview-list": previewList.value,
                 "thumb-model": "banner",
+                onUploadLocal: _cache[6] || (_cache[6] = (cb) => _ctx.$emit("upload", cb)),
                 onOpen: openDialogMediaSelection
               }, null, 8, ["data", "preview-list"])) : createCommentVNode("v-if", true),
               hasBanner.value && styleData.value.banner_theme_color ? (openBlock(), createElementBlock("div", _hoisted_11, _hoisted_13)) : createCommentVNode("v-if", true),
@@ -476,8 +481,10 @@ const _sfc_main = defineComponent({
               createVNode(_sfc_main$1, {
                 id: `pc-banner-card`,
                 data: pcBanner.value,
+                "onUpdate:data": _cache[7] || (_cache[7] = ($event) => pcBanner.value = $event),
                 previewList: previewList.value,
                 thumbModel: "pcBanner",
+                onUploadLocal: _cache[8] || (_cache[8] = (cb) => _ctx.$emit("upload", cb)),
                 onOpen: openDialogMediaSelection
               }, null, 8, ["data", "previewList"]),
               _ctx.flex ? (openBlock(), createElementBlock("span", _hoisted_19, "(\u5EFA\u8BAE\u5C3A\u5BF8\uFF1A1242px*662px)")) : createCommentVNode("v-if", true),
@@ -493,18 +500,18 @@ const _sfc_main = defineComponent({
         ], 64)) : createCommentVNode("v-if", true),
         createVNode(_sfc_main$3, {
           dialogVisible: dialogMediaSelectionShow.value,
-          "onUpdate:dialogVisible": _cache[3] || (_cache[3] = ($event) => dialogMediaSelectionShow.value = $event),
+          "onUpdate:dialogVisible": _cache[9] || (_cache[9] = ($event) => dialogMediaSelectionShow.value = $event),
           preview: false,
           "catalog-props": "image",
           ai_static_covers: _ctx.aiImages,
           BASE_API: unref(BASE_API),
           onSubmit: submitCallback,
-          onUpload: _cache[4] || (_cache[4] = (cb) => _ctx.$emit("upload", cb))
+          onUpload: _cache[10] || (_cache[10] = (cb) => _ctx.$emit("upload", cb))
         }, null, 8, ["dialogVisible", "ai_static_covers", "BASE_API"]),
         refreshCrop.value ? (openBlock(), createBlock(_sfc_main$4, {
           key: 1,
           visible: dialogCropperShow.value,
-          "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => dialogCropperShow.value = $event),
+          "onUpdate:visible": _cache[11] || (_cache[11] = ($event) => dialogCropperShow.value = $event),
           "aspect-ratio-prop": aspectRatioProp.value,
           BASE_API: unref(BASE_API),
           "corp-data": cropperData.value,

package/es/selectThumb/components/card.js

@@ -1,5 +1,5 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createVNode, unref, Transition, withCtx, createElementVNode, withModifiers, createCommentVNode, normalizeStyle } from "vue";
-import { Image } from "@arco-design/web-vue";
+import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, normalizeStyle, normalizeClass, createElementBlock, createVNode, Transition, withModifiers, createCommentVNode } from "vue";
+import { Popover, Image } from "@arco-design/web-vue";
 import { IconEdit, IconDelete, IconPlus } from "@arco-design/web-vue/es/icon";
 import { DEFAULT_BASE_API } from "../../config.js";
 const _hoisted_1 = {
@@ -14,9 +14,10 @@ const _sfc_main = defineComponent({
     previewList: {},
     thumbModel: {},
     along: { type: Boolean },
-    model: {}
+    model: {},
+    changeThumbModel: { type: Function }
   },
-  emits: ["open", "remove"],
+  emits: ["open", "remove", "uploadLocal", "update:data"],
   setup(__props, { emit: __emit }) {
     const waterBg = `${DEFAULT_BASE_API}/static/images/waterBg.png`;
     const props = __props;
@@ -29,9 +30,24 @@ const _sfc_main = defineComponent({
         [`model-${props.model}`]: ((_a = props.data) == null ? void 0 : _a.url) && props.model
       };
     });
+    const btnStyle = computed(() => {
+      return {
+        padding: "5px 10px",
+        cursor: "pointer"
+      };
+    });
     const clickMask = () => {
       props.along && openDialogMediaSelection();
     };
+    const loaclUpload = () => {
+      emit("uploadLocal", (file) => {
+        const { data } = props;
+        if (!data || !file)
+          return;
+        data.url = file.url;
+        emit("update:data", data);
+      });
+    };
     const openDialogMediaSelection = () => {
       emit("open", props.thumbModel);
     };
@@ -39,48 +55,67 @@ const _sfc_main = defineComponent({
       emit("remove");
     };
     return (_ctx, _cache) => {
-      var _a, _b;
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["thumb-card-container", classObj.value])
-      }, [
-        ((_a = props.data) == null ? void 0 : _a.url) ? (openBlock(), createElementBlock("div", _hoisted_1, [
-          createVNode(unref(Image), {
-            class: "item",
-            fit: "cover",
-            src: (_b = props.data) == null ? void 0 : _b.url
-          }, null, 8, ["src"]),
-          createVNode(Transition, { name: "fade" }, {
-            default: withCtx(() => [
-              createElementVNode("div", {
-                class: "mask",
-                onClick: clickMask
+      return openBlock(), createBlock(unref(Popover), {
+        trigger: "hover",
+        "content-style": "padding: 0;"
+      }, {
+        content: withCtx(() => [
+          createElementVNode("div", {
+            style: normalizeStyle(btnStyle.value),
+            onClick: openDialogMediaSelection
+          }, "\u7D20\u6750\u5E93\u9009\u62E9", 4),
+          createElementVNode("div", {
+            style: normalizeStyle(btnStyle.value),
+            onClick: loaclUpload
+          }, "\u672C\u5730\u4E0A\u4F20", 4)
+        ]),
+        default: withCtx(() => {
+          var _a, _b;
+          return [
+            createElementVNode("div", {
+              class: normalizeClass(["thumb-card-container", classObj.value])
+            }, [
+              ((_a = props.data) == null ? void 0 : _a.url) ? (openBlock(), createElementBlock("div", _hoisted_1, [
+                createVNode(unref(Image), {
+                  class: "item",
+                  fit: "cover",
+                  src: (_b = props.data) == null ? void 0 : _b.url
+                }, null, 8, ["src"]),
+                createVNode(Transition, { name: "fade" }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", {
+                      class: "mask",
+                      onClick: clickMask
+                    }, [
+                      createElementVNode("span", {
+                        class: "half",
+                        onClick: withModifiers(openDialogMediaSelection, ["stop"])
+                      }, [
+                        createVNode(unref(IconEdit))
+                      ]),
+                      _ctx.along ? (openBlock(), createElementBlock("span", {
+                        key: 0,
+                        class: "half",
+                        onClick: withModifiers(remove, ["stop"])
+                      }, [
+                        createVNode(unref(IconDelete))
+                      ])) : createCommentVNode("v-if", true)
+                    ])
+                  ]),
+                  _: 1
+                })
+              ])) : (openBlock(), createElementBlock("div", {
+                key: 1,
+                class: "item add-thumb",
+                style: normalizeStyle({ backgroundImage: `url(${waterBg})` })
               }, [
-                createElementVNode("span", {
-                  class: "half",
-                  onClick: withModifiers(openDialogMediaSelection, ["stop"])
-                }, [
-                  createVNode(unref(IconEdit))
-                ]),
-                _ctx.along ? (openBlock(), createElementBlock("span", {
-                  key: 0,
-                  class: "half",
-                  onClick: withModifiers(remove, ["stop"])
-                }, [
-                  createVNode(unref(IconDelete))
-                ])) : createCommentVNode("v-if", true)
-              ])
-            ]),
-            _: 1
-          })
-        ])) : (openBlock(), createElementBlock("div", {
-          key: 1,
-          class: "item add-thumb",
-          style: normalizeStyle({ backgroundImage: `url(${waterBg})` }),
-          onClick: withModifiers(openDialogMediaSelection, ["stop"])
-        }, [
-          createVNode(unref(IconPlus))
-        ], 4))
-      ], 2);
+                createVNode(unref(IconPlus))
+              ], 4))
+            ], 2)
+          ];
+        }),
+        _: 1
+      });
     };
   }
 });

package/es/style/index.less

@@ -1 +1 @@
-// Global Style
+// Global Style

package/lib/contentDetailList/components/ShowQRCode/QrcodeView/index.js

@@ -2,14 +2,13 @@
 var vue = require("vue");
 var webVue = require("@arco-design/web-vue");
 var icon = require("@arco-design/web-vue/es/icon");
-var html2canvas = require("html2canvas");
+require("html2canvas");
 var QRCode = require("qrcodejs2-fix");
 var date = require("../../../../utils/date.js");
 var api = require("../../../script/api.js");
 function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };
 }
-var html2canvas__default = /* @__PURE__ */ _interopDefaultLegacy(html2canvas);
 var QRCode__default = /* @__PURE__ */ _interopDefaultLegacy(QRCode);
 const _hoisted_1 = { class: "preview-qrcode-iframe-container-v" };
 const _hoisted_2 = { class: "doc-qrcode-preview-container-v" };
@@ -47,8 +46,10 @@ const _sfc_main = vue.defineComponent({
     docData: {},
     BASE_API: {}
   },
-  setup(__props) {
+  emits: ["changeLoading"],
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const qrcode = vue.ref();
     const dataInfo = vue.ref(null);
     const expirationOptions = vue.ref([
@@ -62,7 +63,6 @@ const _sfc_main = vue.defineComponent({
       { label: "30\u5929", value: 60 * 60 * 24 * 30 }
     ]);
     const expiration = vue.ref(60 * 60 * 24);
-    const loading = vue.ref(false);
     const interval = vue.ref(null);
     const time = vue.ref("");
     const local_url = vue.ref("");
@@ -90,38 +90,8 @@ const _sfc_main = vue.defineComponent({
         return true;
       return flag;
     });
-    const clip = (data) => {
-      const clipboard = typeof data === "string" ? navigator.clipboard.writeText(data) : navigator.clipboard.write(data);
-      clipboard.then(
-        () => {
-          webVue.Message.success({
-            content: "\u5DF2\u4FDD\u5B58\u5230\u7C98\u8D34\u677F"
-          });
-        },
-        () => {
-          webVue.Message.success({
-            content: "\u4FDD\u5B58\u5931\u8D25"
-          });
-        }
-      );
-    };
-    const clipUrl = (type) => {
-      if (!dataInfo.value.share.share_url)
-        return;
-      if (type === "text") {
-        clip(dataInfo.value.share.share_url);
-      } else {
-        const img = document.querySelector(`#${dynamicQRId.value} img`);
-        html2canvas__default["default"](img).then((canvas) => {
-          canvas.toBlob((blob) => {
-            const data = [new ClipboardItem({ [blob.type]: blob })];
-            clip(data);
-          }, "image/png");
-        });
-      }
-    };
     const genTimeLink = async (expiration2, force = true, tip = true) => {
-      loading.value = true;
+      emit("changeLoading", true);
       const data = {
         force,
         hash_id: dataInfo.value.hash_id || dataInfo.value.hashid
@@ -139,7 +109,7 @@ const _sfc_main = vue.defineComponent({
           vue.nextTick(() => {
             loadQrcode(`${message.inner_url}?reqTime=${reqTime}`);
             setTimeout(() => {
-              loading.value = false;
+              emit("changeLoading", false);
             }, 500);
           });
         } else {
@@ -168,7 +138,6 @@ const _sfc_main = vue.defineComponent({
     };
     vue.onMounted(() => {
       dataInfo.value = props.docData;
-      console.log(1111, dataInfo.value);
       if (needLoadQR.value) {
         genTimeLink(60 * 60 * 24, false, false);
       }
@@ -183,87 +152,60 @@ const _sfc_main = vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
         vue.createCommentVNode(" \u9884\u89C8\u624B\u673A\u626B\u7801 "),
-        vue.createVNode(vue.unref(webVue.Spin), {
-          loading: loading.value,
-          style: { "width": "100%", "height": "100%" }
-        }, {
-          default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_2, [
-              is_share.value ? (vue.openBlock(), vue.createElementBlock("div", {
-                key: 0,
-                id: dynamicQRId.value,
-                ref_key: "qrcode",
-                ref: qrcode,
-                class: "qrcode"
-              }, null, 8, _hoisted_3)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                !is_publish.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
-                  vue.createElementVNode("div", _hoisted_5, [
-                    vue.createVNode(vue.unref(icon.IconQrcode), { size: 200 })
-                  ])
-                ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, "\u6682\u65E0\u4E8C\u7EF4\u7801"))
-              ], 64)),
-              is_share.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, "\u626B\u63CF\u4E8C\u7EF4\u7801\u8BBF\u95EE")) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
-                _hoisted_9,
-                vue.createElementVNode("span", null, [
-                  vue.createVNode(vue.unref(webVue.Select), {
-                    modelValue: expiration.value,
-                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => expiration.value = $event),
-                    size: "mini",
-                    placeholder: "\u8BF7\u9009\u62E9"
-                  }, {
-                    default: vue.withCtx(() => [
-                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(expirationOptions.value, (time2, index) => {
-                        return vue.openBlock(), vue.createBlock(vue.unref(webVue.Option), {
-                          key: index,
-                          label: time2.label,
-                          value: time2.value
-                        }, null, 8, ["label", "value"]);
-                      }), 128))
-                    ]),
-                    _: 1
-                  }, 8, ["modelValue"])
-                ])
-              ])),
-              is_share.value && time.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, "\u94FE\u63A5\u5269\u4F59\u65F6\u95F4: " + vue.toDisplayString(time.value), 1)) : is_share.value && time.value === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, "\u94FE\u63A5\u5DF2\u8FC7\u671F")) : vue.createCommentVNode("v-if", true),
-              vue.createElementVNode("div", _hoisted_12, [
-                showGetLink.value ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Button), {
-                  key: 0,
-                  type: "primary",
-                  light: "",
-                  onClick: _cache[1] || (_cache[1] = ($event) => genTimeLink(expiration.value))
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createTextVNode("\u751F\u6210\u9884\u89C8\u94FE\u63A5")
-                  ]),
-                  _: 1
-                })) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                  vue.createVNode(vue.unref(webVue.Button), {
-                    class: "auto",
-                    light: "",
-                    onClick: _cache[2] || (_cache[2] = ($event) => clipUrl("img"))
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode("\u590D\u5236\u4E8C\u7EF4\u7801")
-                    ]),
-                    _: 1
-                  }),
-                  vue.createVNode(vue.unref(webVue.Button), {
-                    class: "auto",
-                    type: "primary",
-                    light: "",
-                    onClick: _cache[3] || (_cache[3] = ($event) => clipUrl("text"))
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode(vue.toDisplayString(time.value ? "\u590D\u5236\u9884\u89C8\u5730\u5740" : "\u590D\u5236\u8BBF\u95EE\u5730\u5740"), 1)
-                    ]),
-                    _: 1
-                  })
-                ], 64))
+        vue.createElementVNode("div", _hoisted_2, [
+          is_share.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            id: dynamicQRId.value,
+            ref_key: "qrcode",
+            ref: qrcode,
+            class: "qrcode"
+          }, null, 8, _hoisted_3)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+            !is_publish.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+              vue.createElementVNode("div", _hoisted_5, [
+                vue.createVNode(vue.unref(icon.IconQrcode), { size: 200 })
               ])
+            ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, "\u6682\u65E0\u4E8C\u7EF4\u7801"))
+          ], 64)),
+          is_share.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, "\u626B\u63CF\u4E8C\u7EF4\u7801\u8BBF\u95EE")) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+            _hoisted_9,
+            vue.createElementVNode("span", null, [
+              vue.createVNode(vue.unref(webVue.Select), {
+                modelValue: expiration.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => expiration.value = $event),
+                size: "mini",
+                placeholder: "\u8BF7\u9009\u62E9"
+              }, {
+                default: vue.withCtx(() => [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(expirationOptions.value, (time2, index) => {
+                    return vue.openBlock(), vue.createBlock(vue.unref(webVue.Option), {
+                      key: index,
+                      label: time2.label,
+                      value: time2.value
+                    }, null, 8, ["label", "value"]);
+                  }), 128))
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
             ])
-          ]),
-          _: 1
-        }, 8, ["loading"])
+          ])),
+          is_share.value && time.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, "\u94FE\u63A5\u5269\u4F59\u65F6\u95F4: " + vue.toDisplayString(time.value), 1)) : is_share.value && time.value === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, "\u94FE\u63A5\u5DF2\u8FC7\u671F")) : vue.createCommentVNode("v-if", true),
+          vue.createElementVNode("div", _hoisted_12, [
+            showGetLink.value ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Button), {
+              key: 0,
+              type: "primary",
+              light: "",
+              onClick: _cache[1] || (_cache[1] = ($event) => genTimeLink(expiration.value))
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode("\u751F\u6210\u9884\u89C8\u94FE\u63A5")
+              ]),
+              _: 1
+            })) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+              vue.createCommentVNode("v-if", true),
+              vue.createCommentVNode("v-if", true)
+            ], 64))
+          ])
+        ])
       ]);
     };
   }

package/lib/contentDetailList/components/ShowQRCode/index.js

@@ -13,6 +13,7 @@ const _sfc_main = vue.defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const loading = vue.ref(false);
     const docData = vue.ref(null);
     const showQR = vue.ref(false);
     const getDocDetail = async () => {
@@ -24,26 +25,44 @@ const _sfc_main = vue.defineComponent({
       }
     };
     const openPopover = () => {
+      loading.value = true;
       getDocDetail();
       setTimeout(() => {
         showQR.value = true;
       }, 500);
     };
+    const handleChangeLoading = (val) => {
+      loading.value = val;
+      console.log(1111, loading.value);
+    };
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(webVue.Popover), {
+        "content-style": {
+          minWidth: "224px",
+          minHeight: "300px"
+        },
         position: "bottom",
         trigger: "click",
         onShow: openPopover,
         onHide: _cache[1] || (_cache[1] = ($event) => showQR.value = false)
       }, {
         content: vue.withCtx(() => [
-          showQR.value ? (vue.openBlock(), vue.createBlock(index, {
-            key: 0,
-            BASE_API: _ctx.BASE_API,
-            docData: docData.value || props.item,
-            onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
-            }, ["stop"]))
-          }, null, 8, ["BASE_API", "docData"])) : vue.createCommentVNode("v-if", true)
+          vue.createVNode(vue.unref(webVue.Spin), {
+            loading: loading.value,
+            style: { "min-width": "224px", "min-height": "300px" }
+          }, {
+            default: vue.withCtx(() => [
+              showQR.value ? (vue.openBlock(), vue.createBlock(index, {
+                key: 0,
+                BASE_API: _ctx.BASE_API,
+                docData: docData.value || props.item,
+                onChangeLoading: handleChangeLoading,
+                onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+                }, ["stop"]))
+              }, null, 8, ["BASE_API", "docData"])) : vue.createCommentVNode("v-if", true)
+            ]),
+            _: 1
+          }, 8, ["loading"])
         ]),
         default: vue.withCtx(() => [
           vue.createElementVNode("section", _hoisted_1, [

package/lib/selectThumb/component.js

@@ -88,7 +88,6 @@ const _sfc_main = vue.defineComponent({
     const emit = __emit;
     const props = __props;
     const BASE_API = props.BASE_API || config.DEFAULT_BASE_API;
-    vue.ref(props.cropper || false);
     const oldData = vue.ref(null);
     const styleData = vue.ref({});
     const thumbBannerModel = vue.ref("banner");
@@ -361,10 +360,12 @@ const _sfc_main = vue.defineComponent({
                   key: index,
                   id: `thumb-card-${index}`,
                   data: thumbList.value[index],
+                  "onUpdate:data": ($event) => thumbList.value[index] = $event,
                   "preview-list": previewList.value,
                   "thumb-model": "thumb",
+                  onUploadLocal: _cache[0] || (_cache[0] = (cb) => _ctx.$emit("upload", cb)),
                   onOpen: ($event) => openDialogMediaSelection($event, index)
-                }, null, 8, ["id", "data", "preview-list", "onOpen"]);
+                }, null, 8, ["id", "data", "onUpdate:data", "preview-list", "onOpen"]);
               }), 128))
             ])) : currentModel.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
               vue.createCommentVNode(" \u5C01\u9762\u56FEcard "),
@@ -374,11 +375,13 @@ const _sfc_main = vue.defineComponent({
                     key: index,
                     id: `thumb-card-${index}`,
                     data: thumbList.value[index],
+                    "onUpdate:data": ($event) => thumbList.value[index] = $event,
                     model: model.value,
                     "preview-list": previewList.value,
                     "thumb-model": "thumb",
+                    onUploadLocal: _cache[1] || (_cache[1] = (cb) => _ctx.$emit("upload", cb)),
                     onOpen: ($event) => openDialogMediaSelection($event, index)
-                  }, null, 8, ["id", "data", "model", "preview-list", "onOpen"]);
+                  }, null, 8, ["id", "data", "onUpdate:data", "model", "preview-list", "onOpen"]);
                 }), 128))
               ])
             ], 2112)) : vue.createCommentVNode("v-if", true),
@@ -390,7 +393,7 @@ const _sfc_main = vue.defineComponent({
               vue.createCommentVNode(" \u9009\u62E9\u5927\u56FE\u3001\u4E09\u56FE\u3001\u5355\u56FE...\u7B49\u6A21\u5F0F "),
               vue.createVNode(vue.unref(webVue.RadioGroup), {
                 modelValue: model.value,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => model.value = $event),
                 size: "small",
                 type: "button",
                 style: { "margin-top": "10px" },
@@ -428,7 +431,7 @@ const _sfc_main = vue.defineComponent({
               !_ctx.flex ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Switch), {
                 key: 0,
                 modelValue: hasBanner.value,
-                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => hasBanner.value = $event),
+                "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => hasBanner.value = $event),
                 size: "small"
               }, null, 8, ["modelValue"])) : vue.createCommentVNode("v-if", true)
             ], 4),
@@ -437,7 +440,7 @@ const _sfc_main = vue.defineComponent({
               _ctx.flex ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Switch), {
                 key: 0,
                 modelValue: hasBanner.value,
-                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => hasBanner.value = $event),
+                "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => hasBanner.value = $event),
                 style: { "margin-bottom": "10px" },
                 size: "small"
               }, null, 8, ["modelValue"])) : vue.createCommentVNode("v-if", true),
@@ -445,8 +448,10 @@ const _sfc_main = vue.defineComponent({
                 key: 1,
                 id: `banner-card`,
                 data: banner.value,
+                "onUpdate:data": _cache[5] || (_cache[5] = ($event) => banner.value = $event),
                 "preview-list": previewList.value,
                 "thumb-model": "banner",
+                onUploadLocal: _cache[6] || (_cache[6] = (cb) => _ctx.$emit("upload", cb)),
                 onOpen: openDialogMediaSelection
               }, null, 8, ["data", "preview-list"])) : vue.createCommentVNode("v-if", true),
               hasBanner.value && styleData.value.banner_theme_color ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, _hoisted_13)) : vue.createCommentVNode("v-if", true),
@@ -477,8 +482,10 @@ const _sfc_main = vue.defineComponent({
               vue.createVNode(card, {
                 id: `pc-banner-card`,
                 data: pcBanner.value,
+                "onUpdate:data": _cache[7] || (_cache[7] = ($event) => pcBanner.value = $event),
                 previewList: previewList.value,
                 thumbModel: "pcBanner",
+                onUploadLocal: _cache[8] || (_cache[8] = (cb) => _ctx.$emit("upload", cb)),
                 onOpen: openDialogMediaSelection
               }, null, 8, ["data", "previewList"]),
               _ctx.flex ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_19, "(\u5EFA\u8BAE\u5C3A\u5BF8\uFF1A1242px*662px)")) : vue.createCommentVNode("v-if", true),
@@ -494,18 +501,18 @@ const _sfc_main = vue.defineComponent({
         ], 64)) : vue.createCommentVNode("v-if", true),
         vue.createVNode(component, {
           dialogVisible: dialogMediaSelectionShow.value,
-          "onUpdate:dialogVisible": _cache[3] || (_cache[3] = ($event) => dialogMediaSelectionShow.value = $event),
+          "onUpdate:dialogVisible": _cache[9] || (_cache[9] = ($event) => dialogMediaSelectionShow.value = $event),
           preview: false,
           "catalog-props": "image",
           ai_static_covers: _ctx.aiImages,
           BASE_API: vue.unref(BASE_API),
           onSubmit: submitCallback,
-          onUpload: _cache[4] || (_cache[4] = (cb) => _ctx.$emit("upload", cb))
+          onUpload: _cache[10] || (_cache[10] = (cb) => _ctx.$emit("upload", cb))
         }, null, 8, ["dialogVisible", "ai_static_covers", "BASE_API"]),
         refreshCrop.value ? (vue.openBlock(), vue.createBlock(component$1, {
           key: 1,
           visible: dialogCropperShow.value,
-          "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => dialogCropperShow.value = $event),
+          "onUpdate:visible": _cache[11] || (_cache[11] = ($event) => dialogCropperShow.value = $event),
           "aspect-ratio-prop": aspectRatioProp.value,
           BASE_API: vue.unref(BASE_API),
           "corp-data": cropperData.value,

package/lib/selectThumb/components/card.js

@@ -15,9 +15,10 @@ const _sfc_main = vue.defineComponent({
     previewList: {},
     thumbModel: {},
     along: { type: Boolean },
-    model: {}
+    model: {},
+    changeThumbModel: { type: Function }
   },
-  emits: ["open", "remove"],
+  emits: ["open", "remove", "uploadLocal", "update:data"],
   setup(__props, { emit: __emit }) {
     const waterBg = `${config.DEFAULT_BASE_API}/static/images/waterBg.png`;
     const props = __props;
@@ -30,9 +31,24 @@ const _sfc_main = vue.defineComponent({
         [`model-${props.model}`]: ((_a = props.data) == null ? void 0 : _a.url) && props.model
       };
     });
+    const btnStyle = vue.computed(() => {
+      return {
+        padding: "5px 10px",
+        cursor: "pointer"
+      };
+    });
     const clickMask = () => {
       props.along && openDialogMediaSelection();
     };
+    const loaclUpload = () => {
+      emit("uploadLocal", (file) => {
+        const { data } = props;
+        if (!data || !file)
+          return;
+        data.url = file.url;
+        emit("update:data", data);
+      });
+    };
     const openDialogMediaSelection = () => {
       emit("open", props.thumbModel);
     };
@@ -40,48 +56,67 @@ const _sfc_main = vue.defineComponent({
       emit("remove");
     };
     return (_ctx, _cache) => {
-      var _a, _b;
-      return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(["thumb-card-container", classObj.value])
-      }, [
-        ((_a = props.data) == null ? void 0 : _a.url) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-          vue.createVNode(vue.unref(webVue.Image), {
-            class: "item",
-            fit: "cover",
-            src: (_b = props.data) == null ? void 0 : _b.url
-          }, null, 8, ["src"]),
-          vue.createVNode(vue.Transition, { name: "fade" }, {
-            default: vue.withCtx(() => [
-              vue.createElementVNode("div", {
-                class: "mask",
-                onClick: clickMask
+      return vue.openBlock(), vue.createBlock(vue.unref(webVue.Popover), {
+        trigger: "hover",
+        "content-style": "padding: 0;"
+      }, {
+        content: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            style: vue.normalizeStyle(btnStyle.value),
+            onClick: openDialogMediaSelection
+          }, "\u7D20\u6750\u5E93\u9009\u62E9", 4),
+          vue.createElementVNode("div", {
+            style: vue.normalizeStyle(btnStyle.value),
+            onClick: loaclUpload
+          }, "\u672C\u5730\u4E0A\u4F20", 4)
+        ]),
+        default: vue.withCtx(() => {
+          var _a, _b;
+          return [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(["thumb-card-container", classObj.value])
+            }, [
+              ((_a = props.data) == null ? void 0 : _a.url) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+                vue.createVNode(vue.unref(webVue.Image), {
+                  class: "item",
+                  fit: "cover",
+                  src: (_b = props.data) == null ? void 0 : _b.url
+                }, null, 8, ["src"]),
+                vue.createVNode(vue.Transition, { name: "fade" }, {
+                  default: vue.withCtx(() => [
+                    vue.createElementVNode("div", {
+                      class: "mask",
+                      onClick: clickMask
+                    }, [
+                      vue.createElementVNode("span", {
+                        class: "half",
+                        onClick: vue.withModifiers(openDialogMediaSelection, ["stop"])
+                      }, [
+                        vue.createVNode(vue.unref(icon.IconEdit))
+                      ]),
+                      _ctx.along ? (vue.openBlock(), vue.createElementBlock("span", {
+                        key: 0,
+                        class: "half",
+                        onClick: vue.withModifiers(remove, ["stop"])
+                      }, [
+                        vue.createVNode(vue.unref(icon.IconDelete))
+                      ])) : vue.createCommentVNode("v-if", true)
+                    ])
+                  ]),
+                  _: 1
+                })
+              ])) : (vue.openBlock(), vue.createElementBlock("div", {
+                key: 1,
+                class: "item add-thumb",
+                style: vue.normalizeStyle({ backgroundImage: `url(${waterBg})` })
               }, [
-                vue.createElementVNode("span", {
-                  class: "half",
-                  onClick: vue.withModifiers(openDialogMediaSelection, ["stop"])
-                }, [
-                  vue.createVNode(vue.unref(icon.IconEdit))
-                ]),
-                _ctx.along ? (vue.openBlock(), vue.createElementBlock("span", {
-                  key: 0,
-                  class: "half",
-                  onClick: vue.withModifiers(remove, ["stop"])
-                }, [
-                  vue.createVNode(vue.unref(icon.IconDelete))
-                ])) : vue.createCommentVNode("v-if", true)
-              ])
-            ]),
-            _: 1
-          })
-        ])) : (vue.openBlock(), vue.createElementBlock("div", {
-          key: 1,
-          class: "item add-thumb",
-          style: vue.normalizeStyle({ backgroundImage: `url(${waterBg})` }),
-          onClick: vue.withModifiers(openDialogMediaSelection, ["stop"])
-        }, [
-          vue.createVNode(vue.unref(icon.IconPlus))
-        ], 4))
-      ], 2);
+                vue.createVNode(vue.unref(icon.IconPlus))
+              ], 4))
+            ], 2)
+          ];
+        }),
+        _: 1
+      });
     };
   }
 });

package/lib/style/index.less

@@ -1 +1 @@
-// Global Style
+// Global Style

package/package.json

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