From 1d9178b592fd450d03bc645c1c2e56125c10e44a Mon Sep 17 00:00:00 2001
From: fangxin <fangxinwb467@hellobike.com>
Date: Tue, 6 Aug 2024 19:33:10 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 im-web/src/components/chat/ChatBox.vue        | 1900 ++++++++---------
 im-web/src/components/chat/ChatInput.vue      |  604 ++++++
 .../src/components/chat/ChatMessageItem.vue   |   11 +-
 3 files changed, 1530 insertions(+), 985 deletions(-)
 create mode 100644 im-web/src/components/chat/ChatInput.vue

diff --git a/im-web/src/components/chat/ChatBox.vue b/im-web/src/components/chat/ChatBox.vue
index 6981db5..749f622 100644
--- a/im-web/src/components/chat/ChatBox.vue
+++ b/im-web/src/components/chat/ChatBox.vue
@@ -1,992 +1,924 @@
 <template>
-	<div class="chat-box" @click="closeRefBox()" @mousemove="readedMessage()">
-		<el-container>
-			<el-header height="56px">
-				<span>{{ title }}</span>
-				<span title="群聊信息" v-show="this.chat.type == 'GROUP'" class="btn-side el-icon-more"
-					@click="showSide = !showSide"></span>
-			</el-header>
-			<el-main style="padding: 0;">
-				<el-container>
-					<el-container class="content-box">
-						<el-main class="im-chat-main" id="chatScrollBox" @scroll="onScroll">
-							<div class="im-chat-box">
-								<ul>
-									<li v-for="(msgInfo, idx) in chat.messages" :key="idx">
-										<chat-message-item v-if="idx >= showMinIdx" @call="onCall(msgInfo.type)"
-											:mine="msgInfo.sendId == mine.id" :headImage="headImage(msgInfo)"
-											:showName="showName(msgInfo)" :msgInfo="msgInfo"
-											:groupMembers="groupMembers" @delete="deleteMessage"
-											@recall="recallMessage">
-										</chat-message-item>
-									</li>
-								</ul>
-							</div>
-						</el-main>
-						<el-footer height="240px" class="im-chat-footer">
-							<div class="chat-tool-bar">
-								<div title="表情" class="icon iconfont icon-emoji" ref="emotion"
-									@click.stop="showEmotionBox()">
-								</div>
-								<div title="发送图片">
-									<file-upload :action="'/image/upload'" :maxSize="5 * 1024 * 1024"
-										:fileTypes="['image/jpeg', 'image/png', 'image/jpg', 'image/webp', 'image/gif']"
-										@before="onImageBefore" @success="onImageSuccess" @fail="onImageFail">
-										<i class="el-icon-picture-outline"></i>
-									</file-upload>
-								</div>
-								<div title="发送文件">
-									<file-upload :action="'/file/upload'" :maxSize="10 * 1024 * 1024"
-										@before="onFileBefore" @success="onFileSuccess" @fail="onFileFail">
-										<i class="el-icon-wallet"></i>
-									</file-upload>
-								</div>
-								<div title="回执消息" v-show="chat.type == 'GROUP'" class="icon iconfont icon-receipt"
-									:class="isReceipt ? 'chat-tool-active' : ''" @click="onSwitchReceipt">
-								</div>
-								<div title="发送语音" class="el-icon-microphone" @click="showRecordBox()">
-								</div>
-								<div title="语音通话" v-show="chat.type == 'PRIVATE'" class="el-icon-phone-outline"
-									@click="showPrivateVideo('voice')">
-								</div>
-								<div title="语音通话" v-show="chat.type == 'GROUP'" class="el-icon-phone-outline"
-									@click="onGroupVideo()">
-								</div>
-								<div title="视频通话" v-show="chat.type == 'PRIVATE'" class="el-icon-video-camera"
-									@click="showPrivateVideo('video')">
-								</div>
-								<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>
-								<div class="send-btn-area">
-									<el-button type="primary" size="small" @click="sendMessage()">发送</el-button>
-								</div>
-							</div>
-						</el-footer>
-					</el-container>
-					<el-aside class="chat-group-side-box" width="300px" v-if="showSide">
-						<chat-group-side :group="group" :groupMembers="groupMembers" @reload="loadGroup(group.id)">
-						</chat-group-side>
-					</el-aside>
-				</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>
-			<chat-history :visible="showHistory" :chat="chat" :friend="friend" :group="group"
-				:groupMembers="groupMembers" @close="closeHistoryBox"></chat-history>
-		</el-container>
-	</div>
+  <div class="chat-box" @click="closeRefBox()" @mousemove="readedMessage()">
+    <el-container>
+      <el-header height="56px">
+        <span>{{ title }}</span>
+        <span title="群聊信息" v-show="this.chat.type == 'GROUP'" class="btn-side el-icon-more"
+              @click="showSide = !showSide"></span>
+      </el-header>
+      <el-main style="padding: 0;">
+        <el-container>
+          <el-container class="content-box">
+            <el-main class="im-chat-main" id="chatScrollBox" @scroll="onScroll">
+              <div class="im-chat-box">
+                <ul>
+                  <li v-for="(msgInfo, idx) in chat.messages" :key="idx">
+                    <chat-message-item v-if="idx >= showMinIdx" @call="onCall(msgInfo.type)"
+                                       :mine="msgInfo.sendId == mine.id" :headImage="headImage(msgInfo)"
+                                       :showName="showName(msgInfo)" :msgInfo="msgInfo"
+                                       :groupMembers="groupMembers" @delete="deleteMessage"
+                                       @recall="recallMessage">
+                    </chat-message-item>
+                  </li>
+                </ul>
+              </div>
+            </el-main>
+            <el-footer height="240px" class="im-chat-footer">
+              <div class="chat-tool-bar">
+                <div title="表情" class="icon iconfont icon-emoji" ref="emotion"
+                     @click.stop="showEmotionBox()">
+                </div>
+                <div title="发送图片">
+                  <file-upload :action="'/image/upload'" :maxSize="5 * 1024 * 1024"
+                               :fileTypes="['image/jpeg', 'image/png', 'image/jpg', 'image/webp', 'image/gif']"
+                               @before="onImageBefore" @success="onImageSuccess" @fail="onImageFail">
+                    <i class="el-icon-picture-outline"></i>
+                  </file-upload>
+                </div>
+                <div title="发送文件">
+                  <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>
+                </div>
+                <div title="回执消息" v-show="chat.type == 'GROUP'" class="icon iconfont icon-receipt"
+                     :class="isReceipt ? 'chat-tool-active' : ''" @click="onSwitchReceipt">
+                </div>
+                <div title="发送语音" class="el-icon-microphone" @click="showRecordBox()">
+                </div>
+                <div title="语音通话" v-show="chat.type == 'PRIVATE'" class="el-icon-phone-outline"
+                     @click="showPrivateVideo('voice')">
+                </div>
+                <div title="语音通话" v-show="chat.type == 'GROUP'" class="el-icon-phone-outline"
+                     @click="onGroupVideo()">
+                </div>
+                <div title="视频通话" v-show="chat.type == 'PRIVATE'" class="el-icon-video-camera"
+                     @click="showPrivateVideo('video')">
+                </div>
+                <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()" @keydown.down="onKeyDown"-->
+                <!--									@keydown.up="onKeyUp" @keydown.enter.prevent="onKeyEnter($event)">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="notifySend()">发送</el-button>
+                </div>
+              </div>
+            </el-footer>
+          </el-container>
+          <el-aside class="chat-group-side-box" width="300px" v-if="showSide">
+            <chat-group-side :group="group" :groupMembers="groupMembers" @reload="loadGroup(group.id)">
+            </chat-group-side>
+          </el-aside>
+        </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>
+      <chat-history :visible="showHistory" :chat="chat" :friend="friend" :group="group"
+                    :groupMembers="groupMembers" @close="closeHistoryBox"></chat-history>
+    </el-container>
+  </div>
 </template>
 
 <script>
-	import ChatGroupSide from "./ChatGroupSide.vue";
-	import ChatMessageItem from "./ChatMessageItem.vue";
-	import FileUpload from "../common/FileUpload.vue";
-	import Emotion from "../common/Emotion.vue";
-	import ChatRecord from "./ChatRecord.vue";
-	import ChatHistory from "./ChatHistory.vue";
-	import ChatAtBox from "./ChatAtBox.vue"
-	import GroupMemberSelector from "../group/GroupMemberSelector.vue"
-	import RtcGroupJoin from "../rtc/RtcGroupJoin.vue"
-
-
-	export default {
-		name: "chatPrivate",
-		components: {
-			ChatMessageItem,
-			FileUpload,
-			ChatGroupSide,
-			Emotion,
-			ChatRecord,
-			ChatHistory,
-			ChatAtBox,
-			GroupMemberSelector,
-			RtcGroupJoin
-		},
-		props: {
-			chat: {
-				type: Object
-			}
-		},
-		data() {
-			return {
-				friend: {},
-				group: {},
-				groupMembers: [],
-				sendImageUrl: "",
-				sendImageFile: "",
-				placeholder: "",
-				isReceipt: true,
-				showRecord: false, // 是否显示语音录制弹窗
-				showSide: false, // 是否显示群聊信息栏
-				showHistory: false, // 是否显示历史聊天记录
-				lockMessage: false, // 是否锁定发送，
-				showMinIdx: 0, // 下标低于showMinIdx的消息不显示，否则页面会很卡
-				atSearchText: "",
-				focusNode: null, // 缓存光标所在节点
-				focusOffset: null, // 缓存光标所在节点位置
-				zhLock: false // 解决中文输入法触发英文的情况
-			}
-		},
-		methods: {
-			moveChatToTop() {
-				let chatIdx = this.$store.getters.findChatIdx(this.chat);
-				this.$store.commit("moveTop", chatIdx);
-			},
-			closeRefBox() {
-				this.$refs.emoBox.close();
-				this.$refs.atBox.close();
-			},
-			onCall(type) {
-				if (type == this.$enums.MESSAGE_TYPE.ACT_RT_VOICE) {
-					this.showPrivateVideo('voice');
-				} else if (type == this.$enums.MESSAGE_TYPE.ACT_RT_VIDEO) {
-					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) => {
-					msgInfo.loadStatus = 'ok';
-					msgInfo.id = m.id;
-					this.isReceipt = false;
-					this.refreshPlaceHolder();
-					this.$store.commit("insertMessage", msgInfo);
-				})
-			},
-			onImageFail(e, file) {
-				let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
-				msgInfo.loadStatus = 'fail';
-				this.$store.commit("insertMessage", msgInfo);
-			},
-			onImageBefore(file) {
-				let url = URL.createObjectURL(file);
-				let data = {
-					originUrl: url,
-					thumbUrl: url
-				}
-				let msgInfo = {
-					id: 0,
-					tmpId: this.generateId(),
-					fileId: file.uid,
-					sendId: this.mine.id,
-					content: JSON.stringify(data),
-					sendTime: new Date().getTime(),
-					selfSend: true,
-					type: 1,
-					readedCount: 0,
-					loadStatus: "loading",
-					status: this.$enums.MESSAGE_STATUS.UNSEND
-				}
-				// 填充对方id
-				this.fillTargetId(msgInfo, this.chat.targetId);
-				// 插入消息
-				this.$store.commit("insertMessage", msgInfo);
-				// 会话置顶
-				this.moveChatToTop();
-				// 滚动到底部
-				this.scrollToBottom();
-				// 借助file对象保存
-				file.msgInfo = msgInfo;
-			},
-			onFileSuccess(url, file) {
-				let data = {
-					name: file.name,
-					size: file.size,
-					url: url
-				}
-				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) => {
-					msgInfo.loadStatus = 'ok';
-					msgInfo.id = m.id;
-					this.isReceipt = false;
-					this.refreshPlaceHolder();
-					this.$store.commit("insertMessage", msgInfo);
-				})
-			},
-			onFileFail(e, file) {
-				let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
-				msgInfo.loadStatus = 'fail';
-				this.$store.commit("insertMessage", msgInfo);
-			},
-			onFileBefore(file) {
-				let url = URL.createObjectURL(file);
-				let data = {
-					name: file.name,
-					size: file.size,
-					url: url
-				}
-				let msgInfo = {
-					id: 0,
-					tmpId: this.generateId(),
-					sendId: this.mine.id,
-					content: JSON.stringify(data),
-					sendTime: new Date().getTime(),
-					selfSend: true,
-					type: 2,
-					loadStatus: "loading",
-					readedCount: 0,
-					status: this.$enums.MESSAGE_STATUS.UNSEND
-				}
-				// 填充对方id
-				this.fillTargetId(msgInfo, this.chat.targetId);
-				// 插入消息
-				this.$store.commit("insertMessage", msgInfo);
-				// 会话置顶
-				this.moveChatToTop();
-				// 滚动到底部
-				this.scrollToBottom();
-				// 借助file对象透传
-				file.msgInfo = msgInfo;
-			},
-			onCloseSide() {
-				this.showSide = false;
-			},
-			onScrollToTop() {
-				// 多展示10条信息
-				this.showMinIdx = this.showMinIdx > 10 ? this.showMinIdx - 10 : 0;
-			},
-			onScroll(e) {
-				let scrollElement = e.target
-				let scrollTop = scrollElement.scrollTop
-				if (scrollTop < 30) { // 在顶部,不滚动的情况
-					// 多展示20条信息
-					this.showMinIdx = this.showMinIdx > 20 ? this.showMinIdx - 20 : 0;
-				}
-			},
-			showEmotionBox() {
-				let width = this.$refs.emotion.offsetWidth;
-				let left = this.$elm.fixLeft(this.$refs.emotion);
-				let top = this.$elm.fixTop(this.$refs.emotion);
-				this.$refs.emoBox.open({
-					x: left + width / 2,
-					y: top
-				})
-			},
-			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()
-
-			},
-			showRecordBox() {
-				this.showRecord = true;
-			},
-			closeRecordBox() {
-				this.showRecord = false;
-			},
-			showPrivateVideo(mode) {
-				let rtcInfo = {
-					mode: mode,
-					isHost: true,
-					friend: this.friend,
-				}
-				// 通过home.vue打开单人视频窗口
-				this.$eventBus.$emit("openPrivateVideo", rtcInfo);
-			},
-			onGroupVideo() {
-				this.$http({
-					url: "/webrtc/group/info?groupId=" + this.group.id,
-					method: 'GET'
-				}).then((rtcInfo) => {
-					if (rtcInfo.isChating) {
-						// 已在通话中，可以直接加入通话
-						this.$refs.rtcJoin.open(rtcInfo);
-					} else {
-						// 邀请成员发起通话
-						let ids = [this.mine.id];
-						let maxChannel = this.$store.state.configStore.webrtc.maxChannel;
-						this.$refs.rtcSel.open(maxChannel, ids, ids);
-
-					}
-				})
-
-			},
-			onInviteOk(members) {
-				if (members.length < 2) {
-					return;
-				}
-				let userInfos = [];
-				members.forEach(m => {
-					userInfos.push({
-						id: m.userId,
-						nickName: m.showNickName,
-						headImage: m.headImage,
-						isCamera: false,
-						isMicroPhone: true
-					})
-				})
-				let rtcInfo = {
-					isHost: true,
-					groupId: this.group.id,
-					inviterId: this.mine.id,
-					userInfos: userInfos
-				}
-				// 通过home.vue打开多人视频窗口
-				this.$eventBus.$emit("openGroupVideo", rtcInfo);
-			},
-			showHistoryBox() {
-				this.showHistory = true;
-			},
-			closeHistoryBox() {
-				this.showHistory = false;
-			},
-			onSendRecord(data) {
-				let msgInfo = {
-					content: JSON.stringify(data),
-					type: 3,
-					receipt: this.isReceipt
-				}
-				// 填充对方id
-				this.fillTargetId(msgInfo, this.chat.targetId);
-				this.$http({
-					url: this.messageAction,
-					method: 'post',
-					data: msgInfo
-				}).then((m) => {
-					m.selfSend = true;
-					this.$store.commit("insertMessage", m);
-					// 会话置顶
-					this.moveChatToTop();
-					// 保持输入框焦点
-					this.$refs.editBox.focus();
-					// 滚动到底部
-					this.scrollToBottom();
-					// 关闭录音窗口
-					this.showRecord = false;
-					this.isReceipt = false;
-					this.refreshPlaceHolder();
-
-				})
-			},
-			fillTargetId(msgInfo, targetId) {
-				if (this.chat.type == "GROUP") {
-					msgInfo.groupId = targetId;
-				} else {
-					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();
-			},
-			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;
-				}
-				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;
-					this.scrollToBottom();
-					this.resetEditor();
-					this.isReceipt = false;
-					this.refreshPlaceHolder();
-				});
-
-			},
-			deleteMessage(msgInfo) {
-				this.$confirm('确认删除消息?', '删除消息', {
-					confirmButtonText: '确定',
-					cancelButtonText: '取消',
-					type: 'warning'
-				}).then(() => {
-					this.$store.commit("deleteMessage", msgInfo);
-				});
-			},
-			recallMessage(msgInfo) {
-				this.$confirm('确认撤回消息?', '撤回消息', {
-					confirmButtonText: '确定',
-					cancelButtonText: '取消',
-					type: 'warning'
-				}).then(() => {
-					let url = `/message/${this.chat.type.toLowerCase()}/recall/${msgInfo.id}`
-					this.$http({
-						url: url,
-						method: 'delete'
-					}).then(() => {
-						this.$message.success("消息已撤回");
-						msgInfo = JSON.parse(JSON.stringify(msgInfo));
-						msgInfo.type = 10;
-						msgInfo.content = '你撤回了一条消息';
-						msgInfo.status = this.$enums.MESSAGE_STATUS.RECALL;
-						this.$store.commit("insertMessage", msgInfo);
-					})
-				});
-			},
-			readedMessage() {
-				if (this.chat.unreadCount == 0) {
-					return;
-				}
-				this.$store.commit("resetUnreadCount", this.chat)
-				if (this.chat.type == "GROUP") {
-					var url = `/message/group/readed?groupId=${this.chat.targetId}`
-				} else {
-					url = `/message/private/readed?friendId=${this.chat.targetId}`
-				}
-				this.$http({
-					url: url,
-					method: 'put'
-				}).then(() => {})
-			},
-			loadReaded(fId) {
-				this.$http({
-					url: `/message/private/maxReadedId?friendId=${fId}`,
-					method: 'get'
-				}).then((id) => {
-					this.$store.commit("readedMessage", {
-						friendId: fId,
-						maxId: id
-					});
-				});
-			},
-			loadGroup(groupId) {
-				this.$http({
-					url: `/group/find/${groupId}`,
-					method: 'get'
-				}).then((group) => {
-					this.group = group;
-					this.$store.commit("updateChatFromGroup", group);
-					this.$store.commit("updateGroup", group);
-
-				});
-
-				this.$http({
-					url: `/group/members/${groupId}`,
-					method: 'get'
-				}).then((groupMembers) => {
-					this.groupMembers = groupMembers;
-				});
-			},
-			loadFriend(friendId) {
-				// 获取对方最新信息
-				this.$http({
-					url: `/user/find/${friendId}`,
-					method: 'get'
-				}).then((friend) => {
-					this.friend = friend;
-					this.$store.commit("updateChatFromFriend", friend);
-					this.$store.commit("updateFriend", friend);
-				})
-			},
-			showName(msgInfo) {
-				if (this.chat.type == 'GROUP') {
-					let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId);
-					return member ? member.showNickName : "";
-				} else {
-					return msgInfo.sendId == this.mine.id ? this.mine.nickName : this.chat.showName
-				}
-
-			},
-			headImage(msgInfo) {
-				if (this.chat.type == 'GROUP') {
-					let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId);
-					return member ? member.headImage : "";
-				} else {
-					return msgInfo.sendId == this.mine.id ? this.mine.headImageThumb : this.chat.headImage
-				}
-			},
-			resetEditor() {
-				this.sendImageUrl = "";
-				this.sendImageFile = null;
-				this.$nextTick(() => {
-					this.$refs.editBox.innerHTML = "";
-					this.$refs.editBox.focus();
-				});
-			},
-			scrollToBottom() {
-				this.$nextTick(() => {
-					let div = document.getElementById("chatScrollBox");
-					div.scrollTop = div.scrollHeight;
-				});
-			},
-			refreshPlaceHolder() {
-				if (this.isReceipt) {
-					this.placeholder = "【回执消息】"
-				} else if (this.$refs.editBox && this.$refs.editBox.innerHTML) {
-					this.placeholder = ""
-				} else {
-					this.placeholder = "聊点什么吧~";
-				}
-			},
-			generateId() {
-				// 生成临时id
-				return String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));
-			}
-		},
-		computed: {
-			mine() {
-				return this.$store.state.userStore.userInfo;
-			},
-			title() {
-				let title = this.chat.showName;
-				if (this.chat.type == "GROUP") {
-					let size = this.groupMembers.filter(m => !m.quit).length;
-					title += `(${size})`;
-				}
-				return title;
-			},
-			messageAction() {
-				return `/message/${this.chat.type.toLowerCase()}/send`;
-			},
-			unreadCount() {
-				return this.chat.unreadCount;
-			},
-			messageSize() {
-				if (!this.chat || !this.chat.messages) {
-					return 0;
-				}
-				return this.chat.messages.length;
-			}
-
-		},
-		watch: {
-			chat: {
-				handler(newChat, oldChat) {
-					if (newChat.targetId > 0 && (!oldChat || newChat.type != oldChat.type ||
-							newChat.targetId != oldChat.targetId)) {
-						if (this.chat.type == "GROUP") {
-							this.loadGroup(this.chat.targetId);
-						} else {
-							this.loadFriend(this.chat.targetId);
-							// 加载已读状态
-							this.loadReaded(this.chat.targetId)
-						}
-						// 滚到底部
-						this.scrollToBottom();
-						this.showSide = false;
-						// 消息已读
-						this.readedMessage()
-						// 初始状态只显示30条消息
-						let size = this.chat.messages.length;
-						this.showMinIdx = size > 30 ? size - 30 : 0;
-						// 重置输入框
-						this.resetEditor();
-						// 复位回执消息
-						this.isReceipt = false;
-						// 更新placeholder
-						this.refreshPlaceHolder();
-					}
-				},
-				immediate: true
-			},
-			messageSize: {
-				handler(newSize, oldSize) {
-					if (newSize > oldSize) {
-						// 拉至底部
-						this.scrollToBottom();
-					}
-				}
-			}
-		},
-		mounted() {
-			let div = document.getElementById("chatScrollBox");
-			div.addEventListener('scroll', this.onScroll)
-		}
-	}
+import ChatGroupSide from "./ChatGroupSide.vue";
+import ChatMessageItem from "./ChatMessageItem.vue";
+import FileUpload from "../common/FileUpload.vue";
+import Emotion from "../common/Emotion.vue";
+import ChatRecord from "./ChatRecord.vue";
+import ChatHistory from "./ChatHistory.vue";
+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,
+    Emotion,
+    ChatRecord,
+    ChatHistory,
+    ChatAtBox,
+    GroupMemberSelector,
+    RtcGroupJoin
+  },
+  props: {
+    chat: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      friend: {},
+      group: {},
+      groupMembers: [],
+      sendImageUrl: "",
+      sendImageFile: "",
+      placeholder: "",
+      isReceipt: true,
+      showRecord: false, // 是否显示语音录制弹窗
+      showSide: false, // 是否显示群聊信息栏
+      showHistory: false, // 是否显示历史聊天记录
+      lockMessage: false, // 是否锁定发送，
+      showMinIdx: 0, // 下标低于showMinIdx的消息不显示，否则页面会很卡
+      atSearchText: "",
+      focusNode: null, // 缓存光标所在节点
+      focusOffset: null, // 缓存光标所在节点位置
+      zhLock: false // 解决中文输入法触发英文的情况
+    }
+  },
+  methods: {
+    moveChatToTop() {
+      let chatIdx = this.$store.getters.findChatIdx(this.chat);
+      this.$store.commit("moveTop", chatIdx);
+    },
+    closeRefBox() {
+      this.$refs.emoBox.close();
+      // this.$refs.atBox.close();
+    },
+    onCall(type) {
+      if (type == this.$enums.MESSAGE_TYPE.ACT_RT_VOICE) {
+        this.showPrivateVideo('voice');
+      } else if (type == this.$enums.MESSAGE_TYPE.ACT_RT_VIDEO) {
+        this.showPrivateVideo('video');
+      }
+    },
+    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(sendContent) {
+      let ids = [];
+      let tempEl = document.createElement('div');
+      tempEl.innerHTML = sendContent;
+
+      tempEl.childNodes.forEach((node) => {
+        if (node.nodeName == "SPAN") {
+          ids.push(node.dataset.id);
+        }
+      })
+      return ids;
+    },
+    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((id) => {
+        msgInfo.loadStatus = 'ok';
+        msgInfo.id = id;
+        this.isReceipt = false;
+        this.$store.commit("insertMessage", msgInfo);
+      })
+    },
+    onImageFail(e, file) {
+      let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
+      msgInfo.loadStatus = 'fail';
+      this.$store.commit("insertMessage", msgInfo);
+    },
+    onImageBefore(file) {
+      let url = URL.createObjectURL(file);
+      let data = {
+        originUrl: url,
+        thumbUrl: url
+      }
+      let msgInfo = {
+        id: 0,
+        tmpId: this.generateId(),
+        fileId: file.uid,
+        sendId: this.mine.id,
+        content: JSON.stringify(data),
+        sendTime: new Date().getTime(),
+        selfSend: true,
+        type: 1,
+        readedCount: 0,
+        loadStatus: "loading",
+        status: this.$enums.MESSAGE_STATUS.UNSEND
+      }
+      // 填充对方id
+      this.fillTargetId(msgInfo, this.chat.targetId);
+      // 插入消息
+      this.$store.commit("insertMessage", msgInfo);
+      // 会话置顶
+      this.moveChatToTop();
+      // 滚动到底部
+      this.scrollToBottom();
+      // 借助file对象保存
+      file.msgInfo = msgInfo;
+    },
+    onFileSuccess(url, file) {
+      let data = {
+        name: file.name,
+        size: file.size,
+        url: url
+      }
+      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) => {
+        msgInfo.loadStatus = 'ok';
+        msgInfo.id = m.id;
+        this.isReceipt = false;
+        this.refreshPlaceHolder();
+        this.$store.commit("insertMessage", msgInfo);
+      })
+    },
+    onFileFail(e, file) {
+      let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
+      msgInfo.loadStatus = 'fail';
+      this.$store.commit("insertMessage", msgInfo);
+    },
+    onFileBefore(file) {
+      let url = URL.createObjectURL(file);
+      let data = {
+        name: file.name,
+        size: file.size,
+        url: url
+      }
+      let msgInfo = {
+        id: 0,
+        tmpId: this.generateId(),
+        sendId: this.mine.id,
+        content: JSON.stringify(data),
+        sendTime: new Date().getTime(),
+        selfSend: true,
+        type: 2,
+        loadStatus: "loading",
+        readedCount: 0,
+        status: this.$enums.MESSAGE_STATUS.UNSEND
+      }
+      // 填充对方id
+      this.fillTargetId(msgInfo, this.chat.targetId);
+      // 插入消息
+      this.$store.commit("insertMessage", msgInfo);
+      // 会话置顶
+      this.moveChatToTop();
+      // 滚动到底部
+      this.scrollToBottom();
+      // 借助file对象透传
+      file.msgInfo = msgInfo;
+    },
+    onCloseSide() {
+      this.showSide = false;
+    },
+    onScrollToTop() {
+      // 多展示10条信息
+      this.showMinIdx = this.showMinIdx > 10 ? this.showMinIdx - 10 : 0;
+    },
+    onScroll(e) {
+      let scrollElement = e.target
+      let scrollTop = scrollElement.scrollTop
+      if (scrollTop < 30) { // 在顶部,不滚动的情况
+        // 多展示20条信息
+        this.showMinIdx = this.showMinIdx > 20 ? this.showMinIdx - 20 : 0;
+      }
+    },
+    showEmotionBox() {
+      let width = this.$refs.emotion.offsetWidth;
+      let left = this.$elm.fixLeft(this.$refs.emotion);
+      let top = this.$elm.fixTop(this.$refs.emotion);
+      this.$refs.emoBox.open({
+        x: left + width / 2,
+        y: top
+      })
+    },
+    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;
+    },
+    closeRecordBox() {
+      this.showRecord = false;
+    },
+    showPrivateVideo(mode) {
+      let rtcInfo = {
+        mode: mode,
+        isHost: true,
+        friend: this.friend,
+      }
+      // 通过home.vue打开单人视频窗口
+      this.$eventBus.$emit("openPrivateVideo", rtcInfo);
+    },
+    onGroupVideo() {
+      this.$http({
+        url: "/webrtc/group/info?groupId=" + this.group.id,
+        method: 'GET'
+      }).then((rtcInfo) => {
+        if (rtcInfo.isChating) {
+          // 已在通话中，可以直接加入通话
+          this.$refs.rtcJoin.open(rtcInfo);
+        } else {
+          // 邀请成员发起通话
+          let ids = [this.mine.id];
+          let maxChannel = this.$store.state.configStore.webrtc.maxChannel;
+          this.$refs.rtcSel.open(maxChannel, ids, ids);
+
+        }
+      })
+
+    },
+    onInviteOk(members) {
+      if (members.length < 2) {
+        return;
+      }
+      let userInfos = [];
+      members.forEach(m => {
+        userInfos.push({
+          id: m.userId,
+          nickName: m.showNickName,
+          headImage: m.headImage,
+          isCamera: false,
+          isMicroPhone: true
+        })
+      })
+      let rtcInfo = {
+        isHost: true,
+        groupId: this.group.id,
+        inviterId: this.mine.id,
+        userInfos: userInfos
+      }
+      // 通过home.vue打开多人视频窗口
+      this.$eventBus.$emit("openGroupVideo", rtcInfo);
+    },
+    showHistoryBox() {
+      this.showHistory = true;
+    },
+    closeHistoryBox() {
+      this.showHistory = false;
+    },
+    onSendRecord(data) {
+      let msgInfo = {
+        content: JSON.stringify(data),
+        type: 3,
+        receipt: this.isReceipt
+      }
+      // 填充对方id
+      this.fillTargetId(msgInfo, this.chat.targetId);
+      this.$http({
+        url: this.messageAction,
+        method: 'post',
+        data: msgInfo
+      }).then((m) => {
+        m.selfSend = true;
+        this.$store.commit("insertMessage", m);
+        // 会话置顶
+        this.moveChatToTop();
+        // 保持输入框焦点
+        this.$refs.chatInputEditor.focus();
+        // 滚动到底部
+        this.scrollToBottom();
+        // 关闭录音窗口
+        this.showRecord = false;
+        this.isReceipt = false;
+        this.refreshPlaceHolder();
+
+      })
+    },
+    fillTargetId(msgInfo, targetId) {
+      if (this.chat.type == "GROUP") {
+        msgInfo.groupId = targetId;
+      } else {
+        msgInfo.recvId = targetId;
+      }
+    },
+    notifySend() {
+      this.$refs.chatInputEditor.submit();
+    },
+    sendMessage(fullList) {
+      // if (this.sendImageFile) {
+      // 	this.sendImageMessage();
+      // } else {
+      // 	this.sendTextMessage();
+      // }
+      // // 消息已读
+      // this.readedMessage()
+      // 消息已读
+      // console.log(arguments)
+      this.readedMessage();
+      let sendText = this.isReceipt ? "【回执消息】" : "";
+
+      let promiseList = [];
+      for (let i = 0; i < fullList.length; i++) {
+        let msg = fullList[i];
+        promiseList.push(new Promise(() => {
+          switch (msg.type) {
+            case "text":
+              this.sendTextMessage(sendText + msg.content);
+              break;
+            case "image":
+              this.sendImageMessage(msg.content.file);
+              break;
+            case "file":
+              console.log(msg)
+              this.sendFileMessage(msg.content.file);
+              break;
+          }
+        }))
+      }
+      Promise.all(promiseList);
+      // console.log(arguments)
+      this.$refs.chatInputEditor.clear();
+    },
+    sendImageMessage(file) {
+      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);
+      }).catch((res) => {
+        this.onImageSuccess(res, file);
+      })
+      this.$nextTick(() => this.$refs.chatInputEditor.focus());
+      this.scrollToBottom();
+    },
+    sendTextMessage(sendText) {
+      if (!sendText.trim()) {
+        return
+      }
+      let msgInfo = {
+        content: sendText,
+        type: 0
+      }
+      // 填充对方id
+      this.fillTargetId(msgInfo, this.chat.targetId);
+      // 被@人员列表
+      if (this.chat.type == "GROUP") {
+        msgInfo.atUserIds = this.createAtUserIds(sendText);
+        msgInfo.receipt = this.isReceipt;
+      }
+      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;
+        this.scrollToBottom();
+        this.resetEditor();
+        this.isReceipt = false;
+      });
+
+    },
+    sendFileMessage(file) {
+
+      let check = this.$refs.fileUpload.beforeUpload(file);
+      if (check) {
+        this.$refs.fileUpload.onFileUpload({file});
+      }
+    },
+    deleteMessage(msgInfo) {
+      this.$confirm('确认删除消息?', '删除消息', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$store.commit("deleteMessage", msgInfo);
+      });
+    },
+    recallMessage(msgInfo) {
+      this.$confirm('确认撤回消息?', '撤回消息', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        let url = `/message/${this.chat.type.toLowerCase()}/recall/${msgInfo.id}`
+        this.$http({
+          url: url,
+          method: 'delete'
+        }).then(() => {
+          this.$message.success("消息已撤回");
+          msgInfo = JSON.parse(JSON.stringify(msgInfo));
+          msgInfo.type = 10;
+          msgInfo.content = '你撤回了一条消息';
+          msgInfo.status = this.$enums.MESSAGE_STATUS.RECALL;
+          this.$store.commit("insertMessage", msgInfo);
+        })
+      });
+    },
+    readedMessage() {
+      if (this.chat.unreadCount == 0) {
+        return;
+      }
+      this.$store.commit("resetUnreadCount", this.chat)
+      if (this.chat.type == "GROUP") {
+        var url = `/message/group/readed?groupId=${this.chat.targetId}`
+      } else {
+        url = `/message/private/readed?friendId=${this.chat.targetId}`
+      }
+      this.$http({
+        url: url,
+        method: 'put'
+      }).then(() => {
+      })
+    },
+    loadReaded(fId) {
+      this.$http({
+        url: `/message/private/maxReadedId?friendId=${fId}`,
+        method: 'get'
+      }).then((id) => {
+        this.$store.commit("readedMessage", {
+          friendId: fId,
+          maxId: id
+        });
+      });
+    },
+    loadGroup(groupId) {
+      this.$http({
+        url: `/group/find/${groupId}`,
+        method: 'get'
+      }).then((group) => {
+        this.group = group;
+        this.$store.commit("updateChatFromGroup", group);
+        this.$store.commit("updateGroup", group);
+
+      });
+
+      this.$http({
+        url: `/group/members/${groupId}`,
+        method: 'get'
+      }).then((groupMembers) => {
+        this.groupMembers = groupMembers;
+      });
+    },
+    loadFriend(friendId) {
+      // 获取对方最新信息
+      this.$http({
+        url: `/user/find/${friendId}`,
+        method: 'get'
+      }).then((friend) => {
+        this.friend = friend;
+        this.$store.commit("updateChatFromFriend", friend);
+        this.$store.commit("updateFriend", friend);
+      })
+    },
+    showName(msgInfo) {
+      if (this.chat.type == 'GROUP') {
+        let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId);
+        return member ? member.showNickName : "";
+      } else {
+        return msgInfo.sendId == this.mine.id ? this.mine.nickName : this.chat.showName
+      }
+
+    },
+    headImage(msgInfo) {
+      if (this.chat.type == 'GROUP') {
+        let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId);
+        return member ? member.headImage : "";
+      } else {
+        return msgInfo.sendId == this.mine.id ? this.mine.headImageThumb : this.chat.headImage
+      }
+    },
+    resetEditor() {
+
+      this.$nextTick(() => {
+        // this.$refs.editBox.innerHTML = "";
+        // this.$refs.editBox.focus();
+        this.$refs.chatInputEditor.clear();
+        this.$refs.chatInputEditor.focus();
+
+      });
+    },
+    scrollToBottom() {
+      this.$nextTick(() => {
+        let div = document.getElementById("chatScrollBox");
+        div.scrollTop = div.scrollHeight;
+      });
+    },
+    refreshPlaceHolder() {
+      if (this.isReceipt) {
+        this.placeholder = "【回执消息】"
+      } else if (this.$refs.editBox && this.$refs.editBox.innerHTML) {
+        this.placeholder = ""
+      } else {
+        this.placeholder = "聊点什么吧~";
+      }
+    },
+    generateId() {
+      // 生成临时id
+      return String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));
+    }
+  },
+  computed: {
+    mine() {
+      return this.$store.state.userStore.userInfo;
+    },
+    title() {
+      let title = this.chat.showName;
+      if (this.chat.type == "GROUP") {
+        let size = this.groupMembers.filter(m => !m.quit).length;
+        title += `(${size})`;
+      }
+      return title;
+    },
+    messageAction() {
+      return `/message/${this.chat.type.toLowerCase()}/send`;
+    },
+    unreadCount() {
+      return this.chat.unreadCount;
+    },
+    messageSize() {
+      if (!this.chat || !this.chat.messages) {
+        return 0;
+      }
+      return this.chat.messages.length;
+    }
+
+  },
+  watch: {
+    chat: {
+      handler(newChat, oldChat) {
+        if (newChat.targetId > 0 && (!oldChat || newChat.type != oldChat.type ||
+            newChat.targetId != oldChat.targetId)) {
+          if (this.chat.type == "GROUP") {
+            this.loadGroup(this.chat.targetId);
+          } else {
+            this.loadFriend(this.chat.targetId);
+            // 加载已读状态
+            this.loadReaded(this.chat.targetId)
+          }
+          // 滚到底部
+          this.scrollToBottom();
+          this.showSide = false;
+          // 消息已读
+          this.readedMessage()
+          // 初始状态只显示30条消息
+          let size = this.chat.messages.length;
+          this.showMinIdx = size > 30 ? size - 30 : 0;
+          // 重置输入框
+          this.resetEditor();
+          // 复位回执消息
+          this.isReceipt = false;
+          // 更新placeholder
+          this.refreshPlaceHolder();
+        }
+      },
+      immediate: true
+    },
+    messageSize: {
+      handler(newSize, oldSize) {
+        if (newSize > oldSize) {
+          // 拉至底部
+          this.scrollToBottom();
+        }
+      }
+    }
+  },
+  mounted() {
+    let div = document.getElementById("chatScrollBox");
+    div.addEventListener('scroll', this.onScroll)
+  }
+}
 </script>
 
 <style lang="scss">
-	.chat-box {
-		position: relative;
-		width: 100%;
-		background: #f8f8f8;
-
-		.el-header {
-			padding: 3px;
-			background-color: white;
-			line-height: 50px;
-			font-size: 20px;
-			font-weight: 600;
-			border-bottom: 1px #ddd solid;
-
-			.btn-side {
-				position: absolute;
-				right: 20px;
-				line-height: 50px;
-				font-size: 25px;
-				cursor: pointer;
-
-			}
-		}
-
-		.im-chat-main {
-			padding: 0;
-			background-color: white;
-
-			.im-chat-box {
-				>ul {
-					padding: 0 20px;
-
-					li {
-						list-style-type: none;
-					}
-				}
-			}
-		}
-
-		.im-chat-footer {
-			display: flex;
-			flex-direction: column;
-			padding: 0;
-
-			.chat-tool-bar {
-				display: flex;
-				position: relative;
-				width: 100%;
-				height: 40px;
-				text-align: left;
-				box-sizing: border-box;
-				border-top: #ccc solid 1px;
-				padding: 2px;
-				background-color: #E8F2FF;
-
-				>div {
-					font-size: 22px;
-					cursor: pointer;
-					color: black;
-					line-height: 34px;
-					width: 34px;
-					height: 34px;
-					text-align: center;
-					border-radius: 3px;
-
-					&:hover {
-						color: black;
-					}
-
-					&.chat-tool-active {
-						background: #ddd;
-					}
-				}
-			}
-
-			.send-content-area {
-				position: relative;
-				display: flex;
-				flex-direction: column;
-				height: 100%;
-				background-color: white !important;
-
-				.send-text-area {
-					box-sizing: border-box;
-					padding: 5px;
-					width: 100%;
-					flex: 1;
-					resize: none;
-					font-size: 16px;
-					color: black;
-					outline-color: rgba(83, 160, 231, 0.61);
-
-					text-align: left;
-					line-height: 30 px;
-
-					&:before {
-						content: attr(placeholder);
-						color: gray;
-					}
-
-					.at {
-						color: blue;
-						font-weight: 600;
-					}
-
-					.receipt {
-						color: darkblue;
-						font-size: 15px;
-						font-weight: 600;
-					}
-
-					.emo {
-						width: 30px;
-						height: 30px;
-						vertical-align: bottom;
-					}
-				}
-
-				.send-image-area {
-					text-align: left;
-					border: #53a0e7 solid 1px;
-
-					.send-image-box {
-						position: relative;
-						display: inline-block;
-
-						.send-image {
-							max-height: 180px;
-							border: 1px solid #ccc;
-							border-radius: 2%;
-							margin: 2px;
-						}
-
-						.send-image-close {
-							position: absolute;
-							padding: 3px;
-							right: 7px;
-							top: 7px;
-							color: white;
-							cursor: pointer;
-							font-size: 15px;
-							font-weight: 600;
-							background-color: #aaa;
-							border-radius: 50%;
-							border: 1px solid #ccc;
-						}
-					}
-
-				}
-
-				.send-btn-area {
-					padding: 10px;
-					position: absolute;
-					bottom: 0;
-					right: 0;
-				}
-			}
-
-		}
-
-		.chat-group-side-box {
-			border: #dddddd solid 1px;
-			animation: rtl-drawer-in .3s 1ms;
-		}
-	}
+.chat-box {
+  position: relative;
+  width: 100%;
+  background: #f8f8f8;
+  border: #dddddd solid 1px;
+
+  .el-header {
+    padding: 3px;
+    background-color: white;
+    line-height: 50px;
+    font-size: 20px;
+    font-weight: 600;
+    border-bottom: 1px #ddd solid;
+
+    .btn-side {
+      position: absolute;
+      right: 20px;
+      line-height: 50px;
+      font-size: 25px;
+      cursor: pointer;
+
+    }
+  }
+
+  .im-chat-main {
+    padding: 0;
+    background-color: #f8f8f8;
+
+    .im-chat-box {
+      > ul {
+        padding: 0 20px;
+
+        li {
+          list-style-type: none;
+        }
+      }
+    }
+  }
+
+  .im-chat-footer {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+
+    .chat-tool-bar {
+      display: flex;
+      position: relative;
+      width: 100%;
+      height: 40px;
+      text-align: left;
+      box-sizing: border-box;
+      border-top: #ccc solid 1px;
+      padding: 2px;
+      background-color: #f5f5f5;
+
+      > div {
+        font-size: 22px;
+        cursor: pointer;
+        color: black;
+        line-height: 34px;
+        width: 34px;
+        height: 34px;
+        text-align: center;
+        border-radius: 3px;
+
+        &:hover {
+          color: black;
+        }
+
+        &.chat-tool-active {
+          background: #ddd;
+        }
+      }
+
+      > div:hover {
+        color: #949494;
+      }
+    }
+
+    .send-content-area {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      background-color: white !important;
+
+      .send-text-area {
+        box-sizing: border-box;
+        padding: 5px;
+        width: 100%;
+        flex: 1;
+        resize: none;
+        font-size: 16px;
+        color: black;
+        //outline-color: rgba(83, 160, 231, 0.61);
+        outline: none;
+
+        text-align: left;
+        line-height: 30px;
+
+        &:before {
+          content: attr(placeholder);
+          color: gray;
+        }
+
+        .at {
+          color: blue;
+          font-weight: 600;
+        }
+
+        .receipt {
+          color: darkblue;
+          font-size: 15px;
+          font-weight: 600;
+        }
+
+        .emo {
+          width: 30px;
+          height: 30px;
+          vertical-align: bottom;
+        }
+      }
+
+      .send-image-area {
+        text-align: left;
+        border: #53a0e7 solid 1px;
+
+        .send-image-box {
+          position: relative;
+          display: inline-block;
+
+          .send-image {
+            max-height: 180px;
+            border: 1px solid #ccc;
+            border-radius: 2%;
+            margin: 2px;
+          }
+
+          .send-image-close {
+            position: absolute;
+            padding: 3px;
+            right: 7px;
+            top: 7px;
+            color: white;
+            cursor: pointer;
+            font-size: 15px;
+            font-weight: 600;
+            background-color: #aaa;
+            border-radius: 50%;
+            border: 1px solid #ccc;
+          }
+        }
+
+      }
+
+      .send-btn-area {
+        padding: 10px;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+      }
+    }
+
+  }
+
+  .chat-group-side-box {
+    border: #dddddd solid 1px;
+    animation: rtl-drawer-in .3s 1ms;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/im-web/src/components/chat/ChatInput.vue b/im-web/src/components/chat/ChatInput.vue
new file mode 100644
index 0000000..6c254d0
--- /dev/null
+++ b/im-web/src/components/chat/ChatInput.vue
@@ -0,0 +1,604 @@
+<template>
+  <div class="chat-input-area">
+    <div class="edit-chat-container" contenteditable="true"
+         @paste.prevent="onPaste"
+         @keydown="onKeydown"
+         @compositionstart="compositionFlag=true"
+         @compositionend="compositionFlag=false"
+         @input="onEditorInput"
+         @mousedown="onMousedown"
+         v-html="contentHtml"
+         ref="content"
+         @blur="onBlur"
+
+         :placeholder="'请输入消息'">
+    </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() {
+    const defaultContentHtml = '<div></div>';
+    return {
+      // contentList: [],
+      // content: null,
+      defaultContentHtml,
+      contentHtml: defaultContentHtml + '',
+      imageList: [],
+      fileList: [],
+      currentId: 0,
+      atSearchText: null,
+      compositionFlag: false,
+      history: [defaultContentHtml],
+      focusOffset: 0,
+      atIng: false,
+      blurRange: null
+    }
+  }, methods: {
+    onPaste(e) {
+      let txt = e.clipboardData.getData('Text')
+      let range = window.getSelection().getRangeAt(0)
+      if (range.startContainer !== range.endContainer || range.startOffset !== range.endOffset) {
+        document.execCommand('delete', false, null);
+      }
+      if (typeof (txt) == 'string') {
+        let textNode = document.createTextNode(txt);
+        range.insertNode(textNode)
+        // 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 imageElement = document.createElement('img');
+            imageElement.className = 'chat-image no-text';
+            imageElement.src = imagePush.url;
+            imageElement.setAttribute("data-img-id", imagePush.fileId);
+            // imageElement.width = 200;
+            // imageElement.height = 100;
+            range.insertNode(imageElement);
+          } else {
+            let asFile = items[i].getAsFile();
+            if (!asFile) {
+              continue;
+            }
+            let filePush = {fileId: this.generateId(), file: asFile};
+            this.fileList[filePush.fileId] = (filePush)
+            let fileElement = this.createFile(filePush);
+            range.insertNode(fileElement);
+
+            // var text = document.createTextNode("\u00A0");
+            fileElement.insertAdjacentHTML('afterend','\u00A0');
+            // range.selectNodeContents(text);
+            // range.collapse();
+          }
+        }
+      }
+      range.collapse();
+
+    },
+    selectElement(element) {
+      let selection = window.getSelection();
+
+      setTimeout(() => {
+        let t1 = document.createRange();
+        t1.setStart(element, 0);
+        t1.setEnd(element, 0);
+        if (element.firstChild) {
+          t1.selectNodeContents(element.firstChild);
+        }
+        t1.collapse();
+
+        selection.removeAllRanges();
+        selection.addRange(t1);
+        element.focus();
+      })
+    },
+    onKeydown(e) {
+      if (e.keyCode === 13) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.atIng) {
+          console.log('选中at的人')
+          this.$refs.atBox.select();
+          return;
+        }
+        if (e.shiftKey) {
+          let selection = window.getSelection();
+          let range = selection.getRangeAt(0);
+
+          let divElement = document.createElement('div');
+
+          let endContainer = range.endContainer;
+          let parentElement = endContainer.parentElement;
+
+          let newText = endContainer.textContent.substring(range.endOffset).trim();
+          endContainer.textContent = endContainer.textContent.substring(0, range.endOffset);
+          divElement.innerHTML = newText || '';
+
+          if (parentElement === this.$refs.content) {
+            // range.insertNode(divElement)
+            this.$refs.content.append(divElement);
+          } else {
+            parentElement.insertAdjacentElement('afterend', divElement);
+          }
+
+          // if (range.startContainer !== endContainer || range.startOffset !== range.endOffset) {
+          //   console.log('delete range.', range.startContainer, range.startOffset, range.endContainer, range.endOffset)
+          //   document.execCommand('delete', false, null);
+          // }
+          this.selectElement(divElement);
+          // return false;
+        } else {
+          if (this.compositionFlag) {
+            console.log('中文输入中')
+            return;
+          }
+          this.submit();
+        }
+        return;
+      }
+      if (e.keyCode === 90) {
+        if (e.ctrlKey || e.metaKey) {
+          e.preventDefault();
+          e.stopPropagation();
+          if (this.history.length <= 1) {
+            return;
+          }
+          this.history.pop();
+          let last = this.history.pop();
+          // console.log('回滚为：', last);
+          this.contentHtml = last;
+          if (this.history.length === 0) {
+            // 保底
+            this.history.push(this.defaultContentHtml);
+          }
+
+          setTimeout(() => {
+            let t = this.$refs.content.lastElementChild.lastChild;
+            // t.focus();
+            let r = document.createRange();
+            r.setStart(t, t.textContent.length);
+            r.setEnd(t, t.textContent.length);
+            r.collapse();
+            // r.selectNodeContents(t.lastChild);
+
+            let selection = document.getSelection();
+            selection.removeAllRanges();
+            selection.addRange(r);
+          })
+        }
+      }
+      if (e.keyCode === 8) {
+        setTimeout(() => {
+          // console.log(this.$refs.content.innerHTML.trim())
+          let s = this.$refs.content.innerHTML.trim();
+          if (s === '' || s === '<br>') {
+            // 拼接随机长度的空格，以刷新dom
+            this.empty();
+            this.selectElement(this.$refs.content);
+          }
+          // this.
+        })
+      }
+      // console.log(e.keyCode)
+      if (this.atIng) {
+        console.log('atIng', e.keyCode)
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.keyCode === 38) {
+          this.$refs.atBox.moveUp();
+        }
+        if (e.keyCode === 40) {
+          this.$refs.atBox.moveDown();
+        }
+      }
+    },
+    onAtSelect(member) {
+      this.atIng = false;
+      let range = window.getSelection().getRangeAt(0)
+      // 选中输入的 @xx 符
+      range.setStart(this.blurRange.startContainer, this.focusOffset - 1 - this.atSearchText.length)
+      range.setEnd(this.blurRange.endContainer, this.focusOffset)
+      range.deleteContents()
+      // 创建元素节点
+      let element = document.createElement('SPAN')
+      element.className = "chat-at-user";
+      element.dataset.id = member.userId;
+      element.contentEditable = 'false'
+      element.innerText = `@${member.aliasName}`
+      element.setAttribute("data-at-user-id", member.userId)
+      range.insertNode(element)
+      // 光标移动到末尾
+      range.collapse()
+      // 插入空格
+      let textNode = document.createTextNode('\u00A0');
+      range.insertNode(textNode)
+      range.selectNodeContents(textNode);
+
+      range.collapse()
+      this.atSearchText = "";
+      this.focus();
+      // this.selectElement(textNode);
+      // this.$refs.editBox.focus()
+    },
+    onEditorInput(e) {
+      // 如果触发 @
+      if (this.$props.groupMembers && !this.zhLock) {
+        if (e.data === '@') {
+          // 打开选择弹窗
+          this.showAtBox(e);
+        } else {
+          let selection = window.getSelection()
+          // let range = selection.getRangeAt(0)
+          let focusNode = selection.focusNode;
+          // 截取@后面的名称作为过滤条件
+          let stIdx = focusNode.textContent.lastIndexOf('@');
+          this.atSearchText = focusNode.textContent.substring(stIdx + 1);
+        }
+      }
+
+    },
+    onBlur(e) {
+      // setTimeout(() => {
+      //   console.log(e)
+      //   this.$refs.atBox.close();
+      //   this.atIng = false;
+      // },100)
+      this.blurRange = window.getSelection().getRangeAt(0);
+    },
+    onMousedown() {
+      if (this.atIng) {
+        this.$refs.atBox.close();
+        this.atIng = false;
+      }
+    },
+    insertEmoji(emojiText) {
+      // let selection = window.getSelection();
+      // let range = selection.getRangeAt(0);
+      let emojiElement = document.createElement('img');
+      emojiElement.className = 'chat-emoji no-text';
+      emojiElement.setAttribute("data-emoji-code", emojiText);
+      emojiElement.src = this.$emo.textToUrl(emojiText);
+
+      let blurRange = this.blurRange;
+      if (blurRange.startContainer !== blurRange.endContainer || blurRange.startOffset !== blurRange.endOffset) {
+        blurRange.deleteContents();
+      }
+      blurRange.insertNode(emojiElement);
+
+      this.focus();
+    },
+    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.setAttribute("data-file-id", fileId);
+
+      let left = document.createElement('div');
+      left.className = 'file-position-left';
+      container.appendChild(left);
+
+      let icon = document.createElement('div');
+      icon.className = 'file-icon';
+      icon.innerText = '?';
+      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';
+      }
+    },
+    clear() {
+      this.empty();
+      this.imageList = [];
+      this.fileList = [];
+    },
+    empty() {
+      let emptyCount = Math.random() * 100 + 5;
+      let content = '';
+      for (let i = 0; i < emptyCount; i++) {
+        content += ' ';
+      }
+      this.contentHtml = this.defaultContentHtml + content;
+    },
+    showAtBox(e) {
+      this.atIng = true;
+      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
+      })
+    },
+    submit() {
+      // console.log(this.content)
+      let nodes = this.$refs.content.childNodes;
+      let textList = [];
+      let imageList = [];
+      let fileList = [];
+
+      let fullList = [];
+
+
+      let tempText = '';
+      let each = (nodes) => {
+        for (let i = 0; i < nodes.length; i++) {
+          let node = nodes[i];
+          if (!node) {
+            continue;
+          }
+          if (node.nodeType === 3) {
+            tempText += node.textContent;
+            continue;
+          }
+          let nodeName = node.nodeName.toLowerCase();
+          if (nodeName === 'script') {
+            continue;
+          }
+          let text = tempText.trim();
+          if (nodeName === 'img') {
+            let imgId = node.getAttribute('data-img-id');
+            if (imgId) {
+              if (text) {
+                fullList.push({
+                  type: 'text',
+                  content: text
+                })
+              }
+              fullList.push({
+                type: 'image',
+                content: this.imageList[imgId]
+              })
+              imageList.push(this.imageList[imgId]);
+              textList.push(text);
+              tempText = '';
+            } else {
+              let emojiCode = node.getAttribute('data-emoji-code');
+              tempText += emojiCode;
+            }
+          } else if (nodeName === 'div') {
+            let fileId = node.getAttribute('data-file-id');
+            // 文件
+            if (fileId) {
+              if (text) {
+                fullList.push({
+                  type: 'text',
+                  content: text
+                })
+              }
+              fullList.push({
+                type: 'file',
+                content: this.fileList[fileId]
+              })
+              fileList.push(this.fileList[fileId]);
+              textList.push(text);
+              tempText = '';
+            } else {
+              tempText += '\n';
+              each(node.childNodes);
+            }
+          } else if (nodeName === 'span') {
+            let userId = node.getAttribute("data-at-user-id");
+            if (userId !== null && userId !== undefined) {
+              tempText += node.outerHTML;
+            }
+          } else {
+            console.warn('未处理的标签');
+            if (getComputedStyle(node).display === 'block') {
+              tempText += '\n';
+            } else {
+              tempText += ' ';
+            }
+            each(node.childNodes);
+          }
+        }
+      }
+      each(nodes)
+      let text = tempText.trim();
+      if (text !== '') {
+        fullList.push({
+          type: 'text',
+          content: text
+        })
+        textList.push(text);
+      }
+      // console.log(textList, imageList, fileList)
+
+      this.$emit('submit', fullList, textList, imageList, fileList);
+    },
+    focus() {
+      this.$refs.content.focus();
+    }
+
+  },
+  mounted() {
+    console.log(this.$props.groupMembers)
+    // this.$refs.content.firstElementChild.focus();
+    this.selectElement(this.$refs.content.firstElementChild);
+    setInterval(() => {
+      if (!this.$refs.content) {
+        return;
+      }
+      // 输入中文时不记录
+      if (this.compositionFlag) {
+        return;
+      }
+      let last = this.history[this.history.length];
+      let newContent = this.$refs.content.innerHTML;
+      if (last !== newContent) {
+        this.history.push(newContent);
+      }
+    }, 1000);
+  }
+}
+</script>
+
+<style lang="scss">
+.chat-input-area {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .edit-chat-container {
+    //width: 100%;
+    //height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid #c3c3c3;
+    outline: none;
+    padding: 10px 0;
+    line-height: 30px;
+    font-size: 16px;
+    text-align: left;
+
+    > div {
+      padding-left: 10px;
+    }
+
+    > div:before {
+      content: "\00a0";
+      font-size: 14px;
+    }
+
+    .chat-image {
+      max-width: 200px;
+      max-height: 100px;
+      border: 1px solid #e6e6e6;
+      cursor: pointer;
+      //margin-left: 10px;
+    }
+
+    .chat-emoji {
+      width: 30px;
+      height: 30px;
+      vertical-align: top;
+      cursor: pointer;
+    }
+
+    .chat-file-container {
+      width: 200px;
+      //height: 100px;
+      padding: 5px 7px;
+      border: 1px solid #4cd964;
+      display: flex;
+
+      .file-position-left {
+        width: 30%;
+        flex: 1;
+        justify-content: center;
+        align-items: center;
+
+        .file-icon {
+          width: 30px;
+          height: 30px;
+          text-align: center;
+          justify-content: center;
+          align-items: center;
+          vertical-align: center;
+          border: 1px solid #e6e6e6;
+        }
+      }
+
+      .file-position-right {
+        width: 70%;
+        flex: 3;
+
+        .file-name {
+          font-size: 14px;
+          color: #333;
+        }
+
+        .file-size {
+          font-size: 12px;
+          color: #666;
+        }
+      }
+    }
+
+    .chat-at-user {
+      background-color: #4cd964;
+      padding: 2px 5px;
+      color: white;
+      //border: 1px solid #c3c3c3;
+      border-radius: 3px;
+    }
+  }
+
+  .edit-chat-container:empty:before {
+    content: '请输入消息（按Shift+Enter键换行）';
+    color: gray;
+  }
+
+  .edit-chat-container:focus:before {
+    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..09bcdd9 100644
--- a/im-web/src/components/chat/ChatMessageItem.vue
+++ b/im-web/src/components/chat/ChatMessageItem.vue
@@ -280,6 +280,7 @@
 							position: absolute;
 							left: -10px;
 							top: 13px;
+            z-index: -1;
 							width: 0;
 							height: 0;
 							border-style: solid dashed dashed;
@@ -407,6 +408,14 @@
 							color: #329432;
 						}
 					}
+
+        .chat-at-user {
+          background-color: #4cd964;
+          padding: 2px 5px;
+          color: white;
+          //border: 1px solid #c3c3c3;
+          border-radius: 3px;
+        }
 				}
 			}
 
@@ -442,7 +451,7 @@
 							background-color: rgb(88, 127, 240);
 							color: #fff;
 							vertical-align: top;
-							
+
 							&:after {
 								left: auto;
 								right: -10px;