`

dist/index.common.js

@@ -5642,6 +5642,136 @@ var es7_array_includes = __webpack_require__("6762");
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es6.string.includes.js
 var es6_string_includes = __webpack_require__("2fdb");
 
+// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
+var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
+var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);
+
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.regexp.constructor.js
+var es6_regexp_constructor = __webpack_require__("3b2b");
+
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es7.object.values.js
+var es7_object_values = __webpack_require__("8615");
+
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.regexp.to-string.js
+var es6_regexp_to_string = __webpack_require__("6b54");
+
+// CONCATENATED MODULE: ./packages/utils/validate.js
+
+
+
+
+
+function isPlainObject(obj) {
+  return Object.prototype.toString.call(obj) === "[object Object]";
+}
+function isString(str) {
+  return typeof str == "string";
+}
+function isToday(time) {
+  return new Date().getTime() - time < 86400000;
+}
+function isEmpty(obj) {
+  if (!obj) return true;
+  if (Array.isArray(obj) && obj.length == 0) return true;
+  if (isPlainObject(obj) && Object.values(obj).length == 0) return true;
+  return false;
+}
+function isUrl(str) {
+  var reg = "^((https|http|ftp|rtsp|mms)?://)" + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" + //ftp的user@
+  "(([0-9]{1,3}.){3}[0-9]{1,3}" + // IP形式的URL- 199.194.52.184
+  "|" + // 允许IP和DOMAIN（域名）
+  "([0-9a-z_!~*'()-]+.)*" + // 域名- www.
+  "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]." + // 二级域名
+  "[a-z]{2,6})" + // first level domain- .com or .museum
+  "(:[0-9]{1,4})?" + // 端口- :80
+  "((/?)|" + // 如果没有文件名，则不需要斜杠
+  "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
+  return new RegExp(reg).test(str) ? true : false;
+}
+function isFunction(val) {
+  return val && typeof val === "function";
+}
+function isEng(val) {
+  return /^[A-Za-z]+$/.test(val);
+}
+// CONCATENATED MODULE: ./packages/directives/contextmenu.js
+
+
+
+
+var popover;
+
+var hidePopover = function hidePopover() {
+  if (popover) popover.style.display = 'none';
+};
+
+var showPopover = function showPopover() {
+  if (popover) popover.style.display = 'block';
+};
+
+document.addEventListener('click', function (e) {
+  hidePopover();
+});
+/* harmony default export */ var contextmenu = ({
+  hide: hidePopover,
+  bind: function bind(el, binding, vnode) {
+    el.addEventListener('contextmenu', function (e) {
+      if (isEmpty(binding.value) || !Array.isArray(binding.value)) return;
+      e.preventDefault();
+      components_popover.methods.closeAll();
+      var component;
+      var visibleItems = [];
+      if (binding.modifiers.message) component = vnode.context;else if (binding.modifiers.contact) component = vnode.child;
+
+      if (!popover) {
+        popover = document.createElement('div');
+        popover.className = 'lemon-contextmenu';
+        document.body.appendChild(popover);
+      }
+
+      popover.innerHTML = binding.value.map(function (item) {
+        var visible;
+
+        if (isFunction(item.visible)) {
+          visible = item.visible(component);
+        } else {
+          visible = item.visible === undefined ? true : item.visible;
+        }
+
+        if (visible) {
+          visibleItems.push(item);
+          var icon = item.icon ? "<i class=\"lemon-contextmenu__icon ".concat(item.icon, "\"></i>") : '';
+          return "<div style=\"color:".concat(item.color, "\" title=\"").concat(item.text, "\" class=\"lemon-contextmenu__item\">").concat(icon, "<span>").concat(item.text, "</span></div>");
+        }
+
+        return '';
+      }).join("");
+      popover.style.top = "".concat(e.pageY, "px");
+      popover.style.left = "".concat(e.pageX, "px");
+      popover.childNodes.forEach(function (node, index) {
+        var _visibleItems$index = visibleItems[index],
+            click = _visibleItems$index.click,
+            _render = _visibleItems$index.render;
+        node.addEventListener('click', function (e) {
+          e.stopPropagation();
+          if (isFunction(click)) click(e, component, hidePopover);
+        });
+
+        if (isFunction(_render)) {
+          var ins = external_commonjs_vue_commonjs2_vue_root_Vue_default.a.extend({
+            render: function render(h) {
+              return _render(h, component, hidePopover);
+            }
+          });
+          var renderComponent = new ins().$mount();
+          node.querySelector('span').innerHTML = renderComponent.$el.outerHTML;
+        }
+      });
+      showPopover();
+    });
+  },
+  inserted: function inserted(el, binding, vnode) {}
+});
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/popover.vue?vue&type=script&lang=js&
 
 
@@ -5652,12 +5782,6 @@ var es6_string_includes = __webpack_require__("2fdb");
 
 var popoverCloseQueue = [];
 
-var popoverCloseAll = function popoverCloseAll() {
-  return popoverCloseQueue.forEach(function (callback) {
-    return callback();
-  });
-};
-
 var triggerEvents = {
   hover: function hover(el) {},
   focus: function focus(el) {
@@ -5675,6 +5799,7 @@ var triggerEvents = {
 
     el.addEventListener("click", function (e) {
       e.stopPropagation();
+      contextmenu.hide();
 
       _this2.changeVisible();
     });
@@ -5731,8 +5856,6 @@ var triggerEvents = {
         }
       }
     }, [h("div", {
-      "class": "lemon-popover__title"
-    }), h("div", {
       "class": "lemon-popover__content"
     }, [this.$slots.content]), h("div", {
       "class": "lemon-popover__arrow"
@@ -5792,9 +5915,14 @@ var triggerEvents = {
       this.visible ? this.close() : this.open();
     },
     open: function open() {
-      popoverCloseAll();
+      this.closeAll();
       this.visible = true;
     },
+    closeAll: function closeAll() {
+      popoverCloseQueue.forEach(function (callback) {
+        return callback();
+      });
+    },
     close: function close() {
       this.visible = false;
     }
@@ -5825,17 +5953,21 @@ var popover_component = normalizeComponent(
   
 )
 
-/* harmony default export */ var popover = (popover_component.exports);
+/* harmony default export */ var components_popover = (popover_component.exports);
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/button.vue?vue&type=script&lang=js&
 /* harmony default export */ var buttonvue_type_script_lang_js_ = ({
   name: "LemonButton",
   props: {
+    color: {
+      type: String,
+      default: 'default'
+    },
     disabled: Boolean
   },
   render: function render() {
     var h = arguments[0];
     return h("button", {
-      "class": "lemon-button",
+      "class": ['lemon-button', "lemon-button--color-".concat(this.color)],
       "attrs": {
         "disabled": this.disabled,
         "type": "button"
@@ -5940,12 +6072,19 @@ var badge_component = normalizeComponent(
 
 /* harmony default export */ var avatarvue_type_script_lang_js_ = ({
   name: "LemonAvatar",
+  inject: ['IMUI'],
   props: {
     src: String,
     icon: {
       type: String,
       default: "lemon-icon-people"
     },
+    circle: {
+      type: Boolean,
+      default: function _default() {
+        return this.IMUI ? this.IMUI.avatarCricle : false;
+      }
+    },
     size: {
       type: Number,
       default: 32
@@ -5962,7 +6101,9 @@ var badge_component = normalizeComponent(
     var h = arguments[0];
     return h("span", {
       "style": this.style,
-      "class": "lemon-avatar",
+      "class": ['lemon-avatar', {
+        'lemon-avatar--circle': this.circle
+      }],
       "on": {
         "click": function click(e) {
           return _this.$emit("click", e);
@@ -6026,54 +6167,6 @@ var avatar_component = normalizeComponent(
 var helper = __webpack_require__("2638");
 var helper_default = /*#__PURE__*/__webpack_require__.n(helper);
 
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.regexp.constructor.js
-var es6_regexp_constructor = __webpack_require__("3b2b");
-
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es7.object.values.js
-var es7_object_values = __webpack_require__("8615");
-
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.regexp.to-string.js
-var es6_regexp_to_string = __webpack_require__("6b54");
-
-// CONCATENATED MODULE: ./packages/utils/validate.js
-
-
-
-
-
-function isPlainObject(obj) {
-  return Object.prototype.toString.call(obj) === "[object Object]";
-}
-function isString(str) {
-  return typeof str == "string";
-}
-function isToday(time) {
-  return new Date().getTime() - time < 86400000;
-}
-function isEmpty(obj) {
-  if (!obj) return true;
-  if (Array.isArray(obj) && obj.length == 0) return true;
-  if (isPlainObject(obj) && Object.values(obj).length == 0) return true;
-  return false;
-}
-function isUrl(str) {
-  var reg = "^((https|http|ftp|rtsp|mms)?://)" + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" + //ftp的user@
-  "(([0-9]{1,3}.){3}[0-9]{1,3}" + // IP形式的URL- 199.194.52.184
-  "|" + // 允许IP和DOMAIN（域名）
-  "([0-9a-z_!~*'()-]+.)*" + // 域名- www.
-  "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]." + // 二级域名
-  "[a-z]{2,6})" + // first level domain- .com or .museum
-  "(:[0-9]{1,4})?" + // 端口- :80
-  "((/?)|" + // 如果没有文件名，则不需要斜杠
-  "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
-  return new RegExp(reg).test(str) ? true : false;
-}
-function isFunction(val) {
-  return val && typeof val === "function";
-}
-function isEng(val) {
-  return /^[A-Za-z]+$/.test(val);
-}
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es7.object.get-own-property-descriptors.js
 var es7_object_get_own_property_descriptors = __webpack_require__("8e6e");
 
@@ -6223,9 +6316,6 @@ function mergeDeep(o1, o2) {
 
   return o1;
 }
-function toEmojiName(str) {
-  return str.replace(/<img emoji-name=\"([^\"]*?)\" [^>]*>/gi, "[!$1]");
-}
 function formatByte(value) {
   if (null == value || value == "") {
     return "0 Bytes";
@@ -6426,13 +6516,18 @@ var isInitTool = false;
     }
   },
   data: function data() {
+    this.clipboardBlob = null;
     return {
+      //剪切板图片URL
+      clipboardUrl: '',
       submitDisabled: true,
       proxyTools: [],
       accept: ""
     };
   },
   created: function created() {
+    var _this = this;
+
     if (this.tools && this.tools.length > 0) {
       this.initTools(this.tools);
     } else {
@@ -6444,9 +6539,13 @@ var isInitTool = false;
         name: 'uploadImage'
       }]);
     }
+
+    this.IMUI.$on('change-contact', function () {
+      _this.closeClipboardImage();
+    });
   },
   render: function render() {
-    var _this = this;
+    var _this2 = this;
 
     var h = arguments[0];
     var toolLeft = [];
@@ -6468,7 +6567,7 @@ var isInitTool = false;
           "class": "lemon-editor__emoji"
         }, [h("template", {
           "slot": "content"
-        }, [_this._renderEmojiTabs()]), h("div", {
+        }, [_this2._renderEmojiTabs()]), h("div", {
           "class": classes,
           "attrs": {
             "title": title
@@ -6494,7 +6593,27 @@ var isInitTool = false;
     });
     return h("div", {
       "class": "lemon-editor"
-    }, [h("input", {
+    }, [this.clipboardUrl && h("div", {
+      "class": "lemon-editor__clipboard-image"
+    }, [h("img", {
+      "attrs": {
+        "src": this.clipboardUrl
+      }
+    }), h("div", [h("lemon-button", {
+      "style": {
+        marginRight: '10px'
+      },
+      "on": {
+        "click": this.closeClipboardImage
+      },
+      "attrs": {
+        "color": "grey"
+      }
+    }, ["\u53D6\u6D88"]), h("lemon-button", {
+      "on": {
+        "click": this.sendClipboardImage
+      }
+    }, ["\u53D1\u9001\u56FE\u7247"])])]), h("input", {
       "style": "display:none",
       "attrs": {
         "type": "file",
@@ -6542,11 +6661,21 @@ var isInitTool = false;
     }, [this.sendText])])])]);
   },
   methods: {
+    closeClipboardImage: function closeClipboardImage() {
+      this.clipboardUrl = '';
+      this.clipboardBlob = null;
+    },
+    sendClipboardImage: function sendClipboardImage() {
+      if (!this.clipboardBlob) return;
+      this.$emit("upload", this.clipboardBlob);
+      this.closeClipboardImage();
+    },
+
     /**
      * 初始化工具栏
      */
     initTools: function initTools(data) {
-      var _this2 = this;
+      var _this3 = this;
 
       var h = this.$createElement;
       if (!data) return;
@@ -6563,7 +6692,7 @@ var isInitTool = false;
         name: 'uploadFile',
         title: "文件上传",
         click: function click() {
-          return _this2.selectFile("*");
+          return _this3.selectFile("*");
         },
         render: function render(menu) {
           return h("i", {
@@ -6574,7 +6703,7 @@ var isInitTool = false;
         name: 'uploadImage',
         title: "图片上传",
         click: function click() {
-          return _this2.selectFile("image/*");
+          return _this3.selectFile("image/*");
         },
         render: function render(menu) {
           return h("i", {
@@ -6619,7 +6748,7 @@ var isInitTool = false;
       this._saveLastRange();
     },
     _renderEmojiTabs: function _renderEmojiTabs() {
-      var _this3 = this;
+      var _this4 = this;
 
       var h = this.$createElement;
 
@@ -6633,7 +6762,7 @@ var isInitTool = false;
             "class": "lemon-editor__emoji-item",
             "on": {
               "click": function click() {
-                return _this3._handleSelectEmoji(item);
+                return _this4._handleSelectEmoji(item);
               }
             }
           });
@@ -6703,12 +6832,36 @@ var isInitTool = false;
       var clipboardData = e.clipboardData || window.clipboardData;
       var text = clipboardData.getData("Text");
 
-      if (window.clipboardData) {
+      if (text) {
-        this.$refs.textarea.innerHTML = text;
+        if (window.clipboardData) {
+          this.$refs.textarea.innerHTML = text;
+        } else {
+          exec(text, "insertText");
+        }
       } else {
-        exec(text, "insertText");
+        var _this$_getClipboardBl = this._getClipboardBlob(clipboardData),
+            blob = _this$_getClipboardBl.blob,
+            blobUrl = _this$_getClipboardBl.blobUrl;
+
+        this.clipboardBlob = blob;
+        this.clipboardUrl = blobUrl;
       }
     },
+    _getClipboardBlob: function _getClipboardBlob(clipboard) {
+      var blob, blobUrl;
+
+      for (var i = 0; i < clipboard.items.length; ++i) {
+        if (clipboard.items[i].kind == 'file' && clipboard.items[i].type.indexOf('image/') !== -1) {
+          blob = clipboard.items[i].getAsFile();
+          blobUrl = (window.URL || window.webkitURL).createObjectURL(blob);
+        }
+      }
+
+      return {
+        blob: blob,
+        blobUrl: blobUrl
+      };
+    },
     _handleKeyup: function _handleKeyup(e) {
       this._saveLastRange();
 
@@ -6726,7 +6879,7 @@ var isInitTool = false;
       //     .replace(/<div>|<p>/g, "\r\n")
       //     .replace(/<\/div>|<\/p>/g, "")
       // );
-      return toEmojiName(this.$refs.textarea.innerHTML);
+      return this.IMUI.emojiImageToName(this.$refs.textarea.innerHTML);
     },
     _checkSubmitDisabled: function _checkSubmitDisabled() {
       this.submitDisabled = !clearHtmlExcludeImg(this.$refs.textarea.innerHTML.trim());
@@ -6739,11 +6892,11 @@ var isInitTool = false;
       this._checkSubmitDisabled();
     },
     _handleChangeFile: function _handleChangeFile(e) {
-      var _this4 = this;
+      var _this5 = this;
 
       var fileInput = this.$refs.fileInput;
       Array.from(fileInput.files).forEach(function (file) {
-        _this4.$emit("upload", file);
+        _this5.$emit("upload", file);
       });
       fileInput.value = "";
     },
@@ -6755,7 +6908,7 @@ var isInitTool = false;
       this.$forceUpdate();
     },
     setValue: function setValue(val) {
-      this.$refs.textarea.innerHTML = val;
+      this.$refs.textarea.innerHTML = this.IMUI.emojiNameToImage(val);
 
       this._checkSubmitDisabled();
     }
@@ -6787,86 +6940,6 @@ var editor_component = normalizeComponent(
 )
 
 /* harmony default export */ var editor = (editor_component.exports);
-// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
-var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
-var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);
-
-// CONCATENATED MODULE: ./packages/directives/dropdown.js
-
-
-
-var dropdown_popover;
-
-var hidePopover = function hidePopover() {
-  if (dropdown_popover) dropdown_popover.style.display = 'none';
-};
-
-var showPopover = function showPopover() {
-  if (dropdown_popover) dropdown_popover.style.display = 'block';
-};
-
-document.addEventListener('click', function (e) {
-  hidePopover();
-});
-/* harmony default export */ var dropdown = ({
-  hide: hidePopover,
-  bind: function bind(el, binding, vnode) {
-    el.addEventListener('contextmenu', function (e) {
-      if (isEmpty(binding.value) || !Array.isArray(binding.value)) return;
-      e.preventDefault();
-      var component;
-      var visibleItems = [];
-      if (binding.modifiers.message) component = vnode.context;else if (binding.modifiers.contact) component = vnode.child;
-
-      if (!dropdown_popover) {
-        dropdown_popover = document.createElement('div');
-        dropdown_popover.className = 'lemon-dropdown';
-        document.body.appendChild(dropdown_popover);
-      }
-
-      dropdown_popover.innerHTML = binding.value.map(function (item) {
-        var visible;
-
-        if (isFunction(item.visible)) {
-          visible = item.visible(component);
-        } else {
-          visible = item.visible === undefined ? true : item.visible;
-        }
-
-        if (visible) {
-          visibleItems.push(item);
-          var icon = item.icon ? "<i class=\"lemon-dropdown__icon ".concat(item.icon, "\"></i>") : '';
-          return "<div style=\"color:".concat(item.color, "\" title=\"").concat(item.text, "\" class=\"lemon-dropdown__item\">").concat(icon, "<span>").concat(item.text, "</span></div>");
-        }
-
-        return '';
-      }).join("");
-      dropdown_popover.style.top = "".concat(e.pageY, "px");
-      dropdown_popover.style.left = "".concat(e.pageX, "px");
-      dropdown_popover.childNodes.forEach(function (node, index) {
-        var _visibleItems$index = visibleItems[index],
-            click = _visibleItems$index.click,
-            _render = _visibleItems$index.render;
-        node.addEventListener('click', function (e) {
-          e.stopPropagation();
-          if (isFunction(click)) click(e, component, hidePopover);
-        });
-
-        if (isFunction(_render)) {
-          var ins = external_commonjs_vue_commonjs2_vue_root_Vue_default.a.extend({
-            render: function render(h) {
-              return _render(h, component, hidePopover);
-            }
-          });
-          var renderComponent = new ins().$mount();
-          node.querySelector('span').innerHTML = renderComponent.$el.outerHTML;
-        }
-      });
-      showPopover();
-    });
-  },
-  inserted: function inserted(el, binding, vnode) {}
-});
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/messages.vue?vue&type=script&lang=js&
 
 
@@ -6998,7 +7071,7 @@ document.addEventListener('click', function (e) {
             switch (_context2.prev = _context2.next) {
               case 0:
                 target = e.target;
-                dropdown.hide();
+                contextmenu.hide();
 
                 if (!(target.scrollTop == 0 && this._loading == false && this._loadend == false)) {
                   _context2.next = 8;
@@ -7199,7 +7272,7 @@ var messages_component = normalizeComponent(
       "class": "lemon-message__content-flex"
     }, [h("div", {
       "directives": [{
-        name: "dropdown",
+        name: "lemon-contextmenu",
         value: this.IMUI.contextmenu,
         modifiers: {
           "message": true
@@ -7277,6 +7350,7 @@ var basic_component = normalizeComponent(
 
 
 
+
 function textvue_type_script_lang_js_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function textvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { textvue_type_script_lang_js_ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { textvue_type_script_lang_js_ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -7296,7 +7370,7 @@ function textvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i <
     }, {
       "scopedSlots": {
         content: function content(props) {
-          var content = _this.IMUI.replaceEmojiName(props.content);
+          var content = _this.IMUI.emojiNameToImage(props.content);
 
           return h("span", helper_default()([{}, {
             "domProps": {
@@ -7595,7 +7669,7 @@ var CONTACT_TYPE = ["many", "single"];
     return "[图片]";
   },
   text: function text(message) {
-    return this.replaceEmojiName(clearHtml(message.content));
+    return this.emojiNameToImage(clearHtml(message.content));
   },
   event: function event(message) {
     return '[通知]';
@@ -7692,6 +7766,7 @@ function () {
 
 
 
+
 function componentsvue_type_script_lang_js_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function componentsvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { componentsvue_type_script_lang_js_ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { componentsvue_type_script_lang_js_ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -7769,6 +7844,7 @@ var renderDrawerContent = function renderDrawerContent() {};
     sendText: String,
     contextmenu: Array,
     contactContextmenu: Array,
+    avatarCricle: Boolean,
     user: {
       type: Object,
       default: function _default() {
@@ -7780,6 +7856,7 @@ var renderDrawerContent = function renderDrawerContent() {};
     this.CacheContactContainer = new memory_MemoryCache();
     this.CacheMenuContainer = new memory_MemoryCache();
     this.CacheMessageLoaded = new memory_MemoryCache();
+    this.CacheDraft = new memory_MemoryCache();
     return {
       drawerVisible: !this.hideDrawer,
       currentContactId: null,
@@ -7896,6 +7973,8 @@ var renderDrawerContent = function renderDrawerContent() {};
           if (scrollToBottom == true) {
             this.messageViewToBottom();
           }
+
+          this.CacheDraft.remove(message.toContactId);
         } else {
           updateContact.unread = '+1';
         }
@@ -7930,6 +8009,8 @@ var renderDrawerContent = function renderDrawerContent() {};
           lastContent: _this4.lastContentRender(message),
           lastSendTime: message.sendTime
         });
+
+        _this4.CacheDraft.remove(message.toContactId);
       });
     },
     _handleUpload: function _handleUpload(file) {
@@ -8074,14 +8155,14 @@ var renderDrawerContent = function renderDrawerContent() {};
     _renderSidebarMessage: function _renderSidebarMessage() {
       var _this9 = this;
 
-      return this._renderSidebar([useScopedSlot(this.$scopedSlots["sidebar-message-top"]), this.lastMessages.map(function (contact) {
+      return this._renderSidebar([useScopedSlot(this.$scopedSlots["sidebar-message-top"], null, this), this.lastMessages.map(function (contact) {
         return _this9._renderContact({
           contact: contact,
           timeFormat: _this9.contactTimeFormat
         }, function () {
           return _this9.changeContact(contact.id);
         }, _this9.$scopedSlots["sidebar-message"]);
-      })], DEFAULT_MENU_LASTMESSAGES);
+      })], DEFAULT_MENU_LASTMESSAGES, useScopedSlot(this.$scopedSlots["sidebar-message-fixedtop"], null, this));
     },
     _renderContact: function _renderContact(props, onClick, slot) {
       var _this10 = this;
@@ -8105,7 +8186,7 @@ var renderDrawerContent = function renderDrawerContent() {};
           "lemon-contact--active": this.currentContactId == props.contact.id
         },
         "directives": [{
-          name: "dropdown",
+          name: "lemon-contextmenu",
           value: this.contactContextmenu,
           modifiers: {
             "contact": true
@@ -8127,7 +8208,7 @@ var renderDrawerContent = function renderDrawerContent() {};
 
       var h = this.$createElement;
       var prevIndex;
-      return this._renderSidebar([useScopedSlot(this.$scopedSlots["sidebar-contact-top"]), this.contacts.map(function (contact) {
+      return this._renderSidebar([useScopedSlot(this.$scopedSlots["sidebar-contact-top"], null, this), this.contacts.map(function (contact) {
         if (!contact.index) return;
         contact.index = contact.index.replace(/\[[0-9]*\]/, "");
         var node = [contact.index !== prevIndex && h("p", {
@@ -8140,9 +8221,9 @@ var renderDrawerContent = function renderDrawerContent() {};
         }, _this11.$scopedSlots["sidebar-contact"])];
         prevIndex = contact.index;
         return node;
-      })], DEFAULT_MENU_CONTACTS);
+      })], DEFAULT_MENU_CONTACTS, useScopedSlot(this.$scopedSlots["sidebar-contact-fixedtop"], null, this));
     },
-    _renderSidebar: function _renderSidebar(children, name) {
+    _renderSidebar: function _renderSidebar(children, name, fixedtop) {
       var h = this.$createElement;
       return h("div", {
         "class": "lemon-sidebar",
@@ -8153,7 +8234,11 @@ var renderDrawerContent = function renderDrawerContent() {};
         "on": {
           "scroll": this._handleSidebarScroll
         }
-      }, [children]);
+      }, [h("div", {
+        "class": "lemon-sidebar__fixed-top"
+      }, [fixedtop]), h("div", {
+        "class": "lemon-sidebar__scroll"
+      }, [children])]);
     },
     _renderDrawer: function _renderDrawer() {
       var h = this.$createElement;
@@ -8266,14 +8351,13 @@ var renderDrawerContent = function renderDrawerContent() {};
       return nodes;
     },
     _handleSidebarScroll: function _handleSidebarScroll() {
-      dropdown.hide();
+      contextmenu.hide();
     },
     _addContact: function _addContact(data, t) {
       var type = {
         0: "unshift",
         1: "push"
-      }[t]; //this.contacts[type](cloneDeep(data));
+      }[t];
-
       this.contacts[type](data);
     },
     _addMessage: function _addMessage(data, contactId, t) {
@@ -8312,12 +8396,15 @@ var renderDrawerContent = function renderDrawerContent() {};
      * @param {String} str 被替换的字符串
      * @return {String} 替换后的字符串
      */
-    replaceEmojiName: function replaceEmojiName(str) {
+    emojiNameToImage: function emojiNameToImage(str) {
       return str.replace(/\[!(\w+)\]/gi, function (str, match) {
         var file = match;
-        return emojiMap[file] ? "<img src=\"".concat(emojiMap[file], "\" />") : "[!".concat(match, "]");
+        return emojiMap[file] ? "<img emoji-name=\"".concat(match, "\" src=\"").concat(emojiMap[file], "\" />") : "[!".concat(match, "]");
       });
     },
+    emojiImageToName: function emojiImageToName(str) {
+      return str.replace(/<img emoji-name=\"([^\"]*?)\" [^>]*>/gi, "[!$1]");
+    },
     updateCurrentMessages: function updateCurrentMessages() {
       if (!allMessages[this.currentContactId]) allMessages[this.currentContactId] = [];
       this.currentMessages = allMessages[this.currentContactId];
@@ -8340,48 +8427,79 @@ var renderDrawerContent = function renderDrawerContent() {};
       regeneratorRuntime.mark(function _callee2(contactId, menuName) {
         var _this13 = this;
 
+        var h, prevCurrentContactId, editorValue, draft;
         return regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
+                h = this.$createElement;
+
                 if (!menuName) {
-                  _context2.next = 4;
+                  _context2.next = 5;
                   break;
                 }
 
                 this.changeMenu(menuName);
-                _context2.next = 6;
+                _context2.next = 7;
                 break;
 
-              case 4:
+              case 5:
                 if (!(this._changeContactLock || this.currentContactId == contactId)) {
-                  _context2.next = 6;
+                  _context2.next = 7;
                   break;
                 }
 
                 return _context2.abrupt("return", false);
 
-              case 6:
+              case 7:
+                prevCurrentContactId = this.currentContactId; //保存上个聊天目标的草稿
+
+                if (prevCurrentContactId) {
+                  editorValue = this.getEditorValue();
+
+                  if (editorValue) {
+                    this.CacheDraft.set(prevCurrentContactId, editorValue);
+                    this.updateContact({
+                      id: prevCurrentContactId,
+                      lastContent: [h("span", {
+                        "style": "color:red;"
+                      }, ["[\u8349\u7A3F]"]), h("span", helper_default()([{}, {
+                        "domProps": {
+                          innerHTML: this.lastContentRender({
+                            type: 'text',
+                            content: editorValue
+                          })
+                        }
+                      }]))]
+                    });
+                    this.setEditorValue('');
+                  }
+                }
+
                 this.currentContactId = contactId;
 
                 if (this.currentContactId) {
-                  _context2.next = 9;
+                  _context2.next = 12;
                   break;
                 }
 
                 return _context2.abrupt("return", false);
 
-              case 9:
+              case 12:
                 this.$emit("change-contact", this.currentContact, this);
 
                 if (!isFunction(this.currentContact.renderContainer)) {
-                  _context2.next = 12;
+                  _context2.next = 15;
                   break;
                 }
 
                 return _context2.abrupt("return");
 
-              case 12:
+              case 15:
+                //填充草稿内容
+                draft = this.CacheDraft.get(contactId) || "";
+                if (draft) this.setEditorValue(draft);
+
                 if (this.CacheMessageLoaded.has(contactId)) {
                   this.$refs.messages.loaded();
                 } else {
@@ -8402,7 +8520,7 @@ var renderDrawerContent = function renderDrawerContent() {};
                   }, 0);
                 }
 
-              case 14:
+              case 19:
               case "end":
                 return _context2.stop();
             }
@@ -8611,6 +8729,8 @@ var renderDrawerContent = function renderDrawerContent() {};
       var index = this.findContactIndexById(id);
       if (index === -1) return false;
       this.contacts.splice(index, 1);
+      this.CacheDraft.remove(id);
+      this.CacheMessageLoaded.remove(id);
       return true;
     },
 
@@ -8686,7 +8806,7 @@ var renderDrawerContent = function renderDrawerContent() {};
       return this.currentMessages;
     },
     setEditorValue: function setEditorValue(val) {
-      this.$refs.editor.setValue(this.replaceEmojiName(val));
+      this.$refs.editor.setValue(this.emojiNameToImage(val));
     },
     getEditorValue: function getEditorValue() {
       return this.$refs.editor.getFormatValue();
@@ -8744,7 +8864,7 @@ var common = __webpack_require__("6a2b");
 // CONCATENATED MODULE: ./packages/directives/index.js
 
 
-external_commonjs_vue_commonjs2_vue_root_Vue_default.a.directive('dropdown', dropdown);
+external_commonjs_vue_commonjs2_vue_root_Vue_default.a.directive('LemonContextmenu', contextmenu);
 // CONCATENATED MODULE: ./packages/index.js
 
 
@@ -8765,7 +8885,7 @@ external_commonjs_vue_commonjs2_vue_root_Vue_default.a.directive('dropdown', dro
 
 
 var version = "1.4.2";
-var packages_components = [components, components_contact, messages, editor, avatar, badge, components_button, popover, tabs, basic, message_text, message_image, file, message_event];
+var packages_components = [components, components_contact, messages, editor, avatar, badge, components_button, components_popover, tabs, basic, message_text, message_image, file, message_event];
 
 var install = function install(Vue) {
   var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

dist/index.umd.js

@@ -5651,6 +5651,136 @@ var es7_array_includes = __webpack_require__("6762");
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es6.string.includes.js
 var es6_string_includes = __webpack_require__("2fdb");
 
+// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
+var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
+var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);
+
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.regexp.constructor.js
+var es6_regexp_constructor = __webpack_require__("3b2b");
+
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es7.object.values.js
+var es7_object_values = __webpack_require__("8615");
+
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.regexp.to-string.js
+var es6_regexp_to_string = __webpack_require__("6b54");
+
+// CONCATENATED MODULE: ./packages/utils/validate.js
+
+
+
+
+
+function isPlainObject(obj) {
+  return Object.prototype.toString.call(obj) === "[object Object]";
+}
+function isString(str) {
+  return typeof str == "string";
+}
+function isToday(time) {
+  return new Date().getTime() - time < 86400000;
+}
+function isEmpty(obj) {
+  if (!obj) return true;
+  if (Array.isArray(obj) && obj.length == 0) return true;
+  if (isPlainObject(obj) && Object.values(obj).length == 0) return true;
+  return false;
+}
+function isUrl(str) {
+  var reg = "^((https|http|ftp|rtsp|mms)?://)" + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" + //ftp的user@
+  "(([0-9]{1,3}.){3}[0-9]{1,3}" + // IP形式的URL- 199.194.52.184
+  "|" + // 允许IP和DOMAIN（域名）
+  "([0-9a-z_!~*'()-]+.)*" + // 域名- www.
+  "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]." + // 二级域名
+  "[a-z]{2,6})" + // first level domain- .com or .museum
+  "(:[0-9]{1,4})?" + // 端口- :80
+  "((/?)|" + // 如果没有文件名，则不需要斜杠
+  "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
+  return new RegExp(reg).test(str) ? true : false;
+}
+function isFunction(val) {
+  return val && typeof val === "function";
+}
+function isEng(val) {
+  return /^[A-Za-z]+$/.test(val);
+}
+// CONCATENATED MODULE: ./packages/directives/contextmenu.js
+
+
+
+
+var popover;
+
+var hidePopover = function hidePopover() {
+  if (popover) popover.style.display = 'none';
+};
+
+var showPopover = function showPopover() {
+  if (popover) popover.style.display = 'block';
+};
+
+document.addEventListener('click', function (e) {
+  hidePopover();
+});
+/* harmony default export */ var contextmenu = ({
+  hide: hidePopover,
+  bind: function bind(el, binding, vnode) {
+    el.addEventListener('contextmenu', function (e) {
+      if (isEmpty(binding.value) || !Array.isArray(binding.value)) return;
+      e.preventDefault();
+      components_popover.methods.closeAll();
+      var component;
+      var visibleItems = [];
+      if (binding.modifiers.message) component = vnode.context;else if (binding.modifiers.contact) component = vnode.child;
+
+      if (!popover) {
+        popover = document.createElement('div');
+        popover.className = 'lemon-contextmenu';
+        document.body.appendChild(popover);
+      }
+
+      popover.innerHTML = binding.value.map(function (item) {
+        var visible;
+
+        if (isFunction(item.visible)) {
+          visible = item.visible(component);
+        } else {
+          visible = item.visible === undefined ? true : item.visible;
+        }
+
+        if (visible) {
+          visibleItems.push(item);
+          var icon = item.icon ? "<i class=\"lemon-contextmenu__icon ".concat(item.icon, "\"></i>") : '';
+          return "<div style=\"color:".concat(item.color, "\" title=\"").concat(item.text, "\" class=\"lemon-contextmenu__item\">").concat(icon, "<span>").concat(item.text, "</span></div>");
+        }
+
+        return '';
+      }).join("");
+      popover.style.top = "".concat(e.pageY, "px");
+      popover.style.left = "".concat(e.pageX, "px");
+      popover.childNodes.forEach(function (node, index) {
+        var _visibleItems$index = visibleItems[index],
+            click = _visibleItems$index.click,
+            _render = _visibleItems$index.render;
+        node.addEventListener('click', function (e) {
+          e.stopPropagation();
+          if (isFunction(click)) click(e, component, hidePopover);
+        });
+
+        if (isFunction(_render)) {
+          var ins = external_commonjs_vue_commonjs2_vue_root_Vue_default.a.extend({
+            render: function render(h) {
+              return _render(h, component, hidePopover);
+            }
+          });
+          var renderComponent = new ins().$mount();
+          node.querySelector('span').innerHTML = renderComponent.$el.outerHTML;
+        }
+      });
+      showPopover();
+    });
+  },
+  inserted: function inserted(el, binding, vnode) {}
+});
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/popover.vue?vue&type=script&lang=js&
 
 
@@ -5661,12 +5791,6 @@ var es6_string_includes = __webpack_require__("2fdb");
 
 var popoverCloseQueue = [];
 
-var popoverCloseAll = function popoverCloseAll() {
-  return popoverCloseQueue.forEach(function (callback) {
-    return callback();
-  });
-};
-
 var triggerEvents = {
   hover: function hover(el) {},
   focus: function focus(el) {
@@ -5684,6 +5808,7 @@ var triggerEvents = {
 
     el.addEventListener("click", function (e) {
       e.stopPropagation();
+      contextmenu.hide();
 
       _this2.changeVisible();
     });
@@ -5740,8 +5865,6 @@ var triggerEvents = {
         }
       }
     }, [h("div", {
-      "class": "lemon-popover__title"
-    }), h("div", {
       "class": "lemon-popover__content"
     }, [this.$slots.content]), h("div", {
       "class": "lemon-popover__arrow"
@@ -5801,9 +5924,14 @@ var triggerEvents = {
       this.visible ? this.close() : this.open();
     },
     open: function open() {
-      popoverCloseAll();
+      this.closeAll();
       this.visible = true;
     },
+    closeAll: function closeAll() {
+      popoverCloseQueue.forEach(function (callback) {
+        return callback();
+      });
+    },
     close: function close() {
       this.visible = false;
     }
@@ -5834,17 +5962,21 @@ var popover_component = normalizeComponent(
   
 )
 
-/* harmony default export */ var popover = (popover_component.exports);
+/* harmony default export */ var components_popover = (popover_component.exports);
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/button.vue?vue&type=script&lang=js&
 /* harmony default export */ var buttonvue_type_script_lang_js_ = ({
   name: "LemonButton",
   props: {
+    color: {
+      type: String,
+      default: 'default'
+    },
     disabled: Boolean
   },
   render: function render() {
     var h = arguments[0];
     return h("button", {
-      "class": "lemon-button",
+      "class": ['lemon-button', "lemon-button--color-".concat(this.color)],
       "attrs": {
         "disabled": this.disabled,
         "type": "button"
@@ -5949,12 +6081,19 @@ var badge_component = normalizeComponent(
 
 /* harmony default export */ var avatarvue_type_script_lang_js_ = ({
   name: "LemonAvatar",
+  inject: ['IMUI'],
   props: {
     src: String,
     icon: {
       type: String,
       default: "lemon-icon-people"
     },
+    circle: {
+      type: Boolean,
+      default: function _default() {
+        return this.IMUI ? this.IMUI.avatarCricle : false;
+      }
+    },
     size: {
       type: Number,
       default: 32
@@ -5971,7 +6110,9 @@ var badge_component = normalizeComponent(
     var h = arguments[0];
     return h("span", {
       "style": this.style,
-      "class": "lemon-avatar",
+      "class": ['lemon-avatar', {
+        'lemon-avatar--circle': this.circle
+      }],
       "on": {
         "click": function click(e) {
           return _this.$emit("click", e);
@@ -6035,54 +6176,6 @@ var avatar_component = normalizeComponent(
 var helper = __webpack_require__("2638");
 var helper_default = /*#__PURE__*/__webpack_require__.n(helper);
 
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.regexp.constructor.js
-var es6_regexp_constructor = __webpack_require__("3b2b");
-
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es7.object.values.js
-var es7_object_values = __webpack_require__("8615");
-
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.regexp.to-string.js
-var es6_regexp_to_string = __webpack_require__("6b54");
-
-// CONCATENATED MODULE: ./packages/utils/validate.js
-
-
-
-
-
-function isPlainObject(obj) {
-  return Object.prototype.toString.call(obj) === "[object Object]";
-}
-function isString(str) {
-  return typeof str == "string";
-}
-function isToday(time) {
-  return new Date().getTime() - time < 86400000;
-}
-function isEmpty(obj) {
-  if (!obj) return true;
-  if (Array.isArray(obj) && obj.length == 0) return true;
-  if (isPlainObject(obj) && Object.values(obj).length == 0) return true;
-  return false;
-}
-function isUrl(str) {
-  var reg = "^((https|http|ftp|rtsp|mms)?://)" + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" + //ftp的user@
-  "(([0-9]{1,3}.){3}[0-9]{1,3}" + // IP形式的URL- 199.194.52.184
-  "|" + // 允许IP和DOMAIN（域名）
-  "([0-9a-z_!~*'()-]+.)*" + // 域名- www.
-  "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]." + // 二级域名
-  "[a-z]{2,6})" + // first level domain- .com or .museum
-  "(:[0-9]{1,4})?" + // 端口- :80
-  "((/?)|" + // 如果没有文件名，则不需要斜杠
-  "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
-  return new RegExp(reg).test(str) ? true : false;
-}
-function isFunction(val) {
-  return val && typeof val === "function";
-}
-function isEng(val) {
-  return /^[A-Za-z]+$/.test(val);
-}
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es7.object.get-own-property-descriptors.js
 var es7_object_get_own_property_descriptors = __webpack_require__("8e6e");
 
@@ -6232,9 +6325,6 @@ function mergeDeep(o1, o2) {
 
   return o1;
 }
-function toEmojiName(str) {
-  return str.replace(/<img emoji-name=\"([^\"]*?)\" [^>]*>/gi, "[!$1]");
-}
 function formatByte(value) {
   if (null == value || value == "") {
     return "0 Bytes";
@@ -6435,13 +6525,18 @@ var isInitTool = false;
     }
   },
   data: function data() {
+    this.clipboardBlob = null;
     return {
+      //剪切板图片URL
+      clipboardUrl: '',
       submitDisabled: true,
       proxyTools: [],
       accept: ""
     };
   },
   created: function created() {
+    var _this = this;
+
     if (this.tools && this.tools.length > 0) {
       this.initTools(this.tools);
     } else {
@@ -6453,9 +6548,13 @@ var isInitTool = false;
         name: 'uploadImage'
       }]);
     }
+
+    this.IMUI.$on('change-contact', function () {
+      _this.closeClipboardImage();
+    });
   },
   render: function render() {
-    var _this = this;
+    var _this2 = this;
 
     var h = arguments[0];
     var toolLeft = [];
@@ -6477,7 +6576,7 @@ var isInitTool = false;
           "class": "lemon-editor__emoji"
         }, [h("template", {
           "slot": "content"
-        }, [_this._renderEmojiTabs()]), h("div", {
+        }, [_this2._renderEmojiTabs()]), h("div", {
           "class": classes,
           "attrs": {
             "title": title
@@ -6503,7 +6602,27 @@ var isInitTool = false;
     });
     return h("div", {
       "class": "lemon-editor"
-    }, [h("input", {
+    }, [this.clipboardUrl && h("div", {
+      "class": "lemon-editor__clipboard-image"
+    }, [h("img", {
+      "attrs": {
+        "src": this.clipboardUrl
+      }
+    }), h("div", [h("lemon-button", {
+      "style": {
+        marginRight: '10px'
+      },
+      "on": {
+        "click": this.closeClipboardImage
+      },
+      "attrs": {
+        "color": "grey"
+      }
+    }, ["\u53D6\u6D88"]), h("lemon-button", {
+      "on": {
+        "click": this.sendClipboardImage
+      }
+    }, ["\u53D1\u9001\u56FE\u7247"])])]), h("input", {
       "style": "display:none",
       "attrs": {
         "type": "file",
@@ -6551,11 +6670,21 @@ var isInitTool = false;
     }, [this.sendText])])])]);
   },
   methods: {
+    closeClipboardImage: function closeClipboardImage() {
+      this.clipboardUrl = '';
+      this.clipboardBlob = null;
+    },
+    sendClipboardImage: function sendClipboardImage() {
+      if (!this.clipboardBlob) return;
+      this.$emit("upload", this.clipboardBlob);
+      this.closeClipboardImage();
+    },
+
     /**
      * 初始化工具栏
      */
     initTools: function initTools(data) {
-      var _this2 = this;
+      var _this3 = this;
 
       var h = this.$createElement;
       if (!data) return;
@@ -6572,7 +6701,7 @@ var isInitTool = false;
         name: 'uploadFile',
         title: "文件上传",
         click: function click() {
-          return _this2.selectFile("*");
+          return _this3.selectFile("*");
         },
         render: function render(menu) {
           return h("i", {
@@ -6583,7 +6712,7 @@ var isInitTool = false;
         name: 'uploadImage',
         title: "图片上传",
         click: function click() {
-          return _this2.selectFile("image/*");
+          return _this3.selectFile("image/*");
         },
         render: function render(menu) {
           return h("i", {
@@ -6628,7 +6757,7 @@ var isInitTool = false;
       this._saveLastRange();
     },
     _renderEmojiTabs: function _renderEmojiTabs() {
-      var _this3 = this;
+      var _this4 = this;
 
       var h = this.$createElement;
 
@@ -6642,7 +6771,7 @@ var isInitTool = false;
             "class": "lemon-editor__emoji-item",
             "on": {
               "click": function click() {
-                return _this3._handleSelectEmoji(item);
+                return _this4._handleSelectEmoji(item);
               }
             }
           });
@@ -6712,12 +6841,36 @@ var isInitTool = false;
       var clipboardData = e.clipboardData || window.clipboardData;
       var text = clipboardData.getData("Text");
 
-      if (window.clipboardData) {
+      if (text) {
-        this.$refs.textarea.innerHTML = text;
+        if (window.clipboardData) {
+          this.$refs.textarea.innerHTML = text;
+        } else {
+          exec(text, "insertText");
+        }
       } else {
-        exec(text, "insertText");
+        var _this$_getClipboardBl = this._getClipboardBlob(clipboardData),
+            blob = _this$_getClipboardBl.blob,
+            blobUrl = _this$_getClipboardBl.blobUrl;
+
+        this.clipboardBlob = blob;
+        this.clipboardUrl = blobUrl;
       }
     },
+    _getClipboardBlob: function _getClipboardBlob(clipboard) {
+      var blob, blobUrl;
+
+      for (var i = 0; i < clipboard.items.length; ++i) {
+        if (clipboard.items[i].kind == 'file' && clipboard.items[i].type.indexOf('image/') !== -1) {
+          blob = clipboard.items[i].getAsFile();
+          blobUrl = (window.URL || window.webkitURL).createObjectURL(blob);
+        }
+      }
+
+      return {
+        blob: blob,
+        blobUrl: blobUrl
+      };
+    },
     _handleKeyup: function _handleKeyup(e) {
       this._saveLastRange();
 
@@ -6735,7 +6888,7 @@ var isInitTool = false;
       //     .replace(/<div>|<p>/g, "\r\n")
       //     .replace(/<\/div>|<\/p>/g, "")
       // );
-      return toEmojiName(this.$refs.textarea.innerHTML);
+      return this.IMUI.emojiImageToName(this.$refs.textarea.innerHTML);
     },
     _checkSubmitDisabled: function _checkSubmitDisabled() {
       this.submitDisabled = !clearHtmlExcludeImg(this.$refs.textarea.innerHTML.trim());
@@ -6748,11 +6901,11 @@ var isInitTool = false;
       this._checkSubmitDisabled();
     },
     _handleChangeFile: function _handleChangeFile(e) {
-      var _this4 = this;
+      var _this5 = this;
 
       var fileInput = this.$refs.fileInput;
       Array.from(fileInput.files).forEach(function (file) {
-        _this4.$emit("upload", file);
+        _this5.$emit("upload", file);
       });
       fileInput.value = "";
     },
@@ -6764,7 +6917,7 @@ var isInitTool = false;
       this.$forceUpdate();
     },
     setValue: function setValue(val) {
-      this.$refs.textarea.innerHTML = val;
+      this.$refs.textarea.innerHTML = this.IMUI.emojiNameToImage(val);
 
       this._checkSubmitDisabled();
     }
@@ -6796,86 +6949,6 @@ var editor_component = normalizeComponent(
 )
 
 /* harmony default export */ var editor = (editor_component.exports);
-// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
-var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
-var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);
-
-// CONCATENATED MODULE: ./packages/directives/dropdown.js
-
-
-
-var dropdown_popover;
-
-var hidePopover = function hidePopover() {
-  if (dropdown_popover) dropdown_popover.style.display = 'none';
-};
-
-var showPopover = function showPopover() {
-  if (dropdown_popover) dropdown_popover.style.display = 'block';
-};
-
-document.addEventListener('click', function (e) {
-  hidePopover();
-});
-/* harmony default export */ var dropdown = ({
-  hide: hidePopover,
-  bind: function bind(el, binding, vnode) {
-    el.addEventListener('contextmenu', function (e) {
-      if (isEmpty(binding.value) || !Array.isArray(binding.value)) return;
-      e.preventDefault();
-      var component;
-      var visibleItems = [];
-      if (binding.modifiers.message) component = vnode.context;else if (binding.modifiers.contact) component = vnode.child;
-
-      if (!dropdown_popover) {
-        dropdown_popover = document.createElement('div');
-        dropdown_popover.className = 'lemon-dropdown';
-        document.body.appendChild(dropdown_popover);
-      }
-
-      dropdown_popover.innerHTML = binding.value.map(function (item) {
-        var visible;
-
-        if (isFunction(item.visible)) {
-          visible = item.visible(component);
-        } else {
-          visible = item.visible === undefined ? true : item.visible;
-        }
-
-        if (visible) {
-          visibleItems.push(item);
-          var icon = item.icon ? "<i class=\"lemon-dropdown__icon ".concat(item.icon, "\"></i>") : '';
-          return "<div style=\"color:".concat(item.color, "\" title=\"").concat(item.text, "\" class=\"lemon-dropdown__item\">").concat(icon, "<span>").concat(item.text, "</span></div>");
-        }
-
-        return '';
-      }).join("");
-      dropdown_popover.style.top = "".concat(e.pageY, "px");
-      dropdown_popover.style.left = "".concat(e.pageX, "px");
-      dropdown_popover.childNodes.forEach(function (node, index) {
-        var _visibleItems$index = visibleItems[index],
-            click = _visibleItems$index.click,
-            _render = _visibleItems$index.render;
-        node.addEventListener('click', function (e) {
-          e.stopPropagation();
-          if (isFunction(click)) click(e, component, hidePopover);
-        });
-
-        if (isFunction(_render)) {
-          var ins = external_commonjs_vue_commonjs2_vue_root_Vue_default.a.extend({
-            render: function render(h) {
-              return _render(h, component, hidePopover);
-            }
-          });
-          var renderComponent = new ins().$mount();
-          node.querySelector('span').innerHTML = renderComponent.$el.outerHTML;
-        }
-      });
-      showPopover();
-    });
-  },
-  inserted: function inserted(el, binding, vnode) {}
-});
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/messages.vue?vue&type=script&lang=js&
 
 
@@ -7007,7 +7080,7 @@ document.addEventListener('click', function (e) {
             switch (_context2.prev = _context2.next) {
               case 0:
                 target = e.target;
-                dropdown.hide();
+                contextmenu.hide();
 
                 if (!(target.scrollTop == 0 && this._loading == false && this._loadend == false)) {
                   _context2.next = 8;
@@ -7208,7 +7281,7 @@ var messages_component = normalizeComponent(
       "class": "lemon-message__content-flex"
     }, [h("div", {
       "directives": [{
-        name: "dropdown",
+        name: "lemon-contextmenu",
         value: this.IMUI.contextmenu,
         modifiers: {
           "message": true
@@ -7286,6 +7359,7 @@ var basic_component = normalizeComponent(
 
 
 
+
 function textvue_type_script_lang_js_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function textvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { textvue_type_script_lang_js_ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { textvue_type_script_lang_js_ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -7305,7 +7379,7 @@ function textvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i <
     }, {
       "scopedSlots": {
         content: function content(props) {
-          var content = _this.IMUI.replaceEmojiName(props.content);
+          var content = _this.IMUI.emojiNameToImage(props.content);
 
           return h("span", helper_default()([{}, {
             "domProps": {
@@ -7604,7 +7678,7 @@ var CONTACT_TYPE = ["many", "single"];
     return "[图片]";
   },
   text: function text(message) {
-    return this.replaceEmojiName(clearHtml(message.content));
+    return this.emojiNameToImage(clearHtml(message.content));
   },
   event: function event(message) {
     return '[通知]';
@@ -7701,6 +7775,7 @@ function () {
 
 
 
+
 function componentsvue_type_script_lang_js_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function componentsvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { componentsvue_type_script_lang_js_ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { componentsvue_type_script_lang_js_ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -7778,6 +7853,7 @@ var renderDrawerContent = function renderDrawerContent() {};
     sendText: String,
     contextmenu: Array,
     contactContextmenu: Array,
+    avatarCricle: Boolean,
     user: {
       type: Object,
       default: function _default() {
@@ -7789,6 +7865,7 @@ var renderDrawerContent = function renderDrawerContent() {};
     this.CacheContactContainer = new memory_MemoryCache();
     this.CacheMenuContainer = new memory_MemoryCache();
     this.CacheMessageLoaded = new memory_MemoryCache();
+    this.CacheDraft = new memory_MemoryCache();
     return {
       drawerVisible: !this.hideDrawer,
       currentContactId: null,
@@ -7905,6 +7982,8 @@ var renderDrawerContent = function renderDrawerContent() {};
           if (scrollToBottom == true) {
             this.messageViewToBottom();
           }
+
+          this.CacheDraft.remove(message.toContactId);
         } else {
           updateContact.unread = '+1';
         }
@@ -7939,6 +8018,8 @@ var renderDrawerContent = function renderDrawerContent() {};
           lastContent: _this4.lastContentRender(message),
           lastSendTime: message.sendTime
         });
+
+        _this4.CacheDraft.remove(message.toContactId);
       });
     },
     _handleUpload: function _handleUpload(file) {
@@ -8083,14 +8164,14 @@ var renderDrawerContent = function renderDrawerContent() {};
     _renderSidebarMessage: function _renderSidebarMessage() {
       var _this9 = this;
 
-      return this._renderSidebar([useScopedSlot(this.$scopedSlots["sidebar-message-top"]), this.lastMessages.map(function (contact) {
+      return this._renderSidebar([useScopedSlot(this.$scopedSlots["sidebar-message-top"], null, this), this.lastMessages.map(function (contact) {
         return _this9._renderContact({
           contact: contact,
           timeFormat: _this9.contactTimeFormat
         }, function () {
           return _this9.changeContact(contact.id);
         }, _this9.$scopedSlots["sidebar-message"]);
-      })], DEFAULT_MENU_LASTMESSAGES);
+      })], DEFAULT_MENU_LASTMESSAGES, useScopedSlot(this.$scopedSlots["sidebar-message-fixedtop"], null, this));
     },
     _renderContact: function _renderContact(props, onClick, slot) {
       var _this10 = this;
@@ -8114,7 +8195,7 @@ var renderDrawerContent = function renderDrawerContent() {};
           "lemon-contact--active": this.currentContactId == props.contact.id
         },
         "directives": [{
-          name: "dropdown",
+          name: "lemon-contextmenu",
           value: this.contactContextmenu,
           modifiers: {
             "contact": true
@@ -8136,7 +8217,7 @@ var renderDrawerContent = function renderDrawerContent() {};
 
       var h = this.$createElement;
       var prevIndex;
-      return this._renderSidebar([useScopedSlot(this.$scopedSlots["sidebar-contact-top"]), this.contacts.map(function (contact) {
+      return this._renderSidebar([useScopedSlot(this.$scopedSlots["sidebar-contact-top"], null, this), this.contacts.map(function (contact) {
         if (!contact.index) return;
         contact.index = contact.index.replace(/\[[0-9]*\]/, "");
         var node = [contact.index !== prevIndex && h("p", {
@@ -8149,9 +8230,9 @@ var renderDrawerContent = function renderDrawerContent() {};
         }, _this11.$scopedSlots["sidebar-contact"])];
         prevIndex = contact.index;
         return node;
-      })], DEFAULT_MENU_CONTACTS);
+      })], DEFAULT_MENU_CONTACTS, useScopedSlot(this.$scopedSlots["sidebar-contact-fixedtop"], null, this));
     },
-    _renderSidebar: function _renderSidebar(children, name) {
+    _renderSidebar: function _renderSidebar(children, name, fixedtop) {
       var h = this.$createElement;
       return h("div", {
         "class": "lemon-sidebar",
@@ -8162,7 +8243,11 @@ var renderDrawerContent = function renderDrawerContent() {};
         "on": {
           "scroll": this._handleSidebarScroll
         }
-      }, [children]);
+      }, [h("div", {
+        "class": "lemon-sidebar__fixed-top"
+      }, [fixedtop]), h("div", {
+        "class": "lemon-sidebar__scroll"
+      }, [children])]);
     },
     _renderDrawer: function _renderDrawer() {
       var h = this.$createElement;
@@ -8275,14 +8360,13 @@ var renderDrawerContent = function renderDrawerContent() {};
       return nodes;
     },
     _handleSidebarScroll: function _handleSidebarScroll() {
-      dropdown.hide();
+      contextmenu.hide();
     },
     _addContact: function _addContact(data, t) {
       var type = {
         0: "unshift",
         1: "push"
-      }[t]; //this.contacts[type](cloneDeep(data));
+      }[t];
-
       this.contacts[type](data);
     },
     _addMessage: function _addMessage(data, contactId, t) {
@@ -8321,12 +8405,15 @@ var renderDrawerContent = function renderDrawerContent() {};
      * @param {String} str 被替换的字符串
      * @return {String} 替换后的字符串
      */
-    replaceEmojiName: function replaceEmojiName(str) {
+    emojiNameToImage: function emojiNameToImage(str) {
       return str.replace(/\[!(\w+)\]/gi, function (str, match) {
         var file = match;
-        return emojiMap[file] ? "<img src=\"".concat(emojiMap[file], "\" />") : "[!".concat(match, "]");
+        return emojiMap[file] ? "<img emoji-name=\"".concat(match, "\" src=\"").concat(emojiMap[file], "\" />") : "[!".concat(match, "]");
       });
     },
+    emojiImageToName: function emojiImageToName(str) {
+      return str.replace(/<img emoji-name=\"([^\"]*?)\" [^>]*>/gi, "[!$1]");
+    },
     updateCurrentMessages: function updateCurrentMessages() {
       if (!allMessages[this.currentContactId]) allMessages[this.currentContactId] = [];
       this.currentMessages = allMessages[this.currentContactId];
@@ -8349,48 +8436,79 @@ var renderDrawerContent = function renderDrawerContent() {};
       regeneratorRuntime.mark(function _callee2(contactId, menuName) {
         var _this13 = this;
 
+        var h, prevCurrentContactId, editorValue, draft;
         return regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
             switch (_context2.prev = _context2.next) {
               case 0:
+                h = this.$createElement;
+
                 if (!menuName) {
-                  _context2.next = 4;
+                  _context2.next = 5;
                   break;
                 }
 
                 this.changeMenu(menuName);
-                _context2.next = 6;
+                _context2.next = 7;
                 break;
 
-              case 4:
+              case 5:
                 if (!(this._changeContactLock || this.currentContactId == contactId)) {
-                  _context2.next = 6;
+                  _context2.next = 7;
                   break;
                 }
 
                 return _context2.abrupt("return", false);
 
-              case 6:
+              case 7:
+                prevCurrentContactId = this.currentContactId; //保存上个聊天目标的草稿
+
+                if (prevCurrentContactId) {
+                  editorValue = this.getEditorValue();
+
+                  if (editorValue) {
+                    this.CacheDraft.set(prevCurrentContactId, editorValue);
+                    this.updateContact({
+                      id: prevCurrentContactId,
+                      lastContent: [h("span", {
+                        "style": "color:red;"
+                      }, ["[\u8349\u7A3F]"]), h("span", helper_default()([{}, {
+                        "domProps": {
+                          innerHTML: this.lastContentRender({
+                            type: 'text',
+                            content: editorValue
+                          })
+                        }
+                      }]))]
+                    });
+                    this.setEditorValue('');
+                  }
+                }
+
                 this.currentContactId = contactId;
 
                 if (this.currentContactId) {
-                  _context2.next = 9;
+                  _context2.next = 12;
                   break;
                 }
 
                 return _context2.abrupt("return", false);
 
-              case 9:
+              case 12:
                 this.$emit("change-contact", this.currentContact, this);
 
                 if (!isFunction(this.currentContact.renderContainer)) {
-                  _context2.next = 12;
+                  _context2.next = 15;
                   break;
                 }
 
                 return _context2.abrupt("return");
 
-              case 12:
+              case 15:
+                //填充草稿内容
+                draft = this.CacheDraft.get(contactId) || "";
+                if (draft) this.setEditorValue(draft);
+
                 if (this.CacheMessageLoaded.has(contactId)) {
                   this.$refs.messages.loaded();
                 } else {
@@ -8411,7 +8529,7 @@ var renderDrawerContent = function renderDrawerContent() {};
                   }, 0);
                 }
 
-              case 14:
+              case 19:
               case "end":
                 return _context2.stop();
             }
@@ -8620,6 +8738,8 @@ var renderDrawerContent = function renderDrawerContent() {};
       var index = this.findContactIndexById(id);
       if (index === -1) return false;
       this.contacts.splice(index, 1);
+      this.CacheDraft.remove(id);
+      this.CacheMessageLoaded.remove(id);
       return true;
     },
 
@@ -8695,7 +8815,7 @@ var renderDrawerContent = function renderDrawerContent() {};
       return this.currentMessages;
     },
     setEditorValue: function setEditorValue(val) {
-      this.$refs.editor.setValue(this.replaceEmojiName(val));
+      this.$refs.editor.setValue(this.emojiNameToImage(val));
     },
     getEditorValue: function getEditorValue() {
       return this.$refs.editor.getFormatValue();
@@ -8753,7 +8873,7 @@ var common = __webpack_require__("6a2b");
 // CONCATENATED MODULE: ./packages/directives/index.js
 
 
-external_commonjs_vue_commonjs2_vue_root_Vue_default.a.directive('dropdown', dropdown);
+external_commonjs_vue_commonjs2_vue_root_Vue_default.a.directive('LemonContextmenu', contextmenu);
 // CONCATENATED MODULE: ./packages/index.js
 
 
@@ -8774,7 +8894,7 @@ external_commonjs_vue_commonjs2_vue_root_Vue_default.a.directive('dropdown', dro
 
 
 var version = "1.4.2";
-var packages_components = [components, components_contact, messages, editor, avatar, badge, components_button, popover, tabs, basic, message_text, message_image, file, message_event];
+var packages_components = [components, components_contact, messages, editor, avatar, badge, components_button, components_popover, tabs, basic, message_text, message_image, file, message_event];
 
 var install = function install(Vue) {
   var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

examples/App.vue

@@ -11,7 +11,7 @@
         <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=xzUa9CPYQ5KCNQ86h7ep4Z3TtkqJxRZE&jump_from=webapi">QQ交流群：1081773406</a>
       </div>
       <br/>
-      <div><a style="font-size:14px;" href="#help1">1.如何创建自定义消息？</a></div>
+      <div><a style="font-size:14px;" href="#help1">1.如何创建消息？</a></div>
       <div><a style="font-size:14px;" href="#help2">2.如何对接后端接口？</a></div>
     </div>
     <div class="imui-center">
@@ -49,7 +49,7 @@
         <lemon-button @click="appendEventMessage">发送 event 消息</lemon-button>
         <lemon-button @click="removeMessage">删除最近一条消息</lemon-button>
         <lemon-button @click="updateMessage">修改消息</lemon-button>
-        <lemon-button @click="appendCustomMessage">发送自定义消息</lemon-button>
+        <lemon-button @click="appendCustomMessage">发送消息</lemon-button>
         <br/>
         <lemon-button @click="updateContact">修改联系人信息</lemon-button>
         <lemon-button @click="changeMenuVisible">切换导航显示</lemon-button>
@@ -96,7 +96,7 @@
         </template>
 
         <template #contact-info="contact">
-          自定义联系人信息 {{ contact.displayName }}
+          自定义通讯录信息 {{ contact.displayName }}
         </template>
         <template #sidebar-message="contact">
           <lemon-badge :count="contact.unread" style="width:100%">
@@ -110,10 +110,16 @@
           <span>{{ contact.displayName }}</span>
         </template>
         <template #sidebar-message-top>
-          <div class="bar">自定义消息顶部</div>
+          <div class="bar">最新消息顶部</div>
         </template>
         <template #sidebar-contact-top>
-          <div class="bar">自定义联系人顶部</div>
+          <div class="bar">联系人顶部</div>
+        </template>
+        <template #sidebar-message-fixedtop>
+          <div class="bar">最新消息顶部 Fixed</div>
+        </template>
+        <template #sidebar-contact-fixedtop>
+          <div class="bar">联系人顶部 Fixed</div>
         </template>
       </lemon-imui>
     </div>
@@ -128,6 +134,7 @@
         :user="user"
         ref="SimpleIMUI"
         width="340px"
+        :avatar-cricle="true"
         simple
         @pull-messages="handlePullMessages"
         @message-click="handleMessageClick"
@@ -363,6 +370,13 @@
           <td width="100">default</td>
           <td></td>
         </tr>
+        <tr>
+          <td width="150">avatarCricle</td>
+          <td width="350">使用圆形头像</td>
+          <td width="150">Boolean</td>
+          <td width="100">false</td>
+          <td></td>
+        </tr>
         <tr>
           <td width="150">sendText</td>
           <td width="350">发送消息按钮的文字</td>
@@ -722,13 +736,23 @@
         </tr>
         <tr>
           <td width="150">sidebar-message-top</td>
-          <td width="350">左侧最新消息列表的顶部</td>
+          <td width="350">左侧最新消息列表的顶部，会随列表滚动</td>
-          <td width="150">-</td>
+          <td width="150">instance</td>
         </tr>
         <tr>
           <td width="150">sidebar-contact-top</td>
-          <td width="350">左侧联系人列表的顶部</td>
+          <td width="350">左侧联系人列表的顶部，会随列表滚动</td>
-          <td width="150">-</td>
+          <td width="150">instance</td>
+        </tr>
+        <tr>
+          <td width="150">sidebar-message-fixedtop</td>
+          <td width="350">固定在左侧最新消息列表的顶部</td>
+          <td width="150">instance</td>
+        </tr>
+        <tr>
+          <td width="150">sidebar-contact-fixedtop</td>
+          <td width="350">固定在左侧联系人列表的顶部</td>
+          <td width="150">instance</td>
         </tr>
         <tr>
           <td width="150">contact-info</td>
@@ -776,9 +800,9 @@
         </tr>
       </table>
 
-      <div class="title" id="help1">如何创建自定义消息？</div>
+      <div class="title" id="help1">如何创建消息？</div>
       <div>
-        <p>Lemon-IMUI 目前内置了file、image、text、event四种消息类型，在实际应用当中肯定是不够的哦，咋办？没事的，我们继续往下see。<br/>要创建自定义消息首先要确定新消息的 Message 结构。</p>
+        <p>Lemon-IMUI 目前内置了file、image、text、event四种消息类型，在实际应用当中肯定是不够的哦，咋办？没事的，我们继续往下see。<br/>要创建消息首先要确定新消息的 Message 结构。</p>
         <pre>
 {
   //值为 voice，用于解析的组件 name 必须为 lemonMessageVoice
@@ -1092,6 +1116,10 @@ export default {
   },
   mounted() {
 
+    
+
+
+
     const contactData1 = {
       id: "contact-1",
       displayName: "工作协作群",

examples/dist/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>Lemon IMUI</title><link href=css/index.fed1a091.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.4318ecd4.js rel=preload as=script><link href=css/index.fed1a091.css rel=stylesheet></head><body><noscript><strong>We're sorry but flat-im doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.e4810482.js></script><script src=js/index.4318ecd4.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>Lemon IMUI</title><link href=css/index.da20b752.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.f43bda32.js rel=preload as=script><link href=css/index.da20b752.css rel=stylesheet></head><body><noscript><strong>We're sorry but flat-im doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.e4810482.js></script><script src=js/index.f43bda32.js></script></body></html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lemon-imui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "main": "dist/index.umd.min.js",
   "description": "基于 VUE2.0 的 IM 聊天组件",
   "homepage": "https://github.com/fanjyy/lemon-imui",

packages/components/avatar.vue

@@ -1,12 +1,19 @@
 <script>
 export default {
   name: "LemonAvatar",
+  inject:['IMUI'],
   props: {
     src: String,
     icon: {
       type: String,
       default: "lemon-icon-people"
     },
+    circle:{
+      type:Boolean,
+      default(){
+        return this.IMUI ? this.IMUI.avatarCricle : false;
+      },
+    },
     size: {
       type: Number,
       default: 32
@@ -21,7 +28,7 @@ export default {
     return (
       <span
         style={this.style}
-        class="lemon-avatar"
+        class={['lemon-avatar',{'lemon-avatar--circle':this.circle}]}
         on-click={e => this.$emit("click", e)}
       >
         {this.imageFinishLoad && <i class={this.icon} />}
@@ -65,6 +72,8 @@ export default {
   overflow hidden
   vertical-align middle
   border-radius 4px
+  +m(circle)
+    border-radius 50%
   img
     width 100%
     height 100%

packages/components/button.vue

@@ -2,12 +2,16 @@
 export default {
   name: "LemonButton",
   props: {
+    color:{
+      type:String,
+      default:'default'
+    },
     disabled: Boolean
   },
   render() {
     return (
       <button
-        class="lemon-button"
+        class={['lemon-button',`lemon-button--color-${this.color}`]}
         disabled={this.disabled}
         type="button"
         on-click={this._handleClick}
@@ -47,13 +51,20 @@ export default {
   background-color #fff
   box-shadow 0 2px 0 rgba(0, 0, 0, 0.015)
   text-shadow 0 -1px 0 rgba(0, 0, 0, 0.12)
-  &:hover:not([disabled])
+  +m(color-default)
-    border-color #666
+    &:hover:not([disabled])
-    color #333
+      border-color #666
-  &:active
+      color #333
-    background-color #ddd
+    &:active
-  &[disabled]
+      background-color #ddd
-    cursor not-allowed
+    &[disabled]
-    color #aaa
+      cursor not-allowed
-    background #eee
+      color #aaa
+      background #eee
+  +m(color-grey)
+    background #e1e1e1
+    border-color #e1e1e1
+    color #666
+    &:hover:not([disabled])
+      border-color #bbb
 </style>

packages/components/contact.vue

@@ -126,15 +126,17 @@ export default {
   +e(content)
     font-size 12px
     color #999
-    padding-top 3px
+    height 18px
-    height 14px
+    line-height 18px
-    line-height 14px
+    margin-top 1px !important
     ellipsis()
     img
       height 14px
       display inline-block
-      vertical-align top
+      vertical-align middle
       margin 0 1px
+      position relative
+      top -1px
   +m(name-center)
     +e(label)
       padding-bottom 0

packages/components/editor.vue

@@ -35,7 +35,10 @@ export default {
     },
   },
   data() {
+    this.clipboardBlob = null;
     return {
+      //剪切板图片URL
+      clipboardUrl:'',
       submitDisabled: true,
       proxyTools:[],
       accept: ""
@@ -47,6 +50,9 @@ export default {
     }else{
       this.initTools([{name:'emoji'},{name:'uploadFile'},{name:'uploadImage'}]);
     }
+    this.IMUI.$on('change-contact',()=>{
+      this.closeClipboardImage();
+    })
   },
   render() {
     const toolLeft = [];
@@ -74,6 +80,15 @@ export default {
     
     return (
       <div class="lemon-editor">
+        {this.clipboardUrl && <div class="lemon-editor__clipboard-image">
+          <img src={this.clipboardUrl} />
+          <div>
+            <lemon-button style={{marginRight:'10px'}} on-click={this.closeClipboardImage} color="grey">
+              取消
+            </lemon-button>
+            <lemon-button on-click={this.sendClipboardImage}>发送图片</lemon-button>
+          </div>
+        </div>}
         <input
           style="display:none"
           type="file"
@@ -115,6 +130,15 @@ export default {
     );
   },
   methods: {
+    closeClipboardImage(){
+      this.clipboardUrl = '';
+      this.clipboardBlob = null;
+    },
+    sendClipboardImage(){
+      if(!this.clipboardBlob) return;
+      this.$emit("upload", this.clipboardBlob);
+      this.closeClipboardImage();
+    },
     /**
      * 初始化工具栏
      */
@@ -224,12 +248,28 @@ export default {
       e.preventDefault();
       const clipboardData = e.clipboardData || window.clipboardData;
       const text = clipboardData.getData("Text");
-      if(window.clipboardData){
+      if(text){
-        this.$refs.textarea.innerHTML = text;
+        if(window.clipboardData){
+          this.$refs.textarea.innerHTML = text;
+        }else{
+          exec(text, "insertText");
+        }
       }else{
-        exec(text, "insertText");
+        const {blob,blobUrl} = this._getClipboardBlob(clipboardData);
+        this.clipboardBlob = blob;
+        this.clipboardUrl = blobUrl;
       }
     },
+    _getClipboardBlob(clipboard){
+      let blob,blobUrl;
+      for (var i = 0; i < clipboard.items.length; ++i) {
+        if ( clipboard.items[i].kind == 'file' && clipboard.items[i].type.indexOf('image/') !== -1 ) {
+          blob = clipboard.items[i].getAsFile();
+          blobUrl = (window.URL || window.webkitURL).createObjectURL(blob);
+        }
+      }
+      return {blob,blobUrl};
+    },
     _handleKeyup(e) {
       this._saveLastRange();
       this._checkSubmitDisabled();
@@ -246,7 +286,7 @@ export default {
       //     .replace(/<div>|<p>/g, "\r\n")
       //     .replace(/<\/div>|<\/p>/g, "")
       // );
-      return toEmojiName(this.$refs.textarea.innerHTML);
+      return this.IMUI.emojiImageToName(this.$refs.textarea.innerHTML);
     },
     _checkSubmitDisabled() {
       this.submitDisabled = !clearHtmlExcludeImg(this.$refs.textarea.innerHTML.trim());
@@ -272,7 +312,7 @@ export default {
       this.$forceUpdate();
     },
     setValue(val){
-      this.$refs.textarea.innerHTML = val;
+      this.$refs.textarea.innerHTML = this.IMUI.emojiNameToImage(val);
       this._checkSubmitDisabled();
     },
   }
@@ -283,6 +323,7 @@ export default {
 gap = 10px;
 +b(lemon-editor)
   height 200px
+  position relative
   flex-column()
   +e(tool)
     display flex
@@ -317,6 +358,31 @@ gap = 10px;
     overflow-x hidden
     overflow-y auto
     scrollbar-light()
+  +e(clipboard-image)
+    position absolute
+    top 0
+    left 0
+    width 100%
+    height 100%
+    flex-column()
+    justify-content center
+    align-items center
+    background #f4f4f4
+    z-index 1
+    img 
+      max-height 66%
+      max-width 80%
+      background #e9e9e9
+      //box-shadow 0 0 20px rgba(0,0,0,0.15)
+      user-select none 
+      cursor pointer
+      border-radius 4px
+      margin-bottom 10px
+      border 3px dashed #ddd !important
+      box-sizing border-box
+    .clipboard-popover-title
+      font-size 14px
+      color #333
   +e(input)
     height 100%
     box-sizing border-box

packages/components/index.vue

@@ -1,7 +1,7 @@
 <script>
 import { useScopedSlot, funCall, generateUUID,cloneDeep } from "utils";
 import { isFunction, isString, isEmpty } from "utils/validate";
-import dropdown from "../directives/dropdown";
+import contextmenu from "../directives/contextmenu";
 import {
   DEFAULT_MENUS,
   DEFAULT_MENU_LASTMESSAGES,
@@ -71,6 +71,7 @@ export default {
     sendText:String,
     contextmenu:Array,
     contactContextmenu:Array,
+    avatarCricle:Boolean,
     user: {
       type: Object,
       default: () => {
@@ -82,6 +83,7 @@ export default {
     this.CacheContactContainer = new MemoryCache();
     this.CacheMenuContainer = new MemoryCache();
     this.CacheMessageLoaded = new MemoryCache();
+    this.CacheDraft = new MemoryCache();
     return {
       drawerVisible: !this.hideDrawer,
       currentContactId:null,
@@ -173,6 +175,7 @@ export default {
           if(scrollToBottom == true){
             this.messageViewToBottom();
           }
+          this.CacheDraft.remove(message.toContactId);
         }else{
           updateContact.unread = '+1';
         }
@@ -199,6 +202,7 @@ export default {
           lastContent: this.lastContentRender(message),
           lastSendTime: message.sendTime
         });
+        this.CacheDraft.remove(message.toContactId);
       });
     },
     _handleUpload(file) {
@@ -326,7 +330,7 @@ export default {
     _renderSidebarMessage() {
       return this._renderSidebar(
         [
-          useScopedSlot(this.$scopedSlots["sidebar-message-top"]),
+          useScopedSlot(this.$scopedSlots["sidebar-message-top"],null,this),
           this.lastMessages.map(contact => {
             return this._renderContact(
               {
@@ -338,7 +342,8 @@ export default {
             );
           })
         ],
-        DEFAULT_MENU_LASTMESSAGES
+        DEFAULT_MENU_LASTMESSAGES,
+        useScopedSlot(this.$scopedSlots["sidebar-message-fixedtop"],null,this)
       );
     },
     _renderContact(props, onClick,slot) {
@@ -363,7 +368,7 @@ export default {
           class={{
             "lemon-contact--active": this.currentContactId == props.contact.id
           }}
-          v-dropdown_contact={this.contactContextmenu}
+          v-lemon-contextmenu_contact={this.contactContextmenu}
           props={props}
           on-click={click}
           scopedSlots={{default:slot}}
@@ -374,7 +379,7 @@ export default {
       let prevIndex;
       return this._renderSidebar(
         [
-          useScopedSlot(this.$scopedSlots["sidebar-contact-top"]),
+          useScopedSlot(this.$scopedSlots["sidebar-contact-top"],null,this),
           this.contacts.map(contact => {
             if (!contact.index) return;
             contact.index = contact.index.replace(/\[[0-9]*\]/, "");
@@ -397,13 +402,19 @@ export default {
             return node;
           })
         ],
-        DEFAULT_MENU_CONTACTS
+        DEFAULT_MENU_CONTACTS,
+        useScopedSlot(this.$scopedSlots["sidebar-contact-fixedtop"],null,this)
       );
     },
-    _renderSidebar(children, name) {
+    _renderSidebar(children, name,fixedtop) {
       return (
         <div class="lemon-sidebar" v-show={this.activeSidebar == name} on-scroll={this._handleSidebarScroll}>
-          {children}
+          <div class="lemon-sidebar__fixed-top">
+            {fixedtop}
+          </div>
+          <div class="lemon-sidebar__scroll">
+            {children}
+          </div>
         </div>
       );
     },
@@ -514,14 +525,13 @@ export default {
       return nodes;
     },
     _handleSidebarScroll(){
-      dropdown.hide();
+      contextmenu.hide();
     },
     _addContact(data, t) {
       const type = {
         0: "unshift",
         1: "push"
       }[t];
-      //this.contacts[type](cloneDeep(data));
       this.contacts[type](data);
     },
     _addMessage(data, contactId, t) {
@@ -553,14 +563,17 @@ export default {
      * @param {String} str 被替换的字符串
      * @return {String} 替换后的字符串
      */
-    replaceEmojiName(str) {
+    emojiNameToImage(str) {
       return str.replace(/\[!(\w+)\]/gi, (str, match) => {
         const file = match;
         return emojiMap[file]
-          ? `<img src="${emojiMap[file]}" />`
+          ? `<img emoji-name="${match}" src="${emojiMap[file]}" />`
           : `[!${match}]`;
       });
     },
+    emojiImageToName(str){
+      return str.replace(/<img emoji-name=\"([^\"]*?)\" [^>]*>/gi, "[!$1]")
+    },
     updateCurrentMessages(){
       if(!allMessages[this.currentContactId]) allMessages[this.currentContactId] = []
       this.currentMessages = allMessages[this.currentContactId];
@@ -581,13 +594,36 @@ export default {
       }else{
        if(this._changeContactLock || this.currentContactId == contactId) return false; 
       }
+      const prevCurrentContactId = this.currentContactId;
+      //保存上个聊天目标的草稿
+      if(prevCurrentContactId){
+        const editorValue = this.getEditorValue();
+        if(editorValue){
+          this.CacheDraft.set(prevCurrentContactId,editorValue);
+          this.updateContact({
+            id:prevCurrentContactId,
+            lastContent:[
+              <span style="color:red;">[草稿]</span>,
+              <span domProps={{
+                innerHTML:this.lastContentRender({type:'text',content:editorValue})
+              }}></span>
+            ],
+          });
+          this.setEditorValue('');
+        }
+      }
 
       this.currentContactId = contactId;
       if(!this.currentContactId) return false;
+
       this.$emit("change-contact", this.currentContact,this);
       if (isFunction(this.currentContact.renderContainer)) {
         return;
       }
+      //填充草稿内容
+      const draft = this.CacheDraft.get(contactId) || "";
+      if(draft) this.setEditorValue(draft);
+
       
       if (this.CacheMessageLoaded.has(contactId)) {
         this.$refs.messages.loaded();
@@ -785,6 +821,8 @@ export default {
       const index = this.findContactIndexById(id);
       if(index === -1) return false;
       this.contacts.splice(index,1);
+      this.CacheDraft.remove(id);
+      this.CacheMessageLoaded.remove(id);
       return true;
     },
     /**
@@ -850,7 +888,7 @@ export default {
       return this.currentMessages;
     },
     setEditorValue(val){
-      this.$refs.editor.setValue(this.replaceEmojiName(val));
+      this.$refs.editor.setValue(this.emojiNameToImage(val));
     },
     getEditorValue(){
       return this.$refs.editor.getFormatValue();
@@ -933,8 +971,12 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
 +b(lemon-sidebar)
   width 250px
   background #efefef
-  overflow-y auto
+  display flex
-  scrollbar-light()
+  flex-direction column
+  +e(scroll){
+    overflow-y auto
+    scrollbar-light()
+  }
   +e(label)
     padding 6px 14px 6px 14px
     color #666
@@ -1014,7 +1056,11 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
   .lemon-menu
   .lemon-sidebar
     display none
-+b(lemon-dropdown)
+.lemon-wrapper--simple
+  .lemon-menu
+  .lemon-sidebar
+    display none
++b(lemon-contextmenu)
   border-radius 4px
   font-size 14px
   font-variant tabular-nums
@@ -1022,21 +1068,22 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
   color rgba(0, 0, 0, 0.65)
   z-index 10
   background-color #fff
-  border-radius 4px
+  border-radius 6px
   box-shadow 0 2px 8px rgba(0, 0, 0, 0.06)
   position absolute
   transform-origin 50% 150%
   box-sizing border-box
   user-select none
   overflow hidden
+  min-width 120px
   +e(item)
-    font-size 12px
+    font-size 14px
-    line-height 14px
+    line-height 16px
-    padding 8px 10px
+    padding 10px 15px
     cursor pointer
     display flex
     align-items center
-    color #444
+    color #333
     > span
       display inline-block
       flex none

packages/components/message/basic.vue

@@ -67,7 +67,7 @@ export default {
           </div>
           <div class="lemon-message__content-flex">
             <div
-              v-dropdown_message={this.IMUI.contextmenu}
+              v-lemon-contextmenu_message={this.IMUI.contextmenu}
               class="lemon-message__content"
               on-click={e => {
                 this._emitClick(e, "content");

packages/components/message/text.vue

@@ -10,7 +10,7 @@ export default {
         props={{ ...this.$attrs }}
         scopedSlots={{
           content: props => {
-            const content = this.IMUI.replaceEmojiName(props.content);
+            const content = this.IMUI.emojiNameToImage(props.content);
             return <span domProps={{ innerHTML: content }} />;
           }
         }}

packages/components/messages.vue

@@ -1,6 +1,6 @@
 <script>
 import { hoursTimeFormat } from "utils";
-import dropdown from "../directives/dropdown";
+import contextmenu from "../directives/contextmenu";
 export default {
   name: "LemonMessages",
   components: {},
@@ -111,7 +111,7 @@ export default {
     },
     async _handleScroll(e) {
       const { target } = e;
-      dropdown.hide();
+      contextmenu.hide();
       if (
         target.scrollTop == 0 &&
         this._loading == false &&

packages/components/popover.vue

@@ -1,6 +1,6 @@
 <script>
 const popoverCloseQueue = [];
-const popoverCloseAll = () => popoverCloseQueue.forEach(callback => callback());
+import contextmenu from "../directives/contextmenu";
 const triggerEvents = {
   hover(el) {},
   focus(el) {
@@ -14,6 +14,7 @@ const triggerEvents = {
   click(el) {
     el.addEventListener("click", e => {
       e.stopPropagation();
+      contextmenu.hide();
       this.changeVisible();
     });
   },
@@ -59,7 +60,6 @@ export default {
               style={this.popoverStyle}
               on-click={e => e.stopPropagation()}
             >
-              <div class="lemon-popover__title" />
               <div class="lemon-popover__content">{this.$slots.content}</div>
               <div class="lemon-popover__arrow" />
             </div>
@@ -96,9 +96,12 @@ export default {
       this.visible ? this.close() : this.open();
     },
     open() {
-      popoverCloseAll();
+      this.closeAll();
       this.visible = true;
     },
+    closeAll(){
+      popoverCloseQueue.forEach(callback => callback())
+    },
     close() {
       this.visible = false;
     }

packages/directives/contextmenu.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import {isFunction,isEmpty} from 'utils/validate';
+import LemonPopover from '../components/popover.vue';
 let popover;
 
 const hidePopover = ()=>{
@@ -17,13 +18,14 @@ export default{
     el.addEventListener('contextmenu',(e)=>{
       if(isEmpty(binding.value) || !Array.isArray(binding.value)) return;
       e.preventDefault();
+      LemonPopover.methods.closeAll()
       let component;
       let visibleItems = []
       if(binding.modifiers.message) component = vnode.context;
       else if(binding.modifiers.contact) component = vnode.child;
       if(!popover){
         popover = document.createElement('div');
-        popover.className = 'lemon-dropdown';
+        popover.className = 'lemon-contextmenu';
         document.body.appendChild(popover);
       }
       popover.innerHTML = binding.value.map((item)=>{
@@ -36,8 +38,8 @@ export default{
 
         if(visible){
           visibleItems.push(item);
-          const icon = item.icon ? `<i class="lemon-dropdown__icon ${item.icon}"></i>` : '';
+          const icon = item.icon ? `<i class="lemon-contextmenu__icon ${item.icon}"></i>` : '';
-          return `<div style="color:${item.color}" title="${item.text}" class="lemon-dropdown__item">${icon}<span>${item.text}</span></div>`;
+          return `<div style="color:${item.color}" title="${item.text}" class="lemon-contextmenu__item">${icon}<span>${item.text}</span></div>`;
         }
         return '';
       }).join("");

packages/directives/index.js

@@ -1,3 +1,3 @@
 import Vue from 'vue';
-import Dropdown from './dropdown';
+import Contextmenu from './contextmenu';
-Vue.directive('dropdown',Dropdown);
+Vue.directive('LemonContextmenu',Contextmenu);

packages/lastContentRender.js

@@ -7,7 +7,7 @@ export default {
     return "[图片]";
   },
   text(message) {
-    return this.replaceEmojiName(clearHtml(message.content));
+    return this.emojiNameToImage(clearHtml(message.content));
   },
   event(message){
     return '[通知]';

packages/utils/index.js

@@ -103,9 +103,6 @@ export function mergeDeep(o1, o2) {
   return o1;
 }
 
-export function toEmojiName(str) {
-  return str.replace(/<img emoji-name=\"([^\"]*?)\" [^>]*>/gi, "[!$1]");
-}
 export function formatByte(value) {
   if (null == value || value == "") {
     return "0 Bytes";