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

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/main/index.js

 'use strict'
 
-import { app, BrowserWindow, protocol } from 'electron'
+import { app, BrowserWindow, protocol, desktopCapturer } from 'electron'
+
 const cp = require('child_process')
 const path = require('path')
 const WinReg = require('winreg')
 const fs = require('fs')
 const electron = require('electron')
+const screenshot = require('screenshot-desktop')
+
 const ipc = electron.ipcMain
 const shell =electron.shell
 const Menu = electron.Menu
 const Tray = electron.Tray
 const dialog = electron.dialog
+const globalShortcut = electron.globalShortcut
+const clipboard = electron.clipboard
 
 
 const nativeImage = require('electron').nativeImage
-
 let windowIcon = nativeImage.createFromPath(path.join(__static, './icons/logo.png'))
 global.LOGINUSER = {}
 global.LOGINTYPE = ''
@@ -23,10 +27,19 @@ global.NEWMESSAGE = new Array()
 global.FILEURL = ''
 global.VERSION = ''
 global.ISCUSTOM = false
+global.PREVIWERURL = ''
+global.PREVIWERVIDEOURL=''
+global.PREVIWERIMGS = []
+global.PREVIWERIMG = 0
 let updateTimer
 let loginWindow
 let mainWindow
+let previewfileWindow
+let previwerImgWindow
+let previwerVideoWindow
 let hideWindow
+let newMsgWindow
+let scrollerhotWindows
 let appIcon = null
 let isLogin = false
 let timeout = null
@@ -36,15 +49,18 @@ let downloadname = ''
 let msgId = ''
 let downloadObj = null
 let mainEvent = null
+let screenEvent = null
 let messageEvent = null
 let messageProtocol = null
+let CAP_IMG=''
 global.defaultdownloaddir=require('os').userInfo().homedir+'\\Downloads\\'
-
-console.log(require('os').userInfo())
-
+global.DEFAULT_SCREENSHOT_PATH=require('os').userInfo().homedir+'\\Pictures\\demo.png'
 
 const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080` : `file://${__dirname}/index.html`
 const mainUrl = process.env.NODE_ENV === 'development' ? `http://localhost:9080/#/home` : `file://${__dirname}/index.html#/home`
+const previewfileUrl = process.env.NODE_ENV === 'development' ? `http://localhost:9080/#/previewfile` : `file://${__dirname}/index.html#/previewfile`
+const previewfileImg = process.env.NODE_ENV === 'development' ? `http://localhost:9080/#/previewerimg` : `file://${__dirname}/index.html#/previewerimg`
+const previewfVideoUrl = process.env.NODE_ENV === 'development' ? `http://localhost:9080/#/previewervideo` : `file://${__dirname}/index.html#/previewervideo`
 const appXmlPath = process.execPath.substring(0, process.execPath.lastIndexOf('\\') + 1) + 'app.json'
 
 
@@ -115,7 +131,6 @@ if (isSecondInstance) {
   app.quit()
 }
 function createWindow () {
-
   if (process.argv.length > 1) {
     if (process.argv[1] && process.argv[1].indexOf('woyou:') != -1) {
       try {
@@ -155,7 +170,7 @@ function createWindow () {
         }
         mainWindow.setProgressBar(item.getReceivedBytes() / totalBytes)
         console.log(downloadObj)
-        downloadObj.sender.send('downloading', ((parseFloat(item.getReceivedBytes()) / parseFloat(totalBytes))*100).toFixed())
+        downloadObj.sender.send('downloading', (parseFloat(item.getReceivedBytes()) / parseFloat(totalBytes))*100)
       }
     })
     item.once('done', (event, state) => {
@@ -183,6 +198,7 @@ function createWindow () {
   appIcon.setToolTip('麦子助手')
   appIcon.on('click', function () {
     if (global.NEWMESSAGE && global.NEWMESSAGE.length > 0) {
+      //getNewMsgWindows()
       newMsgWindow.show()
     } else if (isLogin) {
       if (!mainWindow.isDestroyed()) {
@@ -264,8 +280,10 @@ app.on('activate', () => {
 })
 
 ipc.on('loginSuccess', function (event, userInfo) {
+  registScrollerHotKey()
+  getScrollerhotWindows()
   global.LOGINUSER = userInfo
-  console.log(mainWindow.isDestroyed())
+  getNewMsgWindows()
   getMainWinodw(0)
   loginWindow.close()
   isLogin = true
@@ -392,14 +410,13 @@ ipc.on('newMessage', function (event, data) {
         appIcon.setImage(path.join(__static, './icons/logo-tran.png'))
       }
     }, 400)
-    newMsgWindow.reload()
+    //newMsgWindow.reload()
     newMsgWindow.setBounds({
       y: (electron.screen.getPrimaryDisplay().workAreaSize.height - (83 + (data.length * 49)) - 1),
       x: appIcon.getBounds().x - 130,
       width: 260,
       height: 83 + (data.length * 49)
     })
-    newMsgWindow.setSkipTaskbar(true)
   } else {
     clearInterval(timeout)
     appIcon.setImage(path.join(__static, './icons/logo.png'))
@@ -436,12 +453,10 @@ ipc.on('openSystemNotice', function (event, sessionid) {
 })
 ipc.on('openNewMessage', function (event, currentSession) {
   mainWindow.show()
-  // let urls = process.env.NODE_ENV === 'development' ? `http://localhost:9080/#/index?navType=2` : `file://${__dirname}/index.html#/index?navType=2`
-  // mainWindow.loadURL(urls)
+  mainWindow.setAlwaysOnTop(true)
+  mainWindow.setAlwaysOnTop(false)
   global.NEWMESSAGE.splice(global.NEWMESSAGE.indexOf(currentSession), 1)
-  // global.USER_CURRENTSESSION = currentSession
-  mainEvent.sender.send('openMsgBox')
-  messageEvent.sender.send('openCurrentNewMessage', currentSession.id)
+  mainEvent.sender.send('openMsgBox',currentSession)
   if (global.NEWMESSAGE && global.NEWMESSAGE.length == 0) {
     clearInterval(timeout)
     appIcon.setImage(path.join(__static, './icons/logo.png'))
@@ -462,11 +477,24 @@ ipc.on('ignore-all-message', function (event) {
   clearInterval(timeout)
   appIcon.setImage(path.join(__static, './icons/logo.png'))
   newMsgWindow.hide()
-  for (var i = 0; i < global.NEWMESSAGE.length; i++) {
-    messageEvent.sender.send('ignoreAllUnRead', global.NEWMESSAGE[i].id)
-  }
+  mainEvent.sender.send('ignore-all-unRead')
   global.NEWMESSAGE.length = 0
 })
+ipc.on('create-session', function (event) {
+  mainEvent = event
+  if (messageProtocol) {
+    mainEvent.sender.send('openMsgBox')
+  }
+})
+ipc.on('create-message-session', function (event) {
+  messageEvent = event
+  if (messageProtocol) {
+    setTimeout(function () {
+      messageEvent.sender.send('openCurrentNewMessage', 'p2p-' + messageProtocol)
+      messageProtocol = null
+    }, 3000)
+  }
+})
 ipc.on('download', (evt, pdownloadpath, pfolderpath, dfileName, pmsgId) => {
   try {
     downloadpath = pdownloadpath
@@ -565,7 +593,35 @@ ipc.on('signOut', function (event) {
   appIcon.setContextMenu(contextMenu)
   loginWindow.show()
 })
-
+ipc.on('openPreviwerfile', function (event,url) {
+  global.PREVIWERURL=url
+  getPreviwerFileWindow()
+})
+ipc.on('openPreviwerfile', function (event,url) {
+  global.PREVIWERURL=url
+  getPreviwerFileWindow()
+})
+ipc.on('clearPrevImgs', function (event) {
+  global.PREVIWERIMGS=[]
+})
+ipc.on('addPrevImgs', function (event,url) {
+  global.PREVIWERIMGS.push(url)
+})
+ipc.on('openPreviwerImg', function (event,url) {
+  global.PREVIWERIMG=global.PREVIWERIMGS.indexOf(url)
+  getPreviwerImgWindow()
+})
+ipc.on('openPreviwerVideo', function (event,url) {
+  global.PREVIWERVIDEOURL=url
+  getPreviwerVideoWindow()
+})
+ipc.on('addClipboard', function (event,content) {
+  let img = nativeImage.createFromDataURL(content)
+  clipboard.writeImage(img)
+})
+ipc.on('screens-session', function (event) {
+  screenEvent=event
+})
 let getLoginWindow=function(){
   loginWindow = new BrowserWindow({
     transparent: true,
@@ -623,5 +679,138 @@ let getMainWinodw=function(isLoad){
     hideWindow.setSkipTaskbar(true)
     hideWindow.webContents.closeDevTools()
   }
-  
 }
+let getPreviwerFileWindow=function(){
+  if(!previewfileWindow || previewfileWindow.isDestroyed()){
+    previewfileWindow = new BrowserWindow({
+      transparent: true,
+      frame: false,
+      maximizable: true,
+      resizable: false,
+      show: false,
+      icon: windowIcon,
+      width:electron.screen.getPrimaryDisplay().workAreaSize.width-40,
+      height:electron.screen.getPrimaryDisplay().workAreaSize.height-40,
+      skipTaskbar:true
+    })
+  }
+  previewfileWindow.loadURL(previewfileUrl)
+  previewfileWindow.setMenu(null)
+  previewfileWindow.setAlwaysOnTop(true)
+  previewfileWindow.setAlwaysOnTop(false)
+  previewfileWindow.once('ready-to-show', () => {
+    previewfileWindow.show()
+  })
+}
+let getPreviwerImgWindow=function(){
+  if(!previwerImgWindow || previwerImgWindow.isDestroyed()){
+    previwerImgWindow = new BrowserWindow({
+      transparent: true,
+      frame: false,
+      maximizable: true,
+      resizable: false,
+      show: false,
+      icon: windowIcon,
+      width:electron.screen.getPrimaryDisplay().workAreaSize.width-40,
+      height:electron.screen.getPrimaryDisplay().workAreaSize.height-40,
+      skipTaskbar:true
+    })
+  }
+  previwerImgWindow.loadURL(previewfileImg)
+  previwerImgWindow.setMenu(null)
+  previwerImgWindow.setAlwaysOnTop(true)
+  previwerImgWindow.setAlwaysOnTop(false)
+  previwerImgWindow.once('ready-to-show', () => {
+    previwerImgWindow.show()
+  })
+}
+
+let getPreviwerVideoWindow=function(){
+  if(!previwerVideoWindow || previwerVideoWindow.isDestroyed()){
+    previwerVideoWindow = new BrowserWindow({
+      transparent: true,
+      frame: false,
+      maximizable: true,
+      resizable: false,
+      show: false,
+      icon: windowIcon,
+      width:400,
+      height:600,
+      skipTaskbar:true
+    })
+  }
+  previwerVideoWindow.loadURL(previewfVideoUrl)
+  previwerVideoWindow.setMenu(null)
+  previwerVideoWindow.setAlwaysOnTop(true)
+  previwerVideoWindow.setAlwaysOnTop(false)
+  previwerVideoWindow.once('ready-to-show', () => {
+    previwerVideoWindow.show()
+  })
+}
+
+let getNewMsgWindows=function(){
+  if(!newMsgWindow || newMsgWindow.isDestroyed()){
+    newMsgWindow = new BrowserWindow({
+      transparent: true,
+      frame: false,
+      maximizable: false,
+      resizable: false,
+      show: false,
+      useContentSize: true,
+      alwaysOnTop: true,
+      width: 260,
+      icon: windowIcon,
+      skipTaskbar:true
+    })
+  }
+  let urls = process.env.NODE_ENV === 'development' ? `http://localhost:9080/#/newmsg` : `file://${__dirname}/index.html#newmsg`
+  newMsgWindow.loadURL(urls)
+}
+let getScrollerhotWindows=function(){
+  // let scroll_info=electron.screen.getAllDisplays()
+  scrollerhotWindows = new BrowserWindow({
+    transparent: true,
+    frame: false,
+    maximizable: false,
+    resizable: false,
+    show: false,
+    alwaysOnTop: true,
+    icon: windowIcon,
+    webPreferences:{webSecurity: false}
+  })
+  let urls = process.env.NODE_ENV === 'development' ? `http://localhost:9080/#/scrollerhot` : `file://${__dirname}/index.html#scrollerhot`
+  scrollerhotWindows.loadURL(urls)
+  scrollerhotWindows.setFullScreen(true)
+}
+let registScrollerHotKey=function(){
+  globalShortcut.register('CommandOrControl+Alt+Q', function () {
+    let p=require('os').userInfo().homedir+'\\Pictures\\MAGE_'+formatDate(new Date(),'yyyyMMddHHmmss')+'.png'
+    global.DEFAULT_SCREENSHOT_PATH=p
+    screenshot({format: 'png',filename:p}).then((img) => {
+      screenEvent.sender.send('new-hot')
+      scrollerhotWindows.show()
+    }).catch((err) => {
+      console.log(err)
+    })
+  })
+}
+let formatDate=function(date,format){ 
+  var o = { 
+    "M+" : date.getMonth()+1, //month 
+    "d+" : date.getDate(), //day 
+    "h+" : date.getHours(), //hour 
+    "m+" : date.getMinutes(), //minute 
+    "s+" : date.getSeconds(), //second 
+    "q+" : Math.floor((date.getMonth()+3)/3), //quarter 
+    "S" : date.getMilliseconds() //millisecond 
+  }; 
+  if(/(y+)/.test(format)) { 
+    format = format.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); 
+  } 
+  for(var k in o) { 
+    if(new RegExp("("+ k +")").test(format)) { 
+      format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); 
+    } 
+  } 
+  return format; 
+};
\ No newline at end of file

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/chateditor.vue

+<template>
+  <div class="user-input-box">
+    <div class="tool-box">
+      <el-tooltip class="item" effect="dark" content="表情" placement="top">
+        <i class="iconfont iconface" @click.stop="showEmoji()"></i>
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="发送图片" placement="top">
+        <i class="iconfont icontupian1" @click.stop="showUpload(0)"></i>
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="发送文件" placement="top">
+        <i class="iconfont iconwenjianjia" @click.stop="showUpload(1)"></i>
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="向同事发送窗口抖动" placement="top">
+        <i class="iconfont iconzhendong" @click.stop="sendDou"></i>
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="截图" placement="top">
+        <i class="iconfont iconjietu"></i>
+      </el-tooltip>
+      <input
+        type="file"
+        ref="fileToSent"
+        :accept="accpet"
+        v-show="false"
+        @change="sendFileMsg"
+        multiple="multiple"
+      >
+    </div>
+    <div draggable="true" @dragstart="drag($event)" id="text-box" ref="box">
+      <textarea v-model="msgToSent" class="input" @keyup.13="sendTextMsg"></textarea>
+    </div>
+    <div class="bottom-op-box">
+      <span class="errorTip">{{errorTip}}</span>
+      <button class="send-msg" @click="sendTextMsg">发送</button>
+    </div>
+    <chat-emoji
+      v-bind:type="type"
+      v-bind:scene="scene"
+      v-bind:to="to"
+      v-show="isEmojiShown"
+      v-on:add-emoji="addEmoji"
+      v-on:hide-emoji="hideEmoji"
+    ></chat-emoji>
+  </div>
+</template>
+
+<script>
+import ChatEmoji from "./chatemoji";
+import util from "../../../utils/";
+import config from "../../../configs";
+import BMF from "browser-md5-file";
+import kscreenshot from "kscreenshot";
+export default {
+  components: {
+    ChatEmoji
+  },
+  updated() {
+    window.document.body.addEventListener("click", () => {
+      this.isEmojiShown = false;
+    });
+  },
+  mounted() {
+    // 绑定拖拽时间
+    this.addDropSupport();
+    new kscreenshot({
+      key: 65
+    });
+  },
+  props: {
+    type: String,
+    scene: String,
+    to: String,
+    isRobot: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    invalid: {
+      type: Boolean,
+      default: false
+    },
+    invalidHint: {
+      type: String,
+      default: "您无权限发送消息"
+    },
+    advancedTeam: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    continueRobotAccid(curVal, oldVal) {
+      if (curVal && this.robotInfos[curVal]) {
+        this.msgToSent = `@${this.robotInfos[curVal].nick} `;
+      }
+      // 重置
+      this.$store.dispatch("continueRobotMsg", "");
+    },
+    msgToSent(curVal, oldVal) {
+      if (this.isRobot) {
+        return;
+      }
+      let indexAt = this.msgToSent.indexOf("@");
+      if (indexAt >= 0 && indexAt === this.msgToSent.length - 1) {
+        if (this.robotslist && this.robotslist.length > 0) {
+          this.isRobotListShown = true;
+        }
+      } else if (this.isRobotListShown === true) {
+        this.isRobotListShown = false;
+      }
+    }
+  },
+  data() {
+    return {
+      errorTip: "",
+      isEmojiShown: false,
+      isRobotListShown: false,
+      msgToSent: "",
+      icon1: `${config.resourceUrl}/im/chat-editor-1.png`,
+      icon2: `${config.resourceUrl}/im/chat-editor-2.png`,
+      icon3: `${config.resourceUrl}/im/chat-editor-3.png`,
+      accpet: "",
+      canSendDou: true
+    };
+  },
+  computed: {
+    continueRobotAccid() {
+      return this.$store.state.continueRobotAccid;
+    },
+    robotslist() {
+      return this.$store.state.robotslist;
+    },
+    robotInfos() {
+      return this.$store.state.robotInfos;
+    },
+    robotInfosByNick() {
+      return this.$store.state.robotInfosByNick;
+    }
+  },
+  methods: {
+    dataURLtoBlob(dataurl) {
+      var arr = dataurl.split(","),
+        mime = arr[0].match(/:(.*?);/)[1],
+        bstr = atob(arr[1]),
+        n = bstr.length,
+        u8arr = new Uint8Array(n);
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new Blob([u8arr], { type: mime });
+    },
+    bytesToSize(bytes) {
+      if (bytes === 0) return "0B";
+      var k = 1024;
+      var sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+      var i = Math.floor(Math.log(bytes) / Math.log(k));
+      return (bytes / Math.pow(k, i)).toFixed(1) + sizes[i];
+    },
+    addDropSupport() {
+      let BOX = this.$refs.box;
+      BOX.addEventListener("drop", e => {
+        e.preventDefault();
+        if (this.readonly) return false;
+        let fileList = e.dataTransfer.files;
+        if (fileList.length === 0) {
+          return false;
+        }
+        let crt = this;
+        for (var i = 0; i < fileList.length; i++) {
+          let crtItem = fileList[i];
+          const bmf = new BMF();
+          bmf.md5(
+            crtItem,
+            (err, md5) => {
+              crt.setLocationPath(md5, crtItem.path);
+              crt.readBlobAsDataURL(crtItem, function(dataurl) {
+                crt.$store.dispatch("sendDataUrlMsg", {
+                  scene: crt.scene,
+                  to: crt.to,
+                  dataURL: dataurl,
+                  name: crtItem.name,
+                  size: crt.bytesToSize(crtItem.size),
+                  md5
+                });
+              });
+            },
+            progress => {}
+          );
+        }
+      });
+    },
+    setLocationPath(msgId, path) {
+      let downloadFileList = [];
+      let isHave = false;
+      if (window.localStorage.downloadFileList) {
+        downloadFileList = JSON.parse(window.localStorage.downloadFileList);
+        downloadFileList.forEach((item, index) => {
+          if (item.msgID === msgId) {
+            item.locationPath = path;
+            isHave = true;
+          }
+        });
+      }
+      if (!isHave) {
+        downloadFileList.push({
+          msgID: msgId + "_me",
+          locationPath: path
+        });
+      }
+      window.localStorage.downloadFileList = JSON.stringify(downloadFileList);
+    },
+    sendTextMsg() {
+      this.errorTip = "";
+      if (/^\s*$/.test(this.msgToSent)) {
+        // this.errorTip='请不要刷屏'
+        return;
+      } else if (this.msgToSent.length > 800) {
+        this.errorTip = "请不要超过800个字";
+        return;
+      }
+      this.msgToSent = this.msgToSent.trim();
+      if (this.type === "session") {
+        // 如果是机器人
+        if (this.isRobot) {
+          this.$store.dispatch("sendRobotMsg", {
+            type: "text",
+            scene: this.scene,
+            to: this.to,
+            robotAccid: this.to,
+            // 机器人后台消息
+            content: this.msgToSent,
+            // 显示的文本消息
+            body: this.msgToSent
+          });
+        } else {
+          let robotAccid = "";
+          let robotText = "";
+
+          let atUsers = this.msgToSent.match(/@[^\s@$]+/g);
+          if (atUsers) {
+            for (let i = 0; i < atUsers.length; i++) {
+              let item = atUsers[i].replace("@", "");
+              if (this.robotInfosByNick[item]) {
+                robotAccid = this.robotInfosByNick[item].account;
+                robotText = (this.msgToSent + "")
+                  .replace(atUsers[i], "")
+                  .trim();
+                break;
+              }
+            }
+          }
+          if (robotAccid) {
+            if (robotText) {
+              this.$store.dispatch("sendRobotMsg", {
+                type: "text",
+                scene: this.scene,
+                to: this.to,
+                robotAccid,
+                // 机器人后台消息
+                content: robotText,
+                // 显示的文本消息
+                body: this.msgToSent
+              });
+            } else {
+              this.$store.dispatch("sendRobotMsg", {
+                type: "welcome",
+                scene: this.scene,
+                to: this.to,
+                robotAccid,
+                // 显示的文本消息
+                body: this.msgToSent
+              });
+            }
+          } else {
+            this.$store.dispatch("sendMsg", {
+              type: "text",
+              scene: this.scene,
+              to: this.to,
+              text: this.msgToSent
+            });
+          }
+        }
+      } else if (this.type === "chatroom") {
+        let robotAccid = "";
+        let robotText = "";
+
+        let atUsers = this.msgToSent.match(/@[^\s@$]+/g);
+        if (atUsers) {
+          for (let i = 0; i < atUsers.length; i++) {
+            let item = atUsers[i].replace("@", "");
+            if (this.robotInfosByNick[item]) {
+              robotAccid = this.robotInfosByNick[item].account;
+              robotText = (this.msgToSent + "").replace(atUsers[i], "").trim();
+              break;
+            }
+          }
+        }
+        if (robotAccid) {
+          if (robotText) {
+            this.$store.dispatch("sendChatroomRobotMsg", {
+              type: "text",
+              robotAccid,
+              // 机器人后台消息
+              content: robotText,
+              // 显示的文本消息
+              body: this.msgToSent
+            });
+          } else {
+            this.$store.dispatch("sendChatroomRobotMsg", {
+              type: "welcome",
+              robotAccid,
+              // 显示的文本消息
+              body: this.msgToSent
+            });
+          }
+        } else {
+          this.$store.dispatch("sendChatroomMsg", {
+            type: "text",
+            text: this.msgToSent
+          });
+        }
+      }
+      this.msgToSent = "";
+    }, // 产品消息，用于快捷发送产品IM消息
+    sendDou() {
+      if (this.canSendDou) {
+        this.canSendDou = false;
+        this.$store.dispatch("sendTip", {
+          scene: this.scene,
+          to: this.to,
+          tip: "抖了一下"
+        });
+        this.MsgBus.$emit("doudong");
+        setTimeout(() => {
+          this.canSendDou = true;
+        }, 1000 * 10);
+      } else {
+        this.Error("你抖动的太频繁了，休息一下吧");
+      }
+    },
+    sendProductCustomMsg() {
+      var jsondb = { data: 1, url: "wy://adveriew/15" };
+      if (this.type === "session") {
+        this.$store.dispatch("sendMsg", {
+          type: "text",
+          scene: this.scene,
+          to: this.to,
+
+          text: "普吉5日游 ",
+          custom: jsondb
+        });
+      } else if (this.type === "chatroom") {
+        this.$store.dispatch("sendChatroomMsg", {
+          type: "text",
+          text: "普吉5日游",
+          custom: jsondb
+        });
+      }
+    },
+    sendPlayMsg() {
+      // 发送猜拳消息
+      if (this.type === "session") {
+        this.$store.dispatch("sendMsg", {
+          type: "custom",
+          scene: this.scene,
+          to: this.to,
+          pushContent: "[猜拳]",
+          content: {
+            type: 1,
+            data: {
+              value: Math.ceil(Math.random() * 3)
+            }
+          }
+        });
+      } else if (this.type === "chatroom") {
+        this.$store.dispatch("sendChatroomMsg", {
+          type: "custom",
+          pushContent: "[猜拳]",
+          content: {
+            type: 1,
+            data: {
+              value: Math.ceil(Math.random() * 3)
+            }
+          }
+        });
+      }
+    },
+    sendFileMsg(e) {
+      let ipt = this.$refs.fileToSent;
+      let files = e.target.files;
+      let that = this;
+      if (files.length > 0) {
+        for (var i = 0; i < files.length; i++) {
+          let crtItem = files[i];
+          const bmf = new BMF();
+          bmf.md5(
+            crtItem,
+            (err, md5) => {
+              that.setLocationPath(md5, crtItem.path);
+              that.readBlobAsDataURL(crtItem, function(dataurl) {
+                that.$store.dispatch("sendDataUrlMsg", {
+                  scene: that.scene,
+                  to: that.to,
+                  dataURL: dataurl,
+                  name: crtItem.name,
+                  size: that.bytesToSize(crtItem.size),
+                  md5
+                });
+              });
+            },
+            progress => {}
+          );
+        }
+      }
+    },
+    showUpload(type) {
+      if (type == 0) this.accpet = "image/*";
+      else this.accpet = "";
+      this.$refs.fileToSent.click();
+    },
+    showEmoji() {
+      this.isEmojiShown = !this.isEmojiShown;
+    },
+    hideEmoji() {
+      this.isEmojiShown = false;
+    },
+    addEmoji(emojiName) {
+      console.log("emojiName");
+      this.msgToSent += emojiName;
+      //this.hideEmoji()
+    },
+    chooseRobot(robot) {
+      if (robot && robot.account) {
+        let len = this.msgToSent.length;
+        if (len === 0 || this.msgToSent[len - 1] !== "@") {
+          this.msgToSent += "@" + robot.nick + " ";
+        }
+        {
+          this.msgToSent += robot.nick + " ";
+        }
+      }
+    },
+    hideRobotList() {
+      this.isRobotListShown = false;
+    },
+    readBlobAsDataURL(blob, callback) {
+      var a = new FileReader();
+      a.onload = function(e) {
+        callback(e.target.result);
+      };
+      a.readAsDataURL(blob);
+    }
+  }
+};
+</script>
+<style scope>
+.user-input-box {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background: #fff;
+}
+.user-input-box input[type="file"] {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+}
+.user-input-box .tool-box {
+  padding: 5px 10px;
+  -webkit-user-select: none !important;
+}
+.user-input-box .tool-box i {
+  margin-right: 10px;
+  color: #666;
+  font-size: 20px;
+  cursor: pointer;
+  font-weight: 500;
+}
+.user-input-box .input {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 8px;
+  -webkit-app-region: no-drag !important;
+  outline: none;
+  overflow-y: auto;
+  cursor: text;
+  display: block;
+  resize: none;
+  border: none;
+  -webkit-user-select: text !important;
+  font-family: "Microsoft YaHei" !important;
+}
+.user-input-box .input::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+  background-color: #f5f5f5;
+}
+/*定义滚动条的轨道，内阴影及圆角*/
+.user-input-box .input::-webkit-scrollbar-track {
+  background-color: #f5f5f5;
+}
+/*定义滑块，内阴影及圆角*/
+.user-input-box .input::-webkit-scrollbar-thumb {
+  border-radius: 20px;
+  background-color: #aaa;
+  margin-bottom: 24px;
+}
+.user-input-box .input:hover::-webkit-scrollbar,
+.user-input-box .input:focus::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+  background-color: #f5f5f5;
+}
+
+.user-input-box .bottom-op-box {
+  text-align: right;
+  padding-right: 20px;
+  position: relative;
+}
+
+.user-input-box .bottom-op-box .errorTip {
+  color: #ef4455;
+  font-size: 12px;
+  position: absolute;
+  left: 30px;
+  top: 10px;
+}
+
+.user-input-box .bottom-op-box .send-msg {
+  height: 35px;
+  padding: 0px 30px;
+  font-size: 16px;
+  background: #fff;
+  border: none;
+  outline: none;
+  color: #444;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 1px solid #dfdfdf;
+  margin-top: 5px;
+}
+.user-input-box .bottom-op-box .close-letter {
+  height: 35px;
+  padding: 0px 30px;
+  font-size: 16px;
+  background: #e0af1b;
+  border: none;
+  outline: none;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-right: 10px;
+}
+.user-input-box .readBtn,
+.user-input-box .send-msg:hover {
+  color: #fff !important;
+  background: rgba(71, 121, 255, 1) !important;
+  border-color: rgba(71, 165, 255, 1);
+}
+#text-box {
+  -webkit-app-region: no-drag !important;
+  height: calc(100% - 82px);
+}
+#text-box .input {
+  width: 100%;
+  height: 100%;
+}
+</style>

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/chatitem.vue

@@ -11,7 +11,9 @@
   >
     <div v-if="msg.type==='timeTag'" class="timeTag">{{msg.showText}}</div>
     <div v-else-if="msg.type==='tip'" class="tip">
-      <span>{{msg.showText}}</span>
+      <span v-if="msg.showText!='抖了一下'">{{msg.showText}}</span>
+      <span v-else-if="msg.flow==='out'">你发送了一个抖动窗口</span>
+      <span v-else>对方抖了你一下</span>
     </div>
     <div v-else-if="msg.type==='notification' && msg.scene==='team'" class="notification">
       <el-alert :title="msg.showText" type="success" :closable="false"></el-alert>
@@ -39,8 +41,17 @@
       <span v-if="msg.type==='text'" class="msg-text" v-html="msg.showText"></span>
       <span v-else-if="msg.type==='custom-type1'" class="msg-text" ref="mediaMsg"></span>
       <span v-else-if="msg.type==='custom-type3'" class="msg-text" ref="mediaMsg"></span>
-      <span v-else-if="msg.type==='image'" class="msg-text" ref="mediaMsg"></span>
-      <span v-else-if="msg.type==='video'" class="msg-text video">
+      <span
+        v-else-if="msg.type==='image'"
+        class="msg-text"
+        ref="mediaMsg"
+        @click="openPreviwerImg(msg.file.url)"
+      ></span>
+      <span
+        v-else-if="msg.type==='video'"
+        class="msg-text video"
+        @click="openPreviwerVideo(msg.file.url)"
+      >
         <video :src="msg.file.url" loop muted width="200" ref="msgvideo"></video>
       </span>
       <span
@@ -63,22 +74,29 @@
             </div>
           </div>
           <div class="opera-box">
-            <div class="pro" v-if='progess!=-1'>
-              <el-progress :percentage="progess" :show-text='false'></el-progress>
+            <div class="pro" v-if="progess!=-1">
+              <el-progress :percentage="progess" :show-text="false"></el-progress>
             </div>
-            
+
             <div class="state" v-if="msg.locationPath!=='' && msg.locationPath!=='-1'">
-              <i class="iconfont icondagou"></i>已成功下载到本地
+              <i class="iconfont icondagou"></i>{{msg.flow=='out'?'发送成功':'已成功下载到本地'}}
             </div>
-            <div class="state" v-else>{{msg.locationPath!=='-1'?'未下载临时文件':'本地文件已被移除'}}</div>
+            <div class="state" v-else>{{msg.locationPath!=='-1' && msg.flow=='out'?'未下载临时文件':'本地文件已被移除'}}</div>
             <div class="btn" v-if="msg.locationPath!=='' && msg.locationPath!=='-1'">
               <div class="item_btn" @click="openLocaltion(msg.locationPath)">打开</div>
               <div class="item_btn" @click="openLocaltionFoled(msg.locationPath)">打开文件夹</div>
               <div class="item_btn" @click="downloadFile(msg,1)">另存为</div>
             </div>
             <div class="btn" v-else>
-              <div class="item_btn" @click="downloadFile(msg,0)">{{msg.locationPath!=='-1'?'下载':'重新下载'}}</div>
-              <div class="item_btn" v-if="msg.ispreviwer">预览</div>
+              <div
+                class="item_btn"
+                @click="downloadFile(msg,0)"
+              >{{msg.locationPath!=='-1'?'下载':'重新下载'}}</div>
+              <div
+                class="item_btn"
+                v-if="msg.ispreviwer"
+                @click="openPreviwerfile(msg.file.url,msg.file.name)"
+              >预览</div>
               <div class="item_btn" @click="downloadFile(msg,1)">另存为</div>
             </div>
           </div>
@@ -197,7 +215,8 @@ export default {
     return {
       msg: "",
       isDownloading: false,
-      progess:-1
+      progess: -1,
+      douTimer:null
     };
   },
   computed: {
@@ -244,11 +263,12 @@ export default {
         media.style.marginBottom = "-14px";
         media.style.borderRadius = "6px";
         media.style.paddingRight = "-10px";
+        media.style.width = '170px'
         media.src = item.file.url + "?imageView&thumbnail=180x0&quality=85";
         if (item.flow === "in") {
           this.$refs.mediaMsg.style.width = "170px";
           this.$refs.mediaMsg.style.overflow = "hidden";
-          media.style.marginLeft = "-18px";
+          media.style.marginLeft = "-10px";
           this.$refs.mediaMsgSplit.style.background = `url('${
             media.src
           }')  top left`;
@@ -286,6 +306,7 @@ export default {
     }); // end this.nextTick
   },
   methods: {
+    
     computedItem() {
       let item = Object.assign({}, this.rawMsg);
       // 标记用户，区分聊天室、普通消息
@@ -326,7 +347,7 @@ export default {
             if (emojiCnt[text]) {
               item.showText = item.showText.replace(
                 text,
-                `<img class="emoji-small" src="${emojiCnt[text].img}">`
+                `<img class="emoji-small" style='width:28px;' src="${emojiCnt[text].img}">`
               );
             }
           });
@@ -353,13 +374,14 @@ export default {
         } else {
           this.formatCustom(item);
           item.showText = util.parseCustomMsg(item);
-          // if (item.showText !== "[自定义消息]") {
-          //   item.showText += ",请到手机或电脑客户端查看";
-          // }
+          if (item.showText == "[自定义消息]") {
+            item.showText = "请到手机端查看此消息";
+          }
         }
       } else if (item.type === "image") {
         // 原始图片全屏显示
         item.originLink = item.file.url;
+        this.$electron.ipcRenderer.send("addPrevImgs", item.file.url);
       } else if (item.type === "video") {
         // ...
       } else if (item.type === "audio") {
@@ -374,6 +396,7 @@ export default {
       } else if (item.type === "file") {
         item.fileLink = item.file.url;
         item.showText = item.file.name;
+        this.formatFile(item);
       } else if (item.type === "notification") {
         if (item.scene === "team") {
           item.showText = util.generateTeamSysmMsg(item);
@@ -442,7 +465,6 @@ export default {
             name: item.customData.content.fileName
           };
         } else {
-          console.log(item);
           if (item.customData.content.fileName) {
             let exts = item.customData.content.fileName.split(".");
             let fileType = exts[exts.length - 1].toLowerCase();
@@ -454,7 +476,7 @@ export default {
               size: item.customData.content.fileSize,
               icon: this.loadFileICON(fileType)
             };
-            item.ispreviwer = /(doc|docx|xls|xlsx|ppt|pptx|txt|pdf)/i.test(
+            item.ispreviwer = /(doc|docx|xls|xlsx|ppt|pptx|pdf)/i.test(
               item.file.ext
             );
             item.showText = item.customData.content.fileName;
@@ -471,6 +493,60 @@ export default {
         }
       }
     },
+    formatFile(item) {
+      if (item.custom && item.custom != "") {
+        item.customData = JSON.parse(item.custom);
+        if (
+          item.customData.msgtype &&
+          item.customData.msgtype == "custom_file"
+        ) {
+          item.customData = item.customData.data;
+          if (item.customData.content.fileName) {
+            let exts = item.customData.content.fileName.split(".");
+            let fileType = exts[exts.length - 1].toLowerCase();
+            item.type = "file";
+            item.file = {
+              url: item.fileLink.split("?")[0],
+              ext: exts[exts.length - 1].toLowerCase(),
+              name: item.customData.content.fileName,
+              size: item.customData.content.fileSize,
+              icon: this.loadFileICON(fileType),
+              md5: item.customData.content.md5
+            };
+            item.ispreviwer = /(doc|docx|xls|xlsx|ppt|pptx|pdf)/i.test(
+              item.file.ext
+            );
+            item.showText = item.customData.content.fileName;
+            let key = item.file.md5?item.file.md5:this.$encrypt.Encrypt(JSON.stringify(item.customData));
+            key = item.flow=='in'?key:key+"_me";
+            item.locationPath = this.getLocationPath(key);
+            item.locationFolder =
+              item.locationPath === ""
+                ? ""
+                : item.locationPath.substring(
+                    0,
+                    item.locationPath.lastIndexOf("\\") + 1
+                  );
+          }
+        }
+      } else {
+        item.showText = item.file.name;
+        let key = item.flow=='in'?item.file.md5:item.file.md5+"_me";
+        item.ispreviwer = /(doc|docx|xls|xlsx|ppt|pptx|pdf)/i.test(
+            item.file.ext
+          );
+        item.file.icon = this.loadFileICON(item.file.ext)
+        item.locationPath = this.getLocationPath(key);
+        item.file.size = this.bytesToSize(item.file.size)
+        item.locationFolder =
+          item.locationPath === ""
+            ? ""
+            : item.locationPath.substring(
+                0,
+                item.locationPath.lastIndexOf("\\") + 1
+              );
+      }
+    },
     downloadFile(msg, type) {
       event.preventDefault();
       if (type == 1) {
@@ -479,7 +555,9 @@ export default {
         this.$electron.remote.dialog.showSaveDialog(
           {
             title: "麦子助手另存文件",
-            defaultPath: this.$electron.remote.getGlobal("defaultdownloaddir") + msg.file.name,
+            defaultPath:
+              this.$electron.remote.getGlobal("defaultdownloaddir") +
+              msg.file.name,
             filters: [{ name: "麦子助手文件", extensions: [msg.file.ext] }]
           },
           function(res) {
@@ -496,7 +574,7 @@ export default {
     },
     beginDownload(res) {
       this.isDownloading = true;
-      let key = this.$encrypt.Encrypt(JSON.stringify(this.msg.customData));
+      let key = this.msg.file.md5?this.msg.file.md5:this.$encrypt.Encrypt(JSON.stringify(this.msg.customData));
       let name = res.substring(res.lastIndexOf("\\") + 1, res.length);
       this.$electron.ipcRenderer.send(
         "download",
@@ -507,16 +585,19 @@ export default {
       );
       let that = this;
       this.$electron.ipcRenderer.on("downloading", (event, progess) => {
-        that.progess=progess
-      })
+        that.progess = progess;
+      });
       this.$electron.ipcRenderer.once("downloadOver", (event, msgId, lpath) => {
         //that.progess=-1
         setTimeout(() => {
-          that.progess=-1
+          that.progess = -1;
         }, 1000);
-        this.$electron.ipcRenderer.removeListener("downloading", (event, progess) => {
-          that.progess=progess
-        });
+        this.$electron.ipcRenderer.removeListener(
+          "downloading",
+          (event, progess) => {
+            that.progess = progess;
+          }
+        );
         let downloadFileList = [];
         that.isDownloading = false;
         let newDownLoad = { msgID: msgId, locationPath: lpath };
@@ -561,11 +642,11 @@ export default {
       if (window.localStorage.downloadFileList) {
         let downloadFileList = JSON.parse(window.localStorage.downloadFileList);
         downloadFileList.forEach((item, index) => {
-          if (item.msgID === msgId) {
-            item.locationPath='-1'
+          if (item.msgID == msgId) {
+            item.locationPath = "-1";
           }
         });
-        window.localStorage.downloadFileList=JSON.stringify(downloadFileList)
+        window.localStorage.downloadFileList = JSON.stringify(downloadFileList);
       }
     },
     bytesToSize(bytes) {
@@ -575,6 +656,21 @@ export default {
       var i = Math.floor(Math.log(bytes) / Math.log(k));
       return (bytes / Math.pow(k, i)).toFixed(1) + sizes[i];
     },
+    openPreviwerfile(url, name) {
+      if (/(.doc|.docx|.xls|.xlsx|.ppt|.pptx)/i.test(name)) {
+        url = `https://view.officeapps.live.com/op/view.aspx?src=${url}`;
+      } else if (/(.pdf|.txt)/i.test(name)) {
+        url = `http://reborn.oytour.com/plug/pdf/web/viewer.html?file=${url}`;
+      }
+      //|txt|pdf
+      this.$electron.ipcRenderer.send("openPreviwerfile", url);
+    },
+    openPreviwerImg(url) {
+      this.$electron.ipcRenderer.send("openPreviwerImg", url);
+    },
+    openPreviwerVideo(url) {
+      this.$electron.ipcRenderer.send("openPreviwerVideo", url);
+    },
     revocateMsg(vNode) {
       // 在会话聊天页
       if (this.$store.state.currSessionId) {
@@ -640,24 +736,20 @@ export default {
       this.$store.dispatch("continueRobotMsg", robotAccid);
     },
     openLocaltion(path) {
-      this.$electron.ipcRenderer.send("OpenFile", path)
-      let that=this
+      this.$electron.ipcRenderer.send("OpenFile", path);
+      let that = this;
       this.$electron.ipcRenderer.once("FileExsit", (event, have) => {
-        if(!have){
-          that.removeLocationPath(path)
-          that.msg.locationPath='-1'
-          that.msg.locationFolder=''
+        if (!have) {
+          that.removeLocationPath(
+            that.$encrypt.Encrypt(JSON.stringify(that.msg.customData))
+          );
+          that.msg.locationPath = "-1";
+          that.msg.locationFolder = "";
         }
-      })
+      });
     },
     openLocaltionFoled(path) {
       this.$electron.ipcRenderer.send("showItemInFolder", path);
-      
-    },
-    showFullImg(src) {
-      this.$store.dispatch("showFullscreenImg", {
-        src
-      });
     },
     autoPlayNextUnreadAudio() {
       var parentNode = audio.$node && audio.$node.parentElement;
@@ -876,6 +968,8 @@ export default {
   -webkit-user-select: text !important;
   box-sizing: border-box;
   border: 1px solid rgb(220, 220, 220);
+  max-width: calc(100% - 60px);
+  word-wrap: break-word;
 }
 .item-me .out span {
   background: rgba(71, 165, 255, 1);
@@ -969,7 +1063,7 @@ export default {
   position: relative;
   padding-top: 7px;
 }
-.file-box .opera-box .pro{
+.file-box .opera-box .pro {
   height: 5px;
   top: -4px;
   left: 5px;

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