截图功能完成，聊天主体功能完成

package.json

@@ -40,7 +40,10 @@
     "axios": "^0.16.1",
     "element-ui": "^1.4.4",
     "js-md5": "^0.6.0",
+    "kscreenshot": "^1.2.0",
     "moment": "^2.18.1",
+    "screenshot-desktop": "^1.7.0",
+    "v-viewer": "^1.4.0",
     "vue": "^2.3.3",
     "vue-draggable-resizable": "^2.0.0-rc1",
     "vue-electron": "^1.0.6",

src/plugin/msgBus.js

+import Vue from 'vue'
+export default new Vue;
\ No newline at end of file

src/plugin/plugin.js

 import md5 from 'js-md5'
+import MsgBus from './msgBus'
 export default {
   install (Vue, options) {
+    Vue.prototype.MsgBus = MsgBus;
     Vue.prototype.isOnline = function() {
       return process.env.NODE_ENV !== 'development';
     },

src/renderer/App.vue

 <style>
   @import url('./assets/css/font.css');
   @import url('./assets/css/global.css');
-  @import url('//at.alicdn.com/t/font_1062339_zmy9rxarggi.css');
+  @import url('//at.alicdn.com/t/font_1062339_wpmx8pr4mo.css');
 </style>
 
 

src/renderer/assets/css/font.css

@@ -3,7 +3,7 @@
     src:url('../fonts/pingfang.woff2') format('woff');
 }
 @font-face{
-    font-family: '华文细黑';
+    font-family: 'mic';
     src:url('../fonts/msyhl_0.ttf') format('truetype');
 }
 @font-face{
@@ -15,5 +15,5 @@
     src:url('../fonts/pingfangR.ttf') format('truetype')
 }
 *{
-    font-family: '华文细黑' !important;
+    font-family: 'mic' !important;
 }
\ No newline at end of file

src/renderer/components/index.vue

@@ -41,7 +41,7 @@
           </div>
         </div>
         <div class="contentarea">
-          <msg :user=user></msg>
+          <msg :user=user v-show="chosenState.val==0"></msg>
         </div>
       </div>
     </div>
@@ -77,6 +77,15 @@ export default {
     //   scaleFactor;
     // this.$electron.webFrame.setZoomFactor(zoomFactor);
     this.user = this.$electron.remote.getGlobal("LOGINUSER");
+    this.$electron.ipcRenderer.send('create-session')
+    let that=this
+    this.$electron.ipcRenderer.on('openMsgBox', (event,session) => {
+      that.changeMenu(0,'消息')
+      this.MsgBus.$emit("set-current-session",session)
+    })
+    this.$electron.ipcRenderer.on('ignore-all-unRead', (event,session) => {
+      this.MsgBus.$emit("ignore-all-unRead")
+    })
   },
   methods: {
     changeMenu(i, n) {
@@ -84,6 +93,9 @@ export default {
         val: i,
         name: n
       };
+      if(i!=0){
+        this.MsgBus.$emit("dispose-session")
+      }
     },
     minWin() {
       this.$electron.remote.getCurrentWindow().minimize();
@@ -99,6 +111,7 @@ export default {
       }
     },
     hideWin() {
+      this.MsgBus.$emit("dispose-session")
       this.$electron.remote.getCurrentWindow().hide();
     }
   }

src/renderer/components/msssage/chat.vue

@@ -29,7 +29,17 @@
       :h="consoleinfo.currenth"
       :resizable="true"
       :active="true"
-    ></VueDraggableResizable>
+    >
+      <chateditor
+        type="session"
+        :scene="scene"
+        :to="to"
+        :isRobot="isRobot"
+        :invalid="teamInvalid || muteInTeam"
+        :invalidHint="sendInvalidHint"
+        :advancedTeam="teamInfo && teamInfo.type === 'advanced'"
+      ></chateditor>
+    </VueDraggableResizable>
   </div>
 </template>
 <script>
@@ -37,7 +47,8 @@ import util from "../../../utils";
 import pageUtil from "../../../utils/page";
 import VueDraggableResizable from "vue-draggable-resizable";
 import "vue-draggable-resizable/dist/VueDraggableResizable.css";
-import chatList from './chatlist'
+import chatList from "./chatlist";
+import chateditor from "./chateditor";
 export default {
   props: {
     id: {
@@ -47,7 +58,8 @@ export default {
   },
   components: {
     VueDraggableResizable,
-    chatList
+    chatList,
+    chateditor
   },
   data() {
     return {
@@ -189,36 +201,39 @@ export default {
       localStorage.consoleh = h;
       this.consoleinfo.currenth = h;
     },
-     onClickBack () {
+    onClickBack() {
       // location.href = '#/contacts'
-      window.stopPlayAudio && window.stopPlayAudio()
-      window.history.go(-1)
+      window.stopPlayAudio && window.stopPlayAudio();
+      window.history.go(-1);
     },
-    msgsLoaded () {
-      pageUtil.scrollChatListDown()
+    msgsLoaded() {
+      pageUtil.scrollChatListDown();
     },
-    enterNameCard () {
+    enterNameCard() {
       if (/^p2p-/.test(this.sessionId)) {
-        let account = this.sessionId.replace(/^p2p-/, '')
+        let account = this.sessionId.replace(/^p2p-/, "");
         if (account === this.$store.state.userUID) {
-          location.href = `#/general`
-          return
+          location.href = `#/general`;
+          return;
         }
-        location.href = `#/namecard/${account}`
+        location.href = `#/namecard/${account}`;
       }
     },
     onTeamManageClick() {
       if (this.teamInfo && this.teamInfo.validToCurrentUser) {
-        location.href = `#/teammanage/${this.teamInfo.teamId}`
+        location.href = `#/teammanage/${this.teamInfo.teamId}`;
       } else {
-        this.$toast('您已退出该群')
+        this.$toast("您已退出该群");
       }
     },
     onHistoryClick() {
-      if (this.scene!=='team' || (this.teamInfo && this.teamInfo.validToCurrentUser)) {
-        location.href = `#/chathistory/${this.sessionId}`
+      if (
+        this.scene !== "team" ||
+        (this.teamInfo && this.teamInfo.validToCurrentUser)
+      ) {
+        location.href = `#/chathistory/${this.sessionId}`;
       } else {
-        this.$toast('您已退出该群')
+        this.$toast("您已退出该群");
       }
     }
   }
@@ -271,7 +286,7 @@ export default {
 }
 .msgbox .messagebox .messagecontent .invalidHint {
   text-align: center;
-  margin:20px;
+  margin: 20px;
 }
 .msgbox .messagebox .messagecontent .invalidHint span {
   height: 22px;

src/renderer/components/msssage/chatemoji.vue

+<template>
+  <div class="m-chat-emoji">
+    <div class="emoji-content">
+      <div class="cnt">
+        <span class="emoji-item" :class="{'pinup-item':item.type==='pinup'}" v-for="item in currEmoji.list" @click.stop="selectEmoji(item)">
+          <img :src="item.img">
+        </span>
+      </div>
+    </div>
+    <div class="emoji-channel">
+      <span class="emoji-album" :class="{active: item.name==currAlbum}" v-for="item in emoji" @click.stop="selectAlbum(item)">
+        <img :src="item.album">
+      </span><span v-if="type==='session'" class="emoji-album" :class="{active: item.name==currAlbum}" v-for="item in pinup" @click.stop="selectAlbum(item)">
+        <img :src="item.album">
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import emojiObj from '../../../configs/emoji'
+
+function genEmojiList (type, emojiList) {
+  let result = {}
+  for (let name in emojiList) {
+    let emojiMap = emojiList[name]
+    let list = []
+    for (let key in emojiMap) {
+      list.push({
+        type,
+        name,
+        key,
+        img: emojiMap[key].img
+      })
+    }
+    if (list.length > 0) {
+      result[name] = {
+        type,
+        name,
+        list,
+        album: list[0].img
+      }
+    }
+  }
+  return result
+}
+
+export default {
+  props: {
+    type: String,
+    scene: String,
+    to: String
+  },
+  data () {
+    return {
+      currType: 'emoji',
+      currAlbum: 'emoji'
+    }
+  },
+  computed: {
+    emoji () {
+      return genEmojiList('emoji', emojiObj.emojiList)
+    },
+    pinup () {
+      return genEmojiList('pinup', emojiObj.pinupList)
+    },
+    currEmoji () {
+      if (this.currType === 'emoji') {
+        return this.emoji[this.currAlbum]
+      } else if (this.currType === 'pinup') {
+        return this.pinup[this.currAlbum]
+      }
+      return []
+    }
+  },
+  methods: {
+    selectAlbum (album) {
+      this.currType = album.type
+      this.currAlbum = album.name
+    },
+    selectEmoji (emoji) {
+      if (this.currType === 'emoji') {
+        // 由触发父组件事件，增加表情文案
+        this.$emit('add-emoji', emoji.key)
+      } else if (this.currType === 'pinup') {
+        if (this.type === 'session') {
+          this.$store.dispatch('sendMsg', {
+            type: 'custom',
+            scene: this.scene,
+            to: this.to,
+            pushContent: '[贴图表情]',
+            content: {
+              type: 3,
+              data: {
+                catalog: this.currAlbum,
+                chartlet: emoji.key
+              }
+            }
+          })
+        } else if (this.type === 'chatroom') {
+          this.$store.dispatch('sendChatroomMsg', {
+            type: 'custom',
+            pushContent: '[贴图表情]',
+            content: {
+              type: 3,
+              data: {
+                catalog: this.currAlbum,
+                chartlet: emoji.key
+              }
+            }
+          })
+        }
+        this.$emit('hide-emoji')
+      }
+    }
+  }
+}
+</script>
+
+<style type="text/css">
+.m-chat-emoji {
+    position: absolute;
+    top: -203px;
+    height: 200px;
+    left: 0;
+    width: 100%;
+    border-top: 1px solid #eee;
+    /* border-bottom: 1px solid #ccc; */
+    background-color: #fff;
+    z-index: 2017;
+}
+.m-chat-emoji .emoji-channel {
+  position: relative;
+  width: 100%;
+  height: auto;
+  margin: 0 5px;
+}
+.m-chat-emoji .emoji-channel .emoji-album {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  margin-right: 10px;
+  margin-top: 5px;
+}
+.m-chat-emoji .emoji-channel .emoji-album img {
+  margin: 0;
+  display: block;
+  width: 30px;
+  height: 30px;
+}
+.m-chat-emoji .emoji-channel .emoji-album img.active {
+  background-color: #f0f0f0;
+}
+.emoji-content {
+  position: relative;
+  width: 100%;
+  height: 10rem;
+  background-color: #f0f0f0;
+  overflow-y: auto;
+}
+.emoji-content .cnt {
+  position: relative;
+  display: block;
+  margin: 0.4rem auto;
+  text-align: left;
+}
+.emoji-content::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+  background-color: #f5f5f5;
+}
+/*定义滚动条的轨道，内阴影及圆角*/
+.emoji-content::-webkit-scrollbar-track {
+  background-color: #f5f5f5;
+}
+/*定义滑块，内阴影及圆角*/
+.emoji-content::-webkit-scrollbar-thumb {
+  border-radius: 20px;
+  background-color: transparent;
+  margin-bottom: 24px;
+}
+.emoji-content:hover::-webkit-scrollbar-thumb {
+  border-radius: 20px;
+  background-color: #aaa;
+  margin-bottom: 24px;
+}
+.emoji-item {
+  display: inline-block;
+  width: 28px;
+  height: 28px;
+  padding: 2px;
+  vertical-align: middle;
+  /*border: 1px solid #fff;*/
+  /*margin-left: -1px;*/
+  /*margin-bottom: -1px;*/
+}
+.emoji-item img {
+  width: inherit;
+  height: inherit;
+}
+.pinup-item {
+  width: 44px;
+  height: 44px;
+}
+</style>

src/renderer/components/msssage/index.vue

 <template>
   <div class="msgbox">
+    <audio id="msgaudio" >
+      <source src="../../static/audio/msg.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="shakeaudio">
+      <source src="../../static/audio/shake.wav" type="audio/wav">
+    </audio>
+    
     <div class="sessionbox">
       <div class="search__session__box">
         <div class="seach_ctr">
@@ -59,10 +66,10 @@
     </div>
     <div class="messagebox">
       <div v-if="currentSession.id!=''">
-        <chat :id='currentSession.id'></chat>
+        <chat :id="currentSession.id"></chat>
       </div>
       <div v-else class="nosession">
-          <img src="../../assets/img/backgroundlogo.png" />
+        <img src="../../assets/img/backgroundlogo.png">
       </div>
     </div>
   </div>
@@ -72,7 +79,7 @@ import util from "../../../utils";
 import config from "../../../configs";
 import VueDraggableResizable from "vue-draggable-resizable";
 import "vue-draggable-resizable/dist/VueDraggableResizable.css";
-import chat from './chat'
+import chat from "./chat";
 import { isNumber } from "util";
 export default {
   props: {
@@ -90,7 +97,9 @@ export default {
       currentSession: {
         id: ""
       },
-      noticeObj: {}
+      noticeObj: {},
+      douTimer: null,
+      newMsgList: []
     };
   },
   updated() {
@@ -100,11 +109,94 @@ export default {
   },
   methods: {
     enterChat(session) {
+      this.$electron.ipcRenderer.send("clearPrevImgs");
+      let index=-1
+      this.newMsgList.forEach((x,i)=>{
+        if(x.id==session.id){
+          index=i
+        }
+      })
+      if(index!=-1)
+        this.newMsgList.splice(index,1)
       this.currentSession = session;
+    },
+    dou() {
+      document.querySelector("#shakeaudio").play();
+      this.$electron.remote.getCurrentWindow().show();
+      this.$electron.remote.getCurrentWindow().setAlwaysOnTop(true);
+      this.$electron.remote.getCurrentWindow().setAlwaysOnTop(false);
+      if (!this.douTimer) {
+        let position = this.$electron.remote.getCurrentWindow().getPosition();
+        let x = position[0];
+        let y = position[1];
+        let t = 0;
+        let c = 0;
+        this.douTimer = setInterval(() => {
+          if (t == 0)
+            this.$electron.remote.getCurrentWindow().setPosition(x, y + 2);
+          if (t == 2)
+            this.$electron.remote.getCurrentWindow().setPosition(x - 2, y - 2);
+          if (t == 1)
+            this.$electron.remote.getCurrentWindow().setPosition(x - 2, y + 2);
+          if (t == 3) {
+            this.$electron.remote.getCurrentWindow().setPosition(x + 2, y);
+            t = 0;
+          } else {
+            t++;
+          }
+          c++;
+          if (c == 40) {
+            this.$electron.remote.getCurrentWindow().setPosition(x, y);
+            clearInterval(this.douTimer);
+            this.douTimer = null;
+          }
+        }, 25);
+      }
+    },
+    calcUnRead(oldarr, newarr) {
+      let isplay = false;
+      if(newarr.length>oldarr.length)
+        return true
+      newarr.forEach(x => {
+        let isExsit = false;
+        oldarr.forEach(y => {
+          if (x.id == y.id) {
+            isExsit = true;
+            if (x.unread > y.unread) {
+              isplay = true;
+              return false;
+            }
+          }
+        });
+        if (!isExsit) {
+          isplay = true;
+          return false;
+        }
+      });
+      return isplay
     }
   },
   mounted() {
     this.$store.dispatch("connect");
+    let that = this;
+    this.MsgBus.$on("doudong", function() {
+      that.dou();
+    });
+    this.MsgBus.$on("set-current-session", function(data) {
+      that.enterChat(data);
+    });
+    this.MsgBus.$on("dispose-session", function() {
+      that.$store.dispatch('resetCurrSession')
+      that.currentSession={
+        id: ""
+      }
+    });
+    this.MsgBus.$on("ignore-all-unRead", function() {
+      that.newMsgList.forEach(x=>{
+        that.$store.dispatch('setCurrSession', x.id)
+        that.$store.dispatch('sendMsgReceipt')
+      })
+    });
   },
   computed: {
     sysMsgUnread() {
@@ -124,6 +216,7 @@ export default {
       return `${this.$store.state.userUID}`;
     },
     sessionlist() {
+      let unreadList = [];
       let sessionlist = this.$store.state.sessionlist.filter(item => {
         if (item.to === "684cb79fe92f46877777") return; //过滤推送消息
         item.name = "";
@@ -183,8 +276,29 @@ export default {
           this.noticeObj = item;
           return;
         }
+        if (item.unread > 0) {
+          if (item.lastMsg.tip && item.lastMsg.tip.indexOf("抖了一下") != -1) {
+            this.dou();
+            this.enterChat(item);
+          }
+          unreadList.push(item);
+        }
         return item;
       });
+      if (!this.$electron.remote.getCurrentWindow().isVisible()) {
+        if(this.calcUnRead(this.newMsgList,unreadList)){
+          document.querySelector("#msgaudio").play();
+        }
+        this.$electron.ipcRenderer.send("newMessage", this.newMsgList);
+      } else {
+        this.$electron.ipcRenderer.send("newMessage", []);
+      }
+      if(!this.$electron.remote.getCurrentWindow().isFocused()){
+        if(this.calcUnRead(this.newMsgList,unreadList)){
+          this.$electron.remote.getCurrentWindow().flashFrame(true)
+        }
+      }
+      this.newMsgList=unreadList
       return sessionlist;
     }
   }
@@ -354,15 +468,15 @@ export default {
   bottom: 0px;
   cursor: default;
 }
-.msgbox .messagebox .nosession{
-    display: flex;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    align-items:center;
-    justify-content:center;
+.msgbox .messagebox .nosession {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  align-items: center;
+  justify-content: center;
 }
 .msgbox .el-badge__content {
   min-width: 6px;

src/renderer/components/msssage/newMsgPop.vue

+<template>
+  <div class="new-box" @mouseleave="leave">
+    <div class="title">{{userInfo.emName}}</div>
+    <ul>
+        <li v-for="(session, index) in sessionlist"  class="clearfix" @click="openMsg(session)">
+            <img :src="session.avatar" />
+            <div class="content">
+                <div class="msgName">{{session.name}}</div>
+                <div class="unread-msg" v-show="session.unread > 0">{{session.unread}}</div>
+                <div class="msg-content">{{session.lastMsgShow}}</div>
+            </div>
+        </li>
+    </ul>
+    <div class="bottom-opera" @click="ignoreAllMsg()">
+        <span>忽略全部</span>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'new-msg-page',
+    data () {
+      return {
+        userInfo: {},
+        chosenMenuIndex: 0,
+        sessionlist: new Array(),
+        chosenImg: ''
+      }
+    },
+    mounted: function () {
+      this.userInfo = this.$electron.remote.getGlobal('LOGINUSER')
+      this.sessionlist = this.$electron.remote.getGlobal('NEWMESSAGE')
+      setInterval(()=>{
+        this.sessionlist = this.$electron.remote.getGlobal('NEWMESSAGE')
+      },2000)
+    },
+    methods: {
+      openMsg (session) {
+        var sessions = new Array()
+        sessions.push(session)
+        this.$store.state.openNewMsgSession = sessions
+        this.$electron.ipcRenderer.send('openNewMessage', session)
+      },
+      leave () {
+        this.$electron.remote.getCurrentWindow().hide()
+      },
+      ignoreAllMsg () {
+        this.$electron.ipcRenderer.send('ignore-all-message')
+      }
+    }
+  }
+</script>
+<style scoped>
+.new-box{
+    -webkit-app-region: no-drag !important;
+    width: 260px;
+    background: #fff;
+    border-top: 3px solid rgba(71, 121, 255, 1) ;
+}
+.new-box .title{
+    font-size: 22px;
+    color: #333;
+    padding: 5px 12px;
+}
+.new-box ul{
+    display: block;
+    margin-bottom: 0px;
+    width: 100%;
+    padding: 0px;
+    margin-top: 0px;
+}
+.new-box ul li{
+    display: block;
+    padding: 7px 12px;
+    list-style: none;
+    cursor: default;
+    position: relative;
+    -webkit-app-region: no-drag !important;
+}
+.new-box ul li:hover{
+    background: #D6D6D6;
+}
+
+.new-box ul li .unread-msg{
+    position: absolute;
+    background: #ef4455;
+    padding: 0px 4px;
+    top: 5px;
+    right: 12px;
+    border-radius: 17px;
+    height: 17px;
+    min-width: 10px;
+    line-height: 17px;
+    text-align: center;
+    color: #fff;
+    font-size:12px;
+    font-weight: 300;
+}
+.new-box ul li img{
+    width: 32px;
+    height: 32px;
+    border-radius:32px;
+    float: left;
+    margin-right:14px;
+}
+.new-box ul li .content{
+    float: left;
+    width: 190px;
+}
+.new-box ul li .content .msgName{
+    width: 100px;
+    font-size: 14px;
+    font-weight: 300;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    color: #333 !important;
+}
+.new-box ul li .content .msg-content{
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+    color: #bbb;
+    font-size: 12px;
+}
+.new-box .bottom-opera{
+    padding:7px 12px;
+    border-top: 1px solid #ededed;
+}
+.new-box .bottom-opera span{
+    color:#009ADA;
+    -webkit-app-region: no-drag !important;
+    cursor: pointer;
+    font-size: 12px;
+}
+</style>
+

src/renderer/components/tools/previewerfile.vue

 <template>
-    <div class="previewerfile">
-        <div class="header__opera">
-          <span class="opera__item close" @click="hideWin">
-            <i class="iconfont iconguanbi"></i>
-          </span>
-        </div>
-        <iframe class="iframe" :src="url"></iframe>
+  <div class="previewerfile">
+    <div class="header__opera">
+      <span class="opera__item close">
+        <i class="iconfont iconguanbi" @click="closeWin"></i>
+      </span>
     </div>
+    <div class="ze-opera"></div>
+    <iframe class="iframe" :src="url"></iframe>
+  </div>
 </template>
 <script>
 export default {
-    data () {
-        return {
-            url:''
-        }
-    },
-    mounted() {
-        this.url=this.$electron.remote.getGlobal('previwerurl')
-    },
-}
+  data() {
+    return {
+      url: ""
+    };
+  },
+  mounted() {
+    this.url = this.$electron.remote.getGlobal("PREVIWERURL");
+    console.log(this.url);
+  },
+  methods: {
+    closeWin() {
+      this.$electron.remote.getCurrentWindow().close();
+    }
+  }
+};
 </script>
 <style scope>
-.previewerfile{
-    width: 100%;
-    height: 100%;
-    background: rgba(0,0,0,.5);
-    position: relative;
+.previewerfile {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  position: relative;
+}
+.ze-opera{
+    position: absolute;
+    top: 60px;
+    background: #FFF;
+    left:0;
+    right: 0px;
+    height: 30px;
 }
 .header__opera {
   position: absolute;
-  top: 0px;
-  right: -1px;
+  top: 2px;
+  right: 0px;
+  left: 0;
+  height: 40px;
   text-align: right;
-  -webkit-app-region: no-drag !important;
+  -webkit-app-region: drag !important;
 }
 .header__opera .opera__item {
-  padding: 2px 5px;
+  padding: 5px 6px 6px 6px;
   color: #f1f1f1;
   cursor: pointer;
   display: inline-block;
+  background: #eb3b5a;
+  -webkit-app-region: no-drag !important;
 }
 .header__opera .opera__item i {
-  font-size: 14px;
+  font-size: 36px;
 }
-.login-box .login-box__header .header__opera .close:hover {
+.header__opera .close:hover {
   background: #eb3b5a;
 }
-.iframe{
-    width: 100%;
-    height: 100%;
+.iframe {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
 }
 </style>

src/renderer/components/tools/previewerimg.vue

+<template>
+  <div class="previewerimg">
+    <div class="viewer-box">
+      <viewer :images="images" :options="imageOptions" @inited="inited" @hidden='closeWin' class="viewer" ref="viewer">
+        <img v-for="src in images" :src="src" :key="src">
+      </viewer>
+    </div>
+
+    <div class="header__opera">
+      <span class="opera__item close">
+        <i class="iconfont iconguanbi" @click="closeWin"></i>
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    let that=this
+    return {
+      images: [],
+      imageOptions: {
+        navbar: false,
+        title: false,
+        hidden: function (e) {
+            that.$electron.remote.getCurrentWindow().close()
+        }
+      }
+    };
+  },
+  methods: {
+    closeWin() {
+      this.$electron.remote.getCurrentWindow().close();
+    },
+    inited(viewer) {
+      this.$viewer = viewer;
+    }
+  },
+  created() {
+    this.images = this.$electron.remote.getGlobal("PREVIWERIMGS");
+  },
+  mounted() {
+    this.$viewer.view(this.$electron.remote.getGlobal("PREVIWERIMG"))
+    this.$viewer.show();
+  }
+};
+</script>
+<style>
+.previewerimg {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0);
+  position: relative;
+}
+.header__opera {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  left: 0;
+  height: 40px;
+  text-align: right;
+  -webkit-app-region: drag !important;
+  z-index: 99999999999999999;
+}
+.header__opera .opera__item {
+  padding: 2px 5px;
+  color: #f1f1f1;
+  cursor: pointer;
+  display: inline-block;
+  background: #eb3b5a;
+  -webkit-app-region: no-drag !important;
+}
+.header__opera .opera__item i {
+  font-size: 36px;
+}
+.header__opera .close:hover {
+  background: #eb3b5a;
+}
+.viewer-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.viewer {
+  visibility: hidden;
+}
+</style>

src/renderer/components/tools/previewervideo.vue

+<template>
+  <div class="previewerimg" :style="{'background':bg}">
+    <video :src="url" id="videos" autoplay width="400" controls='controls'></video>
+    <div class="header__opera">
+      <span class="opera__item close">
+        <i class="iconfont iconguanbi" @click="closeWin"></i>
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      url:'',
+      bg:'rgba(0, 0, 0, 0)'
+    };
+  },
+  methods: {
+    closeWin() {
+      this.$electron.remote.getCurrentWindow().close();
+    }
+  },
+  mounted() {
+    this.url=this.$electron.remote.getGlobal('PREVIWERVIDEOURL')
+    setTimeout(() => {
+      console.log(this.$electron.remote.getCurrentWindow().height)
+      this.$electron.remote.getCurrentWindow().setSize(420,document.querySelector("#videos").clientHeight+20)
+      this.bg='rgba(0, 0, 0, 1)'
+    }, 1000);
+  }
+};
+</script>
+<style scope>
+video::-webkit-media-controls-enclosure {
+    overflow:hidden;
+}
+video::-webkit-media-controls-panel {
+    width: calc(100% + 30px);
+}
+.previewerimg {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0);
+  position: relative;
+  padding: 10px;
+  box-sizing: border-box;
+}
+.header__opera {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  left: 0;
+  height: 40px;
+  text-align: right;
+  -webkit-app-region: drag !important;
+  z-index: 99999999999999999;
+}
+.header__opera .opera__item {
+  padding: 2px 5px;
+  color: #f1f1f1;
+  cursor: pointer;
+  display: inline-block;
+  background: #eb3b5a;
+  -webkit-app-region: no-drag !important;
+}
+.header__opera .opera__item i {
+  font-size: 36px;
+}
+.header__opera .close:hover {
+  background: #eb3b5a;
+}
+</style>

src/renderer/components/tools/scrollerhot.vue

+<template>
+  <div class="scrollerhot">
+    <img :src="imgPath" v-if="imgPath" draggable="false">
+  </div>
+</template>
+<script>
+import kscreenshot from "kscreenshot";
+export default {
+  data() {
+    return {
+      imgPath: null,
+      kscreenshotObj: null
+    };
+  },
+  created() {
+    //
+    let that = this;
+    this.imgPath = this.$electron.remote.getGlobal("DEFAULT_SCREENSHOT_PATH");
+    this.$electron.ipcRenderer.send("screens-session");
+    this.$electron.ipcRenderer.on("new-hot", event => {
+      that.imgPath = null;
+      that.imgPath = that.$electron.remote.getGlobal("DEFAULT_SCREENSHOT_PATH")
+      that.screenhot()
+    });
+  },
+  mounted() {
+    let that = this;
+    document.onkeydown = function(event) {
+      var e = event || window.event || arguments.callee.caller.arguments[0];
+      if (e && e.keyCode == 27) {
+        that.$electron.remote.getCurrentWindow().hide();
+      }
+    }
+    document.onmouseup = function(e) {
+      if (e.button == 2) {
+        setTimeout(() => {
+          let cnt = document.querySelectorAll("#kss").length;
+          if (cnt == 0) {
+            that.$electron.remote.getCurrentWindow().hide();
+          }
+        }, 100);
+      }
+    }
+    this.screenhot()
+  },
+  methods: {
+    screenhot() {
+      let that = this;
+      new kscreenshot({
+        key: 65,
+        endCB: function(e) {
+          that.$electron.ipcRenderer.send("addClipboard", e);
+          that.$electron.remote.getCurrentWindow().hide();
+        },
+        immediately: true,
+        toolShow: {
+          complete: true,
+          quit: false,
+          back: true,
+          arrow: true,
+          drawLine: true,
+          rect: true,
+          ellipse: true,
+          text: true,
+          color: true
+        }
+      }).startScreenShot();
+    }
+  }
+};
+</script>
+<style>
+.scrollerhot {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+.scrollerhot img {
+  width: 100%;
+  height: 100%;
+}
+</style>
+

src/renderer/main.js

 import Vue from 'vue'
 import axios from 'axios'
-
 import App from './App'
 import router from './router'
 import store from '../store'
-
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-default/index.css'
-
 import editor from 'vue-html5-editor'
 import 'vue-html5-editor/src/style.css'
 import MyPlugin from '../plugin/plugin'
 import encrypt from '../plugin/encry'
+import 'viewerjs/dist/viewer.css'
+import Viewer from 'v-viewer'
+
 Vue.use(editor)
 Vue.use(MyPlugin)
 Vue.use(ElementUI)
+Vue.use(Viewer,{
+  defaultOptions: {
+    zIndex: 9999
+  }
+})
 
 if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
 Vue.http = Vue.prototype.$http = axios

src/renderer/router/index.js

@@ -13,6 +13,31 @@ export default new Router({
       path: '/home',
       name: 'home',
       component: require('@/components/index')
+    },
+    {
+      path: '/previewfile',
+      name: 'previewfile',
+      component: require('@/components/tools/previewerfile')
+    },
+    {
+      path: '/previewerimg',
+      name: 'previewerimg',
+      component: require('@/components/tools/previewerimg')
+    },
+    {
+      path: '/previewervideo',
+      name: 'previewervideo',
+      component: require('@/components/tools/previewervideo')
+    },
+    {
+      path: '/newmsg',
+      name: 'newmsg',
+      component: require('@/components/msssage/newMsgPop')
+    },
+    {
+      path: '/scrollerhot',
+      name: 'scrollerhot',
+      component: require('@/components/tools/scrollerhot')
     }
   ]
 })

src/store/actions/index.js

@@ -11,7 +11,7 @@ import {updateBlack} from './blacks'
 import {updateFriend, addFriend, deleteFriend} from './friends'
 import {resetSearchResult, searchUsers, searchTeam} from './search'
 import {deleteSession, setCurrSession, resetCurrSession} from './session'
-import {sendMsg, sendFileMsg, sendMsgReceipt, sendRobotMsg, revocateMsg, updateLocalMsg, getHistoryMsgs, resetNoMoreHistoryMsgs, continueRobotMsg} from './msgs'
+import {sendMsg, sendTip, sendFileMsg,sendDataUrlMsg, sendMsgReceipt, sendRobotMsg, revocateMsg, updateLocalMsg, getHistoryMsgs, resetNoMoreHistoryMsgs, continueRobotMsg} from './msgs'
 import {markSysMsgRead, resetSysMsgs, deleteSysMsgs, markCustomSysMsgRead} from './sysMsgs'
 import {sendChatroomMsg, sendChatroomRobotMsg, sendChatroomFileMsg, getChatroomHistoryMsgs} from './chatroomMsgs'
 import {initChatroomInfos, getChatroomInfo, getChatroomMembers, clearChatroomMembers} from './chatroomInfos'
@@ -113,7 +113,9 @@ export default {
   resetCurrSession,
   // 发送消息
   sendMsg,
+  sendTip,
   sendFileMsg,
+  sendDataUrlMsg,
   sendRobotMsg,
   // 发送消息已读回执
   sendMsgReceipt,

src/store/actions/msgs.js

@@ -39,6 +39,18 @@ export function onOfflineMsgs (obj) {
   store.commit('updateMsgs', msgs)
 }
 
+export function sendTip ({state, commit}, obj) {
+  const nim = store.state.nim
+  nim.sendTipMsg({
+    scene: obj.scene,
+    to: obj.to,
+    tip: obj.tip,
+    done: function sendTipMsgDone (error, msg) {
+      onSendMsgDone(error, msg)
+    }
+  })
+}
+
 export function onMsg (msg) {
   msg = formatMsg(msg)
   store.commit('putMsg', msg)
@@ -174,14 +186,17 @@ export function sendMsg ({state, commit}, obj) {
 // 发送文件消息
 export function sendFileMsg ({state, commit}, obj) {
   const nim = state.nim
-  let { type } = obj
+  let { type,fileInput } = obj
   if (!type) {
     type = 'file'
     if (/\.(png|jpg|bmp|jpeg|gif)$/i.test(fileInput.value)) {
       type = 'image'
     } else if (/\.(mov|mp4|ogg|webm)$/i.test(fileInput.value)) {
       type = 'video'
+    } else if (/\.(wav|mp3|wma)$/i.test(fileInput.value)) {
+      type = 'music'
     }
+    
   }
   store.dispatch('showLoading')
   const data = Object.assign({
@@ -208,6 +223,59 @@ export function sendFileMsg ({state, commit}, obj) {
   nim.sendFile(data)
 }
 
+export function sendDataUrlMsg ({state, commit}, obj) {
+  const nim = state.nim
+  let {scene, to, dataURL, name,size,md5} = obj
+  let type = 'file'
+  if (/(png|jpg|bmp|jpeg|gif)$/i.test(name)) {
+    type = 'image'
+  } else if (/(mov|mp4|ogg|webm)$/i.test(name)) {
+    type = 'video'
+  } else if (/\.(wav|mp3|wma)$/i.test(fileInput.value)) {
+    type = 'music'
+  }
+  let customMsg = {
+    "msgtype":"custom_file",
+    "data":{
+        "pushContent":name,
+        "Height":"84",
+        "content":{
+            "fileType":name.substring(name.lastIndexOf('.')+1,name.length),
+            "fileUrl":"-1",
+            "fileName":name,
+            "fileSize":size,
+            'md5':md5
+        },
+        "recentContent":name,
+        "Width":"210"
+    }
+  }
+  store.dispatch('showLoading')
+  nim.sendFile({
+    scene: scene,
+    to: to,
+    type: type,
+    dataURL: dataURL,
+    custom: JSON.stringify(customMsg),
+    uploadprogress: function (data) {
+      // console.log(data.percentageText)
+    },
+    uploaderror: function () {
+      console && console.log('上传失败')
+    },
+    uploaddone: function (error, file) {
+      // console.log(error);
+      // console.log(file);
+    },
+    beforesend: function (msg) {
+      // console && console.log('正在发送消息, id=', msg);
+    },
+    done: function (error, msg) {
+      onSendMsgDone(error, msg)
+    }
+  })
+}
+
 // 发送机器人消息
 export function sendRobotMsg ({state, commit}, obj) {
   const nim = state.nim