diff --git a/im-commom/src/main/java/com/bx/imcommon/mq/RedisMQPullTask.java b/im-commom/src/main/java/com/bx/imcommon/mq/RedisMQPullTask.java
index 353dcaf..ba51bc5 100644
--- a/im-commom/src/main/java/com/bx/imcommon/mq/RedisMQPullTask.java
+++ b/im-commom/src/main/java/com/bx/imcommon/mq/RedisMQPullTask.java
@@ -53,6 +53,8 @@ public class RedisMQPullTask implements CommandLineRunner {
                     List<Object> datas = new LinkedList<>();
                     try {
                         if(redisMQTemplate.isClose()){
+                            // 如果redis未初始化或已断开，3s后再重新尝试消费
+                            EXECUTOR.schedule(this, 3, TimeUnit.SECONDS);
                             return;
                         }
                         if (consumer.isReady()) {
@@ -79,7 +81,7 @@ public class RedisMQPullTask implements CommandLineRunner {
                     if (!EXECUTOR.isShutdown()) {
                         if (datas.size() < batchSize) {
                             // 数据已经消费完，等待下一个周期继续拉取
-                            EXECUTOR.schedule(this, period, TimeUnit.MICROSECONDS);
+                            EXECUTOR.schedule(this, period, TimeUnit.MILLISECONDS);
                         } else {
                             // 数据没有消费完，直接开启下一个消费周期
                             EXECUTOR.execute(this);
@@ -102,6 +104,9 @@ public class RedisMQPullTask implements CommandLineRunner {
                 objects.add(obj);
                 obj = redisMQTemplate.opsForList().leftPop(key);
             }
+            if (!Objects.isNull(obj)){
+                objects.add(obj);
+            }
         }
         return objects;
     }
diff --git a/im-uniapp/pages/chat/chat-box.vue b/im-uniapp/pages/chat/chat-box.vue
index fac5e36..013cd11 100644
--- a/im-uniapp/pages/chat/chat-box.vue
+++ b/im-uniapp/pages/chat/chat-box.vue
@@ -132,9 +132,10 @@
 				showRecord: false,
 				keyboardHeight: 322,
 				atUserIds: [],
-				recordText: "",
 				needScrollToBottom: false, // 需要滚动到底部 
-				showMinIdx: 0 // 下标小于showMinIdx的消息不显示，否则可能很卡
+				showMinIdx: 0, 	// 下标小于showMinIdx的消息不显示，否则可能很卡
+				reqQueue: [], 	// 请求队列
+				isSending: false // 是否正在发送请求
 			}
 		},
 		methods: {
@@ -154,11 +155,7 @@
 				}
 				// 填充对方id
 				this.fillTargetId(msgInfo, this.chat.targetId);
-				this.$http({
-					url: this.messageAction,
-					method: 'POST',
-					data: msgInfo
-				}).then((m) => {
+				this.sendMessageRequest(msgInfo).then((m) => {
 					m.selfSend = true;
 					this.$store.commit("insertMessage", m);
 					// 会话置顶
@@ -278,19 +275,14 @@
 					receipt: this.isReceipt,
 					type: 0
 				}
+				this.sendText = "";
 				// 填充对方id
 				this.fillTargetId(msgInfo, this.chat.targetId);
-				this.sendText = "";
-				this.$http({
-					url: this.messageAction,
-					method: 'POST',
-					data: msgInfo
-				}).then((m) => {
+				this.sendMessageRequest(msgInfo).then((m) => {
 					m.selfSend = true;
 					this.$store.commit("insertMessage", m);
 					// 会话置顶
 					this.moveChatToTop();
-					this.sendText = "";
 				}).finally(() => {
 					// 滚动到底部
 					this.scrollToBottom();
@@ -408,11 +400,7 @@
 				let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
 				msgInfo.content = JSON.stringify(res.data);
 				msgInfo.receipt = this.isReceipt
-				this.$http({
-					url: this.messageAction,
-					method: 'POST',
-					data: msgInfo
-				}).then((m) => {
+				this.sendMessageRequest(msgInfo).then((m) => {
 					msgInfo.loadStatus = 'ok';
 					msgInfo.id = m.id;
 					this.isReceipt = false;
@@ -463,11 +451,7 @@
 				let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
 				msgInfo.content = JSON.stringify(data);
 				msgInfo.receipt = this.isReceipt
-				this.$http({
-					url: this.messageAction,
-					method: 'POST',
-					data: msgInfo
-				}).then((m) => {
+				this.sendMessageRequest(msgInfo).then((m) => {
 					msgInfo.loadStatus = 'ok';
 					msgInfo.id = m.id;
 					this.isReceipt = false;
@@ -632,6 +616,32 @@
 				let px = info.windowWidth * rpx / 750;
 				return Math.floor(rpx);
 			},
+			sendMessageRequest(msgInfo){
+				return  new Promise((resolve,reject)=>{
+					// 请求入队列，防止请求"后发先至"，导致消息错序
+					this.reqQueue.push({msgInfo,resolve,reject});
+					this.processReqQueue();
+				})
+			},
+			processReqQueue(){
+				if (this.reqQueue.length && !this.isSending) {
+					this.isSending = true;
+					const reqData = this.reqQueue.shift();
+					this.$http({
+						url: this.messageAction,
+						method: 'post',
+						data: reqData.msgInfo
+					}).then((res)=>{
+						reqData.resolve(res)
+					}).catch((e)=>{
+						reqData.reject(e)
+					}).finally(()=>{
+						this.isSending = false;
+						// 发送下一条请求
+						this.processReqQueue();
+					})
+				}
+			},
 			generateId(){
 				// 生成临时id
 				return String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));
diff --git a/im-web/src/components/chat/ChatAtBox.vue b/im-web/src/components/chat/ChatAtBox.vue
index 25ab54a..556b1cf 100644
--- a/im-web/src/components/chat/ChatAtBox.vue
+++ b/im-web/src/components/chat/ChatAtBox.vue
@@ -1,5 +1,5 @@
 <template>
-	<el-scrollbar v-show="show" ref="scrollBox" class="group-member-choose"
+	<el-scrollbar v-show="show&&showMembers.length" ref="scrollBox" class="group-member-choose"
 		:style="{'left':pos.x+'px','top':pos.y-300+'px'}">
 		<div v-for="(member,idx) in showMembers" :key="member.id">
 			<chat-group-member :member="member" :height="40" :active='activeIdx==idx'
@@ -56,10 +56,6 @@
 					}
 				})
 				this.activeIdx = this.showMembers.length > 0 ? 0: -1;
-				console.log(this.showMembers.length)
-				if(this.showMembers.length == 0){
-					this.close();
-				}
 			},
 			open(pos) {
 				this.show = true;
diff --git a/im-web/src/components/chat/ChatBox.vue b/im-web/src/components/chat/ChatBox.vue
index 6981db5..5e619b3 100644
--- a/im-web/src/components/chat/ChatBox.vue
+++ b/im-web/src/components/chat/ChatBox.vue
@@ -36,7 +36,7 @@
 									</file-upload>
 								</div>
 								<div title="发送文件">
-									<file-upload :action="'/file/upload'" :maxSize="10 * 1024 * 1024"
+									<file-upload ref="fileUpload" :action="'/file/upload'" :maxSize="10 * 1024 * 1024"
 										@before="onFileBefore" @success="onFileSuccess" @fail="onFileFail">
 										<i class="el-icon-wallet"></i>
 									</file-upload>
@@ -58,23 +58,10 @@
 								<div title="聊天记录" class="el-icon-chat-dot-round" @click="showHistoryBox()"></div>
 							</div>
 							<div class="send-content-area">
-								<div contenteditable="true" v-show="!sendImageUrl" ref="editBox" class="send-text-area"
-									:disabled="lockMessage" @paste.prevent="onEditorPaste"
-									@compositionstart="onEditorCompositionStart"
-									@compositionend="onEditorCompositionEnd" @input="onEditorInput"
-									:placeholder="placeholder" @blur="onEditBoxBlur()" @keyup.down="onKeyDown"
-									@keyup.up.prevent="onKeyUp" @keydown.enter.prevent="onKeyEnter">x
-								</div>
-
-								<div v-show="sendImageUrl" class="send-image-area">
-									<div class="send-image-box">
-										<img class="send-image" :src="sendImageUrl" />
-										<span class="send-image-close el-icon-close" title="删除"
-											@click="removeSendImage()"></span>
-									</div>
-								</div>
+								<ChatInput :ownerId="group.ownerId" ref="chatInputEditor" :group-members="groupMembers"
+									@submit="sendMessage" />
 								<div class="send-btn-area">
-									<el-button type="primary" size="small" @click="sendMessage()">发送</el-button>
+									<el-button type="primary" size="small" @click="notifySend()">发送</el-button>
 								</div>
 							</div>
 						</el-footer>
@@ -86,8 +73,6 @@
 				</el-container>
 			</el-main>
 			<emotion ref="emoBox" @emotion="onEmotion"></Emotion>
-			<chat-at-box ref="atBox" :ownerId="group.ownerId" :members="groupMembers" :search-text="atSearchText"
-				@select="onAtSelect"></chat-at-box>
 			<chat-record :visible="showRecord" @close="closeRecordBox" @send="onSendRecord"></chat-record>
 			<group-member-selector ref="rtcSel" :groupId="group.id" @complete="onInviteOk"></group-member-selector>
 			<rtc-group-join ref="rtcJoin" :groupId="group.id"></rtc-group-join>
@@ -107,11 +92,13 @@
 	import ChatAtBox from "./ChatAtBox.vue"
 	import GroupMemberSelector from "../group/GroupMemberSelector.vue"
 	import RtcGroupJoin from "../rtc/RtcGroupJoin.vue"
+	import ChatInput from "./ChatInput";
 
 
 	export default {
 		name: "chatPrivate",
 		components: {
+			ChatInput,
 			ChatMessageItem,
 			FileUpload,
 			ChatGroupSide,
@@ -140,11 +127,9 @@
 				showSide: false, // 是否显示群聊信息栏
 				showHistory: false, // 是否显示历史聊天记录
 				lockMessage: false, // 是否锁定发送，
-				showMinIdx: 0, // 下标低于showMinIdx的消息不显示，否则页面会很卡
-				atSearchText: "",
-				focusNode: null, // 缓存光标所在节点
-				focusOffset: null, // 缓存光标所在节点位置
-				zhLock: false // 解决中文输入法触发英文的情况
+				showMinIdx: 0, // 下标低于showMinIdx的消息不显示，否则页面会很卡置
+				reqQueue: [],
+				isSending : false
 			}
 		},
 		methods: {
@@ -154,7 +139,7 @@
 			},
 			closeRefBox() {
 				this.$refs.emoBox.close();
-				this.$refs.atBox.close();
+				// this.$refs.atBox.close();
 			},
 			onCall(type) {
 				if (type == this.$enums.MESSAGE_TYPE.ACT_RT_VOICE) {
@@ -163,169 +148,18 @@
 					this.showPrivateVideo('video');
 				}
 			},
-			onKeyDown() {
-				console.log("onKeyDown")
-				if (this.$refs.atBox.show) {
-					this.$refs.atBox.moveDown()
-				}
-			},
-			onKeyUp() {
-				if (this.$refs.atBox.show) {
-					this.$refs.atBox.moveUp()
-				}
-			},
-			onKeyEnter() {
-				if (this.$refs.atBox.show) {
-					// 键盘操作不会自动修正焦点，需要手动修正,原因不详
-					this.focusOffset += this.atSearchText.length;
-					this.$refs.atBox.select();
-				} else {
-					this.sendMessage();
-				}
-			},
-			onEditBoxBlur() {
-				let selection = window.getSelection()
-				// 记录光标位置(点击emoji时)
-				this.focusNode = selection.focusNode;
-				this.focusOffset = selection.focusOffset;
-			},
-			onEditorInput(e, e2, e3) {
-				// 如果触发 @
-				if (this.chat.type == "GROUP" && !this.zhLock) {
-					console.log("onEditorInput")
-					if (e.inputType === "deleteContentBackward" && !this.atSearchText) {
-						this.$refs.atBox.close();
-					}
-					if (e.data == '@') {
-						// 打开选择弹窗
-						this.showAtBox(e);
-					} else if(this.$refs.atBox.show){
-						let selection = window.getSelection()
-						let range = selection.getRangeAt(0)
-						this.focusNode = selection.focusNode;
-						// 截取@后面的名称作为过滤条件
-						let stIdx = this.focusNode.textContent.lastIndexOf('@');
-						this.atSearchText = this.focusNode.textContent.substring(stIdx + 1);
-					}
-				}
-				this.refreshPlaceHolder();
-
-			},
-			onEditorCompositionStart() {
-				this.zhLock = true;
-			},
-			onEditorCompositionEnd(e) {
-				this.zhLock = false;
-				this.onEditorInput(e);
-			},
-			showAtBox(e) {
-				this.atSearchText = "";
-				let selection = window.getSelection()
-				let range = selection.getRangeAt(0)
-				// 记录光标所在位置
-				this.focusNode = selection.focusNode;
-				this.focusOffset = selection.focusOffset;
-				// 光标所在坐标
-				let pos = range.getBoundingClientRect();
-				this.$refs.atBox.open({
-					x: pos.x,
-					y: pos.y
-				})
-			},
-			onAtSelect(member) {
-				let range = window.getSelection().getRangeAt(0)
-				// 选中输入的 @xx 符
-				range.setStart(this.focusNode, this.focusOffset - 1 - this.atSearchText.length)
-				range.setEnd(this.focusNode, this.focusOffset)
-				range.deleteContents()
-				// 创建元素节点
-				let element = document.createElement('SPAN')
-				element.className = "at"
-				element.dataset.id = member.userId;
-				element.contentEditable = 'false'
-				element.innerText = `@${member.showNickName}`
-				range.insertNode(element)
-				// 光标移动到末尾
-				range.collapse()
-				// 插入空格
-				let textNode = document.createTextNode('\u00A0');
-				range.insertNode(textNode)
-				range.collapse()
-				this.atSearchText = "";
-				this.$refs.editBox.focus()
-			},
 			onSwitchReceipt() {
 				this.isReceipt = !this.isReceipt;
 				this.refreshPlaceHolder();
 			},
-			createSendText() {
-				let sendText = this.isReceipt ? "【回执消息】" : "";
-				this.$refs.editBox.childNodes.forEach((node) => {
-					if (node.nodeName == "#text") {
-						sendText += this.html2Escape(node.textContent);
-					} else if (node.nodeName == "SPAN") {
-						sendText += node.innerHTML;
-					} else if (node.nodeName == "IMG") {
-						sendText += node.dataset.code;
-					}
-				})
-				return sendText;
-			},
-			html2Escape(strHtml) {
-				return strHtml.replace(/[<>&"]/g, function(c) {
-					return {
-						'<': '&lt;',
-						'>': '&gt;',
-						'&': '&amp;',
-						'"': '&quot;'
-					} [c];
-				});
-			},
-			createAtUserIds() {
-				let ids = [];
-				this.$refs.editBox.childNodes.forEach((node) => {
-					if (node.nodeName == "SPAN") {
-						ids.push(node.dataset.id);
-					}
-				})
-				return ids;
-			},
-			onEditorPaste(e) {
-				let txt = e.clipboardData.getData('Text')
-				if (typeof(txt) == 'string') {
-					let range = window.getSelection().getRangeAt(0)
-					let textNode = document.createTextNode(txt);
-					range.insertNode(textNode)
-					range.collapse();
-				}
-				let items = (e.clipboardData || window.clipboardData).items
-				if (items.length) {
-					for (let i = 0; i < items.length; i++) {
-						if (items[i].type.indexOf('image') !== -1) {
-							let file = items[i].getAsFile();
-							this.sendImageFile = file;
-							this.sendImageUrl = URL.createObjectURL(file);
-						}
-					}
-				}
-			},
-			removeSendImage() {
-				this.sendImageUrl = "";
-				this.sendImageFile = null;
-			},
 			onImageSuccess(data, file) {
 				let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
 				msgInfo.content = JSON.stringify(data);
 				msgInfo.receipt = this.isReceipt;
-				this.$http({
-					url: this.messageAction,
-					method: 'post',
-					data: msgInfo
-				}).then((m) => {
+				this.sendMessageRequest(msgInfo).then((id) => {
 					msgInfo.loadStatus = 'ok';
-					msgInfo.id = m.id;
+					msgInfo.id = id;
 					this.isReceipt = false;
-					this.refreshPlaceHolder();
 					this.$store.commit("insertMessage", msgInfo);
 				})
 			},
@@ -373,11 +207,7 @@
 				let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
 				msgInfo.content = JSON.stringify(data);
 				msgInfo.receipt = this.isReceipt
-				this.$http({
-					url: this.messageAction,
-					method: 'post',
-					data: msgInfo
-				}).then((m) => {
+				this.sendMessageRequest(msgInfo).then((m) => {
 					msgInfo.loadStatus = 'ok';
 					msgInfo.id = m.id;
 					this.isReceipt = false;
@@ -445,21 +275,7 @@
 				})
 			},
 			onEmotion(emoText) {
-				// 保持输入框焦点
-				this.$refs.editBox.focus();
-				let range = window.getSelection().getRangeAt(0);
-				// 插入光标所在位置
-				range.setStart(this.focusNode, this.focusOffset)
-				let element = document.createElement('IMG')
-				element.className = "emo"
-				element.dataset.code = emoText;
-				element.contentEditable = 'true'
-				element.setAttribute("src", this.$emo.textToUrl(emoText));
-				// 选中元素节点
-				range.insertNode(element)
-				// 光标移动到末尾
-				range.collapse()
-
+				this.$refs.chatInputEditor.insertEmoji(emoText);
 			},
 			showRecordBox() {
 				this.showRecord = true;
@@ -489,7 +305,6 @@
 						let ids = [this.mine.id];
 						let maxChannel = this.$store.state.configStore.webrtc.maxChannel;
 						this.$refs.rtcSel.open(maxChannel, ids, ids);
-
 					}
 				})
 
@@ -531,24 +346,19 @@
 				}
 				// 填充对方id
 				this.fillTargetId(msgInfo, this.chat.targetId);
-				this.$http({
-					url: this.messageAction,
-					method: 'post',
-					data: msgInfo
-				}).then((m) => {
+				this.sendMessageRequest(msgInfo).then((m) => {
 					m.selfSend = true;
 					this.$store.commit("insertMessage", m);
 					// 会话置顶
 					this.moveChatToTop();
 					// 保持输入框焦点
-					this.$refs.editBox.focus();
+					this.$refs.chatInputEditor.focus();
 					// 滚动到底部
 					this.scrollToBottom();
 					// 关闭录音窗口
 					this.showRecord = false;
 					this.isReceipt = false;
 					this.refreshPlaceHolder();
-
 				})
 			},
 			fillTargetId(msgInfo, targetId) {
@@ -558,70 +368,87 @@
 					msgInfo.recvId = targetId;
 				}
 			},
-			sendMessage() {
-				if (this.sendImageFile) {
-					this.sendImageMessage();
-				} else {
-					this.sendTextMessage();
-				}
-				// 消息已读
-				this.readedMessage()
-			},
-			sendImageMessage() {
-				let file = this.sendImageFile;
-				this.onImageBefore(this.sendImageFile);
-				let formData = new FormData()
-				formData.append('file', file)
-				this.$http.post("/image/upload", formData, {
-					headers: {
-						'Content-Type': 'multipart/form-data'
-					}
-				}).then((data) => {
-					this.onImageSuccess(data, file);
-				}).catch((res) => {
-					this.onImageSuccess(res, file);
-				})
-				this.sendImageFile = null;
-				this.sendImageUrl = "";
-				this.$nextTick(() => this.$refs.editBox.focus());
-				this.scrollToBottom();
+			notifySend() {
+				this.$refs.chatInputEditor.submit();
 			},
-			sendTextMessage() {
-				let sendText = this.createSendText();
-				if (!sendText.trim()) {
-					return
-				}
-				this.$refs.editBox.cle
-				let msgInfo = {
-					content: sendText,
-					type: 0
-				}
-				// 填充对方id
-				this.fillTargetId(msgInfo, this.chat.targetId);
-				// 被@人员列表
-				if (this.chat.type == "GROUP") {
-					msgInfo.atUserIds = this.createAtUserIds();
-					msgInfo.receipt = this.isReceipt;
+			async sendMessage(fullList) {
+				this.resetEditor();
+				this.readedMessage();
+				let sendText = this.isReceipt ? "【回执消息】" : "";
+				let promiseList = [];
+				for (let i = 0; i < fullList.length; i++) {
+					let msg = fullList[i];
+					switch (msg.type) {
+						case "text":
+							await this.sendTextMessage(sendText + msg.content,msg.atUserIds);
+							break;
+						case "image":
+							await this.sendImageMessage(msg.content.file);
+							break;
+						case "file":
+							await this.sendFileMessage(msg.content.file);
+							break;
+					}
+				
 				}
-				this.lockMessage = true;
-				this.$http({
-					url: this.messageAction,
-					method: 'post',
-					data: msgInfo
-				}).then((m) => {
-					m.selfSend = true;
-					this.$store.commit("insertMessage", m);
-					// 会话置顶
-					this.moveChatToTop();
-				}).finally(() => {
-					// 解除锁定
-					this.lockMessage = false;
+			},
+			sendImageMessage(file) {
+				return new Promise((resolve,reject)=>{
+					this.onImageBefore(file);
+					let formData = new FormData()
+					formData.append('file', file)
+					this.$http.post("/image/upload", formData, {
+						headers: {
+							'Content-Type': 'multipart/form-data'
+						}
+					}).then((data) => {
+						this.onImageSuccess(data, file);
+						resolve();
+					}).catch((res) => {
+						this.onImageFail(res, file);
+						reject();
+					})
+					this.$nextTick(() => this.$refs.chatInputEditor.focus());
 					this.scrollToBottom();
-					this.resetEditor();
-					this.isReceipt = false;
-					this.refreshPlaceHolder();
+					});
+			},
+			 sendTextMessage(sendText,atUserIds) {
+				return new Promise((resolve,reject)=>{
+					if (!sendText.trim()) {
+						reject();
+					}
+					let msgInfo = {
+						content: sendText,
+						type: 0
+					}
+					// 填充对方id
+					this.fillTargetId(msgInfo, this.chat.targetId);
+					// 被@人员列表
+					if (this.chat.type == "GROUP") {
+						msgInfo.atUserIds = atUserIds;
+						msgInfo.receipt = this.isReceipt;
+					}
+					this.lockMessage = true;
+					this.sendMessageRequest(msgInfo).then((m) => {
+						m.selfSend = true;
+						this.$store.commit("insertMessage", m);
+						// 会话置顶
+						this.moveChatToTop();
+					}).finally(() => {
+						// 解除锁定
+						this.scrollToBottom();
+						this.isReceipt = false;
+						resolve();
+					});
 				});
-
+			},
+			sendFileMessage(file) {
+				return new Promise((resolve,reject)=>{
+					let check = this.$refs.fileUpload.beforeUpload(file);
+					if (check) {
+						this.$refs.fileUpload.onFileUpload({ file });
+					}
+				})
 			},
 			deleteMessage(msgInfo) {
 				this.$confirm('确认删除消息?', '删除消息', {
@@ -686,7 +513,6 @@
 					this.group = group;
 					this.$store.commit("updateChatFromGroup", group);
 					this.$store.commit("updateGroup", group);
-
 				});
 
 				this.$http({
@@ -725,11 +551,10 @@
 				}
 			},
 			resetEditor() {
-				this.sendImageUrl = "";
-				this.sendImageFile = null;
+				
 				this.$nextTick(() => {
-					this.$refs.editBox.innerHTML = "";
-					this.$refs.editBox.focus();
+					this.$refs.chatInputEditor.clear();
+					this.$refs.chatInputEditor.focus();
 				});
 			},
 			scrollToBottom() {
@@ -747,6 +572,32 @@
 					this.placeholder = "聊点什么吧~";
 				}
 			},
+			sendMessageRequest(msgInfo){
+				return  new Promise((resolve,reject)=>{
+					// 请求入队列，防止请求"后发先至"，导致消息错序
+					this.reqQueue.push({msgInfo,resolve,reject});
+					this.processReqQueue();
+				})
+			},
+			processReqQueue(){
+				if (this.reqQueue.length && !this.isSending) {
+					this.isSending = true;
+					const reqData = this.reqQueue.shift();
+					this.$http({
+						url: this.messageAction,
+						method: 'post',
+						data: reqData.msgInfo
+					}).then((res)=>{
+						reqData.resolve(res)
+					}).catch((e)=>{
+						reqData.reject(e)
+					}).finally(()=>{
+						this.isSending = false;
+						// 发送下一条请求
+						this.processReqQueue();
+					})
+				}
+			},
 			generateId() {
 				// 生成临时id
 				return String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));
@@ -776,7 +627,6 @@
 				}
 				return this.chat.messages.length;
 			}
-
 		},
 		watch: {
 			chat: {
@@ -829,6 +679,7 @@
 		position: relative;
 		width: 100%;
 		background: #f8f8f8;
+		border: #dddddd solid 1px;
 
 		.el-header {
 			padding: 3px;
@@ -844,13 +695,12 @@
 				line-height: 50px;
 				font-size: 25px;
 				cursor: pointer;
-
 			}
 		}
 
 		.im-chat-main {
 			padding: 0;
-			background-color: white;
+			background-color: #f8f8f8;
 
 			.im-chat-box {
 				>ul {
@@ -877,26 +727,33 @@
 				box-sizing: border-box;
 				border-top: #ccc solid 1px;
 				padding: 2px;
-				background-color: #E8F2FF;
+				background-color: #e8f2ff;
 
 				>div {
 					font-size: 22px;
 					cursor: pointer;
 					color: black;
-					line-height: 34px;
-					width: 34px;
-					height: 34px;
+					line-height: 30px;
+					width: 30px;
+					height: 30px;
 					text-align: center;
 					border-radius: 3px;
+					margin: 3px;
 
 					&:hover {
 						color: black;
 					}
 
 					&.chat-tool-active {
-						background: #ddd;
+						font-weight: 600;
+						color: #195ee2;
+						background-color: #ddd;
 					}
 				}
+
+				>div:hover {
+					color: #949494;
+				}
 			}
 
 			.send-content-area {
@@ -914,10 +771,10 @@
 					resize: none;
 					font-size: 16px;
 					color: black;
-					outline-color: rgba(83, 160, 231, 0.61);
+					outline: none;
 
 					text-align: left;
-					line-height: 30 px;
+					line-height: 30px;
 
 					&:before {
 						content: attr(placeholder);
@@ -971,7 +828,6 @@
 							border: 1px solid #ccc;
 						}
 					}
-
 				}
 
 				.send-btn-area {
@@ -981,7 +837,6 @@
 					right: 0;
 				}
 			}
-
 		}
 
 		.chat-group-side-box {
diff --git a/im-web/src/components/chat/ChatInput.vue b/im-web/src/components/chat/ChatInput.vue
new file mode 100644
index 0000000..f82886d
--- /dev/null
+++ b/im-web/src/components/chat/ChatInput.vue
@@ -0,0 +1,571 @@
+<template>
+	<div class="chat-input-area">
+		<div :class="['edit-chat-container',isEmpty?'':'not-empty']" contenteditable="true" @paste.prevent="onPaste"
+			@keydown="onKeydown" @compositionstart="compositionFlag=true" @compositionend="onCompositionEnd"
+			@input="onEditorInput" @mousedown="onMousedown" ref="content" @blur="onBlur">
+		</div>
+		<chat-at-box @select="onAtSelect" :search-text="atSearchText" ref="atBox" :ownerId="ownerId"
+			:members="groupMembers"></chat-at-box>
+	</div>
+</template>
+
+<script>
+	import ChatAtBox from "./ChatAtBox";
+
+	export default {
+		name: "ChatInput",
+		components: { ChatAtBox },
+		props: {
+			ownerId: {
+				type: Number,
+			},
+			groupMembers: {
+				type: Array,
+			},
+		},
+		data() {
+			return {
+				imageList: [],
+				fileList: [],
+				currentId: 0,
+				atSearchText: null,
+				compositionFlag: false,
+				atIng: false,
+				isEmpty: true,
+				changeStored: true,
+				blurRange: null
+			}
+		},
+		methods: {
+			onPaste(e) {
+				this.isEmpty = false;
+				let txt = e.clipboardData.getData('Text')
+				let range = window.getSelection().getRangeAt(0)
+				if (range.startContainer !== range.endContainer || range.startOffset !== range.endOffset) {
+					range.deleteContents();
+				}
+				// 粘贴图片和文件时，这里没有数据
+				if (txt && typeof(txt) == 'string') {
+					let textNode = document.createTextNode(txt);
+					range.insertNode(textNode)
+					range.collapse();
+					return;
+				}
+				let items = (e.clipboardData || window.clipboardData).items
+				if (items.length) {
+					for (let i = 0; i < items.length; i++) {
+						if (items[i].type.indexOf('image') !== -1) {
+							let file = items[i].getAsFile();
+							let imagePush = {
+								fileId: this.generateId(),
+								file: file,
+								url: URL.createObjectURL(file)
+							};
+							this.imageList[imagePush.fileId] = (imagePush);
+							let line = this.newLine();
+							let imageElement = document.createElement('img');
+							imageElement.className = 'chat-image no-text';
+							imageElement.src = imagePush.url;
+							imageElement.dataset.imgId = imagePush.fileId;
+							line.appendChild(imageElement);
+							let after = document.createTextNode('\u00A0');
+							line.appendChild(after);
+							this.selectElement(after, 1);		
+						} else {
+							let asFile = items[i].getAsFile();
+							if (!asFile) {
+								continue;
+							}
+							let filePush = { fileId: this.generateId(), file: asFile };
+							this.fileList[filePush.fileId] = (filePush)
+							let line = this.newLine();
+							let fileElement = this.createFile(filePush);
+							line.appendChild(fileElement);
+							let after = document.createTextNode('\u00A0');
+							line.appendChild(after);
+							this.selectElement(after, 1);
+						}
+					}
+				}
+				range.collapse();
+			},
+			selectElement(element, endOffset) {
+				let selection = window.getSelection();
+				// 插入元素可能不是立即执行的，vue可能会在插入元素后再更新dom
+				this.$nextTick(() => {
+					let t1 = document.createRange();
+					t1.setStart(element, 0);
+					t1.setEnd(element, endOffset || 0);
+					if (element.firstChild) {
+						t1.selectNodeContents(element.firstChild);
+					}
+					t1.collapse();
+					selection.removeAllRanges();
+					selection.addRange(t1);
+					// 需要时自动聚焦
+					if (element.focus) {
+						element.focus();
+					}
+				})
+			},
+			onCompositionEnd(e) {
+				this.compositionFlag = false;
+				this.onEditorInput(e);
+			},
+			onKeydown(e) {
+				if (e.keyCode === 13) {
+					e.preventDefault();
+					e.stopPropagation();
+					if (this.atIng) {
+						console.log('选中at的人')
+						this.$refs.atBox.select();
+						return;
+					}
+					if (e.ctrlKey) {
+						let line = this.newLine();
+						let after = document.createTextNode('\u00A0');
+						line.appendChild(after);
+						this.selectElement(line.childNodes[0], 0);
+					} else {
+						// 中文输入标记
+						if (this.compositionFlag) {
+							return;
+						}
+						this.submit();
+					}
+					return;
+				}
+				// 删除键
+				if (e.keyCode === 8) {
+					console.log("delete")
+					// 等待dom更新
+					setTimeout(() => {
+						let s = this.$refs.content.innerHTML.trim();
+						// 空dom时，需要刷新dom
+						console.log(s);
+						if (s === '' || s === '<br>' || s === '<div>&nbsp;</div>' ) {
+							// 拼接随机长度的空格，以刷新dom
+							this.empty();
+							this.isEmpty = true;
+							this.selectElement(this.$refs.content);
+						} else {
+							this.isEmpty = false;
+						}
+					})
+				}
+				// at框打开时，上下键移动特殊处理
+				if (this.atIng) {
+					if (e.keyCode === 38) {
+						e.preventDefault();
+						e.stopPropagation();
+						this.$refs.atBox.moveUp();
+					}
+					if (e.keyCode === 40) {
+						e.preventDefault();
+						e.stopPropagation();
+						this.$refs.atBox.moveDown();
+					}
+				}
+
+			},
+			onAtSelect(member) {
+				this.atIng = false;
+				// 选中输入的 @xx 符
+				let blurRange = this.blurRange;
+				let endContainer = blurRange.endContainer
+				let startOffset = endContainer.data.indexOf("@"+this.atSearchText);
+				let endOffset = startOffset + this.atSearchText.length + 1;
+				blurRange.setStart(blurRange.endContainer, startOffset);
+				blurRange.setEnd(blurRange.endContainer,  endOffset);
+				blurRange.deleteContents()
+				blurRange.collapse();
+				console.log("onAtSelect")
+				this.focus();
+				// 创建元素节点
+				let element = document.createElement('SPAN')
+				element.className = "chat-at-user";
+				element.dataset.id = member.userId;
+				element.contentEditable = 'false'
+				element.innerText = `@${member.showNickName}`
+				blurRange.insertNode(element)
+				// 光标移动到末尾
+				blurRange.collapse()
+
+				// 插入空格
+				let textNode = document.createTextNode('\u00A0');
+				blurRange.insertNode(textNode);
+
+				blurRange.collapse()
+				this.atSearchText = "";
+				this.selectElement(textNode, 1);
+			},
+			onEditorInput(e) {
+				this.isEmpty = false;
+				this.changeStored = false;
+				if (this.$props.groupMembers && !this.compositionFlag) {
+					let selection = window.getSelection()
+					let range = selection.getRangeAt(0);
+					// 截取@后面的名称作为过滤条件，并以空格结束
+					let endContainer = range.endContainer;
+					let endOffset = range.endOffset;
+					let textContent = endContainer.textContent;
+					let startIndex = -1;
+					for (let i = endOffset; i >= 0; i--) {
+						if (textContent[i] === '@') {
+							startIndex = i;
+							break;
+						}
+					}
+					// 没有at符号，则关闭弹窗
+					if (startIndex === -1) {
+						this.$refs.atBox.close();
+						return;
+					}
+
+					let endIndex = endOffset;
+					for (let i = endOffset; i < textContent.length; i++) {
+						if (textContent[i] === ' ') {
+							endIndex = i;
+							break;
+						}
+					}
+					this.atSearchText = textContent.substring(startIndex + 1, endIndex).trim();
+					// 打开选择弹窗
+					if (this.atSearchText == '') {
+						this.showAtBox(e)
+					}
+				}
+
+			},
+			onBlur(e) {
+				this.updateRange();
+				
+			},
+			onMousedown() {
+				if (this.atIng) {
+					this.$refs.atBox.close();
+					this.atIng = false;
+				}
+			},
+			insertEmoji(emojiText) {
+				let emojiElement = document.createElement('img');
+				emojiElement.className = 'chat-emoji no-text';
+				emojiElement.dataset.emojiCode = emojiText;
+				emojiElement.src = this.$emo.textToUrl(emojiText);
+
+				let blurRange = this.blurRange;
+				if (!blurRange) {
+					this.focus();
+					this.updateRange();
+					blurRange = this.blurRange;
+				}
+				if (blurRange.startContainer !== blurRange.endContainer || blurRange.startOffset !== blurRange.endOffset) {
+					blurRange.deleteContents();
+				}
+				blurRange.insertNode(emojiElement);
+				blurRange.collapse()
+
+				let textNode = document.createTextNode('\u00A0');
+				blurRange.insertNode(textNode)
+				blurRange.collapse()
+
+				this.selectElement(textNode);
+				this.updateRange();
+				this.isEmpty = false;
+			},
+			generateId() {
+				return this.currentId++;
+			},
+			createFile(filePush) {
+				let file = filePush.file;
+				let fileId = filePush.fileId;
+				let container = document.createElement('div');
+				container.className = 'chat-file-container no-text';
+				container.contentEditable = 'false';
+				container.dataset.fileId = fileId;
+
+				let left = document.createElement('div');
+				left.className = 'file-position-left';
+				container.appendChild(left);
+
+				let icon = document.createElement('div');
+				icon.className = 'el-icon-document';
+				left.appendChild(icon);
+
+				let right = document.createElement('div');
+				right.className = 'file-position-right';
+				container.appendChild(right);
+
+				let fileName = document.createElement('div');
+				fileName.className = 'file-name';
+				fileName.innerText = file.name;
+
+				let fileSize = document.createElement('div');
+				fileSize.className = 'file-size';
+				fileSize.innerText = this.sizeConvert(file.size);
+
+				right.appendChild(fileName);
+				right.appendChild(fileSize);
+
+				return container;
+			},
+			sizeConvert(len) {
+				if (len < 1024) {
+					return len + 'B';
+				} else if (len < 1024 * 1024) {
+					return (len / 1024).toFixed(2) + 'KB';
+				} else if (len < 1024 * 1024 * 1024) {
+					return (len / 1024 / 1024).toFixed(2) + 'MB';
+				} else {
+					return (len / 1024 / 1024 / 1024).toFixed(2) + 'GB';
+				}
+			},
+			updateRange() {
+				let selection = window.getSelection();
+				this.blurRange = selection.getRangeAt(0);
+			},
+			newLine() {
+				let selection = window.getSelection();
+				let range = selection.getRangeAt(0);
+				let divElement = document.createElement('div');
+				let endContainer = range.endContainer;
+				let parentElement = endContainer.parentElement;
+				if (parentElement.parentElement === this.$refs.content) {
+					divElement.innerHTML  = endContainer.textContent.substring(range.endOffset).trim(); 
+					endContainer.textContent = endContainer.textContent.substring(0, range.endOffset);
+					// 插入到当前div（当前行）后面
+					parentElement.insertAdjacentElement('afterend', divElement);
+				} else {
+					divElement.innerHTML = '';
+					this.$refs.content.append(divElement);
+				}
+				return divElement;
+			},
+			clear() {
+				this.empty();
+				this.imageList = [];
+				this.fileList = [];
+			},
+			empty() {
+				this.$refs.content.innerHTML = "";
+				let line = this.newLine();
+				let after = document.createTextNode('\u00A0');
+				line.appendChild(after);
+				this.$nextTick(()=>this.selectElement(after));
+			},
+			showAtBox(e) {
+				this.atIng = true;
+				// show之后会自动更新当前搜索的text
+				// this.atSearchText = "";
+				let selection = window.getSelection()
+				let range = selection.getRangeAt(0)
+				// 光标所在坐标
+				let pos = range.getBoundingClientRect();
+				this.$refs.atBox.open({
+					x: pos.x,
+					y: pos.y
+				})
+				// 记录光标所在位置
+				this.updateRange();
+			},
+			html2Escape(strHtml) {
+				return strHtml.replace(/[<>&"]/g, function(c) {
+					return {
+						'<': '&lt;',
+						'>': '&gt;',
+						'&': '&amp;',
+						'"': '&quot;'
+					} [c];
+				});
+			},
+			submit() {
+				let nodes = this.$refs.content.childNodes;
+				let fullList = [];
+				let tempText = '';
+				let atUserIds = [];
+				let each = (nodes) => {
+					for (let i = 0; i < nodes.length; i++) {
+						let node = nodes[i];
+						if (!node) {
+							continue;
+						}
+						if (node.nodeType === 3) {
+							tempText += this.html2Escape(node.textContent);
+							continue;
+						}
+						let nodeName = node.nodeName.toLowerCase();
+						if (nodeName === 'script') {
+							continue;
+						}
+						let text = tempText.trim();
+						if (nodeName === 'img') {
+							let imgId = node.dataset.imgId;
+							if (imgId) {
+								if (text) {
+									fullList.push({
+										type: 'text',
+										content: text,
+										atUserIds: atUserIds
+									})
+									tempText = '';
+									atUserIds = []
+								}
+								fullList.push({
+									type: 'image',
+									content: this.imageList[imgId]
+								})
+							} else {
+								let emojiCode = node.dataset.emojiCode;
+								tempText += emojiCode;
+							}
+						} else if (nodeName === 'div') {
+							let fileId = node.dataset.fileId
+							// 文件
+							if (fileId) {
+								if (text) {
+									fullList.push({
+										type: 'text',
+										content: text,
+										atUserIds: atUserIds
+									})
+									tempText = '';
+									atUserIds = []
+								}
+								fullList.push({
+									type: 'file',
+									content: this.fileList[fileId]
+								})
+							} else {
+								tempText += '\n';
+								each(node.childNodes);
+							}
+						} else if (nodeName === 'span') {
+							if(node.dataset.id){
+								tempText += node.innerHTML;
+								atUserIds.push(node.dataset.id)
+							}else {
+								tempText += node.outerHtml;
+							}
+						}
+					}
+				}
+				each(nodes)
+				let text = tempText.trim();
+				if (text !== '') {
+					fullList.push({
+						type: 'text',
+						content: text,
+						atUserIds: atUserIds
+					})
+				}
+				this.$emit('submit', fullList);
+			},
+			focus() {
+				this.$refs.content.focus();
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	.chat-input-area {
+		width: 100%;
+		height: 100%;
+		position: relative;
+
+		.edit-chat-container {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			border: 1px solid #c3c3c3;
+			outline: none;
+			padding: 5px;
+			line-height: 30px;
+			font-size: 16px;
+			text-align: left;
+			overflow-y: scroll;
+
+			// 单独一行时，无法在前面输入的bug
+			>div:before {
+				content: "\00a0";
+				font-size: 14px;
+				position: absolute;
+				top: 0;
+				left: 0;
+			}
+
+			.chat-image {
+				display: block;
+				max-width: 200px;
+				max-height: 100px;
+				border: 1px solid #e6e6e6;
+				cursor: pointer;
+			}
+
+			.chat-emoji {
+				width: 30px;
+				height: 30px;
+				vertical-align: top;
+				cursor: pointer;
+			}
+
+			.chat-file-container {
+				max-width: 65%;
+				padding: 10px;
+				border: 2px solid #587ff0;
+				display: flex;
+				background: #eeeC;
+				border-radius: 10px;
+
+				.file-position-left {
+					display: flex;
+					width: 80px;
+					justify-content: center;
+					align-items: center;
+
+					.el-icon-document {
+						font-size: 40px;
+						text-align: center;
+						color: #d42e07;
+					}
+				}
+
+				.file-position-right {
+					flex: 1;
+
+					.file-name {
+						font-size: 16px;
+						font-weight: 600;
+						color: #66b1ff;
+					}
+
+					.file-size {
+						font-size: 14px;
+						font-weight: 600;
+						color: black;
+					}
+				}
+			}
+
+			.chat-at-user {
+				color: #00f;
+				font-weight: 600;
+
+				border-radius: 3px;
+			}
+		}
+
+		.edit-chat-container>div:nth-of-type(1):after {
+			content: '请输入消息（按Ctrl+Enter键换行）';
+			color: gray;
+		}
+
+		.edit-chat-container.not-empty>div:nth-of-type(1):after {
+			content: none;
+		}
+
+	}
+</style>
\ No newline at end of file
diff --git a/im-web/src/components/chat/ChatMessageItem.vue b/im-web/src/components/chat/ChatMessageItem.vue
index 2c999ef..e9a8c30 100644
--- a/im-web/src/components/chat/ChatMessageItem.vue
+++ b/im-web/src/components/chat/ChatMessageItem.vue
@@ -67,10 +67,8 @@
 						<span v-if="msgInfo.receiptOk" class="icon iconfont icon-ok" title="全体已读"></span>
 						<span v-else>{{msgInfo.readedCount}}人已读</span>
 					</div>
-
 				</div>
 			</div>
-
 		</div>
 		<right-menu v-show="menu && rightMenu.show" :pos="rightMenu.pos" :items="menuItems"
 			@close="rightMenu.show = false" @select="onSelectMenu"></right-menu>
@@ -129,7 +127,6 @@
 					}
 				}
 			}
-
 		},
 		methods: {
 			onSendFail() {
@@ -200,7 +197,7 @@
 				}
 				return items;
 			},
-			isAction(){
+			isAction() {
 				return this.$msgType.isAction(this.msgInfo.type);
 			},
 			isNormal() {
@@ -280,6 +277,7 @@
 							position: absolute;
 							left: -10px;
 							top: 13px;
+							z-index: -1;
 							width: 0;
 							height: 0;
 							border-style: solid dashed dashed;
@@ -407,6 +405,13 @@
 							color: #329432;
 						}
 					}
+
+					.chat-at-user {
+						padding: 2px 5px;
+						border-radius: 3px;
+						font-weight: 600;
+						cursor: pointer;
+					}
 				}
 			}
 
@@ -442,7 +447,7 @@
 							background-color: rgb(88, 127, 240);
 							color: #fff;
 							vertical-align: top;
-							
+
 							&:after {
 								left: auto;
 								right: -10px;
diff --git a/im-web/src/view/Home.vue b/im-web/src/view/Home.vue
index 68373dd..31a0173 100644
--- a/im-web/src/view/Home.vue
+++ b/im-web/src/view/Home.vue
@@ -126,16 +126,22 @@
 				})
 			},
 			pullPrivateOfflineMessage(minId) {
+				this.$store.commit("loadingPrivateMsg", true)
 				this.$http({
 					url: "/message/private/pullOfflineMessage?minId=" + minId,
-					method: 'get'
-				});
+					method: 'GET'
+				}).catch(() => {
+					this.$store.commit("loadingPrivateMsg", false)
+				})
 			},
 			pullGroupOfflineMessage(minId) {
+				this.$store.commit("loadingGroupMsg", true)
 				this.$http({
 					url: "/message/group/pullOfflineMessage?minId=" + minId,
-					method: 'get'
-				});
+					method: 'GET'
+				}).catch(() => {
+					this.$store.commit("loadingGroupMsg", false)
+				})
 			},
 			handlePrivateMessage(msg) {
 				// 消息加载标志