cnhis-design-vue 3.3.3-release.0 → 3.3.3-release.12

package/es/components/iho-chat/src/components/ChatFooter.vue2.js

@@ -1,4 +1,4 @@
-import { createElementVNode, defineComponent, ref, computed, watch, withDirectives, openBlock, createElementBlock, normalizeStyle, unref, createVNode, withCtx, Fragment, toDisplayString, createCommentVNode, renderList, createBlock, createTextVNode, mergeProps, renderSlot, vShow } from 'vue';
+import { createElementVNode, defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, withDirectives, openBlock, createElementBlock, normalizeStyle, unref, createVNode, withCtx, Fragment, toDisplayString, createCommentVNode, renderList, createBlock, createTextVNode, mergeProps, renderSlot, vShow } from 'vue';
 import { NButton, NIcon, NTooltip, NPopover, NUpload, NUploadTrigger } from 'naive-ui';
 import ChatAdd from './ChatAdd.vue.js';
 import { useData } from '../hooks/useData.js';
@@ -6,11 +6,12 @@ import 'stompjs';
 import 'sockjs-client/dist/sockjs.min.js';
 import { MESSAGE_TYPE, AV_STATUS } from '../constants/index.js';
 import { uploadFileApi } from '../api/index.js';
-import { simplifyMessage, base64ToFile } from '../utils/index.js';
+import { simplifyMessage, base64ToFile, removeImgBySrc } from '../utils/index.js';
 import { xor, uniq, isObject, trim, cloneDeep } from 'lodash-es';
 import 'trtc-sdk-v5';
 import { emojis } from '../utils/emoji.js';
-import { CloseOutline, CloseCircleOutline, CallOutline, VideocamOutline } from '@vicons/ionicons5';
+import { CloseOutline, CloseCircleOutline, HappyOutline, ImageOutline, FolderOutline, CallOutline, VideocamOutline } from '@vicons/ionicons5';
+import { ThumbsUp } from '@vicons/carbon';
 import { uuidGenerator } from '../../../../shared/utils/index.js';
 import { useStorage } from '@vueuse/core';
 
@@ -43,10 +44,7 @@ const _hoisted_10 = ["innerHTML"];
 const _hoisted_11 = {
   class: "tool-box"
 };
-const _hoisted_12 = /* @__PURE__ */ createElementVNode("i", {
-  class: "chat--iconfont chat--icon-face"
-}, null, -1);
-const _hoisted_13 = /* @__PURE__ */ createElementVNode("span", null, function() {
+const _hoisted_12 = /* @__PURE__ */ createElementVNode("span", null, function() {
   var _a, _b, _c;
   try {
     return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.51")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.51")) || "\u6700\u8FD1\u4F7F\u7528";
@@ -54,14 +52,14 @@ const _hoisted_13 = /* @__PURE__ */ createElementVNode("span", null, function()
     return "\u6700\u8FD1\u4F7F\u7528";
   }
 }(), -1);
-const _hoisted_14 = {
+const _hoisted_13 = {
   class: "list-box",
   style: {
     "margin-bottom": "8px"
   }
 };
-const _hoisted_15 = ["src"];
-const _hoisted_16 = /* @__PURE__ */ createElementVNode("span", null, function() {
+const _hoisted_14 = ["src"];
+const _hoisted_15 = /* @__PURE__ */ createElementVNode("span", null, function() {
   var _a, _b, _c;
   try {
     return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.52")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.52")) || "\u9ED8\u8BA4\u8868\u60C5";
@@ -69,29 +67,21 @@ const _hoisted_16 = /* @__PURE__ */ createElementVNode("span", null, function()
     return "\u9ED8\u8BA4\u8868\u60C5";
   }
 }(), -1);
-const _hoisted_17 = {
+const _hoisted_16 = {
   class: "list-box"
 };
-const _hoisted_18 = ["src"];
-const _hoisted_19 = /* @__PURE__ */ createElementVNode("i", {
-  class: "chat--iconfont chat--icon-good"
-}, null, -1);
-const _hoisted_20 = /* @__PURE__ */ createElementVNode("i", {
-  class: "chat--iconfont chat--icon-image"
-}, null, -1);
-const _hoisted_21 = /* @__PURE__ */ createElementVNode("i", {
-  class: "chat--iconfont chat--icon-folder"
-}, null, -1);
-const _hoisted_22 = ["contenteditable"];
-const _hoisted_23 = {
+const _hoisted_17 = ["src"];
+const _hoisted_18 = ["contenteditable"];
+const _hoisted_19 = {
   class: "btn-box"
 };
-const _hoisted_24 = /* @__PURE__ */ createElementVNode("span", {
+const _hoisted_20 = /* @__PURE__ */ createElementVNode("span", {
   class: "tip"
 }, "Enter \u53D1\u9001, Ctrl + Enter \u6362\u884C", -1);
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ChatFooter",
   setup(__props) {
+    const SPACE_PLACEHOLDER = '<span style="display: inline-block;width: 1px;user-select: none;" data-space="true"></span>';
     const inputRef = ref();
     const {
       state,
@@ -109,8 +99,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         defaultValue: [state.userInfo]
       };
     });
-    const btnDisabled = computed(() => !content.value.replace(/(&nbsp;|\s|<br>)+/g, ""));
+    const sendBtnDisabled = computed(() => !content.value.replace(/(&nbsp;|\s|<br>|<span[^>]*data-space="true"[^>]*>[\s\S]*?<\/span>)+/g, ""));
     const isForwardDisabled = computed(() => !state.msgList.some((msgItem) => msgItem.checked));
+    const callBtnDisabled = computed(() => state.showVideo || state.showMultipleVideo);
     function handleCall(chatMessageType, checkedIds = []) {
       const uuid = uuidGenerator();
       const _checkedIds = [];
@@ -153,20 +144,38 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function handleInput() {
       var _a;
+      if (!inputRef.value)
+        return;
       content.value = ((_a = inputRef.value) == null ? void 0 : _a.innerHTML) || "";
+      insertSpace();
     }
     function selectEmoji(name) {
       var _a;
       commonEmoticons.value.unshift(name);
       commonEmoticons.value = uniq(commonEmoticons.value).slice(0, 26);
+      if (!inputRef.value)
+        return;
       (_a = inputRef.value) == null ? void 0 : _a.focus();
+      insertSpace();
       document.execCommand("insertHTML", false, `<img data-msg=${name} data-type=${MESSAGE_TYPE.EMOJI} class="emoji--min" src=${emojis.findEmoji(name)} />`);
     }
+    function insertSpace() {
+      if (!inputRef.value)
+        return;
+      if (!inputRef.value.innerHTML || inputRef.value.innerHTML === "<br>") {
+        Array.from(inputRef.value.childNodes).forEach((child) => child.remove());
+        document.execCommand("insertHTML", false, SPACE_PLACEHOLDER);
+      }
+    }
     async function doUpdateFile(file) {
-      const formData = new FormData();
-      formData.append("sender", state.userInfo.id);
-      formData.append("file", file);
-      return await uploadFileApi(formData);
+      try {
+        const formData = new FormData();
+        formData.append("sender", state.userInfo.id);
+        formData.append("file", file);
+        return await uploadFileApi(formData);
+      } catch (error) {
+        return "";
+      }
     }
     async function fileChange(options, chatMessageType) {
       const {
@@ -175,7 +184,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       } = options.file;
       const data = await doUpdateFile(file);
       if (!data)
-        return console.log("\u4E0A\u4F20\u5931\u8D25");
+        return console.log(function() {
+          var _a, _b, _c;
+          try {
+            return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.641")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.641")) || "\u4E0A\u4F20\u5931\u8D25";
+          } catch (e) {
+            return "\u4E0A\u4F20\u5931\u8D25";
+          }
+        }());
       doSendMessage({
         chatMessageType,
         msg: isObject(data) ? JSON.stringify(data) : chatMessageType === MESSAGE_TYPE.FILE ? name : data,
@@ -183,13 +199,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       });
     }
     async function handleMsgSend() {
+      if (sendBtnDisabled.value)
+        return console.log("\u8BF7\u8F93\u5165\u5185\u5BB9");
+      removeSpace();
       const {
         innerHTML = "",
         innerText = "",
         outerText = ""
       } = inputRef.value || {};
-      if (btnDisabled.value)
-        return console.log("\u8BF7\u8F93\u5165\u5185\u5BB9");
       let chatMessageType = MESSAGE_TYPE.TEXT;
       let msg = "";
       if (innerHTML) {
@@ -207,13 +224,26 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           } else {
             chatMessageType = MESSAGE_TYPE.IMAGE;
             const match = innerHTML.match(/src\s*=\s*"([^"]*)"/);
-            if (match) {
-              const file = await base64ToFile(match[1]);
-              if (file) {
-                const data = await doUpdateFile(file);
-                if (data) {
-                  msg = isObject(data) ? JSON.stringify(data) : data;
+            if (match == null ? void 0 : match.length) {
+              if (match[1].startsWith("data:")) {
+                const file = await base64ToFile(match[1]);
+                if (file) {
+                  const data = await doUpdateFile(file);
+                  if (data) {
+                    msg = isObject(data) ? JSON.stringify(data) : data;
+                  }
                 }
+              } else {
+                const filenameMatch = innerHTML.match(/data-filename\s*=\s*"([^"]*)"/);
+                const fileName = filenameMatch ? filenameMatch[1] : "";
+                const filesizeMatch = innerHTML.match(/data-filesize\s*=\s*"([^"]*)"/);
+                const fileSize = filesizeMatch ? filesizeMatch[1] : "";
+                const fileUrl = match[1];
+                msg = JSON.stringify({
+                  fileUrl,
+                  fileName,
+                  fileSize
+                });
               }
             }
           }
@@ -233,7 +263,13 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                   const file = await base64ToFile(srcMatch[1]);
                   if (file) {
                     const data = await doUpdateFile(file);
-                    msg = msg.replace(srcMatch[1], data || "");
+                    if (!(data == null ? void 0 : data.fileUrl)) {
+                      console.log("\u4E0A\u4F20\u56FE\u7247\u5931\u8D25 ==>");
+                      msg = removeImgBySrc(msg, srcMatch[1]);
+                      continue;
+                    }
+                    const newImgTag = msgList[i].replace(srcMatch[1], data.fileUrl).replace(/<img/, `<img data-clicked='1' data-msg='${JSON.stringify(data)}'`);
+                    msg = msg.replace(msgList[i], newImgTag);
                   }
                 }
               }
@@ -251,6 +287,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         origin: "btn"
       });
     }
+    function removeSpace() {
+      if (!inputRef.value)
+        return;
+      const spaceHolders = inputRef.value.querySelectorAll('[data-space="true"]');
+      spaceHolders.forEach((space) => space.remove());
+    }
     async function doSendMessage(contentInfo) {
       const {
         chatMessageType = MESSAGE_TYPE.TEXT,
@@ -262,7 +304,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         msg,
         chatMessageType
       };
-      if (chatMessageType === MESSAGE_TYPE.FILE) {
+      if ([MESSAGE_TYPE.FILE, MESSAGE_TYPE.IMAGE].includes(chatMessageType)) {
         _content.fileUrl = url;
       }
       if (origin === "btn") {
@@ -280,7 +322,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function clearInput() {
       if (inputRef.value) {
-        inputRef.value.innerHTML = "";
+        inputRef.value.innerHTML = SPACE_PLACEHOLDER;
       }
       content.value = "";
     }
@@ -315,6 +357,45 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       });
       state.isForward = false;
     }
+    function handleFilePaste(event) {
+      var _a;
+      const files = ((_a = event.clipboardData) == null ? void 0 : _a.files) ? Array.from(event.clipboardData.files) : [];
+      if (files.length === 1 && files[0].type.startsWith("image/")) {
+        const file = files[0];
+        if (file.type.startsWith("image/")) {
+          const reader = new FileReader();
+          reader.onload = function(e) {
+            var _a2;
+            if (!((_a2 = e.target) == null ? void 0 : _a2.result))
+              return;
+            document.execCommand("insertHTML", false, `<img src=${e.target.result} />`);
+          };
+          reader.readAsDataURL(file);
+        }
+      } else {
+        for (let i = 0, len = files.length; i < len; i++) {
+          const file = files[i];
+          const type = file.type.startsWith("image/") ? MESSAGE_TYPE.IMAGE : MESSAGE_TYPE.FILE;
+          fileChange({
+            file: {
+              file,
+              name: file.name
+            }
+          }, type);
+        }
+      }
+    }
+    onMounted(() => {
+      if (inputRef.value) {
+        inputRef.value.innerHTML = SPACE_PLACEHOLDER;
+        document.addEventListener("paste", handleFilePaste);
+      }
+    });
+    onBeforeUnmount(() => {
+      if (inputRef.value) {
+        document.removeEventListener("paste", handleFilePaste);
+      }
+    });
     watch(() => [state.currentReferenceMsg, state.currentReEditMsg], ([currentReferenceMsg, currentReEditMsg]) => {
       var _a;
       if (currentReferenceMsg || currentReEditMsg) {
@@ -420,12 +501,15 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             quaternary: "",
             size: "tiny"
           }, {
-            icon: withCtx(() => [_hoisted_12]),
+            icon: withCtx(() => [createVNode(unref(NIcon), {
+              size: "18",
+              component: unref(HappyOutline)
+            }, null, 8, ["component"])]),
             _: 1
           })]),
           default: withCtx(() => [unref(commonEmoticons).length > 0 ? (openBlock(), createElementBlock(Fragment, {
             key: 0
-          }, [_hoisted_13, createElementVNode("div", _hoisted_14, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(commonEmoticons), (name) => {
+          }, [_hoisted_12, createElementVNode("div", _hoisted_13, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(commonEmoticons), (name) => {
             return openBlock(), createBlock(unref(NTooltip), {
               key: name,
               "show-arrow": false
@@ -437,13 +521,13 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               }, {
                 icon: withCtx(() => [createElementVNode("img", {
                   src: unref(emojis).findEmoji(name)
-                }, null, 8, _hoisted_15)]),
+                }, null, 8, _hoisted_14)]),
                 _: 2
               }, 1032, ["onClick"])]),
               default: withCtx(() => [createTextVNode(" " + toDisplayString(name), 1)]),
               _: 2
             }, 1024);
-          }), 128))])], 64)) : createCommentVNode("v-if", true), _hoisted_16, createElementVNode("div", _hoisted_17, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(emojis).default, ([name, emoji]) => {
+          }), 128))])], 64)) : createCommentVNode("v-if", true), _hoisted_15, createElementVNode("div", _hoisted_16, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(emojis).default, ([name, emoji]) => {
             return openBlock(), createBlock(unref(NTooltip), {
               key: name,
               "show-arrow": false
@@ -455,7 +539,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               }, {
                 icon: withCtx(() => [createElementVNode("img", {
                   src: emoji
-                }, null, 8, _hoisted_18)]),
+                }, null, 8, _hoisted_17)]),
                 _: 2
               }, 1032, ["onClick"])]),
               default: withCtx(() => [createTextVNode(" " + toDisplayString(name), 1)]),
@@ -484,7 +568,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             msg: 0
           }))
         }, {
-          icon: withCtx(() => [_hoisted_19]),
+          icon: withCtx(() => [createVNode(unref(NIcon), {
+            size: "18",
+            component: unref(ThumbsUp)
+          }, null, 8, ["component"])]),
           _: 1
         })]),
         default: withCtx(() => [createTextVNode(function() {
@@ -515,7 +602,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               size: "tiny",
               onClick: handleClick
             }, {
-              icon: withCtx(() => [_hoisted_20]),
+              icon: withCtx(() => [createVNode(unref(NIcon), {
+                size: "18",
+                component: unref(ImageOutline)
+              }, null, 8, ["component"])]),
               _: 2
             }, 1032, ["onClick"])]),
             default: withCtx(() => [createTextVNode(function() {
@@ -550,7 +640,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
               size: "tiny",
               onClick: handleClick
             }, {
-              icon: withCtx(() => [_hoisted_21]),
+              icon: withCtx(() => [createVNode(unref(NIcon), {
+                size: "18",
+                component: unref(FolderOutline)
+              }, null, 8, ["component"])]),
               _: 2
             }, 1032, ["onClick"])]),
             default: withCtx(() => [createTextVNode(function() {
@@ -578,14 +671,15 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         }, {
           trigger: withCtx(() => [createVNode(unref(NButton), {
             quaternary: "",
-            size: "tiny"
+            size: "tiny",
+            disabled: unref(callBtnDisabled)
           }, {
             icon: withCtx(() => [createVNode(unref(NIcon), {
               size: "18",
               component: unref(CallOutline)
             }, null, 8, ["component"])]),
             _: 1
-          })]),
+          }, 8, ["disabled"])]),
           default: withCtx(() => [createTextVNode(function() {
             var _a, _b, _c;
             try {
@@ -605,14 +699,15 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         }, {
           trigger: withCtx(() => [createVNode(unref(NButton), {
             quaternary: "",
-            size: "tiny"
+            size: "tiny",
+            disabled: unref(callBtnDisabled)
           }, {
             icon: withCtx(() => [createVNode(unref(NIcon), {
               size: "20",
               component: unref(VideocamOutline)
             }, null, 8, ["component"])]),
             _: 1
-          })]),
+          }, 8, ["disabled"])]),
           default: withCtx(() => [createTextVNode(function() {
             var _a, _b, _c;
             try {
@@ -632,6 +727,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         trigger: withCtx(() => [createVNode(unref(NButton), {
           quaternary: "",
           size: "tiny",
+          disabled: unref(callBtnDisabled),
           onClick: _cache[9] || (_cache[9] = () => handleCall(unref(MESSAGE_TYPE).AUDIO))
         }, {
           icon: withCtx(() => [createVNode(unref(NIcon), {
@@ -639,7 +735,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             component: unref(CallOutline)
           }, null, 8, ["component"])]),
           _: 1
-        })]),
+        }, 8, ["disabled"])]),
         default: withCtx(() => [createTextVNode(function() {
           var _a, _b, _c;
           try {
@@ -655,6 +751,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         trigger: withCtx(() => [createVNode(unref(NButton), {
           quaternary: "",
           size: "tiny",
+          disabled: unref(callBtnDisabled),
           onClick: _cache[10] || (_cache[10] = () => handleCall(unref(MESSAGE_TYPE).VIDEO))
         }, {
           icon: withCtx(() => [createVNode(unref(NIcon), {
@@ -662,7 +759,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             component: unref(VideocamOutline)
           }, null, 8, ["component"])]),
           _: 1
-        })]),
+        }, 8, ["disabled"])]),
         default: withCtx(() => [createTextVNode(function() {
           var _a, _b, _c;
           try {
@@ -679,10 +776,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         contenteditable: !unref(isEnded),
         onKeydown: handleKeyDown,
         onInput: handleInput
-      }, null, 40, _hoisted_22), [[vShow, unref(state).id]]), createElementVNode("div", _hoisted_23, [_hoisted_24, createVNode(unref(NButton), {
+      }, null, 40, _hoisted_18), [[vShow, unref(state).id]]), createElementVNode("div", _hoisted_19, [_hoisted_20, createVNode(unref(NButton), {
         type: "primary",
         round: "",
-        disabled: unref(btnDisabled),
+        disabled: unref(sendBtnDisabled),
         onClick: handleMsgSend
       }, {
         default: withCtx(() => [createTextVNode(function() {