!161 移除default-passive-events插件(会导致h5键盘无法保持)

Merge pull request !161 from blue/v_3.0.0

im-uniapp/App.vue

@@ -492,6 +492,9 @@ uni-page-head {
 }
 
 // #endif
+page {
+	background-color: $im-bg;
+}
 
 .tab-page {
 	position: relative;
@@ -502,9 +505,15 @@ uni-page-head {
 	top: $im-nav-bar-height;
 	// #endif
 
-	// #ifndef H5
+	// #ifdef APP-PLUS
 	height: calc(100vh - var(--status-bar-height) - $im-nav-bar-height); // app平台还要减去顶部手机状态栏高度
 	top: calc($im-nav-bar-height + var(--status-bar-height));
+	// #endif
+
+	// #ifdef MP-WEIXIN
+	height: calc(100vh - $im-nav-bar-height);
+	top: $im-nav-bar-height;
+
 	// #endif
 	color: $im-text-color;
 	background-color: $im-bg;
@@ -515,13 +524,20 @@ uni-page-head {
 .page {
 	position: relative;
 	// #ifdef H5
-	height: calc(100vh - $im-nav-bar-height); // app平台还要减去顶部手机状态栏高度
+	height: calc(100vh - $im-nav-bar-height); // h5平台100vh是包含了底部高度，需要减去
 	top: $im-nav-bar-height;
 	// #endif
-	// #ifndef H5
+
+	// #ifdef APP-PLUS
 	height: calc(100vh - var(--status-bar-height) - $im-nav-bar-height); // app平台还要减去顶部手机状态栏高度
 	top: calc($im-nav-bar-height + var(--status-bar-height));
 	// #endif
+
+	// #ifdef MP-WEIXIN
+	height: calc(100vh - $im-nav-bar-height);
+	top: $im-nav-bar-height;
+	// #endif
+	
 	color: $im-text-color;
 	background-color: $im-bg;
 	font-size: $im-font-size;

im-uniapp/components/chat-message-item/chat-message-item.vue

@@ -56,12 +56,6 @@
 								<text v-if="audioPlayState == 'PLAYING'" class="iconfont icon-pause"></text>
 							</view>
 						</long-press-menu>
-						<view v-if="sending&&isTextMessage" class="sending">
-							<loading :size="40" icon-color="#656adf" :mask="false"></loading>
-						</view>
-						<view v-else-if="sendFail" @click="onSendFail"
-							class="send-fail iconfont icon-warning-circle-fill"></view>
-					</view>
 						<long-press-menu v-if="isAction" :items="menuItems" @select="onSelectMenu">
 							<view class="chat-realtime message-text" @click="$emit('call')">
 								<text v-if="msgInfo.type == $enums.MESSAGE_TYPE.ACT_RT_VOICE"
@@ -71,6 +65,12 @@
 								<text>{{ msgInfo.content }}</text>
 							</view>
 						</long-press-menu>
+						<view v-if="sending&&isTextMessage" class="sending">
+							<loading :size="40" icon-color="#656adf" :mask="false"></loading>
+						</view>
+						<view v-else-if="sendFail" @click="onSendFail"
+							class="send-fail iconfont icon-warning-circle-fill"></view>
+					</view>
 					<view class="message-status" v-if="!isAction && msgInfo.selfSend && !msgInfo.groupId">
 						<text class="chat-readed" v-if="msgInfo.status == $enums.MESSAGE_STATUS.READED">已读</text>
 						<text class="chat-unread" v-else>未读</text>

im-uniapp/components/nav-bar/nav-bar.vue

@@ -1,19 +1,22 @@
 <template>
 	<view class="im-nav-bar">
-    <!-- #ifndef H5 -->
+		<!-- #ifdef APP-PLUS -->
 		<view style="height: var(--status-bar-height)"></view>
 		<!-- #endif -->
 		<view class="im-nav-bar-content">
+			<!-- #ifndef MP-WEIXIN -->
 			<view class="back" @click="handleBackClick" v-if="back">
 				<uni-icons type="back" :size="iconFontSize"></uni-icons>
 			</view>
+			<!-- #endif -->
 			<view class="title" v-if="title">
 				<slot></slot>
 			</view>
 			<view class="btn">
 				<uni-icons class="btn-item" v-if="search" type="search" :size="iconFontSize"
 					@click="$emit('search')"></uni-icons>
-        <uni-icons class="btn-item" v-if="add" type="plusempty" :size="iconFontSize" @click="$emit('add')"></uni-icons>
+				<uni-icons class="btn-item" v-if="add" type="plusempty" :size="iconFontSize"
+					@click="$emit('add')"></uni-icons>
 				<uni-icons class="btn-item" v-if="more" type="more-filled" :size="iconFontSize"
 					@click="$emit('more')"></uni-icons>
 			</view>

im-uniapp/main.js

@@ -23,7 +23,6 @@ import switchBar from '@/components/bar/switch-bar'
 import * as recorder from './common/recorder-h5';
 import ImageResize from "quill-image-resize-mp";
 import Quill from "quill";
-import 'default-passive-events';
 // 以下组件用于兼容部分手机聊天边框无法输入的问题
 window.Quill = Quill;
 window.ImageResize = { default: ImageResize };

im-uniapp/package.json

@@ -4,7 +4,6 @@
 		"scripts": {}
 	},
 	"dependencies": {
-		"default-passive-events": "^4.0.0",
 		"pinyin-pro": "^3.23.1",
 		"quill": "^1.3.7",
 		"quill-image-resize-mp": "^3.0.1",

im-uniapp/pages.json

@@ -30,7 +30,9 @@
 		{
 			"path": "pages/chat/chat-box",
 			"style": {
-				"navigationStyle": "custom",
+				"mp-weixin": {
+					"disableScroll": true
+				},
 				"app-plus": {
 					// adjustPan窗体高度不变，但窗体上推、adjustResize屏幕高度=webview窗体高度+软键盘高度
 					"softinputMode": "adjustResize"
@@ -67,7 +69,13 @@
 	],
 	"globalStyle": {
 		"navigationBarTitleText": "盒子IM",
+		"navigationBarTextStyle": "black",
+		/*  #ifndef MP-WEIXIN */
 		"navigationStyle": "custom",
+		/* #endif */
+		/*  #ifdef MP-WEIXIN */
+		"navigationStyle": "default",
+		/* #endif */
 		"navigationBarBackgroundColor": "#f7f7f7",
 		"backgroundColor": "#f7f7f7"
 	},

im-uniapp/pages/chat/chat-box.vue

@@ -50,7 +50,8 @@
 			</view>
 		</view>
 		<view class="chat-tab-bar">
-			<view v-if="chatTabBox == 'tools'" class="chat-tools" :style="{height: keyboardHeight+'px'}">
+			<scroll-view v-if="chatTabBox == 'tools'" class="chat-tools" :style="{height: keyboardHeight+'px'}">
+				<view class="chat-tools-list">
 					<view class="chat-tools-item">
 						<file-upload ref="fileUpload" :onBefore="onUploadFileBefore" :onSuccess="onUploadFileSuccess"
 							:onError="onUploadFileFail">
@@ -66,8 +67,8 @@
 						<view class="tool-name">相册</view>
 					</view>
 					<view class="chat-tools-item">
-					<image-upload sourceType="camera" :onBefore="onUploadImageBefore" :onSuccess="onUploadImageSuccess"
+						<image-upload sourceType="camera" :onBefore="onUploadImageBefore"
-						:onError="onUploadImageFail">
+							:onSuccess="onUploadImageSuccess" :onError="onUploadImageFail">
 							<view class="tool-icon iconfont icon-camera"></view>
 						</image-upload>
 						<view class="tool-name">拍摄</view>
@@ -76,7 +77,8 @@
 						<view class="tool-icon iconfont icon-microphone"></view>
 						<view class="tool-name">语音消息</view>
 					</view>
-				<view v-if="chat.type == 'GROUP' && memberSize<=500" class="chat-tools-item" @click="switchReceipt()">
+					<view v-if="chat.type == 'GROUP' && memberSize<=500" class="chat-tools-item"
+						@click="switchReceipt()">
 						<view class="tool-icon iconfont icon-receipt" :class="isReceipt ? 'active' : ''"></view>
 						<view class="tool-name">回执消息</view>
 					</view>
@@ -96,6 +98,7 @@
 					</view>
 					<!-- #endif -->
 				</view>
+			</scroll-view>
 			<scroll-view v-if="chatTabBox === 'emo'" class="chat-emotion" scroll-y="true"
 				:style="{height: keyboardHeight+'px'}">
 				<view class="emotion-item-list">
@@ -133,6 +136,7 @@ export default {
 			showRecord: false,
 			chatMainHeight: 800, // 聊天窗口高度
 			keyboardHeight: 290, // 键盘高度
+			screenHeight: 1000, // 屏幕高度
 			windowHeight: 1000, // 窗口高度
 			initHeight: 1000, // h5初始高度
 			atUserIds: [],
@@ -184,7 +188,7 @@ export default {
 				// 更新消息
 				tmpMessage.id = m.id;
 				tmpMessage.status = m.status;
-				this.chatStore.insertMessage(tmpMessage, chat);
+				this.chatStore.updateMessage(tmpMessage, chat);
 				// 会话置顶
 				this.moveChatToTop();
 				// 滚动到底部
@@ -331,12 +335,12 @@ export default {
 						tmpMessage.id = m.id;
 						tmpMessage.status = m.status;
 						tmpMessage.content = m.content;
-						this.chatStore.insertMessage(tmpMessage, chat);
+						this.chatStore.updateMessage(tmpMessage, chat);
 					}).catch(() => {
 						// 更新消息
 						tmpMessage = JSON.parse(JSON.stringify(tmpMessage));
 						tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
-						this.chatStore.insertMessage(tmpMessage, chat);
+						this.chatStore.updateMessage(tmpMessage, chat);
 					})
 				}
 			})
@@ -393,11 +397,13 @@ export default {
 			this.switchChatTabBox('tools')
 		},
 		switchChatTabBox(chatTabBox) {
+			if (this.chatTabBox != chatTabBox) {
 				this.chatTabBox = chatTabBox;
-			this.reCalChatMainHeight();
 				if (chatTabBox != 'tools' && this.$refs.fileUpload) {
 					this.$refs.fileUpload.hide()
 				}
+				setTimeout(() => this.reCalChatMainHeight(), 30);
+			}
 		},
 		selectEmoji(emoText) {
 			let path = this.$emo.textToPath(emoText)
@@ -454,7 +460,7 @@ export default {
 				data.width = size.width;
 				data.height = size.height;
 				msgInfo.content = JSON.stringify(data)
-				this.chatStore.insertMessage(msgInfo, chat);
+				this.chatStore.updateMessage(msgInfo, chat);
 				this.scrollToBottom();
 			})
 			return true;
@@ -467,13 +473,13 @@ export default {
 				msgInfo.id = m.id;
 				msgInfo.status = m.status;
 				this.isReceipt = false;
-				this.chatStore.insertMessage(msgInfo, file.chat);
+				this.chatStore.updateMessage(msgInfo, file.chat);
 			})
 		},
 		onUploadImageFail(file, err) {
 			let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
 			msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
-			this.chatStore.insertMessage(msgInfo, file.chat);
+			this.chatStore.updateMessage(msgInfo, file.chat);
 		},
 		onUploadFileBefore(file) {
 			// 检查是否被封禁
@@ -520,13 +526,13 @@ export default {
 				msgInfo.id = m.id;
 				msgInfo.status = m.status;
 				this.isReceipt = false;
-				this.chatStore.insertMessage(msgInfo, file.chat);
+				this.chatStore.updateMessage(msgInfo, file.chat);
 			})
 		},
 		onUploadFileFail(file, res) {
 			let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
 			msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
-			this.chatStore.insertMessage(msgInfo, file.chat);
+			this.chatStore.updateMessage(msgInfo, file.chat);
 		},
 		onResendMessage(msgInfo) {
 			if (msgInfo.type != this.$enums.MESSAGE_TYPE.TEXT) {
@@ -551,12 +557,12 @@ export default {
 				tmpMessage.id = m.id;
 				tmpMessage.status = m.status;
 				tmpMessage.content = m.content;
-				this.chatStore.insertMessage(tmpMessage, chat);
+				this.chatStore.updateMessage(tmpMessage, chat);
 			}).catch(() => {
 				// 更新消息
 				tmpMessage = JSON.parse(JSON.stringify(tmpMessage));
 				tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
-				this.chatStore.insertMessage(tmpMessage, chat);
+				this.chatStore.updateMessage(tmpMessage, chat);
 			})
 		},
 		onDeleteMessage(msgInfo) {
@@ -670,9 +676,13 @@ export default {
 					if (this.scrollTop < 10) {
 						// 未渲染完成，重试一次
 						this.holdingScrollBar();
+					} else {
+						// 让页面再滚动一下，解决部分ios手机出现白屏问题
+						const delays = [100, 300, 1000];
+						delays.forEach(delay => setTimeout(() => this.scrollTop += 5, delay))
 					}
 				});
-			}, 50)
+			}, 10)
 		},
 		onShowMore() {
 			if (this.isGroup) {
@@ -815,25 +825,29 @@ export default {
 			}
 		},
 		reCalChatMainHeight() {
-			setTimeout(() => {
+			let sysInfo = uni.getSystemInfoSync();
 			let h = this.windowHeight;
 			// 减去标题栏高度
 			h -= 50;
 			// 减去键盘高度
 			if (this.isShowKeyBoard || this.chatTabBox != 'none') {
+				// ios app的键盘高度不准，需要减去屏幕和窗口差
+				// #ifdef APP-PLUS
+				if (sysInfo.platform == 'ios') {
+					h += this.screenHeight - this.windowHeight;
+				}
+				// #endif
 				h -= this.keyboardHeight;
 				this.scrollToBottom();
 			}
-				// #ifndef H5
+
-				// h5需要减去状态栏高度
+			// APP需要减去状态栏高度
-				h -= uni.getSystemInfoSync().statusBarHeight;
+			// #ifdef APP-PLUS
+			h -= sysInfo.statusBarHeight;
 			// #endif
 			this.chatMainHeight = h;
-				if (this.isShowKeyBoard || this.chatTabBox != 'none') {
+			// #ifndef APP
-					this.scrollToBottom();
-				}
 			// ios浏览器键盘把页面顶起后，页面长度不会变化，这里把页面拉到顶部适配一下
-				// #ifdef H5
 			if (uni.getSystemInfoSync().platform == 'ios') {
 				// 不同手机需要的延时时间不一致，采用分段延时的方式处理
 				const delays = [50, 100, 500];
@@ -847,7 +861,6 @@ export default {
 				})
 			}
 			// #endif
-			}, 30)
 		},
 		listenKeyBoard() {
 			// #ifdef H5	
@@ -857,12 +870,13 @@ export default {
 				return;
 			}
 			if (uni.getSystemInfoSync().platform == 'ios') {
-				// ios h5实现键盘监听
-				window.addEventListener('focusin', this.focusInListener);
-				window.addEventListener('focusout', this.focusOutListener);
 				// 监听键盘高度，ios13以上开始支持
 				if (window.visualViewport) {
 					window.visualViewport.addEventListener('resize', this.resizeListener);
+				} else {
+					// ios h5实现键盘监听
+					window.addEventListener('focusin', this.focusInListener);
+					window.addEventListener('focusout', this.focusOutListener);
 				}
 			} else {
 				// 安卓h5实现键盘监听
@@ -876,9 +890,12 @@ export default {
 		},
 		unListenKeyboard() {
 			// #ifdef H5
-			window.removeEventListener('resize', this.resizeListener);
 			window.removeEventListener('focusin', this.focusInListener);
 			window.removeEventListener('focusout', this.focusOutListener);
+			window.removeEventListener('resize', this.resizeListener);
+			if (window.visualViewport) {
+				window.visualViewport.removeEventListener('resize', this.resizeListener);
+			}
 			// #endif
 			// #ifndef H5
 			uni.offKeyboardHeightChange(this.keyBoardListener);
@@ -889,7 +906,7 @@ export default {
 			if (this.isShowKeyBoard) {
 				this.keyboardHeight = res.height; // 获取并保存键盘高度
 			}
-			this.reCalChatMainHeight();
+			setTimeout(() => this.reCalChatMainHeight(), 30);
 		},
 		resizeListener() {
 			let keyboardHeight = this.initHeight - window.innerHeight;
@@ -897,20 +914,22 @@ export default {
 			if (window.visualViewport && uni.getSystemInfoSync().platform == 'ios') {
 				keyboardHeight = this.initHeight - window.visualViewport.height;
 			}
-			console.log("resizeListener:", window.visualViewport.height)
+			let isShowKeyBoard = keyboardHeight > 150;
-			this.isShowKeyBoard = keyboardHeight > 150;
+			if (isShowKeyBoard) {
-			if (this.isShowKeyBoard) {
 				this.keyboardHeight = keyboardHeight;
 			}
-			this.reCalChatMainHeight();
+			if (this.isShowKeyBoard != isShowKeyBoard) {
+				this.isShowKeyBoard = isShowKeyBoard;
+				setTimeout(() => this.reCalChatMainHeight(), 30);
+			}
 		},
 		focusInListener() {
 			this.isShowKeyBoard = true;
-			this.reCalChatMainHeight();
+			setTimeout(() => this.reCalChatMainHeight(), 30);
 		},
 		focusOutListener() {
 			this.isShowKeyBoard = false;
-			this.reCalChatMainHeight();
+			setTimeout(() => this.reCalChatMainHeight(), 30);
 		},
 		showBannedTip() {
 			let msgInfo = {
@@ -1082,7 +1101,11 @@ export default {
 		// 监听键盘高度
 		this.listenKeyBoard();
 		// 计算聊天窗口高度
+		this.windowHeight = uni.getSystemInfoSync().windowHeight;
+		this.screenHeight = uni.getSystemInfoSync().screenHeight;
+		this.reCalChatMainHeight();
 		this.$nextTick(() => {
+			// 上面获取的windowHeight可能不准，重新计算一次聊天窗口高度
 			this.windowHeight = uni.getSystemInfoSync().windowHeight;
 			this.reCalChatMainHeight();
 			this.scrollToBottom();
@@ -1132,10 +1155,10 @@ export default {
 	}
 
 	.chat-main-box {
-		// #ifdef H5
+		// #ifndef APP-PLUS
 		top: $im-nav-bar-height;
 		// #endif
-		// #ifndef H5
+		// #ifdef APP-PLUS
 		top: calc($im-nav-bar-height + var(--status-bar-height));
 		// #endif
 		position: fixed;
@@ -1206,7 +1229,7 @@ export default {
 			border-top: $im-border solid 1px;
 			background-color: $im-bg;
 			min-height: 80rpx;
-			margin-bottom: 14rpx;
+			padding-bottom: 14rpx;
 
 			.iconfont {
 				font-size: 60rpx;
@@ -1250,13 +1273,14 @@ export default {
 		background-color: $im-bg;
 
 		.chat-tools {
-			display: flex;
-			flex-wrap: wrap;
-			align-items: top;
-			height: 310px;
 			padding: 40rpx;
 			box-sizing: border-box;
 
+			.chat-tools-list {
+				display: flex;
+				flex-wrap: wrap;
+				align-content: center;
+
 				.chat-tools-item {
 					width: 25%;
 					padding: 16rpx;
@@ -1284,10 +1308,10 @@ export default {
 					}
 				}
 			}
+		}
 
 		.chat-emotion {
-			height: 310px;
+			padding: 40rpx;
-			padding: 20rpx;
 			box-sizing: border-box;
 
 			.emotion-item-list {

im-uniapp/pages/friend/friend.vue

@@ -12,7 +12,7 @@
 			温馨提示：您现在还没有任何好友，快点击右上方'+'按钮添加好友吧~
 		</view>
 		<view class="friend-items" v-else>
-			<up-index-list :index-list="friendIdx" :sticky="false" :custom-nav-height="50">
+			<up-index-list :index-list="friendIdx" :sticky="false" :custom-nav-height="customNavHeight">
 				<template v-for="(friends, i) in friendGroups">
 					<up-index-item>
 						<up-index-anchor :text="friendIdx[i] == '*' ? '在线' : friendIdx[i]"></up-index-anchor>
@@ -97,6 +97,14 @@ export default {
 		},
 		hasFriends() {
 			return this.friendStore.friends.some(f => !f.deleted);
+		},
+		customNavHeight() {
+			let h = 50;
+			// #ifdef APP-PLUS
+			h += uni.getSystemInfoSync().statusBarHeight;
+			// #endif
+			console.log("customNavHeight:",h)
+			return h;
 		}
 	}
 }

im-uniapp/store/chatStore.js

@@ -497,24 +497,28 @@ export default defineStore('chatStore', {
 			if (!chat) {
 				return null;
 			}
-			for (let idx = chat.messages.length - 1; idx >= 0; idx--) {
 			// 通过id判断
-				if (msgInfo.id && chat.messages[idx].id) {
+			if (msgInfo.id) {
-					if (msgInfo.id == chat.messages[idx].id) {
+				for (let idx = chat.messages.length - 1; idx >= 0; idx--) {
-						return chat.messages[idx];
+					let m = chat.messages[idx];
+					if (m.id && msgInfo.id == m.id) {
+						return m;
 					}
 					// 如果id比要查询的消息小，说明没有这条消息
-					if (msgInfo.id > chat.messages[idx].id) {
+					if (m.id && m.id < msgInfo.id) {
 						break;
 					}
 				}
+			}
 			// 正在发送中的消息可能没有id,只有tmpId
-				if (msgInfo.tmpId && chat.messages[idx].tmpId) {
+			if (msgInfo.tmpId) {
-					if (msgInfo.tmpId == chat.messages[idx].tmpId) {
+				for (let idx = chat.messages.length - 1; idx >= 0; idx--) {
-						return chat.messages[idx];
+					let m = chat.messages[idx];
+					if (m.tmpId && msgInfo.tmpId == m.tmpId) {
+						return m;
 					}
 					// 如果id比要查询的消息小，说明没有这条消息
-					if (msgInfo.tmpId > chat.messages[idx].tmpId) {
+					if (m.tmpId && m.tmpId < msgInfo.tmpId) {
 						break;
 					}
 				}

im-uniapp/store/friendStore.js

@@ -5,36 +5,27 @@ import { TERMINAL_TYPE } from '../common/enums.js'
 export default defineStore('friendStore', {
 	state: () => {
 		return {
-			friends: [],
+			friendMap: new Map(),
 			timer: null
 		}
 	},
 	actions: {
 		setFriends(friends) {
-			friends.forEach((f) => {
+			this.friendMap.clear();
-				f.online = false;
+			friends.forEach(f => this.friendMap.set(f.id, f))
-				f.onlineWeb = false;
-				f.onlineApp = false;
-			})
-			this.friends = friends;
 		},
 		updateFriend(friend) {
 			let f = this.findFriend(friend.id);
-			let copy = JSON.parse(JSON.stringify(f));
+			friend.online = f.online;
-			Object.assign(f, friend);
+			friend.onlineWeb = f.onlineWeb;
-			f.online = copy.online;
+			friend.onlineApp = f.onlineApp;
-			f.onlineWeb = copy.onlineWeb;
+			this.friendMap.set(friend.id, friend)
-			f.onlineApp = copy.onlineApp;
 		},
 		removeFriend(id) {
-			this.friends.filter(f => f.id == id).forEach(f => f.deleted = true);
+			this.friendMap.get(id).deleted = true;
 		},
 		addFriend(friend) {
-			if (this.friends.some((f) => f.id == friend.id)) {
+			this.friendMap.set(friend.id, friend)
-				this.updateFriend(friend)
-			} else {
-				this.friends.unshift(friend);
-			}
 		},
 		setOnlineStatus(onlineTerminals) {
 			this.friends.forEach((f) => {
@@ -68,12 +59,11 @@ export default defineStore('friendStore', {
 			}, 30000)
 		},
 		setDnd(id, isDnd) {
-			let friend = this.findFriend(id);
+			this.friendMap.get(id).isDnd = isDnd;
-			friend.isDnd = isDnd;
 		},
 		clear() {
+			this.friendMap.clear();
 			clearTimeout(this.timer);
-			this.friends = [];
 			this.timer = null;
 		},
 		loadFriend() {
@@ -92,11 +82,15 @@ export default defineStore('friendStore', {
 		}
 	},
 	getters: {
-		isFriend: (state) => (userId) => {
+		friends: (state) => {
-			return state.friends.filter((f) => !f.deleted).some((f) => f.id == userId);
+			return Array.from(state.friendMap.values());
 		},
-		findFriend: (state) => (id) => {
+		findFriend: (state) => (userId) => {
-			return state.friends.find((f) => f.id == id);
+			return state.friendMap.get(userId);
+		},
+		isFriend: (state) => (userId) => {
+			let f = state.findFriend(userId)
+			return f && !f.deleted
 		}
 	}
 })

im-uniapp/store/groupStore.js

@@ -4,33 +4,28 @@ import http from '@/common/request';
 export default defineStore('groupStore', {
 	state: () => {
 		return {
-			groups: []
+			groupMap: new Map()
 		}
 	},
 	actions: {
 		setGroups(groups) {
-			this.groups = groups;
+			this.groupMap.clear();
+			groups.forEach(g => this.groupMap.set(g.id, g))
 		},
 		addGroup(group) {
-			if (this.groups.some((g) => g.id == group.id)) {
+			this.groupMap.set(group.id, group);
-				this.updateGroup(group);
-			} else {
-				this.groups.unshift(group);
-			}
 		},
 		removeGroup(id) {
-			this.groups.filter(g => g.id == id).forEach(g => g.quit = true);
+			this.groupMap.get(id).quit = true;
 		},
 		updateGroup(group) {
-			let g = this.findGroup(group.id);
+			this.groupMap.set(group.id, group);
-			Object.assign(g, group);
 		},
 		setDnd(id, isDnd) {
-			let group = this.findGroup(id);
+			this.groupMap.get(id).isDnd = isDnd;
-			group.isDnd = isDnd;
 		},
 		clear() {
-			this.groups = [];
+			this.groupMap.clear();
 		},
 		loadGroup() {
 			return new Promise((resolve, reject) => {
@@ -47,8 +42,15 @@ export default defineStore('groupStore', {
 		}
 	},
 	getters: {
+		groups: (state) => {
+			return Array.from(state.groupMap.values());
+		},
 		findGroup: (state) => (id) => {
-			return state.groups.find((g) => g.id == id);
+			return state.groupMap.get(id);
+		},
+		isGroup: (state) => (id) => {
+			let group = state.findGroup(id);
+			return group && !group.quit
 		}
 	}
 })

im-web/src/components/chat/ChatBox.vue

@@ -163,13 +163,13 @@ export default {
 				msgInfo.id = m.id;
 				msgInfo.status = m.status;
 				this.isReceipt = false;
-				this.chatStore.insertMessage(msgInfo, file.chat);
+				this.chatStore.updateMessage(msgInfo, file.chat);
 			})
 		},
 		onImageFail(e, file) {
 			let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
 			msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
-			this.chatStore.insertMessage(msgInfo, file.chat);
+			this.chatStore.updateMessage(msgInfo, file.chat);
 		},
 		onImageBefore(file) {
 			// 被封禁提示
@@ -208,7 +208,7 @@ export default {
 				data.width = size.width;
 				data.height = size.height;
 				msgInfo.content = JSON.stringify(data)
-				this.chatStore.insertMessage(msgInfo, chat);
+				this.chatStore.updateMessage(msgInfo, chat);
 				this.scrollToBottom();
 			})
 		},
@@ -226,13 +226,13 @@ export default {
 				msgInfo.status = m.status;
 				this.isReceipt = false;
 				this.refreshPlaceHolder();
-				this.chatStore.insertMessage(msgInfo, file.chat);
+				this.chatStore.updateMessage(msgInfo, file.chat);
 			})
 		},
 		onFileFail(e, file) {
 			let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
 			msgInfo.status = this.$enums.MESSAGE_STATUS.FAILED;
-			this.chatStore.insertMessage(msgInfo, file.chat);
+			this.chatStore.updateMessage(msgInfo, file.chat);
 		},
 		onFileBefore(file) {
 			// 被封禁提示
@@ -384,7 +384,7 @@ export default {
 				// 更新消息
 				tmpMessage.id = m.id;
 				tmpMessage.status = m.status;
-				this.chatStore.insertMessage(tmpMessage, chat);
+				this.chatStore.updateMessage(tmpMessage, chat);
 				// 会话置顶
 				this.moveChatToTop();
 				// 保持输入框焦点
@@ -397,7 +397,7 @@ export default {
 				this.refreshPlaceHolder();
 			}).catch(() => {
 				tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
-				this.chatStore.insertMessage(tmpMessage, this.chat);
+				this.chatStore.updateMessage(tmpMessage, this.chat);
 			})
 		},
 		fillTargetId(msgInfo, targetId) {
@@ -483,11 +483,11 @@ export default {
 					tmpMessage.id = m.id;
 					tmpMessage.status = m.status;
 					tmpMessage.content = m.content;
-					this.chatStore.insertMessage(tmpMessage, chat);
+					this.chatStore.updateMessage(tmpMessage, chat);
 				}).catch(() => {
 					// 更新消息
 					tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
-					this.chatStore.insertMessage(tmpMessage, chat);
+					this.chatStore.updateMessage(tmpMessage, chat);
 				}).finally(() => {
 					this.isReceipt = false;
 					resolve();
@@ -522,11 +522,11 @@ export default {
 				tmpMessage.id = m.id;
 				tmpMessage.status = m.status;
 				tmpMessage.content = m.content;
-				this.chatStore.insertMessage(tmpMessage, chat);
+				this.chatStore.updateMessage(tmpMessage, chat);
 			}).catch(() => {
 				// 更新消息
 				tmpMessage.status = this.$enums.MESSAGE_STATUS.FAILED;
-				this.chatStore.insertMessage(tmpMessage, chat);
+				this.chatStore.updateMessage(tmpMessage, chat);
 			}).finally(() => {
 				this.scrollToBottom();
 			});

im-web/src/components/chat/ChatMessageItem.vue

@@ -23,11 +23,8 @@
 						<span class="message-text" v-if="isTextMessage" v-html="htmlText"></span>
 						<div class="message-image" v-else-if="msgInfo.type == $enums.MESSAGE_TYPE.IMAGE"
 							@click="showFullImageBox()">
-							<div v-loading="sending" element-loading-text="发送中.."
-								element-loading-background="rgba(0, 0, 0, 0.4)">
 								<img :style="imageStyle" :src="contentData.thumbUrl" loading="lazy" />
 						</div>
-						</div>
 						<div class="message-file" v-else-if="msgInfo.type == $enums.MESSAGE_TYPE.FILE">
 							<div class="chat-file-box" v-loading="sending">
 								<div class="chat-file-info">

im-web/src/store/chatStore.js

@@ -466,7 +466,8 @@ export default defineStore('chatStore', {
 								// 冷热消息合并
 								let chat = Object.assign({}, coldChat, hotChat);
 								if (hotChat && coldChat) {
-									chat.messages = coldChat.messages.concat(hotChat.messages)
+									chat.messages = coldChat.messages.concat(hotChat
+										.messages)
 								}
 								// 历史版本没有readedMessageIdx字段，做兼容一下
 								chat.readedMessageIdx = chat.readedMessageIdx || 0;
@@ -522,24 +523,27 @@ export default defineStore('chatStore', {
 			if (!chat) {
 				return null;
 			}
+			if (msgInfo.id) {
 				for (let idx = chat.messages.length - 1; idx >= 0; idx--) {
-				// 通过id判断
+					let m = chat.messages[idx];
-				if (msgInfo.id && chat.messages[idx].id) {
+					if (m.id && msgInfo.id == m.id) {
-					if (msgInfo.id == chat.messages[idx].id) {
+						return m;
-						return chat.messages[idx];
 					}
 					// 如果id比要查询的消息小，说明没有这条消息
-					if (msgInfo.id > chat.messages[idx].id) {
+					if (m.id && m.id < msgInfo.id) {
 						break;
 					}
 				}
+			}
 			// 正在发送中的消息可能没有id,只有tmpId
-				if (msgInfo.tmpId && chat.messages[idx].tmpId) {
+			if (msgInfo.tmpId) {
-					if (msgInfo.tmpId == chat.messages[idx].tmpId) {
+				for (let idx = chat.messages.length - 1; idx >= 0; idx--) {
-						return chat.messages[idx];
+					let m = chat.messages[idx];
+					if (m.tmpId && msgInfo.tmpId == m.tmpId) {
+						return m;
 					}
 					// 如果id比要查询的消息小，说明没有这条消息
-					if (msgInfo.tmpId > chat.messages[idx].tmpId) {
+					if (m.tmpId && m.tmpId < msgInfo.tmpId) {
 						break;
 					}
 				}