@web-utils/component 2.7.36 → 2.7.37

package/dist/components/chat/index.mjs

@@ -0,0 +1,567 @@
+import { formatDate as c } from "@web-utils/integrations/dayjs";
+import { s as l } from "../../chunks/util.eca708b6.mjs";
+import { n as d } from "../../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var u = function() {
+  var t = this, o = t.$createElement, e = t._self._c || o;
+  return e("div", {
+    staticClass: "avue-chat",
+    style: t.heightStyleName,
+    on: {
+      keyup: function(i) {
+        return !i.type.indexOf("key") && t._k(i.keyCode, "enter", 13, i.key, "Enter") ? null : t.handleSend.apply(null, arguments);
+      }
+    }
+  }, [e("audio", {
+    ref: "chatAudio"
+  }, [e("source", {
+    attrs: {
+      src: t.audio[0],
+      type: "audio/ogg"
+    }
+  }), e("source", {
+    attrs: {
+      src: t.audio[1],
+      type: "audio/mpeg"
+    }
+  }), e("source", {
+    attrs: {
+      src: t.audio[2],
+      type: "audio/wav"
+    }
+  })]), e("div", {
+    staticClass: "web__logo"
+  }, [e("img", {
+    staticClass: "web__logo-img",
+    attrs: {
+      src: t.config.img,
+      alt: ""
+    }
+  }), e("div", {
+    staticClass: "web__logo-info"
+  }, [e("p", {
+    staticClass: "web__logo-name"
+  }, [t._v(" " + t._s(t.config.name) + " ")]), e("p", {
+    staticClass: "web__logo-dept"
+  }, [t._v(" " + t._s(t.config.dept) + " ")])]), t._t("header")], 2), e("div", {
+    staticClass: "web__content"
+  }, [e("div", {
+    style: t.widthStyleName
+  }, [e("div", {
+    ref: "main",
+    staticClass: "web__main"
+  }, t._l(t.list, function(i, a) {
+    return e("div", {
+      key: a,
+      staticClass: "web__main-item",
+      class: {
+        "web__main-item--mine": i.mine
+      }
+    }, [e("div", {
+      staticClass: "web__main-user"
+    }, [e("img", {
+      attrs: {
+        src: i.img
+      }
+    }), e("cite", [t._v(" " + t._s(i.name) + " "), e("i", [t._v(t._s(i.date))])])]), e("div", {
+      staticClass: "web__main-text"
+    }, [e("div", {
+      staticClass: "web__main-arrow"
+    }), e("span", {
+      ref: "content",
+      refInFor: !0,
+      domProps: {
+        innerHTML: t._s(t.handleDetail(i.text.text))
+      }
+    }), i.text.list ? t._e() : e("ul", {
+      staticClass: " web__main-list"
+    }, t._l(i.text.list, function(s, n) {
+      return e("li", {
+        key: n,
+        on: {
+          click: function(g) {
+            return t.handleItemMsg(s);
+          }
+        }
+      }, [t._v(" " + t._s(s.text) + " ")]);
+    }), 0)])]);
+  }), 0), e("div", {
+    staticClass: "web__footer",
+    style: t.widthStyleName
+  }, [e("div", {
+    staticClass: "web__tools"
+  }, [t.tools.img ? e("i", {
+    staticClass: "el-icon-picture-outline",
+    on: {
+      click: function(i) {
+        return t.handleUpload("img");
+      }
+    }
+  }) : t._e(), t.tools.video ? e("i", {
+    staticClass: "el-icon-video-camera",
+    on: {
+      click: function(i) {
+        return t.handleUpload("video");
+      }
+    }
+  }) : t._e(), t.tools.file ? e("i", {
+    staticClass: "el-icon-folder-opened",
+    on: {
+      click: function(i) {
+        return t.handleUpload("file");
+      }
+    }
+  }) : t._e()]), e("div", {
+    staticClass: "web__msg"
+  }, [e("textarea", {
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: t.msg,
+      expression: "msg"
+    }],
+    staticClass: "web__msg-input",
+    attrs: {
+      rows: "2",
+      placeholder: t.placeholder
+    },
+    domProps: {
+      value: t.msg
+    },
+    on: {
+      input: function(i) {
+        i.target.composing || (t.msg = i.target.value);
+      }
+    }
+  }), e("div", {
+    staticClass: "web__msg-menu"
+  }, [e("ElDropdown", {
+    staticClass: "web__msg-submit",
+    attrs: {
+      "split-button": "",
+      type: "primary",
+      size: "mini",
+      trigger: "click"
+    },
+    on: {
+      click: t.handleSend
+    }
+  }, [t._v(" 发送 "), e("ElDropdownMenu", {
+    attrs: {
+      slot: "dropdown"
+    },
+    slot: "dropdown"
+  }, [e("ElDropdownItem", [e("ElPopover", {
+    attrs: {
+      placement: "top",
+      width: "160"
+    },
+    model: {
+      value: t.visible,
+      callback: function(i) {
+        t.visible = i;
+      },
+      expression: "visible"
+    }
+  }, [e("ElInput", {
+    staticStyle: {
+      "margin-bottom": "10px"
+    },
+    attrs: {
+      size: "mini",
+      rows: 3,
+      "show-word-limit": "",
+      maxlength: "100",
+      placeholder: "请输入快捷回复语",
+      type: "textarea"
+    },
+    model: {
+      value: t.keys,
+      callback: function(i) {
+        t.keys = i;
+      },
+      expression: "keys"
+    }
+  }), e("div", {
+    staticStyle: {
+      "text-align": "right",
+      margin: "0"
+    }
+  }, [e("ElButton", {
+    attrs: {
+      size: "mini",
+      type: "text"
+    },
+    on: {
+      click: function(i) {
+        t.visible = !1;
+      }
+    }
+  }, [t._v(" 取消 ")]), e("ElButton", {
+    attrs: {
+      type: "primary",
+      size: "mini"
+    },
+    on: {
+      click: t.addKey
+    }
+  }, [t._v(" 确定 ")])], 1), e("ElButton", {
+    attrs: {
+      slot: "reference",
+      type: "text",
+      icon: "el-icon-plus"
+    },
+    slot: "reference"
+  })], 1)], 1), e("ElScrollbar", {
+    staticStyle: {
+      height: "100px"
+    }
+  }, t._l(t.keylist, function(i, a) {
+    return e("ElDropdownItem", {
+      key: a,
+      nativeOn: {
+        click: function(s) {
+          return t.sendKey(i);
+        }
+      }
+    }, [e("ElTooltip", {
+      attrs: {
+        effect: "dark",
+        content: i,
+        placement: "top"
+      }
+    }, [e("span", [t._v(" " + t._s(i.substr(0, 10)) + t._s(i.length > 10 ? "..." : ""))])])], 1);
+  }), 1)], 1)], 1)], 1)])])]), t._t("default")], 2), t.upload.box ? e("div", [e("ElementDialog", {
+    attrs: {
+      title: t.upload.title,
+      "body-padding": !1,
+      visible: t.upload.box,
+      width: "30%"
+    },
+    on: {
+      "update:visible": function(i) {
+        return t.$set(t.upload, "box", i);
+      }
+    }
+  }, [e("ElForm", {
+    ref: "form",
+    attrs: {
+      model: t.upload
+    }
+  }, [e("ElFormItem", {
+    attrs: {
+      prop: "src",
+      rules: [{
+        required: !0,
+        message: "地址不能为空"
+      }]
+    }
+  }, [e("ElInput", {
+    staticStyle: {
+      "margin-bottom": "10px"
+    },
+    attrs: {
+      size: "mini",
+      rows: 4,
+      "show-word-limit": "",
+      maxlength: "100",
+      placeholder: "请输入地址",
+      type: "textarea"
+    },
+    model: {
+      value: t.upload.src,
+      callback: function(i) {
+        t.$set(t.upload, "src", i);
+      },
+      expression: "upload.src"
+    }
+  })], 1)], 1), e("span", {
+    staticClass: "dialog-footer",
+    attrs: {
+      slot: "footer"
+    },
+    slot: "footer"
+  }, [e("ElButton", {
+    attrs: {
+      size: "small"
+    },
+    on: {
+      click: function(i) {
+        t.upload.box = !1;
+      }
+    }
+  }, [t._v("取 消")]), e("ElButton", {
+    attrs: {
+      type: "primary",
+      size: "small"
+    },
+    on: {
+      click: t.uploadSubmit
+    }
+  }, [t._v("确 定")])], 1)], 1)], 1) : t._e(), t.show ? e("div", [e("ElementDialog", {
+    staticClass: "web__dialog",
+    attrs: {
+      visible: t.show,
+      "body-padding": !1,
+      title: "预览",
+      width: "40%",
+      "before-close": t.handleClose
+    },
+    on: {
+      "update:visible": function(i) {
+        t.show = i;
+      }
+    }
+  }, [t.imgSrc ? e("img", {
+    staticStyle: {
+      width: "100%",
+      "object-fit": "cover"
+    },
+    attrs: {
+      src: t.imgSrc
+    }
+  }) : t._e(), t.videoSrc ? e("video", {
+    staticStyle: {
+      width: "100%",
+      "object-fit": "cover"
+    },
+    attrs: {
+      src: t.videoSrc,
+      controls: "controls"
+    }
+  }) : t._e(), t.audioSrc ? e("audio", {
+    staticStyle: {
+      width: "100%",
+      "object-fit": "cover"
+    },
+    attrs: {
+      src: t.audioSrc,
+      controls: "controls"
+    }
+  }) : t._e()])], 1) : t._e()]);
+}, m = [];
+const f = {
+  name: "Chat",
+  props: {
+    beforeOpen: Function,
+    tools: {
+      type: Object,
+      default: () => ({
+        img: !0,
+        video: !0,
+        file: !0
+      })
+    },
+    placeholder: {
+      type: String,
+      default: "请输入..."
+    },
+    width: {
+      type: [String, Number],
+      default: "100%"
+    },
+    height: {
+      type: [String, Number],
+      default: "520px"
+    },
+    value: {
+      type: String
+    },
+    notice: {
+      type: Boolean,
+      default: !0
+    },
+    audio: {
+      type: Array,
+      default: () => [
+        "https://www.helloweba.net/demo/notifysound/notify.ogg",
+        "https://www.helloweba.net/demo/notifysound/notify.mp3",
+        "https://www.helloweba.net/demo/notifysound/notify.wav"
+      ]
+    },
+    config: {
+      type: Object,
+      default: () => ({})
+    },
+    keylist: {
+      type: Array,
+      default: () => []
+    },
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      upload: {
+        box: !1,
+        src: "",
+        type: "",
+        title: ""
+      },
+      visible: !1,
+      imgSrc: "",
+      videoSrc: "",
+      audioSrc: "",
+      keys: "",
+      show: !1
+    };
+  },
+  computed: {
+    msg: {
+      get() {
+        return this.value;
+      },
+      set(t) {
+        this.$emit("input", t), this.$emit("change", t);
+      }
+    },
+    heightStyleName() {
+      return {
+        height: l(this.height)
+      };
+    },
+    widthStyleName() {
+      return {
+        width: l(this.width)
+      };
+    },
+    msgActive() {
+      return this.msg.replace(/[\r\n]/g, "");
+    }
+  },
+  methods: {
+    uploadSubmit() {
+      this.$refs.form.validate((t) => {
+        t && (this.upload.box = !1, this.$emit("submit", this.getDetail(this.upload)));
+      });
+    },
+    handleUpload(t) {
+      this.upload.type = t, this.upload.src = "", t === "img" ? this.upload.title = "图片上传" : t === "video" ? this.upload.title = "视频上传" : t === "file" && (this.upload.title = "文件上传"), this.upload.box = !0;
+    },
+    handleClose(t) {
+      this.imgSrc = void 0, this.videoSrc = void 0, this.audioSrc = void 0, t();
+    },
+    addKey() {
+      this.keys !== "" && (this.$emit("keyadd", this.keys), this.keys = ""), this.visible = !1;
+    },
+    sendKey(t) {
+      this.$emit("keysend", t);
+    },
+    getAudio() {
+      this.$refs.chatAudio.play();
+    },
+    getNotification(t) {
+      const o = this, e = Notification || window.Notification;
+      if (e) {
+        let a = function() {
+          e.requestPermission(function(n) {
+            n === "granted" ? s() : console.log("用户无情残忍的拒绝了你!!!");
+          });
+        }, s = function() {
+          const n = new Notification(o.config.name, {
+            body: t,
+            icon: o.config.img
+          });
+          n.onshow = function() {
+            o.getAudio(), setTimeout(() => {
+              n.close();
+            }, 2500);
+          }, n.onclick = function() {
+            n.close();
+          };
+        };
+        const i = e.permission;
+        i === "granted" ? s() : i === "denied" ? console.log("用户拒绝了你!!!") : a();
+      }
+    },
+    // mine为'我'的对话
+    // text为内容
+    pushMsg(t = {}) {
+      const o = t.mine === !0, e = t.text || {}, a = {
+        date: t.date || c(Date.now(), "YYYY-MM-DD HH:mm:ss"),
+        text: (() => typeof e != "object" ? {
+          text: e
+        } : e)(),
+        mine: o,
+        img: o ? this.config.myImg : this.config.img,
+        name: o ? this.config.myName : this.config.name
+      };
+      this.list.push(a), setTimeout(() => {
+        this.setScroll();
+      }, 50);
+    },
+    setScroll(t) {
+      this.$nextTick(() => {
+        this.$refs.main.scrollTop = t || this.$refs.main.scrollHeight;
+      });
+    },
+    // 用户主动发送
+    handleSend() {
+      this.msgActive && this.$emit("submit");
+    },
+    // 选择列表
+    handleItemMsg(t) {
+      this.$emit("submit", t.ask);
+    },
+    // 处理排版
+    handleDetail(t = "") {
+      const o = t;
+      return setTimeout(() => {
+        (this.$refs.content || []).forEach((i) => {
+          for (let a = 0; a < i.children.length; a++) {
+            const s = i.children[a];
+            s.getAttribute("data-flag") != 0 && (s.setAttribute("data-flag", 0), s.onclick = () => {
+              this.handleEvent(s.dataset);
+            }, s.tagName === "IMG" ? (s.className = "web__msg--img", s.src = s.getAttribute("data-src")) : s.tagName === "VIDEO" ? (s.className = "web__msg--video", s.src = s.getAttribute("data-src")) : s.tagName === "AUDIO" ? (s.className = "web__msg--audio", s.controls = "controls", s.src = s.getAttribute("data-src")) : s.tagName === "FILE" ? (s.className = "web__msg--file", s.innerHTML = `<h2>File</h2><span>${s.getAttribute("data-name")}</span>`) : s.tagName === "MAP" && (s.className = "web__msg--file web__msg--map", s.innerHTML = `<h2>Map</h2><span>${s.getAttribute("data-longitude")} , ${s.getAttribute("data-latitude")}<br />${s.getAttribute("data-address")}</span>`), this.setScroll());
+          }
+        });
+      }, 0), o;
+    },
+    getDetail(t = {}) {
+      const { type: o, src: e, name: i, longitude: a, latitude: s, address: n } = t;
+      if (o === "img")
+        return `<img data-type="IMG" data-src="${e}"  />`;
+      if (o === "video")
+        return `<video data-type="VIDEO"  data-src="${e}"></video>`;
+      if (o === "audio")
+        return `<audio data-type="AUDIO"  data-src="${e}"></audio>`;
+      if (o === "file")
+        return `<file data-type="FILE" data-name="${i}" data-src="${e}"></file>`;
+      if (o === "map")
+        return `<map data-type="MAP" data-src="${e}" data-address="${n} "data-latitude="${s}" data-longitude="${a}"></map>`;
+    },
+    // 处理事件
+    handleEvent(t) {
+      const o = () => {
+        t.type === "IMG" ? (this.imgSrc = t.src, this.show = !0) : t.type === "VIDEO" ? (this.videoSrc = t.src, this.show = !0) : t.type === "AUDIO" ? (this.audioSrc = t.src, this.show = !0) : t.type === "FILE" && window.open(t.src);
+      };
+      typeof this.beforeOpen == "function" ? this.beforeOpen(t, o) : o();
+    },
+    rootSendMsg(t) {
+      this.pushMsg({
+        text: t
+      }), this.notice && this.getNotification(t.text || t);
+    }
+  }
+}, r = {};
+var h = /* @__PURE__ */ d(
+  f,
+  u,
+  m,
+  !1,
+  p,
+  null,
+  null,
+  null
+);
+function p(t) {
+  for (let o in r)
+    this[o] = r[o];
+}
+const b = /* @__PURE__ */ function() {
+  return h.exports;
+}();
+export {
+  b as default
+};