yx-web-sdk 0.0.26 → 0.0.28

package/dist/yx-web-sdk.es.js

@@ -38867,7 +38867,7 @@ const _hoisted_17$2 = {
 const _hoisted_18$2 = { class: "chatCardQuoteMsgName" };
 const _hoisted_19$2 = ["innerHTML"];
 const _hoisted_20$2 = { class: "ant-image-mask-info" };
-const _hoisted_21$2 = { class: "chatCardStatus" };
+const _hoisted_21$1 = { class: "chatCardStatus" };
 const MAX_IMG_PREVIEW_SIZE = 2 * 1024 * 1024;
 const REVOCATION_INTERVAL = 120 * 1e3;
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
@@ -38905,19 +38905,90 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       return props.msg.fromAccount === props.myAccid && nowTime.value - props.msg.time <= REVOCATION_INTERVAL;
     });
     const { copy } = useClipboard();
+    const imageBlobCache = /* @__PURE__ */ new Map();
+    async function fetchImageAsPngBlob(url) {
+      const response = await fetch(url);
+      const blob = await response.blob();
+      if (blob.type === "image/png") {
+        return blob;
+      }
+      return new Promise((resolve, reject) => {
+        const objectUrl = URL.createObjectURL(blob);
+        const img = document.createElement("img");
+        img.crossOrigin = "anonymous";
+        img.onload = () => {
+          const canvas = document.createElement("canvas");
+          canvas.width = img.naturalWidth;
+          canvas.height = img.naturalHeight;
+          const ctx = canvas.getContext("2d");
+          ctx.drawImage(img, 0, 0);
+          canvas.toBlob((b) => {
+            URL.revokeObjectURL(objectUrl);
+            if (b) {
+              resolve(b);
+            } else {
+              reject(new Error("canvas toBlob 失败"));
+            }
+          }, "image/png");
+        };
+        img.onerror = () => {
+          URL.revokeObjectURL(objectUrl);
+          reject(new Error("图片加载失败"));
+        };
+        img.src = objectUrl;
+      });
+    }
+    function clearImageBlobCache() {
+      imageBlobCache.clear();
+    }
     const emit = __emit;
     const textMsgContextMenuVisible = ref(false);
     const textMsgContextMenuX = ref(0);
     const textMsgContextMenuY = ref(0);
     const textMsgContextMenuRef = ref(null);
-    function onTextMsgContextMenu(e) {
+    const eventSource = ref("");
+    function onTextMsgContextMenu(e, p) {
+      var _a;
+      eventSource.value = p != null ? p : "normal";
       textMsgContextMenuX.value = e.clientX;
       textMsgContextMenuY.value = e.clientY;
-      textMsgContextMenuVisible.value = true;
+      if (p === "img") {
+        const imgUrl = (_a = props.msg.attach) == null ? void 0 : _a.url;
+        if (imgUrl && !imageBlobCache.has(imgUrl)) {
+          fetchImageAsPngBlob(imgUrl).then((blob) => {
+            imageBlobCache.set(imgUrl, blob);
+          }).catch((err) => {
+            console.error("预下载图片失败: ", err);
+          });
+        }
+      }
+      setTimeout(
+        () => {
+          textMsgContextMenuVisible.value = true;
+        },
+        p === "img" ? 150 : 0
+      );
     }
     function onCopyClick() {
-      var _a;
+      var _a, _b;
       if (props.msg.type === "text") {
+        if (eventSource.value === "img") {
+          const imgUrl = (_a = props.msg.attach) == null ? void 0 : _a.url;
+          const cachedBlob = imageBlobCache.get(imgUrl);
+          if (cachedBlob) {
+            navigator.clipboard.write([new ClipboardItem({ "image/png": cachedBlob })]).then(() => {
+            }).catch((err) => {
+              console.error("copy image error: ", err);
+              message.error("复制图片失败");
+            }).finally(() => {
+              textMsgContextMenuVisible.value = false;
+            });
+          } else {
+            message.warning("图片正在加载中，请稍后再试");
+            textMsgContextMenuVisible.value = false;
+          }
+          return;
+        }
         copy(props.msg.body).then(() => {
         }).catch((err) => {
           console.error("copy error: ", err);
@@ -38927,13 +38998,20 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         });
       }
       if (props.msg.type === "image") {
-        copy((_a = props.msg.attach) == null ? void 0 : _a.url).then(() => {
-        }).catch((err) => {
-          console.error("copy error: ", err);
-          message.error("复制失败");
-        }).finally(() => {
+        const imgUrl = (_b = props.msg.attach) == null ? void 0 : _b.url;
+        const cachedBlob = imageBlobCache.get(imgUrl);
+        if (cachedBlob) {
+          navigator.clipboard.write([new ClipboardItem({ "image/png": cachedBlob })]).then(() => {
+          }).catch((err) => {
+            console.error("copy image error: ", err);
+            message.error("复制图片失败");
+          }).finally(() => {
+            textMsgContextMenuVisible.value = false;
+          });
+        } else {
+          message.warning("图片正在加载中，请稍后再试");
           textMsgContextMenuVisible.value = false;
-        });
+        }
       }
     }
     function onQuoteClick() {
@@ -39005,6 +39083,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     onBeforeUnmount(() => {
       document.removeEventListener("click", handleClickOutside, true);
       document.removeEventListener("contextmenu", handleClickOutside, true);
+      clearImageBlobCache();
     });
     const myAvatar = computed(() => {
       var _a, _b, _c, _d;
@@ -39166,7 +39245,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
               ], 2)) : __props.msg.type === "image" ? (openBlock(), createElementBlock("div", {
                 key: 2,
                 class: normalizeClass(["chatCardMainContent flash-target", { myMsg: __props.msg.fromAccount === __props.myAccid, otherMsg: __props.msg.fromAccount !== __props.myAccid }]),
-                onContextmenu: withModifiers(onTextMsgContextMenu, ["prevent"])
+                onContextmenu: _cache[0] || (_cache[0] = withModifiers(($event) => onTextMsgContextMenu($event, "img"), ["prevent"]))
               }, [
                 createVNode(unref(Image), {
                   class: "imgMsg",
@@ -39184,24 +39263,28 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
               ], 34)) : (openBlock(), createElementBlock("div", {
                 key: 3,
                 class: normalizeClass(["chatCardMainContent", { myMsg: __props.msg.fromAccount === __props.myAccid, otherMsg: __props.msg.fromAccount !== __props.myAccid }])
-              }, [..._cache[1] || (_cache[1] = [
+              }, [..._cache[3] || (_cache[3] = [
                 createElementVNode("div", { class: "textMsg" }, toDisplayString("暂不支持该消息"), -1)
               ])], 2)),
               __props.msg.type === "text" && IMG_EXT.includes(((_j = (_i = __props.msg) == null ? void 0 : _i.attach) == null ? void 0 : _j.ext) || "") ? (openBlock(), createElementBlock("div", _hoisted_14$3, [
-                ((_l = (_k = __props.msg) == null ? void 0 : _k.attach) == null ? void 0 : _l.size) && ((_n = (_m = __props.msg) == null ? void 0 : _m.attach) == null ? void 0 : _n.size) < MAX_IMG_PREVIEW_SIZE ? (openBlock(), createBlock(unref(Image), {
+                ((_l = (_k = __props.msg) == null ? void 0 : _k.attach) == null ? void 0 : _l.size) && ((_n = (_m = __props.msg) == null ? void 0 : _m.attach) == null ? void 0 : _n.size) < MAX_IMG_PREVIEW_SIZE ? (openBlock(), createElementBlock("div", {
                   key: 0,
-                  class: "imgMsg",
-                  src: (_p = (_o = __props.msg) == null ? void 0 : _o.attach) == null ? void 0 : _p.url,
-                  width: attachImageSize.value.width,
-                  height: attachImageSize.value.height
-                }, {
-                  previewMask: withCtx(() => [
-                    createElementVNode("div", _hoisted_15$3, [
-                      createVNode(unref(EyeOutlined))
-                    ])
-                  ]),
-                  _: 1
-                }, 8, ["src", "width", "height"])) : (openBlock(), createBlock(_sfc_main$9, {
+                  onContextmenu: _cache[1] || (_cache[1] = withModifiers(($event) => onTextMsgContextMenu($event, "img"), ["prevent"]))
+                }, [
+                  createVNode(unref(Image), {
+                    class: "imgMsg",
+                    src: (_p = (_o = __props.msg) == null ? void 0 : _o.attach) == null ? void 0 : _p.url,
+                    width: attachImageSize.value.width,
+                    height: attachImageSize.value.height
+                  }, {
+                    previewMask: withCtx(() => [
+                      createElementVNode("div", _hoisted_15$3, [
+                        createVNode(unref(EyeOutlined))
+                      ])
+                    ]),
+                    _: 1
+                  }, 8, ["src", "width", "height"])
+                ], 32)) : (openBlock(), createBlock(_sfc_main$9, {
                   key: 1,
                   attach: (_q = __props.msg) == null ? void 0 : _q.attach
                 }, null, 8, ["attach"]))
@@ -39228,7 +39311,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                     src: (_s = msgExt.value.quoteMsg.attach) == null ? void 0 : _s.url,
                     width: quoteImageMsgSize.value.width,
                     height: quoteImageMsgSize.value.height,
-                    onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                    onClick: _cache[2] || (_cache[2] = withModifiers(() => {
                     }, ["stop", "prevent"]))
                   }, {
                     previewMask: withCtx(() => [
@@ -39241,7 +39324,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                 ])
               ])) : createCommentVNode("", true)
             ]),
-            createElementVNode("div", _hoisted_21$2, [
+            createElementVNode("div", _hoisted_21$1, [
               __props.msg.deliveryStatus === "failed" ? (openBlock(), createBlock(unref(Button), {
                 key: 0,
                 type: "text",
@@ -39958,11 +40041,10 @@ const _hoisted_15$2 = {
   class: "chatroomInputAttachmentWrapperImg"
 };
 const _hoisted_16$1 = { class: "chatroomInputAttachmentWrapperImgMask" };
-const _hoisted_17$1 = { class: "chatroomInputWrapper" };
-const _hoisted_18$1 = { class: "chatroomInputLeft" };
-const _hoisted_19$1 = { style: { "width": "400px" } };
-const _hoisted_20$1 = ["onClick"];
-const _hoisted_21$1 = { class: "chatroomController" };
+const _hoisted_17$1 = { class: "chatroomInputLeft" };
+const _hoisted_18$1 = { style: { "width": "400px" } };
+const _hoisted_19$1 = ["onClick"];
+const _hoisted_20$1 = { class: "chatroomController" };
 const MAX_IMG_SIZE = 10;
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...{
@@ -40243,41 +40325,101 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       }
     };
     const handlePaste = async (e) => {
+      var _a;
       if (props.sendDisabled || attachmentUploading.value) return;
       const clipboardData = e.clipboardData;
       if (!clipboardData) return;
-      const items = clipboardData.items;
-      for (let i = 0; i < items.length; i++) {
-        const item = items[i];
-        if (item.type.startsWith("image/")) {
-          const file = item.getAsFile();
-          if (file) {
-            e.preventDefault();
-            if (!isLt(file.size, MAX_IMG_SIZE)) {
-              message.error("图片大小最大支持20M");
-              return;
-            }
+      let imageFile = null;
+      if (clipboardData.items && clipboardData.items.length) {
+        for (let i = 0; i < clipboardData.items.length; i++) {
+          const item = clipboardData.items[i];
+          if (item.type.startsWith("image/")) {
+            imageFile = item.getAsFile();
+            break;
+          }
+        }
+      }
+      if (!imageFile && clipboardData.files && clipboardData.files.length) {
+        for (let i = 0; i < clipboardData.files.length; i++) {
+          if (clipboardData.files[i].type.startsWith("image/")) {
+            imageFile = clipboardData.files[i];
+            break;
+          }
+        }
+      }
+      if (!imageFile) return;
+      e.preventDefault();
+      const existingFile = (_a = attachment.value) == null ? void 0 : _a.__file;
+      if (existingFile && existingFile.size === imageFile.size && existingFile.type === imageFile.type) {
+        return;
+      }
+      if (!isLt(imageFile.size, MAX_IMG_SIZE)) {
+        message.error("图片大小最大支持20M");
+        return;
+      }
+      attachmentUploading.value = true;
+      try {
+        const uploadResult = await channelStore.uploadImage({
+          file: imageFile,
+          onUploadStart: () => {
             attachmentUploading.value = true;
-            try {
-              const uploadResult = await channelStore.uploadImage({
-                file,
-                onUploadStart: () => {
-                  attachmentUploading.value = true;
-                },
-                onUploadDone: () => {
-                  attachmentUploading.value = false;
-                }
-              });
-              attachment.value = uploadResult;
-            } catch (error) {
-              console.error("上传图片失败:", error);
-              message.error("上传图片失败");
-              attachmentUploading.value = false;
-            }
+          },
+          onUploadDone: () => {
+            attachmentUploading.value = false;
           }
-          return;
+        });
+        uploadResult.__file = imageFile;
+        attachment.value = uploadResult;
+      } catch (error) {
+        console.error("上传图片失败:", error);
+        message.error("上传图片失败");
+        attachmentUploading.value = false;
+      }
+    };
+    const handleDrop = async (e) => {
+      var _a;
+      e.preventDefault();
+      if (props.sendDisabled || attachmentUploading.value) return;
+      const dataTransfer = e.dataTransfer;
+      console.log("dataTransfer", dataTransfer);
+      if (!dataTransfer || !dataTransfer.files.length) return;
+      let imageFile = null;
+      for (let i = 0; i < dataTransfer.files.length; i++) {
+        if (dataTransfer.files[i].type.startsWith("image/")) {
+          imageFile = dataTransfer.files[i];
+          break;
         }
       }
+      if (!imageFile) {
+        message.error("仅支持拖入图片文件");
+        return;
+      }
+      const existingFile = (_a = attachment.value) == null ? void 0 : _a.__file;
+      if (existingFile && existingFile.size === imageFile.size && existingFile.type === imageFile.type) {
+        return;
+      }
+      if (!isLt(imageFile.size, MAX_IMG_SIZE)) {
+        message.error(`图片大小最大支持${MAX_IMG_SIZE}MB`);
+        return;
+      }
+      attachmentUploading.value = true;
+      try {
+        const uploadResult = await channelStore.uploadImage({
+          file: imageFile,
+          onUploadStart: () => {
+            attachmentUploading.value = true;
+          },
+          onUploadDone: () => {
+            attachmentUploading.value = false;
+          }
+        });
+        uploadResult.__file = imageFile;
+        attachment.value = uploadResult;
+      } catch (error) {
+        console.error("拖拽上传图片失败:", error);
+        message.error("拖拽上传图片失败");
+        attachmentUploading.value = false;
+      }
     };
     const uploadImgHandler = async (file) => {
       if (!file.type.startsWith("image/")) {
@@ -40485,7 +40627,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           __props.msgs.length ? (openBlock(), createElementBlock("div", _hoisted_2$4, [
             __props.isNoMore ? (openBlock(), createElementBlock("div", _hoisted_3$4, "没有更多消息了~")) : loadingMore.value ? (openBlock(), createElementBlock("div", _hoisted_4$4, [
               createVNode(unref(LoadingOutlined)),
-              _cache[1] || (_cache[1] = createElementVNode("span", { style: { "margin-left": "10px" } }, "正在加载，请稍候", -1))
+              _cache[2] || (_cache[2] = createElementVNode("span", { style: { "margin-left": "10px" } }, "正在加载，请稍候", -1))
             ])) : createCommentVNode("", true)
           ])) : createCommentVNode("", true),
           __props.msgs.length ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
@@ -40509,7 +40651,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             class: "emptyChatroomContent",
             style: normalizeStyle({ height: ((_c = curChannel.value) == null ? void 0 : _c.ext) ? "calc(100% - 48px)" : "100%" })
           }, [
-            _cache[2] || (_cache[2] = createElementVNode("div", null, "欢迎来到", -1)),
+            _cache[3] || (_cache[3] = createElementVNode("div", null, "欢迎来到", -1)),
             createElementVNode("h1", null, "#" + toDisplayString(__props.channelName), 1)
           ], 4))
         ], 38),
@@ -40561,17 +40703,22 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 }, null, 8, ["src"])
               ])) : createCommentVNode("", true)
             ])) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_17$1, [
-              createElementVNode("div", _hoisted_18$1, [
+            createElementVNode("div", {
+              class: "chatroomInputWrapper",
+              onDragover: _cache[1] || (_cache[1] = withModifiers(() => {
+              }, ["prevent"])),
+              onDrop: withModifiers(handleDrop, ["prevent"])
+            }, [
+              createElementVNode("div", _hoisted_17$1, [
                 createVNode(unref(Popover), { placement: "topLeft" }, {
                   content: withCtx(() => [
-                    createElementVNode("div", _hoisted_19$1, [
+                    createElementVNode("div", _hoisted_18$1, [
                       (openBlock(), createElementBlock(Fragment, null, renderList(emjjData, (value, i) => {
                         return createElementVNode("span", {
                           key: i,
                           style: { "font-size": "16px", "cursor": "pointer" },
                           onClick: ($event) => insertEmj(i)
-                        }, toDisplayString(value), 9, _hoisted_20$1);
+                        }, toDisplayString(value), 9, _hoisted_19$1);
                       }), 64))
                     ])
                   ]),
@@ -40581,7 +40728,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                       type: "text",
                       disabled: __props.sendDisabled
                     }, {
-                      default: withCtx(() => [..._cache[3] || (_cache[3] = [
+                      default: withCtx(() => [..._cache[4] || (_cache[4] = [
                         createElementVNode("svg", {
                           width: "21",
                           height: "21",
@@ -40616,7 +40763,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 onBlur: handleInputBlur,
                 onPaste: handlePaste
               }, null, 8, ["value", "placeholder", "disabled", "onKeydown", "onClick"]),
-              createElementVNode("div", _hoisted_21$1, [
+              createElementVNode("div", _hoisted_20$1, [
                 createVNode(unref(Upload), {
                   "before-upload": uploadImgHandler,
                   "show-upload-list": false,
@@ -40631,7 +40778,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                       loading: attachmentUploading.value,
                       disabled: __props.sendDisabled || attachmentUploading.value
                     }, {
-                      icon: withCtx(() => [..._cache[4] || (_cache[4] = [
+                      icon: withCtx(() => [..._cache[5] || (_cache[5] = [
                         createElementVNode("svg", {
                           width: "21",
                           height: "18",
@@ -40656,14 +40803,14 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 1
                 }, 8, ["accept", "disabled"]),
-                _cache[6] || (_cache[6] = createElementVNode("span", { class: "lineSeparator" }, null, -1)),
+                _cache[7] || (_cache[7] = createElementVNode("span", { class: "lineSeparator" }, null, -1)),
                 createVNode(unref(Button), {
                   class: "chatroomButtonArrowUp",
                   type: "text",
                   disabled: __props.sendDisabled,
                   onClick: handleSendText
                 }, {
-                  icon: withCtx(() => [..._cache[5] || (_cache[5] = [
+                  icon: withCtx(() => [..._cache[6] || (_cache[6] = [
                     createElementVNode("svg", {
                       width: "36",
                       height: "36",
@@ -40686,7 +40833,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                   _: 1
                 }, 8, ["disabled"])
               ])
-            ])
+            ], 32)
           ])
         ]),
         createVNode(AitPersonPopover, {