yx-web-sdk 0.0.26 → 0.0.28

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

@@ -38864,7 +38864,7 @@
   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__ */ vue.defineComponent({
@@ -38902,19 +38902,90 @@
         return props.msg.fromAccount === props.myAccid && nowTime.value - props.msg.time <= REVOCATION_INTERVAL;
       });
       const { copy } = core.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 = vue.ref(false);
       const textMsgContextMenuX = vue.ref(0);
       const textMsgContextMenuY = vue.ref(0);
       const textMsgContextMenuRef = vue.ref(null);
-      function onTextMsgContextMenu(e) {
+      const eventSource = vue.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);
+                antDesignVue.message.error("复制图片失败");
+              }).finally(() => {
+                textMsgContextMenuVisible.value = false;
+              });
+            } else {
+              antDesignVue.message.warning("图片正在加载中，请稍后再试");
+              textMsgContextMenuVisible.value = false;
+            }
+            return;
+          }
           copy(props.msg.body).then(() => {
           }).catch((err) => {
             console.error("copy error: ", err);
@@ -38924,13 +38995,20 @@
           });
         }
         if (props.msg.type === "image") {
-          copy((_a = props.msg.attach) == null ? void 0 : _a.url).then(() => {
-          }).catch((err) => {
-            console.error("copy error: ", err);
-            antDesignVue.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);
+              antDesignVue.message.error("复制图片失败");
+            }).finally(() => {
+              textMsgContextMenuVisible.value = false;
+            });
+          } else {
+            antDesignVue.message.warning("图片正在加载中，请稍后再试");
             textMsgContextMenuVisible.value = false;
-          });
+          }
         }
       }
       function onQuoteClick() {
@@ -39002,6 +39080,7 @@
       vue.onBeforeUnmount(() => {
         document.removeEventListener("click", handleClickOutside, true);
         document.removeEventListener("contextmenu", handleClickOutside, true);
+        clearImageBlobCache();
       });
       const myAvatar = vue.computed(() => {
         var _a, _b, _c, _d;
@@ -39163,7 +39242,7 @@
                 ], 2)) : __props.msg.type === "image" ? (vue.openBlock(), vue.createElementBlock("div", {
                   key: 2,
                   class: vue.normalizeClass(["chatCardMainContent flash-target", { myMsg: __props.msg.fromAccount === __props.myAccid, otherMsg: __props.msg.fromAccount !== __props.myAccid }]),
-                  onContextmenu: vue.withModifiers(onTextMsgContextMenu, ["prevent"])
+                  onContextmenu: _cache[0] || (_cache[0] = vue.withModifiers(($event) => onTextMsgContextMenu($event, "img"), ["prevent"]))
                 }, [
                   vue.createVNode(vue.unref(antDesignVue.Image), {
                     class: "imgMsg",
@@ -39181,24 +39260,28 @@
                 ], 34)) : (vue.openBlock(), vue.createElementBlock("div", {
                   key: 3,
                   class: vue.normalizeClass(["chatCardMainContent", { myMsg: __props.msg.fromAccount === __props.myAccid, otherMsg: __props.msg.fromAccount !== __props.myAccid }])
-                }, [..._cache[1] || (_cache[1] = [
+                }, [..._cache[3] || (_cache[3] = [
                   vue.createElementVNode("div", { class: "textMsg" }, vue.toDisplayString("暂不支持该消息"), -1)
                 ])], 2)),
                 __props.msg.type === "text" && IMG_EXT.includes(((_j = (_i = __props.msg) == null ? void 0 : _i.attach) == null ? void 0 : _j.ext) || "") ? (vue.openBlock(), vue.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 ? (vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.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 ? (vue.openBlock(), vue.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: vue.withCtx(() => [
-                      vue.createElementVNode("div", _hoisted_15$3, [
-                        vue.createVNode(vue.unref(EyeOutlined))
-                      ])
-                    ]),
-                    _: 1
-                  }, 8, ["src", "width", "height"])) : (vue.openBlock(), vue.createBlock(_sfc_main$9, {
+                    onContextmenu: _cache[1] || (_cache[1] = vue.withModifiers(($event) => onTextMsgContextMenu($event, "img"), ["prevent"]))
+                  }, [
+                    vue.createVNode(vue.unref(antDesignVue.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: vue.withCtx(() => [
+                        vue.createElementVNode("div", _hoisted_15$3, [
+                          vue.createVNode(vue.unref(EyeOutlined))
+                        ])
+                      ]),
+                      _: 1
+                    }, 8, ["src", "width", "height"])
+                  ], 32)) : (vue.openBlock(), vue.createBlock(_sfc_main$9, {
                     key: 1,
                     attach: (_q = __props.msg) == null ? void 0 : _q.attach
                   }, null, 8, ["attach"]))
@@ -39225,7 +39308,7 @@
                       src: (_s = msgExt.value.quoteMsg.attach) == null ? void 0 : _s.url,
                       width: quoteImageMsgSize.value.width,
                       height: quoteImageMsgSize.value.height,
-                      onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+                      onClick: _cache[2] || (_cache[2] = vue.withModifiers(() => {
                       }, ["stop", "prevent"]))
                     }, {
                       previewMask: vue.withCtx(() => [
@@ -39238,7 +39321,7 @@
                   ])
                 ])) : vue.createCommentVNode("", true)
               ]),
-              vue.createElementVNode("div", _hoisted_21$2, [
+              vue.createElementVNode("div", _hoisted_21$1, [
                 __props.msg.deliveryStatus === "failed" ? (vue.openBlock(), vue.createBlock(vue.unref(antDesignVue.Button), {
                   key: 0,
                   type: "text",
@@ -39955,11 +40038,10 @@
     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__ */ vue.defineComponent({
     ...{
@@ -40240,41 +40322,101 @@
         }
       };
       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)) {
-                antDesignVue.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)) {
+          antDesignVue.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);
-                antDesignVue.message.error("上传图片失败");
-                attachmentUploading.value = false;
-              }
+            },
+            onUploadDone: () => {
+              attachmentUploading.value = false;
             }
-            return;
+          });
+          uploadResult.__file = imageFile;
+          attachment.value = uploadResult;
+        } catch (error) {
+          console.error("上传图片失败:", error);
+          antDesignVue.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) {
+          antDesignVue.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)) {
+          antDesignVue.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);
+          antDesignVue.message.error("拖拽上传图片失败");
+          attachmentUploading.value = false;
+        }
       };
       const uploadImgHandler = async (file) => {
         if (!file.type.startsWith("image/")) {
@@ -40482,7 +40624,7 @@
             __props.msgs.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$4, [
               __props.isNoMore ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$4, "没有更多消息了~")) : loadingMore.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$4, [
                 vue.createVNode(vue.unref(LoadingOutlined)),
-                _cache[1] || (_cache[1] = vue.createElementVNode("span", { style: { "margin-left": "10px" } }, "正在加载，请稍候", -1))
+                _cache[2] || (_cache[2] = vue.createElementVNode("span", { style: { "margin-left": "10px" } }, "正在加载，请稍候", -1))
               ])) : vue.createCommentVNode("", true)
             ])) : vue.createCommentVNode("", true),
             __props.msgs.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$4, [
@@ -40506,7 +40648,7 @@
               class: "emptyChatroomContent",
               style: vue.normalizeStyle({ height: ((_c = curChannel.value) == null ? void 0 : _c.ext) ? "calc(100% - 48px)" : "100%" })
             }, [
-              _cache[2] || (_cache[2] = vue.createElementVNode("div", null, "欢迎来到", -1)),
+              _cache[3] || (_cache[3] = vue.createElementVNode("div", null, "欢迎来到", -1)),
               vue.createElementVNode("h1", null, "#" + vue.toDisplayString(__props.channelName), 1)
             ], 4))
           ], 38),
@@ -40558,17 +40700,22 @@
                   }, null, 8, ["src"])
                 ])) : vue.createCommentVNode("", true)
               ])) : vue.createCommentVNode("", true),
-              vue.createElementVNode("div", _hoisted_17$1, [
-                vue.createElementVNode("div", _hoisted_18$1, [
+              vue.createElementVNode("div", {
+                class: "chatroomInputWrapper",
+                onDragover: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+                }, ["prevent"])),
+                onDrop: vue.withModifiers(handleDrop, ["prevent"])
+              }, [
+                vue.createElementVNode("div", _hoisted_17$1, [
                   vue.createVNode(vue.unref(antDesignVue.Popover), { placement: "topLeft" }, {
                     content: vue.withCtx(() => [
-                      vue.createElementVNode("div", _hoisted_19$1, [
+                      vue.createElementVNode("div", _hoisted_18$1, [
                         (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(emjjData, (value, i) => {
                           return vue.createElementVNode("span", {
                             key: i,
                             style: { "font-size": "16px", "cursor": "pointer" },
                             onClick: ($event) => insertEmj(i)
-                          }, vue.toDisplayString(value), 9, _hoisted_20$1);
+                          }, vue.toDisplayString(value), 9, _hoisted_19$1);
                         }), 64))
                       ])
                     ]),
@@ -40578,7 +40725,7 @@
                         type: "text",
                         disabled: __props.sendDisabled
                       }, {
-                        default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
+                        default: vue.withCtx(() => [..._cache[4] || (_cache[4] = [
                           vue.createElementVNode("svg", {
                             width: "21",
                             height: "21",
@@ -40613,7 +40760,7 @@
                   onBlur: handleInputBlur,
                   onPaste: handlePaste
                 }, null, 8, ["value", "placeholder", "disabled", "onKeydown", "onClick"]),
-                vue.createElementVNode("div", _hoisted_21$1, [
+                vue.createElementVNode("div", _hoisted_20$1, [
                   vue.createVNode(vue.unref(antDesignVue.Upload), {
                     "before-upload": uploadImgHandler,
                     "show-upload-list": false,
@@ -40628,7 +40775,7 @@
                         loading: attachmentUploading.value,
                         disabled: __props.sendDisabled || attachmentUploading.value
                       }, {
-                        icon: vue.withCtx(() => [..._cache[4] || (_cache[4] = [
+                        icon: vue.withCtx(() => [..._cache[5] || (_cache[5] = [
                           vue.createElementVNode("svg", {
                             width: "21",
                             height: "18",
@@ -40653,14 +40800,14 @@
                     ]),
                     _: 1
                   }, 8, ["accept", "disabled"]),
-                  _cache[6] || (_cache[6] = vue.createElementVNode("span", { class: "lineSeparator" }, null, -1)),
+                  _cache[7] || (_cache[7] = vue.createElementVNode("span", { class: "lineSeparator" }, null, -1)),
                   vue.createVNode(vue.unref(antDesignVue.Button), {
                     class: "chatroomButtonArrowUp",
                     type: "text",
                     disabled: __props.sendDisabled,
                     onClick: handleSendText
                   }, {
-                    icon: vue.withCtx(() => [..._cache[5] || (_cache[5] = [
+                    icon: vue.withCtx(() => [..._cache[6] || (_cache[6] = [
                       vue.createElementVNode("svg", {
                         width: "36",
                         height: "36",
@@ -40683,7 +40830,7 @@
                     _: 1
                   }, 8, ["disabled"])
                 ])
-              ])
+              ], 32)
             ])
           ]),
           vue.createVNode(AitPersonPopover, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yx-web-sdk",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "private": false,
   "main": "dist/yx-web-sdk.umd.js",
   "module": "dist/yx-web-sdk.es.js",