diff --git a/im-platform/src/main/java/com/bx/implatform/service/impl/GroupMessageServiceImpl.java b/im-platform/src/main/java/com/bx/implatform/service/impl/GroupMessageServiceImpl.java
index 3bab80d..9493133 100644
--- a/im-platform/src/main/java/com/bx/implatform/service/impl/GroupMessageServiceImpl.java
+++ b/im-platform/src/main/java/com/bx/implatform/service/impl/GroupMessageServiceImpl.java
@@ -67,8 +67,8 @@ public class GroupMessageServiceImpl extends ServiceImpl<GroupMessageMapper, Gro
         }
         // 是否在群聊里面
         GroupMember member = groupMemberService.findByGroupAndUserId(dto.getGroupId(), session.getUserId());
-        if (Objects.isNull(member)) {
-            throw new GlobalException(ResultCode.PROGRAM_ERROR, "您已不在群聊里面，无法撤回消息");
+        if (Objects.isNull(member)||member.getQuit()) {
+            throw new GlobalException(ResultCode.PROGRAM_ERROR, "您已不在群聊里面，无法发送消息");
         }
         // 群聊成员列表
         List<Long> userIds = groupMemberService.findUserIdsByGroupId(group.getId());
@@ -116,7 +116,7 @@ public class GroupMessageServiceImpl extends ServiceImpl<GroupMessageMapper, Gro
         }
         // 判断是否在群里
         GroupMember member = groupMemberService.findByGroupAndUserId(msg.getGroupId(), session.getUserId());
-        if (member == null) {
+        if (Objects.isNull(member)||member.getQuit()) {
             throw new GlobalException(ResultCode.PROGRAM_ERROR, "您已不在群聊里面，无法撤回消息");
         }
         // 修改数据库
diff --git a/im-ui/src/components/chat/ChatAtBox.vue b/im-ui/src/components/chat/ChatAtBox.vue
index 0616a99..9e1cbc7 100644
--- a/im-ui/src/components/chat/ChatAtBox.vue
+++ b/im-ui/src/components/chat/ChatAtBox.vue
@@ -4,7 +4,7 @@
 		<div v-for="(member,idx) in showMembers" :key="member.id">
 			<div class="member-item" :class="idx==activeIdx?'active':''" @click="onSelectMember(member)">
 				<div class="member-avatar">
-					<head-image :size="30" :name="member.aliasName" :url="member.headImage"> </head-image>
+					<head-image :size="25" :name="member.aliasName" :url="member.headImage"> </head-image>
 				</div>
 				<div class="member-name">
 					<div>{{member.aliasName}}</div>
@@ -140,9 +140,8 @@
 			height: 35px;
 			margin-bottom: 1px;
 			position: relative;
-			padding-left: 10px;
+			padding: 0 5px;
 			align-items: center;
-			padding-right: 5px;
 			background-color: #fafafa;
 			white-space: nowrap;
 			box-sizing: border-box;
@@ -157,8 +156,8 @@
 
 
 			.member-avatar {
-				width: 30px;
-				height: 30px;
+				width: 25px;
+				height: 25px;
 			}
 
 			.member-name {
diff --git a/im-ui/src/components/chat/ChatBox.vue b/im-ui/src/components/chat/ChatBox.vue
index 01849c8..346d039 100644
--- a/im-ui/src/components/chat/ChatBox.vue
+++ b/im-ui/src/components/chat/ChatBox.vue
@@ -691,9 +691,8 @@
 	.chat-box {
 		position: relative;
 		width: 100%;
-		background: white;
+		background: #f8f8f8;
 		border: #dddddd solid 1px;
-
 		.el-header {
 			padding: 5px;
 			background-color: white;
@@ -764,9 +763,9 @@
 				display: flex;
 				flex-direction: column;
 				height: 100%;
-				background-color: #f8f8f8 !important;
-				outline-color: rgba(83, 160, 231, 0.61);
-
+				background-color: white !important;
+				
+				
 				.send-text-area {
 					box-sizing: border-box;
 					padding: 5px;
@@ -775,8 +774,8 @@
 					resize: none;
 					font-size: 16px;
 					color: black;
-					background-color: #f8f8f8 !important;
 					outline-color: rgba(83, 160, 231, 0.61);
+					
 					text-align: left;
 					line-height: 30 px;
 
@@ -794,13 +793,13 @@
 
 				.send-image-area {
 					text-align: left;
-
+					border: #53a0e7 solid 1px;
 					.send-image-box {
 						position: relative;
 						display: inline-block;
 
 						.send-image {
-							max-height: 190px;
+							max-height: 180px;
 							border: 1px solid #ccc;
 							border-radius: 2%;
 							margin: 2px;
diff --git a/im-ui/src/components/chat/ChatGroupSide.vue b/im-ui/src/components/chat/ChatGroupSide.vue
index 8350617..0904663 100644
--- a/im-ui/src/components/chat/ChatGroupSide.vue
+++ b/im-ui/src/components/chat/ChatGroupSide.vue
@@ -39,9 +39,9 @@
 				</el-form-item>
 
 				<div class="btn-group">
-					<el-button v-show="editing" type="success" @click="handleSaveGroup()">提交</el-button>
+					<el-button v-show="editing" type="success" @click="onSaveGroup()">提交</el-button>
 					<el-button v-show="!editing" type="primary" @click="editing=!editing">编辑</el-button>
-					<el-button type="danger" v-show="!isOwner" @click="handleQuit()">退出群聊</el-button>
+					<el-button type="danger" v-show="!isOwner" @click="onQuit()">退出群聊</el-button>
 				</div>
 			</el-form>
 		</el-scrollbar>
@@ -75,7 +75,7 @@
 			}
 		},
 		methods: {
-			handleClose() {
+			onClose() {
 				this.$emit('close');
 			},
 			loadGroupMembers() {
@@ -86,7 +86,7 @@
 					this.groupMembers = members;
 				})
 			},
-			handleSaveGroup() {
+			onSaveGroup() {
 				let vo = this.group;
 				this.$http({
 					url: "/group/modify",
@@ -98,7 +98,7 @@
 					this.$message.success("修改成功");
 				})
 			},
-			handleQuit() {
+			onQuit() {
 				this.$confirm('退出群聊后将不再接受群里的消息，确认退出吗？', '确认退出?', {
 					confirmButtonText: '确定',
 					cancelButtonText: '取消',
diff --git a/im-ui/src/components/chat/ChatHistory.vue b/im-ui/src/components/chat/ChatHistory.vue
index ba5e3d3..3dde34c 100644
--- a/im-ui/src/components/chat/ChatHistory.vue
+++ b/im-ui/src/components/chat/ChatHistory.vue
@@ -1,5 +1,5 @@
 <template>
-	<el-drawer title="聊天历史记录" size="700px"  :visible.sync="visible" direction="rtl" :before-close="handleClose">
+	<el-drawer title="聊天历史记录" size="700px"  :visible.sync="visible" direction="rtl" :before-close="onClose">
 		<div class="chat-history" v-loading="loading" 
 		 element-loading-text="拼命加载中">
 			<el-scrollbar  class="chat-history-scrollbar" ref="scrollbar" id="historyScrollbar" >
@@ -51,13 +51,13 @@
 			}
 		},
 		methods: {
-			handleClose() {
+			onClose() {
 				this.page = 1;
 				this.messages = [];
 				this.loadAll = false;
 				this.$emit('close');
 			},
-			handleScroll() {
+			onScroll() {
 				let high = this.$refs.scrollbar.$refs.wrap.scrollTop; //距离顶部的距离
 				let timeDiff = new Date().getTime() - this.lastScrollTime.getTime();
 				if ( high < 30 && timeDiff>500) {
@@ -139,7 +139,7 @@
 					if (newValue) {
 						this.loadMessages();
 						this.$nextTick(() => {
-							document.getElementById('historyScrollbar').addEventListener("mousewheel", this.handleScroll,true);
+							document.getElementById('historyScrollbar').addEventListener("mousewheel", this.onScroll,true);
 						});
 					}
 				}
diff --git a/im-ui/src/components/chat/ChatItem.vue b/im-ui/src/components/chat/ChatItem.vue
index 9930905..0815f0f 100644
--- a/im-ui/src/components/chat/ChatItem.vue
+++ b/im-ui/src/components/chat/ChatItem.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="chat-item" :class="active ? 'active' : ''" @contextmenu.prevent="showRightMenu($event)">
 		<div class="chat-left">
-			<head-image :url="chat.headImage" :name="chat.showName" :size="50"
+			<head-image :url="chat.headImage" :name="chat.showName" :size="45"
 				:id="chat.type=='PRIVATE'?chat.targetId:0"></head-image>
 			<div v-show="chat.unreadCount>0" class="unread-text">{{chat.unreadCount}}</div>
 		</div>
@@ -94,13 +94,13 @@
 
 <style lang="scss">
 	.chat-item {
-		height: 65px;
+		height: 50px;
 		display: flex;
 		margin-bottom: 1px;
 		position: relative;
+		padding: 5px;
 		padding-left: 10px;
 		align-items: center;
-		padding-right: 5px;
 		background-color: #fafafa;
 		white-space: nowrap;
 		color: black;
@@ -117,8 +117,8 @@
 		.chat-left {
 			position: relative;
 			display: flex;
-			width: 50px;
-			height: 50px;
+			width: 45px;
+			height: 45x;
 
 			.unread-text {
 				position: absolute;
@@ -147,7 +147,7 @@
 			.chat-name {
 				display: flex;
 				line-height: 25px;
-				
+				height: 25px;
 				.chat-name-text {
 					flex: 1;
 					font-size: 15px;
diff --git a/im-ui/src/components/chat/ChatMessageItem.vue b/im-ui/src/components/chat/ChatMessageItem.vue
index b1a2e41..d76917a 100644
--- a/im-ui/src/components/chat/ChatMessageItem.vue
+++ b/im-ui/src/components/chat/ChatMessageItem.vue
@@ -26,7 +26,7 @@
 							<img class="send-image" :src="JSON.parse(msgInfo.content).thumbUrl"
 								@click="showFullImageBox()" />
 						</div>
-						<span title="发送失败" v-show="loadFail" @click="handleSendFail"
+						<span title="发送失败" v-show="loadFail" @click="onSendFail"
 							class="send-fail el-icon-warning"></span>
 					</div>
 					<div class="chat-msg-file" v-if="msgInfo.type==$enums.MESSAGE_TYPE.FILE">
@@ -40,11 +40,11 @@
 								<span type="primary" class="el-icon-document"></span>
 							</div>
 						</div>
-						<span title="发送失败" v-show="loadFail" @click="handleSendFail"
+						<span title="发送失败" v-show="loadFail" @click="onSendFail"
 							class="send-fail el-icon-warning"></span>
 					</div>
 					<div class="chat-msg-voice" v-if="msgInfo.type==$enums.MESSAGE_TYPE.AUDIO"
-						@click="handlePlayVoice()">
+						@click="onPlayVoice()">
 						<audio controls :src="JSON.parse(msgInfo.content).url"></audio>
 					</div>
 					<span class="chat-readed" v-show="msgInfo.selfSend && !msgInfo.groupId 
@@ -56,7 +56,7 @@
 
 		</div>
 		<right-menu v-show="menu && rightMenu.show" :pos="rightMenu.pos" :items="menuItems"
-			@close="rightMenu.show=false" @select="handleSelectMenu"></right-menu>
+			@close="rightMenu.show=false" @select="onSelectMenu"></right-menu>
 	</div>
 </template>
 
@@ -110,7 +110,7 @@
 
 		},
 		methods: {
-			handleSendFail() {
+			onSendFail() {
 				this.$message.error("该文件已发送失败，目前不支持自动重新发送，建议手动重新发送")
 			},
 			showFullImageBox() {
@@ -119,13 +119,13 @@
 					this.$store.commit('showFullImageBox', imageUrl);
 				}
 			},
-			handlePlayVoice() {
+			onPlayVoice() {
 				if (!this.audio) {
 					this.audio = new Audio();
 				}
 				this.audio.src = JSON.parse(this.msgInfo.content).url;
 				this.audio.play();
-				this.handlePlayVoice = 'RUNNING';
+				this.onPlayVoice = 'RUNNING';
 			},
 			showRightMenu(e) {
 				this.rightMenu.pos = {
@@ -134,7 +134,7 @@
 				};
 				this.rightMenu.show = "true";
 			},
-			handleSelectMenu(item) {
+			onSelectMenu(item) {
 				this.$emit(item.key.toLowerCase(), this.msgInfo);
 			}
 		},
@@ -233,7 +233,7 @@
 						line-height: 30px;
 						margin-top: 3px;
 						padding: 7px;
-						background-color: rgb(235, 235, 245);
+						background-color: white;
 						border-radius: 10px;
 						color: black;
 						display: block;
@@ -241,7 +241,7 @@
 						text-align: left;
 						white-space: pre-wrap;
 						word-break: break-all;
-						box-shadow: 2px 2px 2px #c0c0f0;
+						box-shadow: 1px 1px 1px #c0c0f0;
 
 						&:after {
 							content: "";
@@ -383,7 +383,7 @@
 							background-color: rgb(88, 127, 240);
 							color: #fff;
 							vertical-align: top;
-							box-shadow: 2px 2px 1px #ccc;
+							box-shadow: 1px 1px 1px #ccc;
 
 							&:after {
 								left: auto;
diff --git a/im-ui/src/components/chat/ChatVoice.vue b/im-ui/src/components/chat/ChatVoice.vue
index 48bdc2c..879f57c 100644
--- a/im-ui/src/components/chat/ChatVoice.vue
+++ b/im-ui/src/components/chat/ChatVoice.vue
@@ -1,23 +1,23 @@
 <template>
-	<el-dialog class="chat-voice" title="语音录制" :visible.sync="visible" width="600px" :before-close="handleClose">
+	<el-dialog class="chat-voice" title="语音录制" :visible.sync="visible" width="600px" :before-close="onClose">
 		<div v-show="mode=='RECORD'">
 			<div class="chat-voice-tip">{{stateTip}}</div>
 			<div>时长: {{state=='STOP'?0:parseInt(rc.duration)}}s</div>
 		</div>
-		<audio v-show="mode=='PLAY'" :src="url" controls ref="audio" @ended="handleStopAudio()"></audio>
+		<audio v-show="mode=='PLAY'" :src="url" controls ref="audio" @ended="onStopAudio()"></audio>
 		<el-divider content-position="center"></el-divider>
 		<el-row class="chat-voice-btn-group">
-			<el-button round type="primary" v-show="state=='STOP'" @click="handleStartRecord()">开始录音</el-button>
-			<el-button round type="warning" v-show="state=='RUNNING'" @click="handlePauseRecord()">暂停录音</el-button>
-			<el-button round type="primary" v-show="state=='PAUSE'" @click="handleResumeRecord()">继续录音</el-button>
-			<el-button round type="danger" v-show="state=='RUNNING'||state=='PAUSE'" @click="handleCompleteRecord()">
+			<el-button round type="primary" v-show="state=='STOP'" @click="onStartRecord()">开始录音</el-button>
+			<el-button round type="warning" v-show="state=='RUNNING'" @click="onPauseRecord()">暂停录音</el-button>
+			<el-button round type="primary" v-show="state=='PAUSE'" @click="onResumeRecord()">继续录音</el-button>
+			<el-button round type="danger" v-show="state=='RUNNING'||state=='PAUSE'" @click="onCompleteRecord()">
 				结束录音</el-button>
-			<el-button round type="success" v-show="state=='COMPLETE' && mode!='PLAY'" @click="handlePlayAudio()">播放录音
+			<el-button round type="success" v-show="state=='COMPLETE' && mode!='PLAY'" @click="onPlayAudio()">播放录音
 			</el-button>
-			<el-button round type="warning" v-show="state=='COMPLETE' && mode=='PLAY'" @click="handleStopAudio()">停止播放
+			<el-button round type="warning" v-show="state=='COMPLETE' && mode=='PLAY'" @click="onStopAudio()">停止播放
 			</el-button>
-			<el-button round type="primary" v-show="state=='COMPLETE'" @click="handleRestartRecord()">重新录音</el-button>
-			<el-button round type="primary" v-show="state=='COMPLETE'" @click="handleSendRecord()">立即发送</el-button>
+			<el-button round type="primary" v-show="state=='COMPLETE'" @click="onRestartRecord()">重新录音</el-button>
+			<el-button round type="primary" v-show="state=='COMPLETE'" @click="onSendRecord()">立即发送</el-button>
 		</el-row>
 	</el-dialog>
 
@@ -45,7 +45,7 @@
 			}
 		},
 		methods: {
-			handleClose() {
+			onClose() {
 				// 关闭前清除数据
 				this.rc.destroy();
 				this.rc = new Recorder();
@@ -55,7 +55,7 @@
 				this.stateTip = '未开始';
 				this.$emit("close");
 			},
-			handleStartRecord() {
+			onStartRecord() {
 				this.rc.start().then((stream) => {
 					this.state = 'RUNNING';
 					this.stateTip = "正在录音...";
@@ -67,34 +67,34 @@
 
 
 			},
-			handlePauseRecord() {
+			onPauseRecord() {
 				this.rc.pause();
 				this.state = 'PAUSE';
 				this.stateTip = "已暂停录音";
 			},
-			handleResumeRecord() {
+			onResumeRecord() {
 				this.rc.resume();
 				this.state = 'RUNNING';
 				this.stateTip = "正在录音...";
 			},
-			handleCompleteRecord() {
+			onCompleteRecord() {
 				this.rc.pause();
 				this.state = 'COMPLETE';
 				this.stateTip = "已结束录音";
 			},
-			handlePlayAudio() {
+			onPlayAudio() {
 				let wav = this.rc.getWAVBlob();
 				let url = URL.createObjectURL(wav);
 				this.$refs.audio.src = url;
 				this.$refs.audio.play();
 				this.mode = 'PLAY';
 			},
-			handleStopAudio() {
+			onStopAudio() {
 				console.log(this.$refs.audio);
 				this.$refs.audio.pause();
 				this.mode = 'RECORD';
 			},
-			handleRestartRecord() {
+			onRestartRecord() {
 				this.rc.destroy();
 				this.rc = new Recorder()
 				this.rc.start();
@@ -102,7 +102,7 @@
 				this.mode = 'RECORD';
 				this.stateTip = "正在录音...";
 			},
-			handleSendRecord() {
+			onSendRecord() {
 				let wav = this.rc.getWAVBlob();
 				let name = new Date().getDate() + '.wav';
 				var formData = new window.FormData()
@@ -120,7 +120,7 @@
 						url: url
 					}
 					this.$emit("send", data);
-					this.handleClose();
+					this.onClose();
 				})
 			}
 		}
diff --git a/im-ui/src/components/common/Emotion.vue b/im-ui/src/components/common/Emotion.vue
index 0866810..1adaee2 100644
--- a/im-ui/src/components/common/Emotion.vue
+++ b/im-ui/src/components/common/Emotion.vue
@@ -4,7 +4,7 @@
 			<el-scrollbar style="height:250px">
 				<div class="emotion-item-list">
 					<div class="emotion-item" v-for="(emoText, i) in $emo.emoTextList" :key="i"
-						@click="clickHandler(emoText)" v-html="$emo.textToImg(emoText)">
+						@click="onClickEmo(emoText)" v-html="$emo.textToImg(emoText)">
 					</div>
 				</div>
 			</el-scrollbar>
@@ -25,7 +25,7 @@
 			}
 		},
 		methods: {
-			clickHandler(emoText) {
+			onClickEmo(emoText) {
 				let emotion = `#${emoText};`
 				this.$emit('emotion', emotion)
 			},
diff --git a/im-ui/src/components/common/FileUpload.vue b/im-ui/src/components/common/FileUpload.vue
index 5b2eafb..480038c 100644
--- a/im-ui/src/components/common/FileUpload.vue
+++ b/im-ui/src/components/common/FileUpload.vue
@@ -1,6 +1,6 @@
 <template>
 	<el-upload :action="action" :headers="uploadHeaders" :accept="fileTypes==null?'':fileTypes.join(',')"
-	 :show-file-list="false" :on-success="handleSuccess" :on-error="handleError" :disabled="disabled" :before-upload="beforeUpload">
+	 :show-file-list="false" :on-success="onSuccess" :on-error="onError" :disabled="disabled" :before-upload="beforeUpload">
 		<slot></slot>
 	</el-upload>
 </template>
@@ -37,7 +37,7 @@
 			}
 		},
 		methods: {
-			handleSuccess(res, file) {
+			onSuccess(res, file) {
 				this.loading && this.loading.close();
 				if (res.code == 200) {
 					this.$emit("success", res.data, file);
@@ -46,7 +46,7 @@
 					this.$emit("fail", res, file);
 				}
 			},
-			handleError(err, file) {
+			onError(err, file) {
 				this.$emit("fail", err, file);
 			},
 			beforeUpload(file) {
diff --git a/im-ui/src/components/common/FullImage.vue b/im-ui/src/components/common/FullImage.vue
index 8bfd15e..444833e 100644
--- a/im-ui/src/components/common/FullImage.vue
+++ b/im-ui/src/components/common/FullImage.vue
@@ -1,10 +1,10 @@
 <template>
-	<div class="full-image" v-show="visible" :before-close="handleClose" :modal="true">
+	<div class="full-image" v-show="visible" :before-close="onClose" :modal="true">
 		<div class="mask"></div>
 		<div class="image-box">
 			<img  :src="url"/>
 		</div>
-		<div class="close" @click="handleClose">x</div>
+		<div class="close" @click="onClose">x</div>
 	</div>
 </template>
 
@@ -17,7 +17,7 @@
 			}
 		},
 		methods: {
-			handleClose() {
+			onClose() {
 				this.$emit("close");
 			}
 		},
diff --git a/im-ui/src/components/common/RightMenu.vue b/im-ui/src/components/common/RightMenu.vue
index f71f8ea..e7107f8 100644
--- a/im-ui/src/components/common/RightMenu.vue
+++ b/im-ui/src/components/common/RightMenu.vue
@@ -3,7 +3,7 @@
 		<div class="right-menu" :style="{'left':pos.x+'px','top':pos.y+'px'}">
 			<el-menu text-color="#333333">
 				<el-menu-item v-for="(item) in items" :key="item.key" :title="item.name"
-					@click="handleSelectMenu(item)">
+					@click="onSelectMenu(item)">
 					<span :class="item.icon"></span>
 					<span>{{item.name}}</span>
 					
@@ -31,7 +31,7 @@
 			close() {
 				this.$emit("close");
 			},
-			handleSelectMenu(item) {
+			onSelectMenu(item) {
 				this.$emit("select", item);
 			}
 		}
diff --git a/im-ui/src/components/common/UserInfo.vue b/im-ui/src/components/common/UserInfo.vue
index 98be670..436a5fa 100644
--- a/im-ui/src/components/common/UserInfo.vue
+++ b/im-ui/src/components/common/UserInfo.vue
@@ -18,8 +18,8 @@
 			</div>
 			<el-divider content-position="center"></el-divider>
 			<div class="user-btn-group">
-				<el-button v-show="isFriend" type="primary" @click="handleSendMessage()">发消息</el-button>
-				<el-button v-show="!isFriend" type="primary" @click="handleAddFriend()">加为好友</el-button>
+				<el-button v-show="isFriend" type="primary" @click="onSendMessage()">发消息</el-button>
+				<el-button v-show="!isFriend" type="primary" @click="onAddFriend()">加为好友</el-button>
 			</div>
 		</div>
 	</div>
@@ -47,7 +47,7 @@
 			}
 		},
 		methods: {
-			handleSendMessage() {
+			onSendMessage() {
 				let user = this.user;
 				let chat = {
 					type: 'PRIVATE',
@@ -62,7 +62,7 @@
 				}
 				this.$emit("close");
 			},
-			handleAddFriend() {
+			onAddFriend() {
 				this.$http({
 					url: "/friend/add",
 					method: "post",
diff --git a/im-ui/src/components/friend/AddFriend.vue b/im-ui/src/components/friend/AddFriend.vue
index d84ba7b..6f8ccae 100644
--- a/im-ui/src/components/friend/AddFriend.vue
+++ b/im-ui/src/components/friend/AddFriend.vue
@@ -1,7 +1,7 @@
 <template>
-	<el-dialog title="添加好友" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
-		<el-input  placeholder="输入用户名或昵称,最多展示20条" class="input-with-select" v-model="searchText" @keyup.enter.native="handleSearch()">
-			<el-button slot="append" icon="el-icon-search" @click="handleSearch()"></el-button>
+	<el-dialog title="添加好友" :visible.sync="dialogVisible" width="30%" :before-close="onClose">
+		<el-input  placeholder="输入用户名或昵称,最多展示20条" class="input-with-select" v-model="searchText" @keyup.enter.native="onSearch()">
+			<el-button slot="append" icon="el-icon-search" @click="onSearch()"></el-button>
 		</el-input>
 		<el-scrollbar style="height:400px">
 			<div v-for="(user) in users" :key="user.id" v-show="user.id != $store.state.userStore.userInfo.id">
@@ -21,7 +21,7 @@
 							<div>昵称:{{user.nickName}}</div>
 						</div>
 					</div>
-					 <el-button type="success" size="small" v-show="!isFriend(user.id)" plain @click="handleAddFriend(user)">添加</el-button>
+					 <el-button type="success" size="small" v-show="!isFriend(user.id)" plain @click="onAddFriend(user)">添加</el-button>
 					 <el-button type="info" size="small" v-show="isFriend(user.id)" plain disabled>已添加</el-button>
 				</div>
 			</div>
@@ -48,10 +48,10 @@
 			}
 		},
 		methods: {
-			handleClose() {
+			onClose() {
 				this.$emit("close");
 			},
-			handleSearch() {
+			onSearch() {
 				this.$http({
 					url: "/user/findByName",
 					method: "get",
@@ -62,7 +62,7 @@
 					this.users = data;
 				})
 			},
-			handleAddFriend(user){
+			onAddFriend(user){
 				this.$http({
 					url: "/friend/add",
 					method: "post",
diff --git a/im-ui/src/components/friend/FriendItem.vue b/im-ui/src/components/friend/FriendItem.vue
index 6250314..eccbc0f 100644
--- a/im-ui/src/components/friend/FriendItem.vue
+++ b/im-ui/src/components/friend/FriendItem.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="friend-item" :class="active ? 'active' : ''" @contextmenu.prevent="showRightMenu($event)">
 		<div class="friend-avatar">
-			<head-image :name="friend.nickName" :url="friend.headImage" :online="friend.online">
+			<head-image :size="45" :name="friend.nickName" :url="friend.headImage" :online="friend.online">
 			</head-image>
 		</div>
 		<div class="friend-info">
@@ -14,7 +14,7 @@
 			</div>
 		</div>
 		<right-menu v-show="menu && rightMenu.show" :pos="rightMenu.pos" :items="rightMenu.items"
-			@close="rightMenu.show=false" @select="handleSelectMenu"></right-menu>
+			@close="rightMenu.show=false" @select="onSelectMenu"></right-menu>
 		<slot></slot>
 	</div>
 </template>
@@ -57,7 +57,7 @@
 				};
 				this.rightMenu.show = "true";
 			},
-			handleSelectMenu(item) {
+			onSelectMenu(item) {
 				this.$emit(item.key.toLowerCase(), this.msgInfo);
 			}
 		},
@@ -83,13 +83,13 @@
 
 <style scope lang="scss">
 	.friend-item {
-		height: 65px;
+		height: 50px;
 		display: flex;
 		margin-bottom: 1px;
 		position: relative;
+		padding: 5px;
 		padding-left: 10px;
 		align-items: center;
-		padding-right: 5px;
 		background-color: #fafafa;
 		white-space: nowrap;
 		cursor: pointer;
@@ -106,8 +106,8 @@
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			width: 50px;
-			height: 50px;
+			width: 45px;
+			height: 45px;
 		}
 
 		.friend-info {
diff --git a/im-ui/src/components/group/AddGroupMember.vue b/im-ui/src/components/group/AddGroupMember.vue
index fb1131b..bcf21ee 100644
--- a/im-ui/src/components/group/AddGroupMember.vue
+++ b/im-ui/src/components/group/AddGroupMember.vue
@@ -1,13 +1,13 @@
 <template>
-	<el-dialog title="邀请好友" :visible.sync="visible"  width="50%" :before-close="handleClose">
+	<el-dialog title="邀请好友" :visible.sync="visible"  width="50%" :before-close="onClose">
 		<div class="agm-container">
 			<div class="agm-l-box">
-				<el-input width="200px" placeholder="搜索好友" class="input-with-select" v-model="searchText" @keyup.enter.native="handleSearch()">
-					<el-button slot="append" icon="el-icon-search" @click="handleSearch()"></el-button>
+				<el-input width="200px" placeholder="搜索好友" class="input-with-select" v-model="searchText" @keyup.enter.native="onSearch()">
+					<el-button slot="append" icon="el-icon-search" @click="onSearch()"></el-button>
 				</el-input>
 				<el-scrollbar style="height:400px;">
 					<div v-for="(friend,index) in friends" :key="friend.id">
-						<friend-item v-show="friend.nickName.startsWith(searchText)" :showDelete="false" @click.native="handleSwitchCheck(friend)"
+						<friend-item v-show="friend.nickName.startsWith(searchText)" :showDelete="false" @click.native="onSwitchCheck(friend)"
 						 :menu="false" :friend="friend" :index="index" :active="index === activeIndex">
 							<el-checkbox :disabled="friend.disabled" @click.native.stop="" class="agm-friend-checkbox" v-model="friend.isCheck"
 							 size="medium"></el-checkbox>
@@ -20,7 +20,7 @@
 				<el-scrollbar style="height:400px;">
 					<div v-for="(friend,index) in friends" :key="friend.id">
 						<friend-item v-if="friend.isCheck && !friend.disabled" :friend="friend" 
-						:index="index" :active="false" @del="handleRemoveFriend(friend,index)"
+						:index="index" :active="false" @del="onRemoveFriend(friend,index)"
 						:menu="false">
 						</friend-item>
 					</div>
@@ -28,8 +28,8 @@
 			</div>
 		</div>
 		<span slot="footer" class="dialog-footer">
-			<el-button @click="handleClose()">取 消</el-button>
-			<el-button type="primary" @click="handleOk()">确 定</el-button>
+			<el-button @click="onClose()">取 消</el-button>
+			<el-button type="primary" @click="onOk()">确 定</el-button>
 		</span>
 	</el-dialog>
 </template>
@@ -50,10 +50,10 @@
 			}
 		},
 		methods: {
-			handleClose() {
+			onClose() {
 				this.$emit("close");
 			},
-			handleOk() {
+			onOk() {
 
 				let inviteVO = {
 					groupId: this.groupId,
@@ -76,10 +76,10 @@
 					})
 				}
 			},
-			handleRemoveFriend(friend, index) {
+			onRemoveFriend(friend, index) {
 				friend.isCheck = false;
 			},
-			handleSwitchCheck(friend) {
+			onSwitchCheck(friend) {
 				if (!friend.disabled) {
 					friend.isCheck = !friend.isCheck
 				}
diff --git a/im-ui/src/components/group/GroupItem.vue b/im-ui/src/components/group/GroupItem.vue
index 438c2c0..05d1070 100644
--- a/im-ui/src/components/group/GroupItem.vue
+++ b/im-ui/src/components/group/GroupItem.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="group-item" :class="active ? 'active' : ''">
 		<div class="group-avatar">
-			<head-image :name="group.remark" :url="group.headImage"> </head-image>
+			<head-image :size="45" :name="group.remark" :url="group.headImage"> </head-image>
 		</div>
 		<div class="group-name">
 			<div>{{group.remark}}</div>
@@ -34,13 +34,13 @@
 
 <style lang="scss" >
 	.group-item {
-		height: 65px;
+		height: 50px;
 		display: flex;
 		margin-bottom: 1px;
 		position: relative;
+		padding: 5px;
 		padding-left: 10px;
 		align-items: center;
-		padding-right: 5px;
 		background-color: #fafafa;
 		white-space: nowrap;
 		&:hover {
@@ -52,15 +52,15 @@
 		}
 	
 		.group-avatar {
-			width: 50px;
-			height: 50px;
+			width: 45px;
+			height: 45px;
 		}
 	
 		.group-name {
 			padding-left: 10px;
 			height: 100%;
 			text-align: left;
-			line-height: 65px;
+			line-height: 50px;
 			white-space: nowrap;
 			overflow: hidden;
 			font-size: 14px;
diff --git a/im-ui/src/components/group/GroupMember.vue b/im-ui/src/components/group/GroupMember.vue
index 59f16b0..2a5f848 100644
--- a/im-ui/src/components/group/GroupMember.vue
+++ b/im-ui/src/components/group/GroupMember.vue
@@ -3,7 +3,7 @@
 		<head-image :id="member.userId" :name="member.aliasName" 
 			:url="member.headImage" :size="50" 
 			:online="member.online" >
-			<div  v-if="showDel" @click.stop="handleDelete()" class="btn-kick el-icon-error"></div>
+			<div  v-if="showDel" @click.stop="onDelete()" class="btn-kick el-icon-error"></div>
 		</head-image>
 		<div class="member-name">{{member.aliasName}}</div>
 
@@ -29,7 +29,7 @@
 			}
 		},
 		methods:{
-			handleDelete(){
+			onDelete(){
 				this.$emit("del",this.member);
 			}
 		}
diff --git a/im-ui/src/components/setting/Setting.vue b/im-ui/src/components/setting/Setting.vue
index e3e57aa..beff208 100644
--- a/im-ui/src/components/setting/Setting.vue
+++ b/im-ui/src/components/setting/Setting.vue
@@ -1,12 +1,12 @@
 <template>
-	<el-dialog class="setting" title="设置" :visible.sync="visible"  width="500px" :before-close="handleClose">
+	<el-dialog class="setting" title="设置" :visible.sync="visible"  width="500px" :before-close="onClose">
 		<el-form :model="userInfo" label-width="80px" :rules="rules" ref="settingForm">
 			<el-form-item label="头像">
 				<file-upload  class="avatar-uploader"
 				:action="imageAction" 
 				:showLoading="true"
 				:maxSize="maxSize"  
-				@success="handleUploadSuccess"
+				@success="onUploadSuccess"
 				
 				:fileTypes="['image/jpeg', 'image/png', 'image/jpg','image/webp']">
 					<img v-if="userInfo.headImage" :src="userInfo.headImage" class="avatar">
@@ -31,8 +31,8 @@
 		</el-form>
 
 		<span slot="footer" class="dialog-footer">
-			<el-button @click="handleClose()">取 消</el-button>
-			<el-button type="primary" @click="handleSubmit()">确 定</el-button>
+			<el-button @click="onClose()">取 消</el-button>
+			<el-button type="primary" @click="onSubmit()">确 定</el-button>
 		</span>
 	</el-dialog>
 </template>
@@ -65,10 +65,10 @@
 		},
 		methods: {
 
-			handleClose() {
+			onClose() {
 				this.$emit("close");
 			},
-			handleSubmit() {
+			onSubmit() {
 				this.$refs['settingForm'].validate((valid) => {
 					if (!valid) {
 						return false;
@@ -84,7 +84,7 @@
 					})	
 				});
 			},
-			handleUploadSuccess(res, file) {
+			onUploadSuccess(res, file) {
 				this.userInfo.headImage = res.data.originUrl;
 				this.userInfo.headImageThumb = res.data.thumbUrl;
 			}
diff --git a/im-ui/src/store/friendStore.js b/im-ui/src/store/friendStore.js
index 936e306..56589af 100644
--- a/im-ui/src/store/friendStore.js
+++ b/im-ui/src/store/friendStore.js
@@ -27,13 +27,10 @@ export default {
 		},
 		removeFriend(state, index) {
 			state.friends.splice(index, 1);
-			if(state.activeIndex  >= state.friends.length){
-				state.activeIndex = state.friends.length-1;
-			}
+			state.activeIndex = -1;
 		},
 		addFriend(state, friend) {
 			state.friends.push(friend);
-			state.activeIndex = state.friends.length-1;
 		},
 		refreshOnlineStatus(state){
 			let userIds = [];
diff --git a/im-ui/src/store/groupStore.js b/im-ui/src/store/groupStore.js
index e7b46ad..2651789 100644
--- a/im-ui/src/store/groupStore.js
+++ b/im-ui/src/store/groupStore.js
@@ -20,9 +20,7 @@ export default {
 			state.groups.forEach((g, index) => {
 				if (g.id == groupId) {
 					state.groups.splice(index, 1);
-					if (state.activeIndex >= state.groups.length) {
-						state.activeIndex = state.groups.length - 1;
-					}
+					state.activeIndex = -1;
 				}
 			})
 
diff --git a/im-ui/src/view/Group.vue b/im-ui/src/view/Group.vue
index a05f5e1..820728f 100644
--- a/im-ui/src/view/Group.vue
+++ b/im-ui/src/view/Group.vue
@@ -191,9 +191,8 @@
 					}).then(() => {
 						this.$message.success(`群聊'${this.activeGroup.name}'已解散`);
 						this.$store.commit("removeGroup", this.activeGroup.id);
-						this.$store.commit("activeGroup", -1);
 						this.$store.commit("removeGroupChat", this.activeGroup.id);
-						this.activeGroup = {};
+						this.reset();
 					});
 				})
 
@@ -228,8 +227,8 @@
 						method: 'delete'
 					}).then(() => {
 						this.$store.commit("removeGroup", this.activeGroup.id);
-						this.$store.commit("activeGroup", -1);
 						this.$store.commit("removeGroupChat", this.activeGroup.id);
+						this.reset();
 					});
 				})
 
@@ -252,6 +251,10 @@
 				}).then((members) => {
 					this.groupMembers = members;
 				})
+			},
+			reset(){
+				this.activeGroup={};
+				this.groupMembers=[];
 			}
 		},
 		computed: {