From d0e684907f4bd95425f3aa1f4f6dd106e5c28f1e Mon Sep 17 00:00:00 2001 From: xsx <825657193@qq.com> Date: Sun, 24 Nov 2024 15:56:47 +0800 Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E4=BB=A3=E7=A0=81=E6=A0=BC?= =?UTF-8?q?=E5=BC=8F=E5=8C=96(=E4=BD=BF=E7=94=A8vscode=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E6=A0=BC=E5=BC=8F)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 - README.md | 6 +- im-web/src/App.vue | 2 - im-web/src/api/camera.js | 10 +- im-web/src/api/date.js | 18 +- im-web/src/api/element.js | 8 +- im-web/src/api/emotion.js | 4 +- im-web/src/api/httpRequest.js | 2 +- im-web/src/api/messageType.js | 24 +- im-web/src/api/rtcGroupApi.js | 36 +- im-web/src/api/rtcPrivateApi.js | 16 +- im-web/src/api/webrtc.js | 26 +- im-web/src/api/wssocket.js | 42 +- im-web/src/components/chat/ChatAtBox.vue | 216 +-- im-web/src/components/chat/ChatBox.vue | 1332 ++++++++--------- .../src/components/chat/ChatGroupMember.vue | 18 +- .../src/components/chat/ChatGroupReaded.vue | 20 +- im-web/src/components/chat/ChatGroupSide.vue | 19 +- im-web/src/components/chat/ChatHistory.vue | 275 ++-- im-web/src/components/chat/ChatInput.vue | 994 ++++++------ im-web/src/components/chat/ChatItem.vue | 360 +++-- .../src/components/chat/ChatMessageItem.vue | 640 ++++---- im-web/src/components/chat/ChatRecord.vue | 225 ++- im-web/src/components/common/Emotion.vue | 118 +- im-web/src/components/common/FileUpload.vue | 169 ++- im-web/src/components/common/FullImage.vue | 102 +- im-web/src/components/common/HeadImage.vue | 201 ++- im-web/src/components/common/Icp.vue | 28 +- im-web/src/components/common/RightMenu.vue | 98 +- im-web/src/components/common/UserInfo.vue | 198 ++- im-web/src/components/friend/AddFriend.vue | 209 +-- im-web/src/components/friend/FriendItem.vue | 214 +-- .../src/components/group/AddGroupMember.vue | 22 +- im-web/src/components/group/GroupItem.vue | 81 +- im-web/src/components/group/GroupMember.vue | 106 +- .../src/components/group/GroupMemberItem.vue | 18 +- .../components/group/GroupMemberSelector.vue | 214 +-- im-web/src/components/rtc/RtcGroupJoin.vue | 192 +-- im-web/src/components/rtc/RtcGroupVideo.vue | 36 +- .../src/components/rtc/RtcPrivateAcceptor.vue | 185 +-- im-web/src/components/rtc/RtcPrivateVideo.vue | 30 +- im-web/src/components/setting/Setting.vue | 14 +- im-web/src/main.js | 2 +- im-web/src/router/index.js | 70 +- im-web/src/store/chatStore.js | 8 +- im-web/src/store/configStore.js | 16 +- im-web/src/store/friendStore.js | 50 +- im-web/src/store/index.js | 4 +- im-web/src/store/uiStore.js | 26 +- im-web/src/store/userStore.js | 24 +- im-web/src/utils/directive/dialogDrag.js | 136 +- im-web/src/view/Chat.vue | 10 +- im-web/src/view/Friend.vue | 320 ++-- im-web/src/view/Group.vue | 34 +- im-web/src/view/Home.vue | 20 +- im-web/src/view/Login.vue | 249 ++- im-web/src/view/Register.vue | 265 ++-- 截图/交流群2.png | Bin 135680 -> 0 bytes 58 files changed, 3866 insertions(+), 3897 deletions(-) delete mode 100644 截图/交流群2.png diff --git a/.gitignore b/.gitignore index 8142a07..09144bf 100644 --- a/.gitignore +++ b/.gitignore @@ -12,4 +12,3 @@ /im-web/dist/ /im-uniapp/node_modules/ /im-uniapp/package-lock.json -/im-uniapp/unpackage/ diff --git a/README.md b/README.md index d7dc508..7ee367b 100644 --- a/README.md +++ b/README.md @@ -122,9 +122,9 @@ https://www.yuque.com/u1475064/mufu2a/vn5u10ephxh9sau8 ![输入图片说明](%E6%88%AA%E5%9B%BE/app/2.jpg) #### 加入交流群 -1群目前已满员,扫码进入2群: - -![输入图片说明](%E6%88%AA%E5%9B%BE/%E4%BA%A4%E6%B5%81%E7%BE%A42.png) +群1: 741174521(已满) +群2: 937470451(已满) +群3: 欢迎进群与小伙们一起交流, **申请加群前请务必先star哦** diff --git a/im-web/src/App.vue b/im-web/src/App.vue index c34d3a7..50069d7 100644 --- a/im-web/src/App.vue +++ b/im-web/src/App.vue @@ -12,7 +12,6 @@ export default { diff --git a/im-web/src/api/camera.js b/im-web/src/api/camera.js index eb479cd..dc75a78 100644 --- a/im-web/src/api/camera.js +++ b/im-web/src/api/camera.js @@ -5,13 +5,13 @@ class ImCamera { } } -ImCamera.prototype.isEnable = function() { +ImCamera.prototype.isEnable = function () { return !!navigator && !!navigator.mediaDevices && !!navigator.mediaDevices.getUserMedia; } -ImCamera.prototype.openVideo = function() { +ImCamera.prototype.openVideo = function () { return new Promise((resolve, reject) => { - if(this.stream){ + if (this.stream) { this.close() } let constraints = { @@ -38,7 +38,7 @@ ImCamera.prototype.openVideo = function() { } -ImCamera.prototype.openAudio = function() { +ImCamera.prototype.openAudio = function () { return new Promise((resolve, reject) => { let constraints = { video: false, @@ -61,7 +61,7 @@ ImCamera.prototype.openAudio = function() { }) } -ImCamera.prototype.close = function() { +ImCamera.prototype.close = function () { // 停止流 if (this.stream) { this.stream.getTracks().forEach((track) => { diff --git a/im-web/src/api/date.js b/im-web/src/api/date.js index bba3e43..cd4fc17 100644 --- a/im-web/src/api/date.js +++ b/im-web/src/api/date.js @@ -5,23 +5,23 @@ let toTimeText = (timeStamp, simple) => { var timeText = ''; if (timeDiff <= 60000) { //一分钟内 timeText = '刚刚'; - } else if (timeDiff > 60000 && timeDiff < 3600000) { + } else if (timeDiff > 60000 && timeDiff < 3600000) { //1小时内 timeText = Math.floor(timeDiff / 60000) + '分钟前'; - } else if (timeDiff >= 3600000 && timeDiff < 86400000 && !isYestday(dateTime)) { + } else if (timeDiff >= 3600000 && timeDiff < 86400000 && !isYestday(dateTime)) { //今日 timeText = formatDateTime(dateTime).substr(11, 5); - } else if (isYestday(dateTime)) { + } else if (isYestday(dateTime)) { //昨天 - timeText = '昨天' + formatDateTime(dateTime).substr(11, 5); - } else if (isYear(dateTime)) { + timeText = '昨天' + formatDateTime(dateTime).substr(11, 5); + } else if (isYear(dateTime)) { //今年 timeText = formatDateTime(dateTime).substr(5, simple ? 5 : 14); - } else { + } else { //不属于今年 timeText = formatDateTime(dateTime); - if(simple){ - timeText = timeText.substr(2,8); + if (simple) { + timeText = timeText.substr(2, 8); } } return timeText; @@ -58,7 +58,7 @@ let formatDateTime = (date) => { } -export{ +export { toTimeText, isYestday, isYear, diff --git a/im-web/src/api/element.js b/im-web/src/api/element.js index a92fde5..3554347 100644 --- a/im-web/src/api/element.js +++ b/im-web/src/api/element.js @@ -16,14 +16,14 @@ let fixLeft = (e) => { let setTitleTip = (tip) => { let title = process.env.VUE_APP_NAME; - if(tip){ + if (tip) { title = `(${tip})${title}`; } - document.title =title; - + document.title = title; + } -export default{ +export default { fixTop, fixLeft, setTitleTip diff --git a/im-web/src/api/emotion.js b/im-web/src/api/emotion.js index 2d799a6..5d4bab7 100644 --- a/im-web/src/api/emotion.js +++ b/im-web/src/api/emotion.js @@ -15,7 +15,7 @@ let transform = (content) => { let textToImg = (emoText) => { let word = emoText.replace(/\#|\;/gi, ''); let idx = emoTextList.indexOf(word); - if(idx==-1){ + if (idx == -1) { return emoText; } let url = require(`@/assets/emoji/${idx}.gif`); @@ -25,7 +25,7 @@ let textToImg = (emoText) => { let textToUrl = (emoText) => { let word = emoText.replace(/\#|\;/gi, ''); let idx = emoTextList.indexOf(word); - if(idx==-1){ + if (idx == -1) { return ""; } let url = require(`@/assets/emoji/${idx}.gif`); diff --git a/im-web/src/api/httpRequest.js b/im-web/src/api/httpRequest.js index 9d012e0..c30682c 100644 --- a/im-web/src/api/httpRequest.js +++ b/im-web/src/api/httpRequest.js @@ -42,7 +42,7 @@ http.interceptors.response.use(async response => { headers: { refreshToken: refreshToken } - }).catch(()=>{ + }).catch(() => { location.href = "/"; }) // 保存token diff --git a/im-web/src/api/messageType.js b/im-web/src/api/messageType.js index 99d1c00..f6b1caf 100644 --- a/im-web/src/api/messageType.js +++ b/im-web/src/api/messageType.js @@ -1,32 +1,32 @@ // 是否普通消息 -let isNormal = function(type){ - return type>=0 && type < 10; +let isNormal = function (type) { + return type >= 0 && type < 10; } // 是否状态消息 -let isStatus = function(type){ - return type>=10 && type < 20; +let isStatus = function (type) { + return type >= 10 && type < 20; } // 是否提示消息 -let isTip = function(type){ - return type>=20 && type < 30; +let isTip = function (type) { + return type >= 20 && type < 30; } // 操作交互类消息 -let isAction = function(type){ - return type>=40 && type < 50; +let isAction = function (type) { + return type >= 40 && type < 50; } // 单人通话信令 -let isRtcPrivate = function(type){ - return type>=100 && type < 200; +let isRtcPrivate = function (type) { + return type >= 100 && type < 200; } // 多人通话信令 -let isRtcGroup = function(type){ - return type>=200 && type < 300; +let isRtcGroup = function (type) { + return type >= 200 && type < 300; } diff --git a/im-web/src/api/rtcGroupApi.js b/im-web/src/api/rtcGroupApi.js index 42fc4f0..8cea9ba 100644 --- a/im-web/src/api/rtcGroupApi.js +++ b/im-web/src/api/rtcGroupApi.js @@ -1,8 +1,8 @@ import http from './httpRequest.js' -class RtcGroupApi {} +class RtcGroupApi { } -RtcGroupApi.prototype.setup = function(groupId, userInfos) { +RtcGroupApi.prototype.setup = function (groupId, userInfos) { let formData = { groupId, userInfos @@ -14,21 +14,21 @@ RtcGroupApi.prototype.setup = function(groupId, userInfos) { }) } -RtcGroupApi.prototype.accept = function(groupId) { +RtcGroupApi.prototype.accept = function (groupId) { return http({ - url: '/webrtc/group/accept?groupId='+groupId, + url: '/webrtc/group/accept?groupId=' + groupId, method: 'post' }) } -RtcGroupApi.prototype.reject = function(groupId) { +RtcGroupApi.prototype.reject = function (groupId) { return http({ - url: '/webrtc/group/reject?groupId='+groupId, + url: '/webrtc/group/reject?groupId=' + groupId, method: 'post' }) } -RtcGroupApi.prototype.failed = function(groupId,reason) { +RtcGroupApi.prototype.failed = function (groupId, reason) { let formData = { groupId, reason @@ -41,14 +41,14 @@ RtcGroupApi.prototype.failed = function(groupId,reason) { } -RtcGroupApi.prototype.join = function(groupId) { +RtcGroupApi.prototype.join = function (groupId) { return http({ - url: '/webrtc/group/join?groupId='+groupId, + url: '/webrtc/group/join?groupId=' + groupId, method: 'post' }) } -RtcGroupApi.prototype.invite = function(groupId, userInfos) { +RtcGroupApi.prototype.invite = function (groupId, userInfos) { let formData = { groupId, userInfos @@ -61,7 +61,7 @@ RtcGroupApi.prototype.invite = function(groupId, userInfos) { } -RtcGroupApi.prototype.offer = function(groupId, userId, offer) { +RtcGroupApi.prototype.offer = function (groupId, userId, offer) { let formData = { groupId, userId, @@ -74,7 +74,7 @@ RtcGroupApi.prototype.offer = function(groupId, userId, offer) { }) } -RtcGroupApi.prototype.answer = function(groupId, userId, answer) { +RtcGroupApi.prototype.answer = function (groupId, userId, answer) { let formData = { groupId, userId, @@ -87,21 +87,21 @@ RtcGroupApi.prototype.answer = function(groupId, userId, answer) { }) } -RtcGroupApi.prototype.quit = function(groupId) { +RtcGroupApi.prototype.quit = function (groupId) { return http({ url: '/webrtc/group/quit?groupId=' + groupId, method: 'post' }) } -RtcGroupApi.prototype.cancel = function(groupId) { +RtcGroupApi.prototype.cancel = function (groupId) { return http({ url: '/webrtc/group/cancel?groupId=' + groupId, method: 'post' }) } -RtcGroupApi.prototype.candidate = function(groupId, userId, candidate) { +RtcGroupApi.prototype.candidate = function (groupId, userId, candidate) { let formData = { groupId, userId, @@ -114,7 +114,7 @@ RtcGroupApi.prototype.candidate = function(groupId, userId, candidate) { }) } -RtcGroupApi.prototype.device = function(groupId, isCamera, isMicroPhone) { +RtcGroupApi.prototype.device = function (groupId, isCamera, isMicroPhone) { let formData = { groupId, isCamera, @@ -128,7 +128,7 @@ RtcGroupApi.prototype.device = function(groupId, isCamera, isMicroPhone) { } -RtcGroupApi.prototype.candidate = function(groupId, userId, candidate) { +RtcGroupApi.prototype.candidate = function (groupId, userId, candidate) { let formData = { groupId, userId, @@ -141,7 +141,7 @@ RtcGroupApi.prototype.candidate = function(groupId, userId, candidate) { }) } -RtcGroupApi.prototype.heartbeat = function(groupId) { +RtcGroupApi.prototype.heartbeat = function (groupId) { return http({ url: '/webrtc/group/heartbeat?groupId=' + groupId, method: 'post' diff --git a/im-web/src/api/rtcPrivateApi.js b/im-web/src/api/rtcPrivateApi.js index 82dddab..4a24e27 100644 --- a/im-web/src/api/rtcPrivateApi.js +++ b/im-web/src/api/rtcPrivateApi.js @@ -3,7 +3,7 @@ import http from './httpRequest.js' class RtcPrivateApi { } -RtcPrivateApi.prototype.call = function(uid, mode, offer) { +RtcPrivateApi.prototype.call = function (uid, mode, offer) { return http({ url: `/webrtc/private/call?uid=${uid}&mode=${mode}`, method: 'post', @@ -14,7 +14,7 @@ RtcPrivateApi.prototype.call = function(uid, mode, offer) { }) } -RtcPrivateApi.prototype.accept = function(uid, answer) { +RtcPrivateApi.prototype.accept = function (uid, answer) { return http({ url: `/webrtc/private/accept?uid=${uid}`, method: 'post', @@ -26,35 +26,35 @@ RtcPrivateApi.prototype.accept = function(uid, answer) { } -RtcPrivateApi.prototype.handup = function(uid) { +RtcPrivateApi.prototype.handup = function (uid) { return http({ url: `/webrtc/private/handup?uid=${uid}`, method: 'post' }) } -RtcPrivateApi.prototype.cancel = function(uid) { +RtcPrivateApi.prototype.cancel = function (uid) { return http({ url: `/webrtc/private/cancel?uid=${uid}`, method: 'post' }) } -RtcPrivateApi.prototype.reject = function(uid) { +RtcPrivateApi.prototype.reject = function (uid) { return http({ url: `/webrtc/private/reject?uid=${uid}`, method: 'post' }) } -RtcPrivateApi.prototype.failed = function(uid, reason) { +RtcPrivateApi.prototype.failed = function (uid, reason) { return http({ url: `/webrtc/private/failed?uid=${uid}&reason=${reason}`, method: 'post' }) } -RtcPrivateApi.prototype.sendCandidate = function(uid, candidate) { +RtcPrivateApi.prototype.sendCandidate = function (uid, candidate) { return http({ url: `/webrtc/private/candidate?uid=${uid}`, method: 'post', @@ -65,7 +65,7 @@ RtcPrivateApi.prototype.sendCandidate = function(uid, candidate) { }); } -RtcPrivateApi.prototype.heartbeat = function(uid) { +RtcPrivateApi.prototype.heartbeat = function (uid) { return http({ url: `/webrtc/private/heartbeat?uid=${uid}`, method: 'post' diff --git a/im-web/src/api/webrtc.js b/im-web/src/api/webrtc.js index 8382cd1..60f77fb 100644 --- a/im-web/src/api/webrtc.js +++ b/im-web/src/api/webrtc.js @@ -6,7 +6,7 @@ class ImWebRtc { } } -ImWebRtc.prototype.isEnable = function() { +ImWebRtc.prototype.isEnable = function () { window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window .mozRTCPeerConnection; window.RTCSessionDescription = window.RTCSessionDescription || window.webkitRTCSessionDescription || window @@ -16,11 +16,11 @@ ImWebRtc.prototype.isEnable = function() { return !!window.RTCPeerConnection; } -ImWebRtc.prototype.init = function(configuration) { +ImWebRtc.prototype.init = function (configuration) { this.configuration = configuration; } -ImWebRtc.prototype.setupPeerConnection = function(callback) { +ImWebRtc.prototype.setupPeerConnection = function (callback) { this.peerConnection = new RTCPeerConnection(this.configuration); this.peerConnection.ontrack = (e) => { // 对方的视频流 @@ -29,11 +29,11 @@ ImWebRtc.prototype.setupPeerConnection = function(callback) { } -ImWebRtc.prototype.setStream = function(stream) { - if(this.stream){ +ImWebRtc.prototype.setStream = function (stream) { + if (this.stream) { this.peerConnection.removeStream(this.stream) } - if(stream){ + if (stream) { stream.getTracks().forEach((track) => { this.peerConnection.addTrack(track, stream); }); @@ -42,7 +42,7 @@ ImWebRtc.prototype.setStream = function(stream) { } -ImWebRtc.prototype.onIcecandidate = function(callback) { +ImWebRtc.prototype.onIcecandidate = function (callback) { this.peerConnection.onicecandidate = (event) => { // 追踪到候选信息 if (event.candidate) { @@ -51,7 +51,7 @@ ImWebRtc.prototype.onIcecandidate = function(callback) { } } -ImWebRtc.prototype.onStateChange = function(callback) { +ImWebRtc.prototype.onStateChange = function (callback) { // 监听连接状态 this.peerConnection.oniceconnectionstatechange = (event) => { let state = event.target.iceConnectionState; @@ -60,7 +60,7 @@ ImWebRtc.prototype.onStateChange = function(callback) { }; } -ImWebRtc.prototype.createOffer = function() { +ImWebRtc.prototype.createOffer = function () { return new Promise((resolve, reject) => { const offerParam = {}; offerParam.offerToRecieveAudio = 1; @@ -78,7 +78,7 @@ ImWebRtc.prototype.createOffer = function() { } -ImWebRtc.prototype.createAnswer = function(offer) { +ImWebRtc.prototype.createAnswer = function (offer) { return new Promise((resolve, reject) => { // 设置远端的sdp this.setRemoteDescription(offer); @@ -97,17 +97,17 @@ ImWebRtc.prototype.createAnswer = function(offer) { }); } -ImWebRtc.prototype.setRemoteDescription = function(offer) { +ImWebRtc.prototype.setRemoteDescription = function (offer) { // 设置对方的sdp信息 this.peerConnection.setRemoteDescription(new RTCSessionDescription(offer)); } -ImWebRtc.prototype.addIceCandidate = function(candidate) { +ImWebRtc.prototype.addIceCandidate = function (candidate) { // 添加对方的候选人信息 this.peerConnection.addIceCandidate(new RTCIceCandidate(candidate)); } -ImWebRtc.prototype.close = function(uid) { +ImWebRtc.prototype.close = function (uid) { // 关闭RTC连接 if (this.peerConnection) { this.peerConnection.close(); diff --git a/im-web/src/api/wssocket.js b/im-web/src/api/wssocket.js index de000ef..5ef1c71 100644 --- a/im-web/src/api/wssocket.js +++ b/im-web/src/api/wssocket.js @@ -1,21 +1,21 @@ var websock = null; let rec; //断线重连后,延迟5秒重新创建WebSocket连接 rec用来存储延迟请求的代码 let isConnect = false; //连接标识 避免重复连接 -let connectCallBack= null; +let connectCallBack = null; let messageCallBack = null; let closeCallBack = null -let connect = (wsurl,accessToken) => { +let connect = (wsurl, accessToken) => { try { if (isConnect) { return; } console.log("连接WebSocket"); - websock = new WebSocket(wsurl); - websock.onmessage = function(e) { + websock = new WebSocket(wsurl); + websock.onmessage = function (e) { let sendInfo = JSON.parse(e.data) - if (sendInfo.cmd == 0) { + if (sendInfo.cmd == 0) { heartCheck.start() // 登录成功才算真正完成连接 connectCallBack && connectCallBack(); @@ -25,16 +25,16 @@ let connect = (wsurl,accessToken) => { heartCheck.reset(); } else { // 其他消息转发出去 - console.log("收到消息:",sendInfo); + console.log("收到消息:", sendInfo); messageCallBack && messageCallBack(sendInfo.cmd, sendInfo.data) } } - websock.onclose = function(e) { + websock.onclose = function (e) { console.log('WebSocket连接关闭') isConnect = false; //断开后修改标识 closeCallBack && closeCallBack(e); } - websock.onopen = function() { + websock.onopen = function () { console.log("WebSocket连接成功"); isConnect = true; // 发送登录命令 @@ -48,27 +48,27 @@ let connect = (wsurl,accessToken) => { } // 连接发生错误的回调方法 - websock.onerror = function() { + websock.onerror = function () { console.log('WebSocket连接发生错误') isConnect = false; //连接断开修改标识 - reconnect(wsurl,accessToken); + reconnect(wsurl, accessToken); } } catch (e) { console.log("尝试创建连接失败"); - reconnect(wsurl,accessToken); //如果无法连接上webSocket 那么重新连接!可能会因为服务器重新部署,或者短暂断网等导致无法创建连接 + reconnect(wsurl, accessToken); //如果无法连接上webSocket 那么重新连接!可能会因为服务器重新部署,或者短暂断网等导致无法创建连接 } }; //定义重连函数 -let reconnect = (wsurl,accessToken) => { +let reconnect = (wsurl, accessToken) => { console.log("尝试重新连接"); - if (isConnect){ + if (isConnect) { //如果已经连上就不在重连了 - return; + return; } rec && clearTimeout(rec); - rec = setTimeout(function() { // 延迟5秒重连 避免过多次过频繁请求重连 - connect(wsurl,accessToken); + rec = setTimeout(function () { // 延迟5秒重连 避免过多次过频繁请求重连 + connect(wsurl, accessToken); }, 15000); }; //设置关闭连接 @@ -81,7 +81,7 @@ let close = (code) => { let heartCheck = { timeout: 5000, //每段时间发送一次心跳包 这里设置为20s timeoutObj: null, //延时发送消息对象(启动心跳新建这个对象,收到消息后重置对象) - start: function() { + start: function () { if (isConnect) { console.log('发送WebSocket心跳') let heartBeat = { @@ -92,9 +92,9 @@ let heartCheck = { } }, - reset: function() { + reset: function () { clearTimeout(this.timeoutObj); - this.timeoutObj = setTimeout(function() { + this.timeoutObj = setTimeout(function () { heartCheck.start(); }, this.timeout); @@ -110,12 +110,12 @@ let sendMessage = (agentData) => { websock.send(JSON.stringify(agentData)) } else if (websock.readyState === websock.CONNECTING) { // 若是 正在开启状态,则等待1s后重新调用 - setTimeout(function() { + setTimeout(function () { sendMessage(agentData) }, 1000) } else { // 若未开启 ,则等待1s后重新调用 - setTimeout(function() { + setTimeout(function () { sendMessage(agentData) }, 1000) } diff --git a/im-web/src/components/chat/ChatAtBox.vue b/im-web/src/components/chat/ChatAtBox.vue index 1d5bd02..d90fc85 100644 --- a/im-web/src/components/chat/ChatAtBox.vue +++ b/im-web/src/components/chat/ChatAtBox.vue @@ -1,131 +1,131 @@ diff --git a/im-web/src/components/chat/ChatBox.vue b/im-web/src/components/chat/ChatBox.vue index 2c60692..1f8c019 100644 --- a/im-web/src/components/chat/ChatBox.vue +++ b/im-web/src/components/chat/ChatBox.vue @@ -61,7 +61,8 @@
- 发送 + 发送
@@ -83,752 +84,751 @@ +} + diff --git a/im-web/src/components/chat/ChatGroupMember.vue b/im-web/src/components/chat/ChatGroupMember.vue index 8ac0686..beea61f 100644 --- a/im-web/src/components/chat/ChatGroupMember.vue +++ b/im-web/src/components/chat/ChatGroupMember.vue @@ -1,9 +1,9 @@ diff --git a/im-web/src/components/chat/ChatRecord.vue b/im-web/src/components/chat/ChatRecord.vue index 89fa3bb..c55719d 100644 --- a/im-web/src/components/chat/ChatRecord.vue +++ b/im-web/src/components/chat/ChatRecord.vue @@ -1,139 +1,138 @@ diff --git a/im-web/src/components/common/Emotion.vue b/im-web/src/components/common/Emotion.vue index 41fc5ff..39b0efe 100644 --- a/im-web/src/components/common/Emotion.vue +++ b/im-web/src/components/common/Emotion.vue @@ -1,6 +1,6 @@ \ No newline at end of file diff --git a/im-web/src/components/common/HeadImage.vue b/im-web/src/components/common/HeadImage.vue index 8086d62..f9803f9 100644 --- a/im-web/src/components/common/HeadImage.vue +++ b/im-web/src/components/common/HeadImage.vue @@ -1,8 +1,8 @@ \ No newline at end of file diff --git a/im-web/src/components/common/Icp.vue b/im-web/src/components/common/Icp.vue index 88d118e..5a8cdd5 100644 --- a/im-web/src/components/common/Icp.vue +++ b/im-web/src/components/common/Icp.vue @@ -1,7 +1,7 @@ @@ -9,18 +9,18 @@ \ No newline at end of file diff --git a/im-web/src/components/common/RightMenu.vue b/im-web/src/components/common/RightMenu.vue index f4478d5..c0b1610 100644 --- a/im-web/src/components/common/RightMenu.vue +++ b/im-web/src/components/common/RightMenu.vue @@ -1,11 +1,11 @@ diff --git a/im-web/src/components/common/UserInfo.vue b/im-web/src/components/common/UserInfo.vue index cc527bf..16d5eb5 100644 --- a/im-web/src/components/common/UserInfo.vue +++ b/im-web/src/components/common/UserInfo.vue @@ -1,11 +1,10 @@ diff --git a/im-web/src/components/friend/AddFriend.vue b/im-web/src/components/friend/AddFriend.vue index 31bf335..34f5c35 100644 --- a/im-web/src/components/friend/AddFriend.vue +++ b/im-web/src/components/friend/AddFriend.vue @@ -1,29 +1,29 @@ - diff --git a/im-web/src/components/friend/FriendItem.vue b/im-web/src/components/friend/FriendItem.vue index d89106e..f77ef3f 100644 --- a/im-web/src/components/friend/FriendItem.vue +++ b/im-web/src/components/friend/FriendItem.vue @@ -5,141 +5,141 @@
-
{{ friend.nickName}}
+
{{ friend.nickName }}
- - - - - - + + + + + +
+ @close="rightMenu.show = false" @select="onSelectMenu"> diff --git a/im-web/src/components/group/AddGroupMember.vue b/im-web/src/components/group/AddGroupMember.vue index 4da3c09..068fbb0 100644 --- a/im-web/src/components/group/AddGroupMember.vue +++ b/im-web/src/components/group/AddGroupMember.vue @@ -8,12 +8,11 @@ -
+
+ @click.native="onSwitchCheck(friend)" :menu="false" :friend="friend" :index="index" :active="false"> + v-model="friend.isCheck" size="medium">
@@ -22,18 +21,18 @@
已勾选{{ checkCount }}位好友
-
- +
+
- 取 消 - 确 定 - + 取 消 + 确 定 + @@ -110,7 +109,7 @@ export default { this.$store.state.friendStore.friends.forEach((f) => { let friend = JSON.parse(JSON.stringify(f)) let m = this.members.filter((m) => !m.quit) - .find((m) => m.userId == f.id); + .find((m) => m.userId == f.id); if (m) { // 好友已经在群里 friend.disabled = true; @@ -173,7 +172,6 @@ export default { line-height: 40px; text-indent: 6px; color: var(--im-text-color-light) - } } } diff --git a/im-web/src/components/group/GroupItem.vue b/im-web/src/components/group/GroupItem.vue index f9bcb2f..b98d80e 100644 --- a/im-web/src/components/group/GroupItem.vue +++ b/im-web/src/components/group/GroupItem.vue @@ -4,60 +4,59 @@
-
{{group.showGroupName}}
+
{{ group.showGroupName }}
- diff --git a/im-web/src/components/group/GroupMember.vue b/im-web/src/components/group/GroupMember.vue index ba20bde..5ce63f8 100644 --- a/im-web/src/components/group/GroupMember.vue +++ b/im-web/src/components/group/GroupMember.vue @@ -1,70 +1,70 @@ diff --git a/im-web/src/components/group/GroupMemberItem.vue b/im-web/src/components/group/GroupMemberItem.vue index a49ded4..0137b9c 100644 --- a/im-web/src/components/group/GroupMemberItem.vue +++ b/im-web/src/components/group/GroupMemberItem.vue @@ -1,13 +1,13 @@ @@ -24,13 +24,13 @@ export default { type: Object, required: true }, - height:{ + height: { type: Number, default: 50 } }, - computed:{ - headImageSize(){ + computed: { + headImageSize() { return Math.ceil(this.height * 0.75) } } @@ -55,7 +55,7 @@ export default { } .member-name { - flex:1; + flex: 1; padding-left: 10px; height: 100%; text-align: left; diff --git a/im-web/src/components/group/GroupMemberSelector.vue b/im-web/src/components/group/GroupMemberSelector.vue index 163e11f..a31571a 100644 --- a/im-web/src/components/group/GroupMemberSelector.vue +++ b/im-web/src/components/group/GroupMemberSelector.vue @@ -7,8 +7,8 @@
- + @@ -17,7 +17,7 @@
-
已勾选{{checkedMembers.length}}位成员
+
已勾选{{ checkedMembers.length }}位成员
@@ -33,132 +33,132 @@ diff --git a/im-web/src/components/rtc/RtcGroupJoin.vue b/im-web/src/components/rtc/RtcGroupJoin.vue index 7d09b10..ad158b0 100644 --- a/im-web/src/components/rtc/RtcGroupJoin.vue +++ b/im-web/src/components/rtc/RtcGroupJoin.vue @@ -1,116 +1,118 @@ \ No newline at end of file diff --git a/im-web/src/components/rtc/RtcGroupVideo.vue b/im-web/src/components/rtc/RtcGroupVideo.vue index 62e5aa4..11fd07a 100644 --- a/im-web/src/components/rtc/RtcGroupVideo.vue +++ b/im-web/src/components/rtc/RtcGroupVideo.vue @@ -1,6 +1,6 @@ \ No newline at end of file diff --git a/im-web/src/components/rtc/RtcPrivateAcceptor.vue b/im-web/src/components/rtc/RtcPrivateAcceptor.vue index 2e1410e..2673632 100644 --- a/im-web/src/components/rtc/RtcPrivateAcceptor.vue +++ b/im-web/src/components/rtc/RtcPrivateAcceptor.vue @@ -1,8 +1,9 @@ diff --git a/im-web/src/components/rtc/RtcPrivateVideo.vue b/im-web/src/components/rtc/RtcPrivateVideo.vue index 44001ea..71af27b 100644 --- a/im-web/src/components/rtc/RtcPrivateVideo.vue +++ b/im-web/src/components/rtc/RtcPrivateVideo.vue @@ -1,21 +1,13 @@ @@ -185,8 +176,8 @@ export default { onRTCMessage(msg) { // 除了发起通话,如果在关闭状态就无需处理 if (msg.type != this.$enums.MESSAGE_TYPE.RTC_CALL_VOICE && - msg.type != this.$enums.MESSAGE_TYPE.RTC_CALL_VIDEO && - this.isClose) { + msg.type != this.$enums.MESSAGE_TYPE.RTC_CALL_VIDEO && + this.isClose) { return; } // RTC信令处理 @@ -504,5 +495,4 @@ export default { } } } - diff --git a/im-web/src/components/setting/Setting.vue b/im-web/src/components/setting/Setting.vue index 6303381..8445969 100644 --- a/im-web/src/components/setting/Setting.vue +++ b/im-web/src/components/setting/Setting.vue @@ -2,12 +2,8 @@ - + @@ -30,9 +26,9 @@ - 取 消 - 确 定 - + 取 消 + 确 定 + diff --git a/im-web/src/main.js b/im-web/src/main.js index 2fccb32..3039ea5 100644 --- a/im-web/src/main.js +++ b/im-web/src/main.js @@ -32,6 +32,6 @@ new Vue({ // 配置路由 router, store, - render: h=>h(App) + render: h => h(App) }) diff --git a/im-web/src/router/index.js b/im-web/src/router/index.js index 8a2f5df..a447c80 100644 --- a/im-web/src/router/index.js +++ b/im-web/src/router/index.js @@ -9,41 +9,41 @@ Vue.use(VueRouter); // 配置导出路由 export default new VueRouter({ routes: [{ - path: "/", - redirect: "/login" - }, - { - name: "Login", - path: '/login', - component: Login - }, - { - name: "Register", - path: '/register', - component: Register - }, - { - name: "Home", - path: '/home', - component: Home, - children:[ - { - name: "Chat", - path: "/home/chat", - component: () => import("../view/Chat"), - }, - { - name: "Friend", - path: "/home/friend", - component: () => import("../view/Friend"), - }, - { - name: "GROUP", - path: "/home/group", - component: () => import("../view/Group"), - } - ] - } + path: "/", + redirect: "/login" + }, + { + name: "Login", + path: '/login', + component: Login + }, + { + name: "Register", + path: '/register', + component: Register + }, + { + name: "Home", + path: '/home', + component: Home, + children: [ + { + name: "Chat", + path: "/home/chat", + component: () => import("../view/Chat"), + }, + { + name: "Friend", + path: "/home/friend", + component: () => import("../view/Friend"), + }, + { + name: "GROUP", + path: "/home/group", + component: () => import("../view/Group"), + } + ] + } ] }); diff --git a/im-web/src/store/chatStore.js b/im-web/src/store/chatStore.js index bb46aaf..ea1759e 100644 --- a/im-web/src/store/chatStore.js +++ b/im-web/src/store/chatStore.js @@ -249,7 +249,7 @@ export default { let chat = this.getters.findChatByFriend(friend.id); // 更新会话中的群名和头像 if (chat && (chat.headImage != friend.headImageThumb || - chat.showName != friend.nickName)) { + chat.showName != friend.nickName)) { chat.headImage = friend.headImageThumb; chat.showName = friend.nickName; chat.stored = false; @@ -259,7 +259,7 @@ export default { updateChatFromGroup(state, group) { let chat = this.getters.findChatByGroup(group.id); if (chat && (chat.headImage != group.headImageThumb || - chat.showName != group.showGroupName)) { + chat.showName != group.showGroupName)) { // 更新会话中的群名称和头像 chat.headImage = group.headImageThumb; chat.showName = group.showGroupName; @@ -280,7 +280,7 @@ export default { } }, refreshChats(state) { - if(!cacheChats){ + if (!cacheChats) { return; } // 排序 @@ -369,7 +369,7 @@ export default { return state.loadingPrivateMsg || state.loadingGroupMsg }, findChats: (state, getters) => () => { - if(cacheChats && getters.isLoading()){ + if (cacheChats && getters.isLoading()) { return cacheChats; } return state.chats; diff --git a/im-web/src/store/configStore.js b/im-web/src/store/configStore.js index 6debf5a..baf49a9 100644 --- a/im-web/src/store/configStore.js +++ b/im-web/src/store/configStore.js @@ -6,27 +6,27 @@ export default { }, mutations: { setConfig(state, config) { - state.webrtc = config.webrtc; + state.webrtc = config.webrtc; }, - clear(state){ + clear(state) { state.webrtc = {}; } }, - actions:{ - loadConfig(context){ + actions: { + loadConfig(context) { return new Promise((resolve, reject) => { http({ url: '/system/config', method: 'GET' }).then((config) => { - console.log("系统配置",config) - context.commit("setConfig",config); + console.log("系统配置", config) + context.commit("setConfig", config); resolve(); - }).catch((res)=>{ + }).catch((res) => { reject(res); }); }) } } - + } \ No newline at end of file diff --git a/im-web/src/store/friendStore.js b/im-web/src/store/friendStore.js index 8773804..dee3ae4 100644 --- a/im-web/src/store/friendStore.js +++ b/im-web/src/store/friendStore.js @@ -1,5 +1,5 @@ import http from '../api/httpRequest.js' -import {TERMINAL_TYPE} from "../api/enums.js" +import { TERMINAL_TYPE } from "../api/enums.js" export default { @@ -10,20 +10,20 @@ export default { }, mutations: { setFriends(state, friends) { - friends.forEach((f)=>{ + friends.forEach((f) => { f.online = false; f.onlineWeb = false; f.onlineApp = false; }) state.friends = friends; }, - updateFriend(state,friend){ - state.friends.forEach((f,index)=>{ - if(f.id==friend.id){ + updateFriend(state, friend) { + state.friends.forEach((f, index) => { + if (f.id == friend.id) { // 拷贝属性 let online = state.friends[index].online; Object.assign(state.friends[index], friend); - state.friends[index].online =online; + state.friends[index].online = online; } }) }, @@ -39,45 +39,45 @@ export default { addFriend(state, friend) { state.friends.push(friend); }, - refreshOnlineStatus(state){ + refreshOnlineStatus(state) { let userIds = []; - if(state.friends.length ==0){ - return; + if (state.friends.length == 0) { + return; } - state.friends.forEach((f)=>{userIds.push(f.id)}); + state.friends.forEach((f) => { userIds.push(f.id) }); http({ url: '/user/terminal/online', method: 'get', - params: {userIds: userIds.join(',')} + params: { userIds: userIds.join(',') } }).then((onlineTerminals) => { - this.commit("setOnlineStatus",onlineTerminals); + this.commit("setOnlineStatus", onlineTerminals); }) - + // 30s后重新拉取 state.timer && clearTimeout(state.timer); - state.timer = setTimeout(()=>{ + state.timer = setTimeout(() => { this.commit("refreshOnlineStatus"); - },30000) + }, 30000) }, - setOnlineStatus(state,onlineTerminals){ - state.friends.forEach((f)=>{ - let userTerminal = onlineTerminals.find((o)=> f.id==o.userId); - if(userTerminal){ + setOnlineStatus(state, onlineTerminals) { + state.friends.forEach((f) => { + let userTerminal = onlineTerminals.find((o) => f.id == o.userId); + if (userTerminal) { f.online = true; - f.onlineWeb = userTerminal.terminals.indexOf(TERMINAL_TYPE.WEB)>=0 - f.onlineApp = userTerminal.terminals.indexOf(TERMINAL_TYPE.APP)>=0 - }else{ + f.onlineWeb = userTerminal.terminals.indexOf(TERMINAL_TYPE.WEB) >= 0 + f.onlineApp = userTerminal.terminals.indexOf(TERMINAL_TYPE.APP) >= 0 + } else { f.online = false; f.onlineWeb = false; f.onlineApp = false; } }); // 在线的在前面 - state.friends.sort((f1,f2)=>{ - if(f1.online&&!f2.online){ + state.friends.sort((f1, f2) => { + if (f1.online && !f2.online) { return -1; } - if(f2.online&&!f1.online){ + if (f2.online && !f1.online) { return 1; } return 0; diff --git a/im-web/src/store/index.js b/im-web/src/store/index.js index 346aa86..04254c8 100644 --- a/im-web/src/store/index.js +++ b/im-web/src/store/index.js @@ -10,7 +10,7 @@ import uiStore from './uiStore.js'; Vue.use(Vuex) export default new Vuex.Store({ - modules: {chatStore,friendStore,userStore,groupStore,configStore,uiStore}, + modules: { chatStore, friendStore, userStore, groupStore, configStore, uiStore }, state: {}, mutations: { }, @@ -25,7 +25,7 @@ export default new Vuex.Store({ return Promise.all(promises); }) }, - unload(context){ + unload(context) { context.commit("clear"); } }, diff --git a/im-web/src/store/uiStore.js b/im-web/src/store/uiStore.js index 64a9a61..a29a029 100644 --- a/im-web/src/store/uiStore.js +++ b/im-web/src/store/uiStore.js @@ -3,9 +3,9 @@ export default { userInfo: { // 用户信息窗口 show: false, user: {}, - pos:{ - x:0, - y:0 + pos: { + x: 0, + y: 0 } }, fullImage: { // 全屏大图 @@ -14,25 +14,25 @@ export default { } }, mutations: { - showUserInfoBox(state,user){ + showUserInfoBox(state, user) { state.userInfo.show = true; state.userInfo.user = user; - + }, - setUserInfoBoxPos(state,pos){ - let w = document.documentElement.clientWidth; - let h = document.documentElement.clientHeight; - state.userInfo.pos.x = Math.min(pos.x,w-350); - state.userInfo.pos.y = Math.min(pos.y,h-200); + setUserInfoBoxPos(state, pos) { + let w = document.documentElement.clientWidth; + let h = document.documentElement.clientHeight; + state.userInfo.pos.x = Math.min(pos.x, w - 350); + state.userInfo.pos.y = Math.min(pos.y, h - 200); }, - closeUserInfoBox(state){ + closeUserInfoBox(state) { state.userInfo.show = false; }, - showFullImageBox(state,url){ + showFullImageBox(state, url) { state.fullImage.show = true; state.fullImage.url = url; }, - closeFullImageBox(state){ + closeFullImageBox(state) { state.fullImage.show = false; } } diff --git a/im-web/src/store/userStore.js b/im-web/src/store/userStore.js index 0973989..494db35 100644 --- a/im-web/src/store/userStore.js +++ b/im-web/src/store/userStore.js @@ -1,15 +1,15 @@ import http from '../api/httpRequest.js' -import {RTC_STATE} from "../api/enums.js" +import { RTC_STATE } from "../api/enums.js" export default { - + state: { userInfo: { - + }, rtcInfo: { friend: {}, // 好友信息 mode: "video", // 模式 video:视频 voice:语音 - state: RTC_STATE.FREE // FREE:空闲 WAIT_CALL:呼叫方等待 WAIT_ACCEPT: 被呼叫方等待接听 CHATING:聊天中 + state: RTC_STATE.FREE // FREE:空闲 WAIT_CALL:呼叫方等待 WAIT_ACCEPT: 被呼叫方等待接听 CHATING:聊天中 } }, @@ -17,13 +17,13 @@ export default { setUserInfo(state, userInfo) { state.userInfo = userInfo }, - setRtcInfo(state, rtcInfo ){ - state.rtcInfo = rtcInfo; + setRtcInfo(state, rtcInfo) { + state.rtcInfo = rtcInfo; }, - setRtcState(state,rtcState){ + setRtcState(state, rtcState) { state.rtcInfo.state = rtcState; }, - clear(state){ + clear(state) { state.userInfo = {}; state.rtcInfo = { friend: {}, @@ -32,16 +32,16 @@ export default { }; } }, - actions:{ - loadUser(context){ + actions: { + loadUser(context) { return new Promise((resolve, reject) => { http({ url: '/user/self', method: 'GET' }).then((userInfo) => { - context.commit("setUserInfo",userInfo); + context.commit("setUserInfo", userInfo); resolve(); - }).catch((res)=>{ + }).catch((res) => { reject(res); }); }) diff --git a/im-web/src/utils/directive/dialogDrag.js b/im-web/src/utils/directive/dialogDrag.js index 5a35d2c..8ea6d05 100644 --- a/im-web/src/utils/directive/dialogDrag.js +++ b/im-web/src/utils/directive/dialogDrag.js @@ -1,72 +1,72 @@ import Vue from 'vue' -  + // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { -  bind (el, binding, vnode, oldVnode) { -    const dialogHeaderEl = el.querySelector('.el-dialog__header') -    const dragDom = el.querySelector('.el-dialog') -    dialogHeaderEl.style.cursor = 'move' -  -    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); -    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null) -  -    dialogHeaderEl.onmousedown = (e) => { -      // 鼠标按下,计算当前元素距离可视区的距离 -      const disX = e.clientX - dialogHeaderEl.offsetLeft -      const disY = e.clientY - dialogHeaderEl.offsetTop -      const screenWidth = document.body.clientWidth; // body当前宽度 -      const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度,可某些环境下无法获取) -      const dragDomWidth = dragDom.offsetWidth; // 对话框宽度 -      const dragDomheight = dragDom.offsetHeight; // 对话框高度 -      const minDragDomLeft = dragDom.offsetLeft; -      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth; -      const minDragDomTop = dragDom.offsetTop; -      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight; -  -      // 获取到的值带px 正则匹配替换 -      let styL, styT -  -      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px -      if (sty.left.includes('%')) { -        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100) -        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100) -      } else { -        styL = +sty.left.replace(/\px/g, '') -        styT = +sty.top.replace(/\px/g, '') -      } -  -      document.onmousemove = function (e) { -        // 获取body的页面可视宽高 -        // var clientHeight = document.documentElement.clientHeight || document.body.clientHeight -        // var clientWidth = document.documentElement.clientWidth || document.body.clientWidth -  -        // 通过事件委托,计算移动的距离 -        var l = e.clientX - disX -        var t = e.clientY - disY -  -        // 边界处理 -        if (-l > minDragDomLeft) { -          l = -minDragDomLeft; -        } else if (l > maxDragDomLeft) { -          l = maxDragDomLeft; -        } -        if (-t > minDragDomTop) { -          t = -minDragDomTop; -        } else if (t > maxDragDomTop) { -          t = maxDragDomTop; -        } -        // 移动当前元素 -        dragDom.style.left = `${l + styL}px` -        dragDom.style.top = `${t + styT}px` -  -        // 将此时的位置传出去 -        // binding.value({x:e.pageX,y:e.pageY}) -      } -  -      document.onmouseup = function (e) { -        document.onmousemove = null -        document.onmouseup = null -      } -    } -  } + bind(el, binding, vnode, oldVnode) { + const dialogHeaderEl = el.querySelector('.el-dialog__header') + const dragDom = el.querySelector('.el-dialog') + dialogHeaderEl.style.cursor = 'move' + + // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); + const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null) + + dialogHeaderEl.onmousedown = (e) => { + // 鼠标按下,计算当前元素距离可视区的距离 + const disX = e.clientX - dialogHeaderEl.offsetLeft + const disY = e.clientY - dialogHeaderEl.offsetTop + const screenWidth = document.body.clientWidth; // body当前宽度 + const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度,可某些环境下无法获取) + const dragDomWidth = dragDom.offsetWidth; // 对话框宽度 + const dragDomheight = dragDom.offsetHeight; // 对话框高度 + const minDragDomLeft = dragDom.offsetLeft; + const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth; + const minDragDomTop = dragDom.offsetTop; + const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight; + + // 获取到的值带px 正则匹配替换 + let styL, styT + + // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px + if (sty.left.includes('%')) { + styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100) + styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100) + } else { + styL = +sty.left.replace(/\px/g, '') + styT = +sty.top.replace(/\px/g, '') + } + + document.onmousemove = function (e) { + // 获取body的页面可视宽高 + // var clientHeight = document.documentElement.clientHeight || document.body.clientHeight + // var clientWidth = document.documentElement.clientWidth || document.body.clientWidth + + // 通过事件委托,计算移动的距离 + var l = e.clientX - disX + var t = e.clientY - disY + + // 边界处理 + if (-l > minDragDomLeft) { + l = -minDragDomLeft; + } else if (l > maxDragDomLeft) { + l = maxDragDomLeft; + } + if (-t > minDragDomTop) { + t = -minDragDomTop; + } else if (t > maxDragDomTop) { + t = maxDragDomTop; + } + // 移动当前元素 + dragDom.style.left = `${l + styL}px` + dragDom.style.top = `${t + styT}px` + + // 将此时的位置传出去 + // binding.value({x:e.pageX,y:e.pageY}) + } + + document.onmouseup = function (e) { + document.onmousemove = null + document.onmouseup = null + } + } + } }) diff --git a/im-web/src/view/Chat.vue b/im-web/src/view/Chat.vue index 63759a3..133b10c 100644 --- a/im-web/src/view/Chat.vue +++ b/im-web/src/view/Chat.vue @@ -7,13 +7,13 @@
+ element-loading-spinner="el-icon-loading" element-loading-background="#F9F9F9" element-loading-size="24">
-
- +
+
diff --git a/im-web/src/view/Friend.vue b/im-web/src/view/Friend.vue index ca23360..6d35f38 100644 --- a/im-web/src/view/Friend.vue +++ b/im-web/src/view/Friend.vue @@ -10,17 +10,17 @@
-
+
+ @delete="onDelItem(friend, index)" @click.native="onActiveItem(friend, index)">
- {{userInfo.nickName}} + {{ userInfo.nickName }}
@@ -33,7 +33,7 @@ {{ userInfo.nickName }} - {{ userInfo.sex==0?"男":"女" }} + {{ userInfo.sex == 0 ? "男" : "女" }} {{ userInfo.signature }}
@@ -43,7 +43,7 @@ 加为好友 删除好友 + @click="onDelItem(userInfo, activeIdx)">删除好友
@@ -55,188 +55,188 @@ \ No newline at end of file diff --git a/im-web/src/view/Group.vue b/im-web/src/view/Group.vue index 813c59a..683d1c2 100644 --- a/im-web/src/view/Group.vue +++ b/im-web/src/view/Group.vue @@ -8,9 +8,9 @@
-
- +
+
@@ -23,21 +23,20 @@
- + + :name="activeGroup.showGroupName" radius="10%"> - 发消息 + 发消息
+ ref="groupForm"> @@ -46,15 +45,15 @@ + maxlength="20"> + :placeholder="$store.state.userStore.userInfo.nickName"> - +
邀请 @@ -68,16 +67,15 @@
+ :showDel="isOwner && member.userId != activeGroup.ownerId" @del="onKick">
邀请
- +
diff --git a/im-web/src/view/Home.vue b/im-web/src/view/Home.vue index 24a64a4..050e2d8 100644 --- a/im-web/src/view/Home.vue +++ b/im-web/src/view/Home.vue @@ -1,14 +1,12 @@