@cmstops/pro-compo 0.3.9 → 0.3.11

package/es/selectThumb/component.js

@@ -6,60 +6,59 @@ import _sfc_main$4 from "../imageCrop/component.js";
 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 = {
+const _hoisted_1 = {
   key: 0,
   class: "star"
 };
-const _hoisted_3 = {
+const _hoisted_2 = {
   key: 1,
   style: { "margin-left": "10px" },
   class: "tip"
 };
-const _hoisted_4 = { class: "thumbbox" };
-const _hoisted_5 = {
+const _hoisted_3 = { class: "thumbbox" };
+const _hoisted_4 = {
   key: 0,
   class: "thumb-list-view"
 };
-const _hoisted_6 = { class: "thumb-list-view" };
-const _hoisted_7 = { style: { "margin-top": "-10px" } };
-const _hoisted_8 = {
+const _hoisted_5 = { class: "thumb-list-view" };
+const _hoisted_6 = { style: { "margin-top": "-10px" } };
+const _hoisted_7 = {
   key: 0,
   class: "tip"
 };
-const _hoisted_9 = /* @__PURE__ */ createElementVNode("span", { style: { "margin-right": "10px" } }, "\u72EC\u7ACB\u8F6E\u64AD\u56FE", -1);
-const _hoisted_10 = { class: "thumbbox" };
-const _hoisted_11 = {
+const _hoisted_8 = /* @__PURE__ */ createElementVNode("span", { style: { "margin-right": "10px" } }, "\u72EC\u7ACB\u8F6E\u64AD\u56FE", -1);
+const _hoisted_9 = { class: "thumbbox" };
+const _hoisted_10 = {
   key: 2,
   class: "title"
 };
-const _hoisted_12 = /* @__PURE__ */ createElementVNode("span", null, "\u72EC\u7ACB\u8F6E\u64AD\u56FE\u80CC\u666F\u989C\u8272", -1);
-const _hoisted_13 = [
-  _hoisted_12
+const _hoisted_11 = /* @__PURE__ */ createElementVNode("span", null, "\u72EC\u7ACB\u8F6E\u64AD\u56FE\u80CC\u666F\u989C\u8272", -1);
+const _hoisted_12 = [
+  _hoisted_11
 ];
-const _hoisted_14 = { key: 0 };
-const _hoisted_15 = {
+const _hoisted_13 = { key: 0 };
+const _hoisted_14 = {
   key: 0,
   class: "star"
 };
-const _hoisted_16 = { key: 1 };
-const _hoisted_17 = {
+const _hoisted_15 = { key: 1 };
+const _hoisted_16 = {
   key: 2,
   class: "tip",
   style: { "margin-left": "10px" }
 };
-const _hoisted_18 = { class: "thumbbox" };
-const _hoisted_19 = {
+const _hoisted_17 = { class: "thumbbox" };
+const _hoisted_18 = {
   key: 0,
   class: "tip"
 };
-const _hoisted_20 = {
+const _hoisted_19 = {
   key: 1,
   class: "title"
 };
-const _hoisted_21 = /* @__PURE__ */ createElementVNode("span", null, "\u56FE\u7247\u80CC\u666F\u989C\u8272", -1);
-const _hoisted_22 = [
-  _hoisted_21
+const _hoisted_20 = /* @__PURE__ */ createElementVNode("span", null, "\u56FE\u7247\u80CC\u666F\u989C\u8272", -1);
+const _hoisted_21 = [
+  _hoisted_20
 ];
 const _sfc_main = defineComponent({
   ...{ name: "selectThumb" },
@@ -87,6 +86,7 @@ const _sfc_main = defineComponent({
     const emit = __emit;
     const props = __props;
     const BASE_API = props.BASE_API || DEFAULT_BASE_API;
+    const selectThumbRef = ref();
     const oldData = ref(null);
     const styleData = ref({});
     const thumbBannerModel = ref("banner");
@@ -95,6 +95,7 @@ const _sfc_main = defineComponent({
     const thumbOptionIndex = ref(0);
     const aspectRatioProp = ref(16 / 9);
     const cropperData = ref([]);
+    const tempThumbFiles = ref([]);
     if (props.mediaUseType) {
       provide("mediaUseType", props.mediaUseType);
     }
@@ -218,13 +219,27 @@ const _sfc_main = defineComponent({
       }
       return modelList.value.find((item) => item.value === model.value);
     });
-    const thumbList = computed(() => {
-      var _a;
-      return ((_a = styleData.value) == null ? void 0 : _a.data) || [];
+    const thumbList = computed({
+      get() {
+        var _a;
+        return ((_a = styleData.value) == null ? void 0 : _a.data) || [];
+      },
+      set(value) {
+        styleData.value.data = value || [];
+      }
     });
     const previewList = computed(() => {
       return thumbList.value.map((item) => item.url);
     });
+    const fileForShowThumb = (data) => {
+      tempThumbFiles.value.push(data);
+      submitCallback(tempThumbFiles.value);
+    };
+    const changeThumbType = (type, index) => {
+      tempThumbFiles.value = [];
+      thumbBannerModel.value = type;
+      thumbOptionIndex.value = index;
+    };
     const openDialogMediaSelection = (type, index) => {
       thumbBannerModel.value = type || "thumb";
       thumbOptionIndex.value = index || 0;
@@ -250,8 +265,14 @@ const _sfc_main = defineComponent({
       } else if (thumbBannerModel.value === "thumb") {
         let temp = [];
         if (model.value === "1") {
+          let idx = 0;
           temp = JSON.parse(JSON.stringify(styleData.value.data));
-          temp[thumbOptionIndex.value] = { url: data[0].url, thumb: data[0].url };
+          for (let i = thumbOptionIndex.value; i < thumbOptionIndex.value + data.length; i++) {
+            if (i >= 3)
+              return;
+            temp[i] = { url: data[idx].url, thumb: data[idx].url };
+            idx++;
+          }
         } else {
           temp = [{ url: data[0].url, thumb: data[0].url }];
         }
@@ -314,9 +335,14 @@ const _sfc_main = defineComponent({
       }
       callback(styleData.value);
     };
-    const banner = computed(() => {
-      const { banner: banner2, banner_theme_color, banner_url } = styleData.value;
-      return { banner: banner2, banner_theme_color, url: banner_url };
+    const banner = computed({
+      get() {
+        const { banner: banner2, banner_theme_color, banner_url } = styleData.value;
+        return { banner: banner2, banner_theme_color, url: banner_url };
+      },
+      set(value) {
+        styleData.value.banner_url = value.url;
+      }
     });
     const hasBanner = computed({
       get() {
@@ -328,16 +354,25 @@ const _sfc_main = defineComponent({
         callback(styleData.value);
       }
     });
-    const pcBanner = computed(() => {
-      const { pc_banner_url_info, pc_banner_url } = styleData.value;
-      return { pc_banner_url_info, url: pc_banner_url };
+    const pcBanner = computed({
+      get() {
+        const { pc_banner_url_info, pc_banner_url } = styleData.value;
+        return { pc_banner_url_info, url: pc_banner_url };
+      },
+      set(value) {
+        styleData.value.pc_banner_url = value.url;
+      }
     });
     const colorChange = (styleData2) => {
       callback(styleData2);
     };
     return (_ctx, _cache) => {
       var _a, _b, _c, _d, _e, _f;
-      return openBlock(), createElementBlock("div", _hoisted_1, [
+      return openBlock(), createElementBlock("div", {
+        ref_key: "selectThumbRef",
+        ref: selectThumbRef,
+        class: "select-thumb-container"
+      }, [
         createCommentVNode(" \u5C01\u9762\u6807\u9898"),
         createElementVNode("div", {
           class: normalizeClass(["banner-view", { flex: _ctx.flex }])
@@ -347,46 +382,54 @@ const _sfc_main = defineComponent({
             class: "title",
             style: normalizeStyle({ width: _ctx.offset })
           }, [
-            _ctx.titleValid ? (openBlock(), createElementBlock("span", _hoisted_2, "*")) : createCommentVNode("v-if", true),
+            _ctx.titleValid ? (openBlock(), createElementBlock("span", _hoisted_1, "*")) : createCommentVNode("v-if", true),
             createElementVNode("span", null, toDisplayString(_ctx.title ? _ctx.title : "\u5C01\u9762"), 1),
             createCommentVNode(" \u4E0A\u4E0B\u5E03\u5C40\u663E\u793A tip"),
-            ((_a = curtemplate.value) == null ? void 0 : _a.value) !== "4" && !_ctx.flex ? (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)
+            ((_a = curtemplate.value) == null ? void 0 : _a.value) !== "4" && !_ctx.flex ? (openBlock(), createElementBlock("span", _hoisted_2, " (" + 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)
           ], 4)) : createCommentVNode("v-if", true),
-          createElementVNode("div", _hoisted_4, [
-            ["thumbs"].includes(_ctx.mode) ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          createElementVNode("div", _hoisted_3, [
+            ["thumbs"].includes(_ctx.mode) ? (openBlock(), createElementBlock("div", _hoisted_4, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(thumbsLengthList.value, (item, index) => {
                 return openBlock(), createBlock(_sfc_main$1, {
                   key: index,
                   id: `thumb-card-${index}`,
                   data: thumbList.value[index],
                   "onUpdate:data": ($event) => thumbList.value[index] = $event,
+                  parentRef: selectThumbRef.value,
+                  idx: index,
                   "preview-list": previewList.value,
                   "thumb-model": "thumb",
+                  onFileForShowThumb: fileForShowThumb,
+                  onChangeThumbType: changeThumbType,
                   onUploadLocal: _cache[0] || (_cache[0] = (cb) => _ctx.$emit("upload", cb)),
                   onOpen: ($event) => openDialogMediaSelection($event, index)
-                }, null, 8, ["id", "data", "onUpdate:data", "preview-list", "onOpen"]);
+                }, null, 8, ["id", "data", "onUpdate:data", "parentRef", "idx", "preview-list", "onOpen"]);
               }), 128))
             ])) : currentModel.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
               createCommentVNode(" \u5C01\u9762\u56FEcard "),
-              createElementVNode("div", _hoisted_6, [
+              createElementVNode("div", _hoisted_5, [
                 (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],
                     "onUpdate:data": ($event) => thumbList.value[index] = $event,
+                    parentRef: selectThumbRef.value,
                     model: model.value,
+                    idx: index,
                     "preview-list": previewList.value,
                     "thumb-model": "thumb",
+                    onFileForShowThumb: fileForShowThumb,
+                    onChangeThumbType: changeThumbType,
                     onUploadLocal: _cache[1] || (_cache[1] = (cb) => _ctx.$emit("upload", cb)),
                     onOpen: ($event) => openDialogMediaSelection($event, index)
-                  }, null, 8, ["id", "data", "onUpdate:data", "model", "preview-list", "onOpen"]);
+                  }, null, 8, ["id", "data", "onUpdate:data", "parentRef", "model", "idx", "preview-list", "onOpen"]);
                 }), 128))
               ])
             ], 2112)) : createCommentVNode("v-if", true),
             createCommentVNode(" \u5DE6\u53F3\u5E03\u5C40\u663E\u793Atip "),
-            createElementVNode("div", _hoisted_7, [
-              ((_d = curtemplate.value) == null ? void 0 : _d.value) !== "4" && _ctx.flex ? (openBlock(), createElementBlock("span", _hoisted_8, " (" + toDisplayString((_e = curtemplate.value) == null ? void 0 : _e.alias) + "\u6BD4\u4F8B\uFF1A" + toDisplayString((_f = curtemplate.value) == null ? void 0 : _f.ratioStr) + ") ", 1)) : createCommentVNode("v-if", true)
+            createElementVNode("div", _hoisted_6, [
+              ((_d = curtemplate.value) == null ? void 0 : _d.value) !== "4" && _ctx.flex ? (openBlock(), createElementBlock("span", _hoisted_7, " (" + toDisplayString((_e = curtemplate.value) == null ? void 0 : _e.alias) + "\u6BD4\u4F8B\uFF1A" + toDisplayString((_f = curtemplate.value) == null ? void 0 : _f.ratioStr) + ") ", 1)) : createCommentVNode("v-if", true)
             ]),
             ["doc"].includes(_ctx.mode) ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
               createCommentVNode(" \u9009\u62E9\u5927\u56FE\u3001\u4E09\u56FE\u3001\u5355\u56FE...\u7B49\u6A21\u5F0F "),
@@ -425,7 +468,7 @@ const _sfc_main = defineComponent({
               class: "title",
               style: normalizeStyle({ width: _ctx.offset })
             }, [
-              _hoisted_9,
+              _hoisted_8,
               createCommentVNode(" \u4E0A\u4E0B\u5E03\u5C40\u5F00\u5173\u5728\u6807\u9898\u540E "),
               !_ctx.flex ? (openBlock(), createBlock(unref(Switch), {
                 key: 0,
@@ -434,7 +477,7 @@ const _sfc_main = defineComponent({
                 size: "small"
               }, null, 8, ["modelValue"])) : createCommentVNode("v-if", true)
             ], 4),
-            createElementVNode("div", _hoisted_10, [
+            createElementVNode("div", _hoisted_9, [
               createCommentVNode(" \u5DE6\u53F3\u5E03\u5C40\u5F00\u5173\u663E\u793A "),
               _ctx.flex ? (openBlock(), createBlock(unref(Switch), {
                 key: 0,
@@ -448,12 +491,15 @@ const _sfc_main = defineComponent({
                 id: `banner-card`,
                 data: banner.value,
                 "onUpdate:data": _cache[5] || (_cache[5] = ($event) => banner.value = $event),
+                parentRef: selectThumbRef.value,
                 "preview-list": previewList.value,
                 "thumb-model": "banner",
+                onFileForShowThumb: fileForShowThumb,
+                onChangeThumbType: changeThumbType,
                 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),
+              }, null, 8, ["data", "parentRef", "preview-list"])) : createCommentVNode("v-if", true),
+              hasBanner.value && styleData.value.banner_theme_color ? (openBlock(), createElementBlock("div", _hoisted_10, _hoisted_12)) : createCommentVNode("v-if", true),
               createCommentVNode(" banner\u8C03\u8272\u677F "),
               hasBanner.value ? (openBlock(), createBlock(_sfc_main$2, {
                 key: 3,
@@ -471,24 +517,27 @@ const _sfc_main = defineComponent({
               class: "title",
               style: normalizeStyle({ width: _ctx.offset })
             }, [
-              docSeriesShowTopThemeColor.value ? (openBlock(), createElementBlock("span", _hoisted_14, [
-                _ctx.topImageTitleValid ? (openBlock(), createElementBlock("span", _hoisted_15, "*")) : createCommentVNode("v-if", true),
+              docSeriesShowTopThemeColor.value ? (openBlock(), createElementBlock("span", _hoisted_13, [
+                _ctx.topImageTitleValid ? (openBlock(), createElementBlock("span", _hoisted_14, "*")) : createCommentVNode("v-if", true),
                 createElementVNode("span", null, toDisplayString(_ctx.topImageTitle || "\u5C01\u9762\u5934\u56FE"), 1)
-              ])) : (openBlock(), createElementBlock("span", _hoisted_16, "PC\u5C01\u9762\u56FE")),
-              !_ctx.flex ? (openBlock(), createElementBlock("span", _hoisted_17, " (\u5EFA\u8BAE\u5C3A\u5BF8\uFF1A1242px*662px) ")) : createCommentVNode("v-if", true)
+              ])) : (openBlock(), createElementBlock("span", _hoisted_15, "PC\u5C01\u9762\u56FE")),
+              !_ctx.flex ? (openBlock(), createElementBlock("span", _hoisted_16, " (\u5EFA\u8BAE\u5C3A\u5BF8\uFF1A1242px*662px) ")) : createCommentVNode("v-if", true)
             ], 4),
-            createElementVNode("div", _hoisted_18, [
+            createElementVNode("div", _hoisted_17, [
               createVNode(_sfc_main$1, {
                 id: `pc-banner-card`,
                 data: pcBanner.value,
                 "onUpdate:data": _cache[7] || (_cache[7] = ($event) => pcBanner.value = $event),
+                parentRef: selectThumbRef.value,
                 previewList: previewList.value,
                 thumbModel: "pcBanner",
+                onFileForShowThumb: fileForShowThumb,
+                onChangeThumbType: changeThumbType,
                 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),
-              docSeriesShowTopThemeColor.value && styleData.value.top_theme_color ? (openBlock(), createElementBlock("div", _hoisted_20, _hoisted_22)) : createCommentVNode("v-if", true),
+              }, null, 8, ["data", "parentRef", "previewList"]),
+              _ctx.flex ? (openBlock(), createElementBlock("span", _hoisted_18, "(\u5EFA\u8BAE\u5C3A\u5BF8\uFF1A1242px*662px)")) : createCommentVNode("v-if", true),
+              docSeriesShowTopThemeColor.value && styleData.value.top_theme_color ? (openBlock(), createElementBlock("div", _hoisted_19, _hoisted_21)) : createCommentVNode("v-if", true),
               docSeriesShowTopThemeColor.value ? (openBlock(), createBlock(_sfc_main$2, {
                 key: 2,
                 model: "top",
@@ -518,7 +567,7 @@ const _sfc_main = defineComponent({
           "generate-assets": false,
           onConfirm: cropConfirm
         }, null, 8, ["visible", "aspect-ratio-prop", "BASE_API", "corp-data"])) : createCommentVNode("v-if", true)
-      ]);
+      ], 512);
     };
   }
 });

package/es/selectThumb/components/card.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, normalizeStyle, normalizeClass, createElementBlock, createVNode, Transition, withModifiers, createCommentVNode } from "vue";
+import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, normalizeClass, createElementBlock, createVNode, Transition, withModifiers, createCommentVNode, normalizeStyle } 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";
@@ -13,11 +13,20 @@ const _sfc_main = defineComponent({
     data: {},
     previewList: {},
     thumbModel: {},
+    parentRef: {},
+    idx: {},
     along: { type: Boolean },
-    model: {},
-    changeThumbModel: { type: Function }
+    model: {}
   },
-  emits: ["open", "remove", "uploadLocal", "update:data"],
+  emits: [
+    "open",
+    "remove",
+    "change",
+    "changeThumbType",
+    "fileForShowThumb",
+    "uploadLocal",
+    "update:data"
+  ],
   setup(__props, { emit: __emit }) {
     const waterBg = `${DEFAULT_BASE_API}/static/images/waterBg.png`;
     const props = __props;
@@ -30,22 +39,20 @@ 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("changeThumbType", props.thumbModel, props.idx || 0);
       emit("uploadLocal", (file) => {
-        const { data } = props;
-        if (!data || !file)
+        let { data } = props;
+        if (!file)
           return;
+        if (!data) {
+          data = {};
+        }
         data.url = file.url;
-        emit("update:data", data);
+        emit("fileForShowThumb", data);
       });
     };
     const openDialogMediaSelection = () => {
@@ -56,21 +63,16 @@ const _sfc_main = defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Popover), {
-        trigger: "hover",
-        "content-style": "padding: 0;"
+        trigger: "click",
+        position: "bottom",
+        "popup-container": props.parentRef
       }, {
         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)
+          createElementVNode("div", { onClick: openDialogMediaSelection }, "\u7D20\u6750\u5E93\u9009\u62E9"),
+          createElementVNode("div", { onClick: loaclUpload }, "\u672C\u5730\u4E0A\u4F20")
         ]),
         default: withCtx(() => {
-          var _a, _b;
+          var _a;
           return [
             createElementVNode("div", {
               class: normalizeClass(["thumb-card-container", classObj.value])
@@ -79,7 +81,8 @@ const _sfc_main = defineComponent({
                 createVNode(unref(Image), {
                   class: "item",
                   fit: "cover",
-                  src: (_b = props.data) == null ? void 0 : _b.url
+                  src: props.data.url,
+                  "show-loader": ""
                 }, null, 8, ["src"]),
                 createVNode(Transition, { name: "fade" }, {
                   default: withCtx(() => [
@@ -115,7 +118,7 @@ const _sfc_main = defineComponent({
           ];
         }),
         _: 1
-      });
+      }, 8, ["popup-container"]);
     };
   }
 });

package/es/selectThumb/style/index.css

@@ -108,6 +108,16 @@
   transition: transform 0.15s ease-in 0.05s;
   transform-origin: center;
 }
+.select-thumb-container .arco-trigger-popup .arco-popover-popup-content {
+  padding: 0;
+}
+.select-thumb-container .arco-trigger-popup .arco-popover-popup-content .arco-popover-content div {
+  padding: 5px 10px;
+}
+.select-thumb-container .arco-trigger-popup .arco-popover-popup-content .arco-popover-content div:hover {
+  background-color: #f3f6f9;
+  cursor: pointer;
+}
 .select-thumb-container .title {
   margin-bottom: 10px;
   color: #4e5969;

package/es/selectThumb/style/index.less

@@ -3,6 +3,23 @@
   @import './card.less';
   @import './colorPalette.less';
 
+  .arco-trigger-popup {
+    .arco-popover-popup-content {
+      padding: 0;
+
+      .arco-popover-content {
+        div {
+          padding: 5px 10px;
+
+          &:hover {
+            background-color: #f3f6f9;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+
   .title {
     margin-bottom: 10px;
     color: #4e5969;

package/lib/contentDetailList/components/Content/DocItem/index.js

@@ -119,11 +119,11 @@ const _sfc_main = vue.defineComponent({
         ]),
         vue.createElementVNode("div", _hoisted_4, [
           vue.createElementVNode("div", _hoisted_5, [
+            vue.renderSlot(_ctx.$slots, "index"),
             vue.createVNode(index$1, {
               item: _ctx.item,
               BASE_API: _ctx.BASE_API
             }, null, 8, ["item", "BASE_API"]),
-            vue.renderSlot(_ctx.$slots, "index"),
             vue.createElementVNode("span", {
               class: "text",
               onClick: clickTitle

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

@@ -2,7 +2,6 @@
 var vue = require("vue");
 var webVue = require("@arco-design/web-vue");
 var icon = require("@arco-design/web-vue/es/icon");
-require("html2canvas");
 var QRCode = require("qrcodejs2-fix");
 var date = require("../../../../utils/date.js");
 var api = require("../../../script/api.js");
@@ -90,6 +89,62 @@ const _sfc_main = vue.defineComponent({
         return true;
       return flag;
     });
+    const clip = (data) => {
+      try {
+        const input = document.createElement("input");
+        input.setAttribute("value", data);
+        document.body.appendChild(input);
+        input.select();
+        document.execCommand("copy");
+        document.body.removeChild(input);
+        webVue.Message.success({
+          content: "\u5DF2\u4FDD\u5B58\u5230\u7C98\u8D34\u677F"
+        });
+      } catch (e) {
+        console.log(e);
+        webVue.Message.success({
+          content: `\u4FDD\u5B58\u5931\u8D25`
+        });
+      }
+    };
+    const clipUrl = async (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`);
+        if (!img)
+          return;
+        const response = await fetch(img.src);
+        const blob = await response.blob();
+        if (!blob)
+          return;
+        try {
+          if (window.__POWERED_BY_WUJIE__) {
+            await window.parent.navigator.clipboard.write([
+              new ClipboardItem({
+                "image/png": blob
+              })
+            ]);
+          } else {
+            await navigator.clipboard.write([
+              new ClipboardItem({
+                "image/png": blob
+              })
+            ]);
+          }
+          webVue.Message.success({
+            content: "\u5DF2\u4FDD\u5B58\u5230\u7C98\u8D34\u677F"
+          });
+        } catch (e) {
+          console.log(e);
+          webVue.Message.success({
+            content: `\u4FDD\u5B58\u5931\u8D25`
+          });
+        }
+      }
+    };
     const genTimeLink = async (expiration2, force = true, tip = true) => {
       emit("changeLoading", true);
       const data = {
@@ -176,11 +231,11 @@ const _sfc_main = vue.defineComponent({
                 placeholder: "\u8BF7\u9009\u62E9"
               }, {
                 default: vue.withCtx(() => [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(expirationOptions.value, (time2, index) => {
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(expirationOptions.value, (t, index) => {
                     return vue.openBlock(), vue.createBlock(vue.unref(webVue.Option), {
                       key: index,
-                      label: time2.label,
-                      value: time2.value
+                      label: t.label,
+                      value: t.value
                     }, null, 8, ["label", "value"]);
                   }), 128))
                 ]),
@@ -188,7 +243,7 @@ const _sfc_main = vue.defineComponent({
               }, 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),
+          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,
@@ -197,12 +252,31 @@ const _sfc_main = vue.defineComponent({
               onClick: _cache[1] || (_cache[1] = ($event) => genTimeLink(expiration.value))
             }, {
               default: vue.withCtx(() => [
-                vue.createTextVNode("\u751F\u6210\u9884\u89C8\u94FE\u63A5")
+                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)
+              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))
           ])
         ])

package/lib/index.css

@@ -3548,6 +3548,16 @@
   transition: transform 0.15s ease-in 0.05s;
   transform-origin: center;
 }
+.select-thumb-container .arco-trigger-popup .arco-popover-popup-content {
+  padding: 0;
+}
+.select-thumb-container .arco-trigger-popup .arco-popover-popup-content .arco-popover-content div {
+  padding: 5px 10px;
+}
+.select-thumb-container .arco-trigger-popup .arco-popover-popup-content .arco-popover-content div:hover {
+  background-color: #f3f6f9;
+  cursor: pointer;
+}
 .select-thumb-container .title {
   margin-bottom: 10px;
   color: #4e5969;