web端ui优化

im-ui/src/components/chat/ChatAtBox.vue

@@ -1,8 +1,9 @@
 <template>
 	<el-scrollbar v-show="show" ref="scrollBox" class="group-member-choose"
 		:style="{'left':pos.x+'px','top':pos.y-300+'px'}">
-		<div v-for="(member) in showMembers" :key="member.id">
-			<chat-group-member :member="member" :height="40" @click.native="onSelectMember(member)"></chat-group-member>
+		<div v-for="(member,idx) in showMembers" :key="member.id">
+			<chat-group-member :member="member" :height="40" :active='activeIdx==idx'
+			@click.native="onSelectMember(member)"></chat-group-member>
 		</div>
 	</el-scrollbar>
 </template>
@@ -55,6 +56,10 @@
 					}
 				})
 				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;
@@ -122,7 +127,7 @@
 		position: fixed;
 		width: 200px;
 		height: 300px;
-		border: 1px solid #b4b4b4;
+		border: 1px solid #53a0e79c;
 		border-radius: 5px;
 		background-color: #f5f5f5;
 		box-shadow: 0px 0px 10px #ccc;

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

@@ -62,8 +62,8 @@
 									: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">x
+									: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">
@@ -107,7 +107,7 @@
 	import ChatAtBox from "./ChatAtBox.vue"
 	import GroupMemberSelector from "../group/GroupMemberSelector.vue"
 	import RtcGroupJoin from "../rtc/RtcGroupJoin.vue"
-	
+
 
 	export default {
 		name: "chatPrivate",
@@ -164,6 +164,7 @@
 				}
 			},
 			onKeyDown() {
+				console.log("onKeyDown")
 				if (this.$refs.atBox.show) {
 					this.$refs.atBox.moveDown()
 				}
@@ -188,13 +189,17 @@
 				this.focusNode = selection.focusNode;
 				this.focusOffset = selection.focusOffset;
 			},
-			onEditorInput(e) {
+			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 {
+					} else if(this.$refs.atBox.show){
 						let selection = window.getSelection()
 						let range = selection.getRangeAt(0)
 						this.focusNode = selection.focusNode;
@@ -490,7 +495,7 @@
 
 			},
 			onInviteOk(members) {
-				if(members.length < 2){
+				if (members.length < 2) {
 					return;
 				}
 				let userInfos = [];
@@ -742,7 +747,7 @@
 					this.placeholder = "聊点什么吧~";
 				}
 			},
-			generateId(){
+			generateId() {
 				// 生成临时id
 				return String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));
 			}
@@ -824,7 +829,7 @@
 		position: relative;
 		width: 100%;
 		background: #f8f8f8;
-		
+
 		.el-header {
 			padding: 3px;
 			background-color: white;

im-ui/src/components/chat/ChatGroupMember.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="chat-group-member" :style="{'height':height+'px'}">
+    <div class="chat-group-member" :class="active?'active':''" :style="{'height':height+'px'}">
         <div class="member-avatar">
             <head-image :size="headImageSize" :name="member.showNickName" :url="member.headImage"> </head-image>
         </div>
@@ -25,7 +25,11 @@ export default {
         height:{
             type: Number,
             default: 50
-        }
+        },
+		active: {
+			type: Boolean,
+			default: false
+		}
     },
     computed:{
         headImageSize(){
@@ -47,11 +51,11 @@ export default {
     box-sizing: border-box;
 
     &:hover {
-        background-color: #eeeeee;
+        background-color: #F8FAFF;
     }
 
     &.active {
-        background-color: #eeeeee;
+        background-color: #E8F2FF;
     }
 
     .member-name {

im-ui/src/components/common/Emotion.vue

@@ -55,7 +55,7 @@
 		width: 500px;
 		box-sizing: border-box;
 		padding: 5px;
-		border: 1px solid #b4b4b4;
+		border: 1px solid #53a0e79c;
 		border-radius: 5px;
 		background-color: #f5f5f5;
 		box-shadow: 0px 0px 10px #ccc;