增加sidebar-message、sidebar-content插槽,修改部分插槽名字，部分插槽新增参数，增加隐藏显示聊天记录的时间

examples/App.vue

@@ -14,6 +14,7 @@
         :hide-menu="hideMenu"
         :hide-menu-avatar="hideMenuAvatar"
         :hide-message-name="hideMessageName"
+        :hide-message-time="hideMessageTime"
         @change-menu="handleChangeMenu"
         @change-contact="handleChangeContact"
         @pull-messages="handlePullMessages"
@@ -21,28 +22,6 @@
         @menu-avatar-click="handleMenuAvatarClick"
         @send="handleSend"
       >
-        <template #cover>
-          <div class="cover">
-            <i class="lemon-icon-message"></i>
-            <p><b>自定义封面 Lemon</b> IMUI</p>
-          </div>
-        </template>
-        <!-- <template #contact-info="contact">
-        <span style="color:blue">contact-info {{ contact }}</span>
-      </template> -->
-        <template #contact-title="contact">
-          <span>{{ contact.displayName }}</span>
-          <small class="more" @click="changeDrawer(contact)">&#8230;</small>
-        </template>
-        <!-- <template #contact-info="contact">
-          自定义联系人信息 {{ contact.displayName }}
-        </template> -->
-        <template #message-sidebar>
-          <div class="bar">自定义消息顶部</div>
-        </template>
-        <template #contact-sidebar>
-          <div class="bar">自定义联系人顶部</div>
-        </template>
       </lemon-imui>
       <a target="_blank" style="font-size:14px" href="https://codesandbox.io/s/sweet-chaplygin-s24mb?fontsize=14&hidenavigation=1&theme=dark">在线编辑代码</a>
       <div class="action">
@@ -56,11 +35,74 @@
           >切换头像显示</lemon-button
         >
         <lemon-button @click="appendMessage">发送消息</lemon-button>
-        <lemon-button @click="changeMessageNameVisible">切换聊天窗口内联系人名字显示</lemon-button>
+        <lemon-button @click="changeMessageNameVisible">切换聊天窗口内名字显示</lemon-button>
+        <lemon-button @click="changeMessageTimeVisible">切换聊天窗口内时间显示</lemon-button>
         <lemon-button @click="changeTheme">切换主题，当前主题：{{this.theme}}</lemon-button>
-        <lemon-button @click="openSimple">精简模式</lemon-button>
       </div>
 
+    </div>
+
+    <div style="display:flex;">
+    <div>
+    <div class="title">精简模式</div>
+    <div class="imui-center">
+      <lemon-imui
+        :user="user"
+        ref="SimpleIMUI"
+        width="340px"
+        simple
+        @pull-messages="handlePullMessages"
+        @message-click="handleMessageClick"
+        @send="handleSend"
+      ></lemon-imui>
+      <a target="_blank" style="font-size:14px" href="https://codesandbox.io/s/lemon-imui-jingjianmoshi-forked-1lvoh?fontsize=14&hidenavigation=1&theme=dark">在线编辑代码</a>
+    </div>
+    </div>
+
+    <div style="margin:0 55px;">
+    <div class="title">插槽演示</div>
+    <div class="imui-center">
+      <lemon-imui
+        :user="user"
+        ref="SlotIMUI"
+        @pull-messages="handlePullMessages"
+        @message-click="handleMessageClick"
+        @change-contact="handleChangeContact"
+        @send="handleSend"
+      >
+        <template #cover>
+          <div class="cover">
+            <i class="lemon-icon-message"></i>
+            <p><b>自定义封面 Lemon</b> IMUI</p>
+          </div>
+        </template>
+        <template #message-title="contact">
+          <span>{{ contact.displayName }}</span>
+          <small class="more" @click="changeDrawer(contact)">{{($refs.SlotIMUI ? $refs.SlotIMUI.drawerVisible : false) ? '关闭' : '打开'}}抽屉</small>
+        </template>
+        <template #contact-info="contact">
+          自定义联系人信息 {{ contact.displayName }}
+        </template>
+        <template #sidebar-message="contact">
+          <lemon-badge :count="contact.unread" style="width:100%">
+          <div>
+            <p><span>{{ contact.displayName }}</span></p>
+            <p class="lemon-contact__content" style="height:18px;font-size:12px;color:#aaa;">最新消息：<span v-html="contact.lastContent"></span></p>
+          </div>
+          </lemon-badge>
+        </template>
+        <template #sidebar-contact="contact">
+          <span>{{ contact.displayName }}</span>
+        </template>
+        <template #sidebar-message-top>
+          <div class="bar">自定义消息顶部</div>
+        </template>
+        <template #sidebar-contact-top>
+          <div class="bar">自定义联系人顶部</div>
+        </template>
+      </lemon-imui>
+    </div>
+    </div>
     </div>
 
       <div class="title">联系人 Contact</div>
@@ -103,7 +145,7 @@
         </tr>
         <tr>
           <td>index</td>
-          <td>通讯录索引，传入字母或数字进行排序，索引可以显示自定义文字“[A]最近联系人”</td>
+          <td>通讯录索引，传入字母或数字进行排序，索引可以显示自定义文字“[1]群组”</td>
           <td>String</td>
           <td>-</td>
           <td></td>
@@ -117,7 +159,7 @@
         </tr>
         <tr>
           <td>lastSendTime</td>
-          <td>最近一条消息的时间戳</td>
+          <td>最近一条消息的时间戳，13位毫秒</td>
           <td>timestamp</td>
           <td>0</td>
           <td></td>
@@ -164,7 +206,7 @@
         </tr>
         <tr>
           <td>sendTime</td>
-          <td>消息发送时间</td>
+          <td>消息发送时间，13位毫秒</td>
           <td>timestamp</td>
           <td>-</td>
           <td></td>
@@ -293,6 +335,13 @@
           <td>false</td>
           <td></td>
         </tr>
+        <tr>
+          <td>hideMessageTime</td>
+          <td>是否隐藏聊天窗口内的消息发送时间</td>
+          <td>Boolean</td>
+          <td>false</td>
+          <td></td>
+        </tr>
       </table>
 
       <div class="title">组件方法</div>
@@ -309,7 +358,7 @@
           <td width="350">初始化导航</td>
           <td width="150">Function([Object])</td>
           <td width="100">[      {
-        name: "lastMessages"
+        name: "messages"
       },
       {
         name: "contacts"
@@ -454,7 +503,7 @@
         <tr>
           <td>changeContact</td>
           <td>切换聊天窗口</td>
-          <td>Function(Contact.id)</td>
+          <td>Function(Contact.id,instance)</td>
           <td>-</td>
           <td></td>
         </tr>
@@ -498,17 +547,27 @@
           <td width="150">-</td>
         </tr>
         <tr>
-          <td width="150">contact-title</td>
-          <td width="350">联系人标题</td>
+          <td width="150">message-title</td>
+          <td width="350">消息列表的标题</td>
           <td width="150">Contact</td>
         </tr>
         <tr>
-          <td width="150">message-sidebar</td>
-          <td width="350">左侧消息列表的顶部</td>
+          <td width="150">sidebar-message</td>
+          <td width="350">左侧最新消息列表插槽</td>
+          <td width="150">Contact</td>
+        </tr>
+        <tr>
+          <td width="150">sidebar-contact</td>
+          <td width="350">左侧联系人列表插槽</td>
+          <td width="150">Contact</td>
+        </tr>
+        <tr>
+          <td width="150">sidebar-message-top</td>
+          <td width="350">左侧最新消息列表的顶部</td>
           <td width="150">-</td>
         </tr>
         <tr>
-          <td width="150">contact-sidebar</td>
+          <td width="150">sidebar-contact-top</td>
           <td width="350">左侧联系人列表的顶部</td>
           <td width="150">-</td>
         </tr>
@@ -544,12 +603,12 @@
         <tr>
           <td width="150">pull-messages</td>
           <td width="350">当切换聊天对象或者聊天窗口滚动到顶部时会触发该事件，调用next方法结束loading状态，如果设置了isEnd=true，下次聊天窗口滚动到顶部将不会再触发该事件</td>
-          <td width="150">Contact,next([Message],isEnd)</td>
+          <td width="150">Contact,next([Message],isEnd),instance</td>
         </tr>
         <tr>
           <td width="150">message-click</td>
           <td width="350">点击聊天窗口中的消息时会触发该事件</td>
-          <td width="150">event,key,Message</td>
+          <td width="150">event,key,Message,instance</td>
         </tr>
         <tr>
           <td width="150">send</td>
@@ -688,6 +747,7 @@ export default {
       hideMenuAvatar: false,
       hideMenu: false,
       hideMessageName:false,
+      hideMessageTime:true,
       user: {
         id: "1",
         displayName: "June",
@@ -701,8 +761,7 @@ export default {
       id: "contact-1",
       displayName: "工作协作群",
       avatar: "http://upload.qqbodys.com/img/weixin/20170804/ji5qxg1am5ztm.jpg",
-      type: "single",
-      index: "A",
+      index: "[1]群组",
       unread: 0,
       lastSendTime: 1566047865417,
       lastContent: "2"
@@ -711,7 +770,6 @@ export default {
       id: "contact-2",
       displayName: "自定义内容",
       avatar: "http://upload.qqbodys.com/img/weixin/20170807/jibfvfd00npin.jpg",
-      type: "single",
       //index: "Z",
       click(next) {
         next();
@@ -727,26 +785,34 @@ export default {
       id: "contact-3",
       displayName: "铁牛",
       avatar: "http://upload.qqbodys.com/img/weixin/20170803/jiq4nzrkrnd0e.jpg",
-      type: "many",
-      index: "C",
+      index: "T",
       unread: 32,
       lastSendTime: 3,
       lastContent: "你好123"
     };
+    const contactData4 = {
+      id: "contact-4",
+      displayName: "如花",
+      avatar: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4275424924,2201401076&fm=111&gp=0.jpg",
+      index: "R",
+      unread: 1,
+      lastSendTime: 3,
+      lastContent: "吃饭了嘛"
+    };
 
     const { IMUI } = this.$refs;
     
-    let data = [
+    let contactList = [
       { ...contactData1 },
       { ...contactData2 },
       { ...contactData3 }
       //...Array(100).fill(contactData1)
     ];
 
-    IMUI.initContacts(data);
+    IMUI.initContacts(contactList);
     IMUI.initMenus([
       {
-        name: "lastMessages"
+        name: "messages"
       },
       {
         name: "contacts"
@@ -848,8 +914,7 @@ export default {
         }
       },
     ]);
-
-    IMUI.initEmoji([
+    let emojiData = [
       {
         label: "表情",
         children: [
@@ -1140,17 +1205,27 @@ export default {
           }
         ]
       }
-    ]);
+    ];
+    IMUI.initEmoji(emojiData);
 
     IMUI.setLastContentRender('voice', message => {
       return <span>[语音]</span>
     })
 
+
+
+    const { SimpleIMUI } = this.$refs;
+    contactData1.id = '11';
+    SimpleIMUI.initContacts([contactData1]);
+    SimpleIMUI.initEmoji(emojiData);
+    SimpleIMUI.changeContact(contactData1.id);
+
+    const {SlotIMUI} = this.$refs;
+    contactData3.id = '333';
+    SlotIMUI.initContacts([contactData4,contactData3]);
+    SlotIMUI.initEmoji(emojiData);
   },
   methods: {
-    openSimple(){
-      window.open('https://codesandbox.io/s/lemon-imui-jingjianmoshi-forked-1lvoh?fontsize=14&hidenavigation=1&theme=dark')
-    },
     changeTheme(){
       this.theme = this.theme == 'default' ? 'blue' : 'default';
     },
@@ -1160,17 +1235,16 @@ export default {
     handleMenuAvatarClick() {
       console.log("Event:menu-avatar-click");
     },
-    handleMessageClick(e, key, message) {
+    handleMessageClick(e, key, message,instance) {
       console.log('点击了消息',e, key, message);
-      const { IMUI } = this.$refs;
 
       if (key == "status") {
-        IMUI.updateMessage(message.id, message.toContactId, {
+        instance.updateMessage(message.id, message.toContactId, {
           status: "going",
           content: "正在重新发送消息..."
         });
         setTimeout(() => {
-          IMUI.updateMessage(message.id, message.toContactId, {
+          instance.updateMessage(message.id, message.toContactId, {
             status: "succeed",
             content: "发送成功"
           });
@@ -1184,7 +1258,10 @@ export default {
       this.hideMenu = !this.hideMenu;
     },
     changeMessageNameVisible(){
-      this.hideMessageName = !this.hideMessageName 
+      this.hideMessageName = !this.hideMessageName;
+    },
+    changeMessageTimeVisible(){
+      this.hideMessageTime = !this.hideMessageTime;
     },
     appendCustomMessage(){
       const { IMUI } = this.$refs;
@@ -1225,7 +1302,7 @@ export default {
       });
     },
     changeDrawer(contact) {
-      this.$refs.IMUI.changeDrawer(() => {
+      this.$refs.SlotIMUI.changeDrawer(() => {
         return (
           <div class="drawer-content">
             <p>
@@ -1236,13 +1313,13 @@ export default {
         );
       });
     },
-    handleChangeContact(contact) {
+    handleChangeContact(contact,instance) {
       console.log("Event:change-contact");
-      this.$refs.IMUI.updateContact(contact.id, {
+      instance.updateContact(contact.id, {
         //displayName: "123",
         unread: 0
       });
-      this.$refs.IMUI.closeDrawer();
+      instance.closeDrawer();
     },
     handleSend(message, next, file) {
       console.log(message,next,file)
@@ -1250,32 +1327,30 @@ export default {
         next();
       }, 1000);
     },
-    handlePullMessages(contact, next) {
-      const { IMUI } = this.$refs;
+    handlePullMessages(contact, next,instance) {
       const otheruser = {
         id: contact.id,
         displayName: contact.displayName,
         avatar:contact.avatar
       };
-      console.log("Event:pull-messages");
       setTimeout(()=>{
 
         const messages = [
-          generateMessage(IMUI.currentContactId, this.user),
-          generateMessage(IMUI.currentContactId, otheruser),
-          generateMessage(IMUI.currentContactId, this.user),
-          generateMessage(IMUI.currentContactId, otheruser),
-          generateMessage(IMUI.currentContactId, this.user),
-          generateMessage(IMUI.currentContactId, this.user),
-          generateMessage(IMUI.currentContactId, otheruser),
+          generateMessage(instance.currentContactId, this.user),
+          generateMessage(instance.currentContactId, otheruser),
+          generateMessage(instance.currentContactId, this.user),
+          generateMessage(instance.currentContactId, otheruser),
+          generateMessage(instance.currentContactId, this.user),
+          generateMessage(instance.currentContactId, this.user),
+          generateMessage(instance.currentContactId, otheruser),
           {
-            ...generateMessage(IMUI.currentContactId, this.user),
+            ...generateMessage(instance.currentContactId, this.user),
             ...{ status: "failed" }
           }
         ];
         let isEnd = false;
-        if (IMUI.getMessages(IMUI.currentContactId).length + messages.length > 11) isEnd = true;
-        next(messages, isEnd); 
+        if (instance.getMessages(instance.currentContactId).length + messages.length > 11) isEnd = true;
+        next(messages, isEnd);
       },500)
     },
     handleChangeMenu() {
@@ -1388,17 +1463,21 @@ a
 .drawer-content
   padding 15px
 .more
-  font-size 32px
-  line-height 18px
-  height 32px
+  font-size 12px
+  line-height 24px
+  height 24px
   position absolute
-  top 6px
+  top 14px
   right 14px
   cursor pointer
   user-select none
-  color #999
+  color #f1f1f1
+  display inline-block
+  border-radius 4px
+  background #111
+  padding 0 8px
   &:active
-    color #000
+    background #999
 .bar
   text-align center
   line-height 30px

examples/dist/css/index.4f9dd622.css

@@ -1 +0,0 @@
-.lemon-message.lemon-message-voice{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.lemon-message.lemon-message-voice .lemon-message__content{border:2px solid #000;font-size:12px;cursor:pointer}.lemon-message.lemon-message-voice .lemon-message__content:before{display:none}::-moz-selection{background:#000;color:#fff}::selection{background:#000;color:#fff}body{background:#f6f6f6!important}#app{width:90%;margin:0 auto;padding-bottom:100px}#app .scroll-top{cursor:pointer;position:fixed;bottom:40px;left:50%;border-radius:50%;background:#fff;font-size:18px;overflow:hidden;width:40px;height:40px;line-height:40px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;-webkit-transform:rotate(-45deg) translateX(-50%);transform:rotate(-45deg) translateX(-50%);-webkit-box-shadow:0 0 30px rgba(0,0,0,.1);box-shadow:0 0 30px rgba(0,0,0,.1)}#app .scroll-top:hover{font-size:22px}a{color:#0c5ed9;text-decoration:none;font-size:12px}.action{margin-top:20px}.action .lemon-button{margin-right:10px;margin-bottom:10px}.link{font-size:14px;margin-top:15px}.link a{margin:0 5px;text-decoration:none;background:#ffba00;border-radius:4px;padding:5px 10px;color:rgba(0,0,0,.8)}.link a,.logo{display:inline-block}.logo{position:relative;margin:60px auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.logo-text{font-size:38px}.logo-sub{font-size:18px;color:#999;font-weight:300}.logo-badge{position:absolute;top:-10px;right:-40px;background:#000;border-radius:16px;color:#f9f9f9;font-size:12px;padding:4px 8px}.title{font-size:24px;line-height:26px;border-left:1px solid #ffba00;padding-left:15px;margin-bottom:15px;margin-top:30px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.table{width:100%;border-radius:10px;background:#fff;border-collapse:collapse}.table tr{cursor:pointer}.table tr:not(.table-head):hover{background:#ffba00!important}.table tr:nth-of-type(2n){background:#f9f9f9}.table th{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#999}.table td,.table th{text-align:left;padding:10px 15px;font-size:14px;font-weight:400}.imui-center{margin-bottom:60px}.imui-center .lemon-wrapper,.imui-center .lemon-wrapper--drawer-show .lemon-drawer{-webkit-box-shadow:0 0 30px rgba(0,0,0,.1);box-shadow:0 0 30px rgba(0,0,0,.1)}.drawer-content{padding:15px}.more{font-size:32px;line-height:18px;height:32px;position:absolute;top:6px;right:14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#999}.more:active{color:#000}.bar{line-height:30px;background:#fff;margin:15px;color:#666;font-size:12px}.bar,.cover{text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cover{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.cover i{font-size:84px;color:#e6e6e6}.cover p{font-size:18px;color:#ddd;line-height:50px}.article-item{line-height:34px;cursor:pointer}.article-item:hover{text-decoration:underline;color:#318efd}pre{background:#fff;border-radius:8px;padding:15px}.lemon-tabs{background:#f6f6f6}.lemon-tabs-content{padding:15px}.lemon-tabs-content,.lemon-tabs-content__pane{width:100%;height:100%}.lemon-tabs-nav{display:-webkit-box;display:-ms-flexbox;display:flex;background:#eee}.lemon-tabs-nav__item{line-height:38px;padding:0 15px;cursor:pointer;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.lemon-tabs-nav__item--active{background:#f6f6f6}.lemon-popover{border:1px solid #eee;font-size:14px;font-variant:tabular-nums;line-height:1.5;color:rgba(0,0,0,.65);z-index:10;background-color:#fff;border-radius:4px;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.15);box-shadow:0 2px 8px rgba(0,0,0,.15);position:absolute;-webkit-transform-origin:50% 150%;transform-origin:50% 150%}.lemon-popover__content{padding:15px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1}.lemon-popover__arrow{left:50%;-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg);position:absolute;z-index:0;bottom:-4px;-webkit-box-shadow:3px 3px 7px rgba(0,0,0,.07);box-shadow:3px 3px 7px rgba(0,0,0,.07);width:8px;height:8px;background:#fff}.slide-top-enter-active,.slide-top-leave-active{-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.slide-top-enter,.slide-top-leave-to{-webkit-transform:translateY(-10px) scale(.8);transform:translateY(-10px) scale(.8);opacity:0}.lemon-button{outline:none;line-height:1.499;display:inline-block;font-weight:400;text-align:center;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid #ddd;-webkit-box-sizing:border-box;box-sizing:border-box;white-space:nowrap;padding:0 15px;font-size:14px;bLine truncated

examples/dist/css/index.81b5b60d.css

@@ -0,0 +1 @@
+.lemon-message.lemon-message-voice{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.lemon-message.lemon-message-voice .lemon-message__content{border:2px solid #000;font-size:12px;cursor:pointer}.lemon-message.lemon-message-voice .lemon-message__content:before{display:none}::-moz-selection{background:#000;color:#fff}::selection{background:#000;color:#fff}body{background:#f6f6f6!important}#app{width:90%;margin:0 auto;padding-bottom:100px}#app .scroll-top{cursor:pointer;position:fixed;bottom:40px;left:50%;border-radius:50%;background:#fff;font-size:18px;overflow:hidden;width:40px;height:40px;line-height:40px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;-webkit-transform:rotate(-45deg) translateX(-50%);transform:rotate(-45deg) translateX(-50%);-webkit-box-shadow:0 0 30px rgba(0,0,0,.1);box-shadow:0 0 30px rgba(0,0,0,.1)}#app .scroll-top:hover{font-size:22px}a{color:#0c5ed9;text-decoration:none;font-size:12px}.action{margin-top:20px}.action .lemon-button{margin-right:10px;margin-bottom:10px}.link{font-size:14px;margin-top:15px}.link a{margin:0 5px;text-decoration:none;background:#ffba00;border-radius:4px;padding:5px 10px;color:rgba(0,0,0,.8)}.link a,.logo{display:inline-block}.logo{position:relative;margin:60px auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.logo-text{font-size:38px}.logo-sub{font-size:18px;color:#999;font-weight:300}.logo-badge{position:absolute;top:-10px;right:-40px;background:#000;border-radius:16px;color:#f9f9f9;font-size:12px;padding:4px 8px}.title{font-size:24px;line-height:26px;border-left:1px solid #ffba00;padding-left:15px;margin-bottom:15px;margin-top:30px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.table{width:100%;border-radius:10px;background:#fff;border-collapse:collapse}.table tr{cursor:pointer}.table tr:not(.table-head):hover{background:#ffba00!important}.table tr:nth-of-type(2n){background:#f9f9f9}.table th{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#999}.table td,.table th{text-align:left;padding:10px 15px;font-size:14px;font-weight:400}.imui-center{margin-bottom:60px}.imui-center .lemon-wrapper,.imui-center .lemon-wrapper--drawer-show .lemon-drawer{-webkit-box-shadow:0 0 30px rgba(0,0,0,.1);box-shadow:0 0 30px rgba(0,0,0,.1)}.drawer-content{padding:15px}.more{font-size:12px;line-height:24px;height:24px;position:absolute;top:14px;right:14px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#f1f1f1;display:inline-block;border-radius:4px;background:#111;padding:0 8px}.more:active{background:#999}.bar{line-height:30px;background:#fff;margin:15px;color:#666;font-size:12px}.bar,.cover{text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cover{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.cover i{font-size:84px;color:#e6e6e6}.cover p{font-size:18px;color:#ddd;line-height:50px}.article-item{line-height:34px;cursor:pointer}.article-item:hover{text-decoration:underline;color:#318efd}pre{background:#fff;border-radius:8px;padding:15px}.lemon-tabs{background:#f6f6f6}.lemon-tabs-content{padding:15px}.lemon-tabs-content,.lemon-tabs-content__pane{width:100%;height:100%}.lemon-tabs-nav{display:-webkit-box;display:-ms-flexbox;display:flex;background:#eee}.lemon-tabs-nav__item{line-height:38px;padding:0 15px;cursor:pointer;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.lemon-tabs-nav__item--active{background:#f6f6f6}.lemon-popover{border:1px solid #eee;font-size:14px;font-variant:tabular-nums;line-height:1.5;color:rgba(0,0,0,.65);z-index:10;background-color:#fff;border-radius:4px;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.15);box-shadow:0 2px 8px rgba(0,0,0,.15);position:absolute;-webkit-transform-origin:50% 150%;transform-origin:50% 150%}.lemon-popover__content{padding:15px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1}.lemon-popover__arrow{left:50%;-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg);position:absolute;z-index:0;bottom:-4px;-webkit-box-shadow:3px 3px 7px rgba(0,0,0,.07);box-shadow:3px 3px 7px rgba(0,0,0,.07);width:8px;height:8px;background:#fff}.slide-top-enter-active,.slide-top-leave-active{-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.slide-top-enter,.slide-top-leave-to{-webkit-transform:translateY(-10px) scale(.8);transform:translateY(-10px) scale(.8);opacity:0}.lemon-button{outline:none;line-height:1.499;display:inline-block;font-weight:400;text-align:center;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid #ddd;-webkit-box-sizing:bordeLine truncated

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.4f9dd622.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.8a2d95a1.js rel=preload as=script><link href=css/index.4f9dd622.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.8a2d95a1.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.81b5b60d.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.d3cd14ac.js rel=preload as=script><link href=css/index.81b5b60d.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.d3cd14ac.js></script></body></html>

examples/dist/js/index.8a2d95a1.js

@@ -1 +0,0 @@
-(function(t){function e(e){for(var i,r,o=e[0],c=e[1],l=e[2],u=0,m=[];u<o.length;u++)r=o[u],a[r]&&m.push(a[r][0]),a[r]=0;for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(t[i]=c[i]);d&&d(e);while(m.length)m.shift()();return s.push.apply(s,l||[]),n()}function n(){for(var t,e=0;e<s.length;e++){for(var n=s[e],i=!0,o=1;o<n.length;o++){var c=n[o];0!==a[c]&&(i=!1)}i&&(s.splice(e--,1),t=r(r.s=n[0]))}return t}var i={},a={index:0},s=[];function r(e){if(i[e])return i[e].exports;var n=i[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=t,r.c=i,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)r.d(n,i,function(e){return t[e]}.bind(null,i));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="";var o=window["webpackJsonp"]=window["webpackJsonp"]||[],c=o.push.bind(o);o.push=e,o=o.slice();for(var l=0;l<o.length;l++)e(o[l]);var d=c;s.push([0,"chunk-vendors"]),n()})({0:function(t,e,n){t.exports=n("c31f")},"04f4":function(t,e,n){"use strict";var i=n("26f7"),a=n.n(i);a.a},"0af2":function(t,e,n){},"0e15":function(t,e,n){"use strict";var i=n("9768"),a=n.n(i);a.a},1021:function(t,e,n){},"107a":function(t,e,n){},"15cf":function(t,e,n){},1663:function(t,e,n){"use strict";var i=n("e86c"),a=n.n(i);a.a},"1e45":function(t,e,n){"use strict";var i=n("83d7"),a=n.n(i);a.a},"26f7":function(t,e,n){},3423:function(t,e,n){"use strict";var i=n("107a"),a=n.n(i);a.a},"428f":function(t,e,n){},"436f":function(t,e,n){"use strict";var i=n("0af2"),a=n.n(i);a.a},"476d":function(t,e,n){"use strict";var i=n("428f"),a=n.n(i);a.a},"49c2":function(t,e,n){"use strict";var i=n("acce"),a=n.n(i);a.a},"4d21":function(t,e,n){"use strict";var i=n("917b"),a=n.n(i);a.a},"6a2b":function(t,e,n){},"6da9":function(t,e,n){},7802:function(t,e,n){},"820e":function(t,e,n){},"83d7":function(t,e,n){},"909e":function(t,e,n){"use strict";var i=n("1021"),a=n.n(i);a.a},"917b":function(t,e,n){},9224:function(t){t.exports={name:"lemon-imui",version:"1.1.1",main:"dist/index.umd.min.js",description:"基于 VUE2.0 的 IM 聊天组件",homepage:"https://github.com/fanjyy/lemon-imui",repository:{type:"git",url:"git+https://github.com/fanjyy/lemon-imui.git"},scripts:{serve:"vue-cli-service serve",build:"vue-cli-service build --target lib --name index packages/index.js","build-examples":"vue-cli-service build --dest examples/dist examples/main.js",lint:"vue-cli-service lint"},dependencies:{vue:"^2.6.10"},devDependencies:{"@vue/cli-plugin-babel":"^3.6.0","@vue/cli-plugin-eslint":"^3.6.0","@vue/cli-service":"^3.6.0","@vue/eslint-config-prettier":"^4.0.1","babel-eslint":"^10.0.2",eslint:"^5.16.0","eslint-plugin-vue":"^5.2.3",stylus:"^0.54.5","stylus-loader":"^3.0.2","vue-template-compiler":"^2.5.21"},author:"fanjun",license:"MIT"}},9768:function(t,e,n){},9800:function(t,e,n){},"9b01":function(t,e,n){"use strict";var i=n("6da9"),a=n.n(i);a.a},"9c9b":function(t,e,n){"use strict";var i=n("9800"),a=n.n(i);a.a},a215:function(t,e,n){},acce:function(t,e,n){},c31f:function(t,e,n){"use strict";n.r(e);n("cadf"),n("551c"),n("f751"),n("097d");var i=n("2b0e"),a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{attrs:{id:"app"}},[n("div",{staticClass:"scroll-top",on:{click:t.scrollToTop}},[t._v("🚀")]),n("div",{staticClass:"logo"},[n("div",{staticClass:"logo-text"},[n("b",[t._v("Lemon")]),t._v(" IMUI"),n("span",{staticClass:"logo-badge"},[t._v(t._s(this.packageData.version))])]),n("div",{staticClass:"logo-sub"},[t._v(t._s(this.packageData.description))]),t._m(0)]),n("div",{staticClass:"imui-center"},[n("lemon-imui",{ref:"IMUI",attrs:{user:t.user,theme:t.theme,"hide-menu":t.hideMenu,"hide-menu-avatar":t.hideMenuAvatar,"hide-message-name":t.hideMessageName},on:{"change-menu":t.handleChangeMenu,"change-contact":t.handleChangeContact,"pull-messages":t.handlePullMessages,"message-click":t.handleMessageClick,"menu-avatar-click":t.handleMenuAvatarClick,send:t.handleSend},scopedSlots:t._u([{key:"cover",fn:function(){return[n("div",{staticClass:"cover"},[n("i",{staticClass:"lemon-icon-message"}),n("p",[n("b",[t._v("自定义封面 Lemon")]),t._v(" IMUI")])])]},proxy:!0},{key:"contact-title",fn:function(e){return[n("span",[t._v(t._s(e.displayName))]),n("small",{staticClass:"more",on:{click:function(n){return t.changeDrawer(e)}}},[t._v("…")])]}},{key:"message-sidebar",fn:function(){return[n("div",{staticClass:"bar"},[t._v("自定义消息顶部")])]},proxy:!0},{key:"contaLine truncated

examples/dist/js/index.d3cd14ac.js

@@ -0,0 +1 @@
+(function(t){function e(e){for(var i,r,o=e[0],c=e[1],d=e[2],u=0,m=[];u<o.length;u++)r=o[u],a[r]&&m.push(a[r][0]),a[r]=0;for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(t[i]=c[i]);l&&l(e);while(m.length)m.shift()();return s.push.apply(s,d||[]),n()}function n(){for(var t,e=0;e<s.length;e++){for(var n=s[e],i=!0,o=1;o<n.length;o++){var c=n[o];0!==a[c]&&(i=!1)}i&&(s.splice(e--,1),t=r(r.s=n[0]))}return t}var i={},a={index:0},s=[];function r(e){if(i[e])return i[e].exports;var n=i[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,r),n.l=!0,n.exports}r.m=t,r.c=i,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)r.d(n,i,function(e){return t[e]}.bind(null,i));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="";var o=window["webpackJsonp"]=window["webpackJsonp"]||[],c=o.push.bind(o);o.push=e,o=o.slice();for(var d=0;d<o.length;d++)e(o[d]);var l=c;s.push([0,"chunk-vendors"]),n()})({0:function(t,e,n){t.exports=n("c31f")},"04f4":function(t,e,n){"use strict";var i=n("26f7"),a=n.n(i);a.a},"0af2":function(t,e,n){},"0e15":function(t,e,n){"use strict";var i=n("9768"),a=n.n(i);a.a},1021:function(t,e,n){},"107a":function(t,e,n){},"15cf":function(t,e,n){},1663:function(t,e,n){"use strict";var i=n("e86c"),a=n.n(i);a.a},"1e45":function(t,e,n){"use strict";var i=n("83d7"),a=n.n(i);a.a},"26f7":function(t,e,n){},3423:function(t,e,n){"use strict";var i=n("107a"),a=n.n(i);a.a},"428f":function(t,e,n){},"436f":function(t,e,n){"use strict";var i=n("0af2"),a=n.n(i);a.a},"476d":function(t,e,n){"use strict";var i=n("428f"),a=n.n(i);a.a},"49c2":function(t,e,n){"use strict";var i=n("acce"),a=n.n(i);a.a},"4d21":function(t,e,n){"use strict";var i=n("917b"),a=n.n(i);a.a},"6a2b":function(t,e,n){},"6da9":function(t,e,n){},7802:function(t,e,n){},"820e":function(t,e,n){},"83d7":function(t,e,n){},"909e":function(t,e,n){"use strict";var i=n("1021"),a=n.n(i);a.a},"917b":function(t,e,n){},9224:function(t){t.exports={name:"lemon-imui",version:"1.2.0",main:"dist/index.umd.min.js",description:"基于 VUE2.0 的 IM 聊天组件",homepage:"https://github.com/fanjyy/lemon-imui",repository:{type:"git",url:"git+https://github.com/fanjyy/lemon-imui.git"},scripts:{serve:"vue-cli-service serve",build:"vue-cli-service build --target lib --name index packages/index.js","build-examples":"vue-cli-service build --dest examples/dist examples/main.js",lint:"vue-cli-service lint"},dependencies:{vue:"^2.6.10"},devDependencies:{"@vue/cli-plugin-babel":"^3.6.0","@vue/cli-plugin-eslint":"^3.6.0","@vue/cli-service":"^3.6.0","@vue/eslint-config-prettier":"^4.0.1","babel-eslint":"^10.0.2",eslint:"^5.16.0","eslint-plugin-vue":"^5.2.3",stylus:"^0.54.5","stylus-loader":"^3.0.2","vue-template-compiler":"^2.5.21"},author:"fanjun",license:"MIT"}},9768:function(t,e,n){},9800:function(t,e,n){},"9b01":function(t,e,n){"use strict";var i=n("6da9"),a=n.n(i);a.a},"9c9b":function(t,e,n){"use strict";var i=n("9800"),a=n.n(i);a.a},a215:function(t,e,n){},acce:function(t,e,n){},c31f:function(t,e,n){"use strict";n.r(e);n("cadf"),n("551c"),n("f751"),n("097d");var i=n("2b0e"),a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{attrs:{id:"app"}},[n("div",{staticClass:"scroll-top",on:{click:t.scrollToTop}},[t._v("🚀")]),n("div",{staticClass:"logo"},[n("div",{staticClass:"logo-text"},[n("b",[t._v("Lemon")]),t._v(" IMUI"),n("span",{staticClass:"logo-badge"},[t._v(t._s(this.packageData.version))])]),n("div",{staticClass:"logo-sub"},[t._v(t._s(this.packageData.description))]),t._m(0)]),n("div",{staticClass:"imui-center"},[n("lemon-imui",{ref:"IMUI",attrs:{user:t.user,theme:t.theme,"hide-menu":t.hideMenu,"hide-menu-avatar":t.hideMenuAvatar,"hide-message-name":t.hideMessageName,"hide-message-time":t.hideMessageTime},on:{"change-menu":t.handleChangeMenu,"change-contact":t.handleChangeContact,"pull-messages":t.handlePullMessages,"message-click":t.handleMessageClick,"menu-avatar-click":t.handleMenuAvatarClick,send:t.handleSend}}),n("a",{staticStyle:{"font-size":"14px"},attrs:{target:"_blank",href:"https://codesandbox.io/s/sweet-chaplygin-s24mb?fontsize=14&hidenavigation=1&theme=dark"}},[t._v("在线编辑代码")]),n("div",{staticClass:"action"},[n("lemon-button",{on:{click:t.appendMessage}},[t._v("发送消息")]),n("lemon-button",{on:{click:t.appendCustomMessage}},[t._v("发送一条自定义消息")]),n("a",{attrs:{href:"#help"}},[t._v("如何创建自定义消息？")]),n("br"),n("lemoLine truncated

package.json

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

packages/components/contact.vue

@@ -1,6 +1,6 @@
 <script>
 import { isString, isToday } from "utils/validate";
-import { timeFormat } from "utils";
+import { timeFormat,useScopedSlot } from "utils";
 export default {
   name: "LemonContact",
   components: {},
@@ -18,12 +18,24 @@ export default {
     }
   },
   render() {
-    const { contact } = this;
     return (
       <div
         class={["lemon-contact", { "lemon-contact--name-center": this.simple }]}
-        on-click={e => this._handleClick(e, contact)}
+        on-click={e => this._handleClick(e, this.contact)}
       >
+        {useScopedSlot(this.$scopedSlots.default,this._renderInner(),this.contact)}
+      </div>
+    );
+  },
+  created() {},
+  mounted() {
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    _renderInner(){
+      const { contact } = this;
+      return [
         <lemon-badge
           count={!this.simple ? contact.unread : 0}
           class="lemon-contact__avatar"
@@ -34,7 +46,7 @@ export default {
             native-on-click={e => this._handleAvatarClick(e, contact)}
             src={contact.avatar}
           />
-        </lemon-badge>
+        </lemon-badge>,
         <div class="lemon-contact__inner">
           <p class="lemon-contact__label">
             <span class="lemon-contact__name">{contact.displayName}</span>
@@ -54,14 +66,8 @@ export default {
             </p>
           )}
         </div>
-      </div>
-    );
-  },
-  created() {},
-  mounted() {},
-  computed: {},
-  watch: {},
-  methods: {
+      ];
+    },
     _handleClick(e, data) {
       this.$emit("click", data);
     },

packages/components/index.vue

@@ -1,5 +1,5 @@
 <script>
-import { useScopedSlot, fastDone, generateUUID } from "utils";
+import { useScopedSlot, funCall, generateUUID,cloneDeep } from "utils";
 import { isFunction, isString, isEmpty } from "utils/validate";
 import {
   DEFAULT_MENUS,
@@ -10,10 +10,6 @@ import lastContentRender from "../lastContentRender";
 
 import MemoryCache from "utils/cache/memory";
 
-const CacheContactContainer = new MemoryCache();
-const CacheMenuContainer = new MemoryCache();
-const CacheMessageLoaded = new MemoryCache();
-
 const messages = {};
 const emojiMap = {};
 let renderDrawerContent = () => {};
@@ -58,14 +54,18 @@ export default {
       default: true
     },
     /**
-     * 初始化时是否隐藏导航按钮上的头像
+     * 是否隐藏导航按钮上的头像
      */
     hideMenuAvatar: Boolean,
     hideMenu: Boolean,
     /**
-     * 隐藏消息列表内的联系人名字
+     * 是否隐藏消息列表内的联系人名字
      */
     hideMessageName:Boolean,
+    /**
+     * 是否隐藏消息列表内的发送时间
+     */
+    hideMessageTime:Boolean,
     user: {
       type: Object,
       default: () => {
@@ -74,6 +74,9 @@ export default {
     }
   },
   data() {
+    this.CacheContactContainer = new MemoryCache();
+    this.CacheMenuContainer = new MemoryCache();
+    this.CacheMessageLoaded = new MemoryCache();
     return {
       drawerVisible: !this.hideDrawer,
       currentContactId:null,
@@ -219,17 +222,18 @@ export default {
         this.currentContact,
         (messages, isEnd = false) => {
           this._addMessage(messages, this.currentContactId, 0);
-          CacheMessageLoaded.set(this.currentContactId, isEnd);
+          this.CacheMessageLoaded.set(this.currentContactId, isEnd);
           if (isEnd == true) this.$refs.messages.loaded();
           this.updateCurrentMessages();
           this._changeContactLock = false;
           next(isEnd);
-        }
+        },
+        this,
       );
     },
     clearCacheContainer(name) {
-      CacheContactContainer.remove(name);
-      CacheMenuContainer.remove(name);
+      this.CacheContactContainer.remove(name);
+      this.CacheMenuContainer.remove(name);
     },
     _renderWrapper(children) {
       return (
@@ -286,7 +290,7 @@ export default {
               { "lemon-menu__item--active": this.activeSidebar == name }
             ]}
             on-click={() => {
-              fastDone(click, () => {
+              funCall(click, () => {
                 if (name) this.changeMenu(name);
               });
             }}
@@ -305,36 +309,38 @@ export default {
     _renderSidebarMessage() {
       return this._renderSidebar(
         [
-          useScopedSlot(this.$scopedSlots["message-sidebar"]),
+          useScopedSlot(this.$scopedSlots["sidebar-message-top"]),
           this.lastMessages.map(contact => {
             return this._renderContact(
               {
                 contact,
                 timeFormat: this.contactTimeFormat
               },
-              () => this.changeContact(contact.id)
+              () => this.changeContact(contact.id),
+              this.$scopedSlots["sidebar-message"],
             );
           })
         ],
         DEFAULT_MENU_LASTMESSAGES
       );
     },
-    _renderContact(props, onClick) {
+    _renderContact(props, onClick,slot) {
       const {
         click: customClick,
         renderContainer,
         id: contactId
       } = props.contact;
       const click = () => {
-        fastDone(customClick, () => {
+        funCall(customClick, () => {
           onClick();
           this._customContainerReady(
             renderContainer,
-            CacheContactContainer,
+            this.CacheContactContainer,
             contactId
           );
         });
       };
+
       return (
         <lemon-contact
           class={{
@@ -342,14 +348,15 @@ export default {
           }}
           props={props}
           on-click={click}
-        />
+          scopedSlots={{default:slot}}
+        ></lemon-contact>
       );
     },
     _renderSidebarContact() {
       let prevIndex;
       return this._renderSidebar(
         [
-          useScopedSlot(this.$scopedSlots["contact-sidebar"]),
+          useScopedSlot(this.$scopedSlots["sidebar-contact-top"]),
           this.contacts.map(contact => {
             if (!contact.index) return;
             contact.index = contact.index.replace(/\[[0-9]*\]/, "");
@@ -364,7 +371,8 @@ export default {
                 },
                 () => {
                   this.changeContact(contact.id)
-                }
+                },
+                this.$scopedSlots["sidebar-contact"],
               )
             ];
             prevIndex = contact.index;
@@ -399,22 +407,22 @@ export default {
       const cls = "lemon-container";
       const curact = this.currentContact;
       let defIsShow = true;
-      for (const name in CacheContactContainer.get()) {
+      for (const name in this.CacheContactContainer.get()) {
         const show = curact.id == name && this.currentIsDefSidebar;
         defIsShow = !show;
         nodes.push(
           <div class={cls} v-show={show}>
-            {CacheContactContainer.get(name)}
+            {this.CacheContactContainer.get(name)}
           </div>
         );
       }
-      for (const name in CacheMenuContainer.get()) {
+      for (const name in this.CacheMenuContainer.get()) {
         nodes.push(
           <div
             class={cls}
             v-show={this.activeSidebar == name && !this.currentIsDefSidebar}
           >
-            {CacheMenuContainer.get(name)}
+            {this.CacheMenuContainer.get(name)}
           </div>
         );
       }
@@ -427,7 +435,7 @@ export default {
           <div class="lemon-container__title">
             <div class="lemon-container__displayname">
               {useScopedSlot(
-                this.$scopedSlots["contact-title"],
+                this.$scopedSlots["message-title"],
                 curact.displayName,
                 curact
               )}
@@ -435,6 +443,7 @@ export default {
           </div>
           <lemon-messages
             ref="messages"
+            hide-time={this.hideMessageTime}
             hide-name={this.hideMessageName}
             time-format={this.messageTimeFormat}
             reverse-user-id={this.user.id}
@@ -542,11 +551,12 @@ export default {
       }
 
       this.currentContactId = contactId;
-      this.$emit("change-contact", this.currentContact);
+      this.$emit("change-contact", this.currentContact,this);
       if (isFunction(this.currentContact.renderContainer)) {
         return;
       }
-      if (CacheMessageLoaded.has(contactId)) {
+      
+      if (this.CacheMessageLoaded.has(contactId)) {
         this.$refs.messages.loaded();
       }else{
         this.$refs.messages.resetLoadState();
@@ -671,7 +681,7 @@ export default {
       let menus = [];
       if (Array.isArray(data)) {
         const indexMap = {
-          lastMessages: 0,
+          messages: 0,
           contacts: 1
         };
         const indexKeys = Object.keys(indexMap);
@@ -687,7 +697,7 @@ export default {
           if (item.renderContainer) {
             this._customContainerReady(
               item.renderContainer,
-              CacheMenuContainer,
+              this.CacheMenuContainer,
               item.name
             );
           }

packages/components/message/basic.vue

@@ -1,4 +1,5 @@
 <script>
+import { useScopedSlot} from "utils";
 export default {
   name: "lemonMessageBasic",
   inject: ["IMUI"],
@@ -14,7 +15,8 @@ export default {
       default: () => ""
     },
     reverse: Boolean,
-    hideName: Boolean
+    hideName: Boolean,
+    hideTime:Boolean,
   },
   data() {
     return {};
@@ -27,7 +29,7 @@ export default {
           "lemon-message",
           {
             "lemon-message--reverse": this.reverse,
-            "lemon-message--hide-name": this.hideName
+            "lemon-message--hide-name": this.hideName,
           }
         ]}
       >
@@ -50,7 +52,7 @@ export default {
             >
               {fromUser.displayName}
             </span>
-            <span class="lemon-message__time">{this.timeFormat(sendTime)}</span>
+            {this.hideTime == true && <span class="lemon-message__time">{this.timeFormat(sendTime)}</span>}
           </div>
           <div
             class="lemon-message__content"
@@ -58,7 +60,7 @@ export default {
               this._emitClick(e, "content");
             }}
           >
-            {this.useScopedSlots("content", this.message)}
+            {useScopedSlot(this.$scopedSlots['content'],null,this.message)}
           </div>
           <div
             class="lemon-message__status"
@@ -78,7 +80,7 @@ export default {
   watch: {},
   methods: {
     _emitClick(e, key) {
-      this.IMUI.$emit("message-click", e, key, this.message);
+      this.IMUI.$emit("message-click", e, key, this.message,this.IMUI);
     },
     _renderStatue(status) {
       if (status == "going") {
@@ -97,11 +99,6 @@ export default {
       }
       return;
     },
-    useScopedSlots(name, params, defVnode = "", context = this) {
-      return context.$scopedSlots[name]
-        ? context.$scopedSlots[name](params)
-        : defVnode;
-    }
   }
 };
 </script>
@@ -118,8 +115,8 @@ arrow()
   display flex
   padding 10px 0
   +e(time)
-    color #bbb
-    padding 0 4px
+    color #b9b9b9
+    padding 0 5px
   +e(inner)
     position relative
   +e(avatar)
@@ -133,7 +130,7 @@ arrow()
     line-height 14px
     padding-bottom 6px
     user-select none
-    color #999
+    color #666
   +e(content)
     font-size 14px
     line-height 20px

packages/components/messages.vue

@@ -4,7 +4,10 @@ export default {
   name: "LemonMessages",
   components: {},
   props: {
+    //是否隐藏消息发送人昵称
     hideName:Boolean,
+    //是否隐藏显示消息时间
+    hideTime:Boolean,
     reverseUserId: String,
     timeRange: {
       type: Number,
@@ -53,7 +56,7 @@ export default {
                   message: {
                     id: "__time__",
                     type: "event",
-                    content: this.timeFormat(message.sendTime)
+                    content: hoursTimeFormat(message.sendTime)
                   }
                 }}
               />
@@ -64,9 +67,10 @@ export default {
               ref="message"
               refInFor={true}
               attrs={{
-                timeFormat: this.msecRange > 0 ? () => {} : this.timeFormat,
+                timeFormat: this.timeFormat,
                 message: message,
                 reverse: this.reverseUserId == message.fromUser.id,
+                hideTime:this.hideTime,
                 hideName: this.hideName
               }}
             />

packages/utils/cache/memory.js

@@ -22,18 +22,3 @@ export default class MemoryCache {
     return !!this.table[key];
   }
 }
-// export default {
-//   data: {},
-//   get(name) {
-//     console.log(this.data);
-//   }
-// };
-// class MemoryCache {
-//   constructor() {
-//     super();
-//   }
-//   get($name) {
-//     console.log(1);
-//   }
-// }
-// export default MemoryCache;

packages/utils/constant.js

@@ -1,6 +1,6 @@
 export const EMIT_AVATAR_CLICK = "avatar-click";
 
-export const DEFAULT_MENU_LASTMESSAGES = "lastMessages";
+export const DEFAULT_MENU_LASTMESSAGES = "messages";
 export const DEFAULT_MENU_CONTACTS = "contacts";
 export const DEFAULT_MENUS = [DEFAULT_MENU_LASTMESSAGES, DEFAULT_MENU_CONTACTS];
 /**

packages/utils/index.js

@@ -53,7 +53,7 @@ export function timeFormat(t, format) {
   return format;
 }
 
-export function fastDone(event, callback) {
+export function funCall(event, callback) {
   if (isFunction(event)) {
     event(() => {
       callback();