diff --git a/.gitignore b/.gitignore
index 8142a07..09144bf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,4 +12,3 @@
 /im-web/dist/
 /im-uniapp/node_modules/
 /im-uniapp/package-lock.json
-/im-uniapp/unpackage/
diff --git a/README.md b/README.md
index d7dc508..743372c 100644
--- a/README.md
+++ b/README.md
@@ -122,9 +122,9 @@ https://www.yuque.com/u1475064/mufu2a/vn5u10ephxh9sau8
 ![输入图片说明](%E6%88%AA%E5%9B%BE/app/2.jpg)
 
 #### 加入交流群
-1群目前已满员，扫码进入2群:
-
-![输入图片说明](%E6%88%AA%E5%9B%BE/%E4%BA%A4%E6%B5%81%E7%BE%A42.png)
+群1: 741174521(已满)  
+群2: 937470451(已满)  
+群3: 1012017031
 
 欢迎进群与小伙们一起交流， **申请加群前请务必先star哦** 
 
diff --git a/im-platform/src/main/java/com/bx/implatform/service/impl/GroupServiceImpl.java b/im-platform/src/main/java/com/bx/implatform/service/impl/GroupServiceImpl.java
index ba8389c..fda628a 100644
--- a/im-platform/src/main/java/com/bx/implatform/service/impl/GroupServiceImpl.java
+++ b/im-platform/src/main/java/com/bx/implatform/service/impl/GroupServiceImpl.java
@@ -65,6 +65,7 @@ public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements
         member.setGroupId(group.getId());
         member.setUserId(user.getId());
         member.setHeadImage(user.getHeadImageThumb());
+        member.setUserNickName(user.getNickName());
         member.setRemarkNickName(vo.getRemarkNickName());
         member.setRemarkGroupName(vo.getRemarkGroupName());
         groupMemberService.save(member);
diff --git a/im-platform/src/main/java/com/bx/implatform/service/impl/WebrtcPrivateServiceImpl.java b/im-platform/src/main/java/com/bx/implatform/service/impl/WebrtcPrivateServiceImpl.java
index dd84d91..2b93199 100644
--- a/im-platform/src/main/java/com/bx/implatform/service/impl/WebrtcPrivateServiceImpl.java
+++ b/im-platform/src/main/java/com/bx/implatform/service/impl/WebrtcPrivateServiceImpl.java
@@ -314,7 +314,7 @@ public class WebrtcPrivateServiceImpl implements WebrtcPrivateService {
         sendMessage.setSender(new IMUserInfo(rtcSession.getCallerId(), rtcSession.getCallerTerminal()));
         sendMessage.setRecvId(rtcSession.getCallerId());
         sendMessage.setSendToSelf(false);
-        sendMessage.setSendResult(false);
+        sendMessage.setSendResult(true);
         sendMessage.setData(messageInfo);
         imClient.sendPrivateMessage(sendMessage);
         // 推给接听方
diff --git a/im-uniapp/App.vue b/im-uniapp/App.vue
index e2c7c3a..f92ea61 100644
--- a/im-uniapp/App.vue
+++ b/im-uniapp/App.vue
@@ -1,408 +1,430 @@
 <script>
-	import App from './App' 
-	import http from './common/request';
-	import * as msgType from './common/messageType';
-	import * as enums from './common/enums';
-	import * as wsApi from './common/wssocket';
-	import UNI_APP from '@/.env.js'
+import App from './App'
+import http from './common/request';
+import * as msgType from './common/messageType';
+import * as enums from './common/enums';
+import * as wsApi from './common/wssocket';
+import UNI_APP from '@/.env.js'
 
-	export default {
-		data() {
-			return {
-				isExit: false, // 是否已退出
-				audioTip: null,
-				reconnecting: false // 正在重连标志
-			}
+export default {
+	data() {
+		return {
+			isExit: false, // 是否已退出
+			audioTip: null,
+			reconnecting: false // 正在重连标志
+		}
+	},
+	methods: {
+		init() {
+			this.isExit = false;
+			// 加载数据
+			this.loadStore().then(() => {
+				// 初始化websocket
+				this.initWebSocket();
+			}).catch((e) => {
+				console.log(e);
+				this.exit();
+			})
 		},
-		methods: {
-			init() {
-				this.isExit = false;
-				// 加载数据
-				this.loadStore().then(() => {
-					// 初始化websocket
-					this.initWebSocket();
-				}).catch((e) => {
-					console.log(e);
-					this.exit();
-				})
-			},
-			initWebSocket() {
-				let loginInfo = uni.getStorageSync("loginInfo")
-				wsApi.init();
-				wsApi.connect(UNI_APP.WS_URL, loginInfo.accessToken);
-				wsApi.onConnect(() => {
-					// 重连成功提示
-					if (this.reconnecting) {
-						this.reconnecting = false;
-						uni.showToast({
-							title: "已重新连接",
-							icon: 'none'
-						})
-					}
-					// 加载离线消息
-					this.pullPrivateOfflineMessage(this.chatStore.privateMsgMaxId);
-					this.pullGroupOfflineMessage(this.chatStore.groupMsgMaxId);
-				});
-				wsApi.onMessage((cmd, msgInfo) => {
-					if (cmd == 2) {
-						// 异地登录，强制下线
-						uni.showModal({
-							content: '您已在其他地方登陆，将被强制下线',
-							showCancel: false,
-						})
-						this.exit();
-					} else if (cmd == 3) {
-						// 私聊消息
-						this.handlePrivateMessage(msgInfo);
-					} else if (cmd == 4) {
-						// 群聊消息
-						this.handleGroupMessage(msgInfo);
-					} else if (cmd == 5) {
-						// 系统消息
-						this.handleSystemMessage(msgInfo);
-					}
-				});
-				wsApi.onClose((res) => {
-					console.log("ws断开", res);
-					// 重新连接
-					this.reconnectWs();
-
-				})
-			},
-			loadStore() {
-				return this.userStore.loadUser().then(() => {
-					const promises = [];
-					promises.push(this.friendStore.loadFriend());
-					promises.push(this.groupStore.loadGroup());
-					promises.push(this.chatStore.loadChat());
-					promises.push(this.configStore.loadConfig());
-					return Promise.all(promises);
-				})
-			},
-			unloadStore(){
-				this.friendStore.clear();
-				this.groupStore.clear();
-				this.chatStore.clear();
-				this.configStore.clear();
-				this.userStore.clear();
-			},
-			pullPrivateOfflineMessage(minId) {
-				this.chatStore.setLoadingPrivateMsg(true)
-				http({
-					url: "/message/private/pullOfflineMessage?minId=" + minId,
-					method: 'GET'
-				}).catch(() => {
-					this.chatStore.setLoadingPrivateMsg(false)
-				})
-			},
-			pullGroupOfflineMessage(minId) {
-				this.chatStore.setLoadingGroupMsg(true)
-				http({
-					url: "/message/group/pullOfflineMessage?minId=" + minId,
-					method: 'GET'
-				}).catch(() => {
-					this.chatStore.setLoadingGroupMsg(false)
-				})
-			},
-			handlePrivateMessage(msg) {
-				// 消息加载标志
-				if (msg.type == enums.MESSAGE_TYPE.LOADING) {
-					this.chatStore.setLoadingPrivateMsg(JSON.parse(msg.content))
-					return;
-				}
-				// 消息已读处理，清空已读数量
-				if (msg.type == enums.MESSAGE_TYPE.READED) {
-					this.chatStore.resetUnreadCount({
-						type: 'PRIVATE',
-						targetId: msg.recvId
-					})
-					return;
-				}
-				// 消息回执处理,改消息状态为已读
-				if (msg.type == enums.MESSAGE_TYPE.RECEIPT) {
-					this.chatStore.readedMessage({
-						friendId: msg.sendId
+		initWebSocket() {
+			let loginInfo = uni.getStorageSync("loginInfo")
+			wsApi.init();
+			wsApi.connect(UNI_APP.WS_URL, loginInfo.accessToken);
+			wsApi.onConnect(() => {
+				// 重连成功提示
+				if (this.reconnecting) {
+					this.reconnecting = false;
+					uni.showToast({
+						title: "已重新连接",
+						icon: 'none'
 					})
-					return;
 				}
-				// 标记这条消息是不是自己发的
-				msg.selfSend = msg.sendId == this.userStore.userInfo.id;
-				// 好友id
-				let friendId = msg.selfSend ? msg.recvId : msg.sendId;
-				this.loadFriendInfo(friendId, (friend) => {
-					this.insertPrivateMessage(friend, msg);
-				})
-			},
-			insertPrivateMessage(friend, msg) {
-				// 单人视频信令
-				if (msgType.isRtcPrivate(msg.type)) {
-					// #ifdef MP-WEIXIN
-					// 小程序不支持音视频
-					return;
-					// #endif
-					// 被呼叫，弹出视频页面
-					let delayTime = 100;
-					if (msg.type == enums.MESSAGE_TYPE.RTC_CALL_VOICE ||
-						msg.type == enums.MESSAGE_TYPE.RTC_CALL_VIDEO) {
-						let mode = msg.type == enums.MESSAGE_TYPE.RTC_CALL_VIDEO ? "video" : "voice";
-						let pages = getCurrentPages();
-						let curPage = pages[pages.length - 1].route;
-						if (curPage != "pages/chat/chat-private-video") {
-							const friendInfo = encodeURIComponent(JSON.stringify(friend));
-							uni.navigateTo({
-								url: `/pages/chat/chat-private-video?mode=${mode}&friend=${friendInfo}&isHost=false`
-							})
-							delayTime = 500;
-						}
-					}
-					setTimeout(() => {
-						uni.$emit('WS_RTC_PRIVATE', msg);
-					}, delayTime)
-					return;
-				}
-				let chatInfo = {
-					type: 'PRIVATE',
-					targetId: friend.id,
-					showName: friend.nickName,
-					headImage: friend.headImage
-				};
-				// 打开会话
-				this.chatStore.openChat(chatInfo);
-				// 插入消息
-				this.chatStore.insertMessage(msg);
-				// 播放提示音
-				this.playAudioTip();
-
-			},
-			handleGroupMessage(msg) {
-				// 消息加载标志
-				if (msg.type == enums.MESSAGE_TYPE.LOADING) {
-					this.chatStore.setLoadingGroupMsg(JSON.parse(msg.content))
-					return;
-				}
-				// 消息已读处理
-				if (msg.type == enums.MESSAGE_TYPE.READED) {
-					// 我已读对方的消息，清空已读数量
-					let chatInfo = {
-						type: 'GROUP',
-						targetId: msg.groupId
-					}
-					this.chatStore.resetUnreadCount(chatInfo)
-					return;
-				}
-				// 消息回执处理
-				if (msg.type == enums.MESSAGE_TYPE.RECEIPT) {
-					// 更新消息已读人数
-					let msgInfo = {
-						id: msg.id,
-						groupId: msg.groupId,
-						readedCount: msg.readedCount,
-						receiptOk: msg.receiptOk
-					};
-					this.chatStore.updateMessage(msgInfo)
-					return;
-				}
-				// 标记这条消息是不是自己发的
-				msg.selfSend = msg.sendId == this.userStore.userInfo.id;
-				this.loadGroupInfo(msg.groupId, (group) => {
-					// 插入群聊消息
-					this.insertGroupMessage(group, msg);
-				})
-			},
-			handleSystemMessage(msg) {
-				if (msg.type == enums.MESSAGE_TYPE.USER_BANNED) {
-					// 用户被封禁
-					wsApi.close(3099);
+				// 加载离线消息
+				this.pullPrivateOfflineMessage(this.chatStore.privateMsgMaxId);
+				this.pullGroupOfflineMessage(this.chatStore.groupMsgMaxId);
+			});
+			wsApi.onMessage((cmd, msgInfo) => {
+				if (cmd == 2) {
+					// 异地登录，强制下线
 					uni.showModal({
-						content: '您的账号已被管理员封禁，原因:' + msg.content,
+						content: '您已在其他地方登陆，将被强制下线',
 						showCancel: false,
 					})
 					this.exit();
+				} else if (cmd == 3) {
+					// 私聊消息
+					this.handlePrivateMessage(msgInfo);
+				} else if (cmd == 4) {
+					// 群聊消息
+					this.handleGroupMessage(msgInfo);
+				} else if (cmd == 5) {
+					// 系统消息
+					this.handleSystemMessage(msgInfo);
 				}
-			},
-			insertGroupMessage(group, msg) {
-				// 群视频信令
-				if (msgType.isRtcGroup(msg.type)) {
-					// #ifdef MP-WEIXIN
-					// 小程序不支持音视频
-					return;
-					// #endif
-					// 被呼叫，弹出视频页面
-					let delayTime = 100;
-					if (msg.type == enums.MESSAGE_TYPE.RTC_GROUP_SETUP) {
-						let pages = getCurrentPages();
-						let curPage = pages[pages.length - 1].route;
-						if (curPage != "pages/chat/chat-group-video") {
-							const userInfos = encodeURIComponent(msg.content);
-							const inviterId = msg.sendId;
-							const groupId = msg.groupId
-							uni.navigateTo({
-								url: `/pages/chat/chat-group-video?groupId=${groupId}&isHost=false
-									&inviterId=${inviterId}&userInfos=${userInfos}`
-							})
-							delayTime = 500;
-						}
+			});
+			wsApi.onClose((res) => {
+				console.log("ws断开", res);
+				// 重新连接
+				this.reconnectWs();
+
+			})
+		},
+		loadStore() {
+			return this.userStore.loadUser().then(() => {
+				const promises = [];
+				promises.push(this.friendStore.loadFriend());
+				promises.push(this.groupStore.loadGroup());
+				promises.push(this.chatStore.loadChat());
+				promises.push(this.configStore.loadConfig());
+				return Promise.all(promises);
+			})
+		},
+		unloadStore() {
+			this.friendStore.clear();
+			this.groupStore.clear();
+			this.chatStore.clear();
+			this.configStore.clear();
+			this.userStore.clear();
+		},
+		pullPrivateOfflineMessage(minId) {
+			this.chatStore.setLoadingPrivateMsg(true)
+			http({
+				url: "/message/private/pullOfflineMessage?minId=" + minId,
+				method: 'GET'
+			}).catch(() => {
+				this.chatStore.setLoadingPrivateMsg(false)
+			})
+		},
+		pullGroupOfflineMessage(minId) {
+			this.chatStore.setLoadingGroupMsg(true)
+			http({
+				url: "/message/group/pullOfflineMessage?minId=" + minId,
+				method: 'GET'
+			}).catch(() => {
+				this.chatStore.setLoadingGroupMsg(false)
+			})
+		},
+		handlePrivateMessage(msg) {
+			// 消息加载标志
+			if (msg.type == enums.MESSAGE_TYPE.LOADING) {
+				this.chatStore.setLoadingPrivateMsg(JSON.parse(msg.content))
+				return;
+			}
+			// 消息已读处理，清空已读数量
+			if (msg.type == enums.MESSAGE_TYPE.READED) {
+				this.chatStore.resetUnreadCount({
+					type: 'PRIVATE',
+					targetId: msg.recvId
+				})
+				return;
+			}
+			// 消息回执处理,改消息状态为已读
+			if (msg.type == enums.MESSAGE_TYPE.RECEIPT) {
+				this.chatStore.readedMessage({
+					friendId: msg.sendId
+				})
+				return;
+			}
+			// 标记这条消息是不是自己发的
+			msg.selfSend = msg.sendId == this.userStore.userInfo.id;
+			// 好友id
+			let friendId = msg.selfSend ? msg.recvId : msg.sendId;
+			this.loadFriendInfo(friendId, (friend) => {
+				this.insertPrivateMessage(friend, msg);
+			})
+		},
+		insertPrivateMessage(friend, msg) {
+			// 单人视频信令
+			if (msgType.isRtcPrivate(msg.type)) {
+				// #ifdef MP-WEIXIN
+				// 小程序不支持音视频
+				return;
+				// #endif
+				// 被呼叫，弹出视频页面
+				let delayTime = 100;
+				if (msg.type == enums.MESSAGE_TYPE.RTC_CALL_VOICE ||
+					msg.type == enums.MESSAGE_TYPE.RTC_CALL_VIDEO) {
+					let mode = msg.type == enums.MESSAGE_TYPE.RTC_CALL_VIDEO ? "video" : "voice";
+					let pages = getCurrentPages();
+					let curPage = pages[pages.length - 1].route;
+					if (curPage != "pages/chat/chat-private-video") {
+						const friendInfo = encodeURIComponent(JSON.stringify(friend));
+						uni.navigateTo({
+							url: `/pages/chat/chat-private-video?mode=${mode}&friend=${friendInfo}&isHost=false`
+						})
+						delayTime = 500;
 					}
-					// 消息转发到chat-group-video页面进行处理
-					setTimeout(() => {
-						uni.$emit('WS_RTC_GROUP', msg);
-					}, delayTime)
-					return;
 				}
+				setTimeout(() => {
+					uni.$emit('WS_RTC_PRIVATE', msg);
+				}, delayTime)
+				return;
+			}
+			let chatInfo = {
+				type: 'PRIVATE',
+				targetId: friend.id,
+				showName: friend.nickName,
+				headImage: friend.headImage
+			};
+			// 打开会话
+			this.chatStore.openChat(chatInfo);
+			// 插入消息
+			this.chatStore.insertMessage(msg);
+			// 播放提示音
+			this.playAudioTip();
 
+		},
+		handleGroupMessage(msg) {
+			// 消息加载标志
+			if (msg.type == enums.MESSAGE_TYPE.LOADING) {
+				this.chatStore.setLoadingGroupMsg(JSON.parse(msg.content))
+				return;
+			}
+			// 消息已读处理
+			if (msg.type == enums.MESSAGE_TYPE.READED) {
+				// 我已读对方的消息，清空已读数量
 				let chatInfo = {
 					type: 'GROUP',
-					targetId: group.id,
-					showName: group.showGroupName,
-					headImage: group.headImageThumb
-				};
-				// 打开会话
-				this.chatStore.openChat(chatInfo);
-				// 插入消息
-				this.chatStore.insertMessage(msg);
-				// 播放提示音
-				this.playAudioTip();
-			},
-			loadFriendInfo(id, callback) {
-				let friend = this.friendStore.findFriend(id);
-				if (friend) {
-					callback(friend);
-				} else {
-					http({
-						url: `/friend/find/${id}`,
-						method: 'GET'
-					}).then((friend) => {
-						this.friendStore.addFriend(friend);
-						callback(friend)
-					})
-				}
-			},
-			loadGroupInfo(id, callback) {
-				let group = this.groupStore.findGroup(id);
-				if (group) {
-					callback(group);
-				} else {
-					http({
-						url: `/group/find/${id}`,
-						method: 'GET'
-					}).then((group) => {
-						this.groupStore.addGroup(group);
-						callback(group)
-					})
+					targetId: msg.groupId
 				}
-			},
-			exit() {
-				console.log("exit");
-				this.isExit = true;
+				this.chatStore.resetUnreadCount(chatInfo)
+				return;
+			}
+			// 消息回执处理
+			if (msg.type == enums.MESSAGE_TYPE.RECEIPT) {
+				// 更新消息已读人数
+				let msgInfo = {
+					id: msg.id,
+					groupId: msg.groupId,
+					readedCount: msg.readedCount,
+					receiptOk: msg.receiptOk
+				};
+				this.chatStore.updateMessage(msgInfo)
+				return;
+			}
+			// 标记这条消息是不是自己发的
+			msg.selfSend = msg.sendId == this.userStore.userInfo.id;
+			this.loadGroupInfo(msg.groupId, (group) => {
+				// 插入群聊消息
+				this.insertGroupMessage(group, msg);
+			})
+		},
+		handleSystemMessage(msg) {
+			if (msg.type == enums.MESSAGE_TYPE.USER_BANNED) {
+				// 用户被封禁
 				wsApi.close(3099);
-				uni.removeStorageSync("loginInfo");
-				uni.reLaunch({
-					url: "/pages/login/login"
+				uni.showModal({
+					content: '您的账号已被管理员封禁，原因:' + msg.content,
+					showCancel: false,
 				})
-				this.unloadStore();
-			},
-			playAudioTip() {
-				// 音频播放无法成功
-				// this.audioTip = uni.createInnerAudioContext();
-				// this.audioTip.src =  "/static/audio/tip.wav";
-				// this.audioTip.play();
-			},
-			refreshToken(loginInfo) {
-				return new Promise((resolve, reject) => {
-					if (!loginInfo || !loginInfo.refreshToken) {
-						reject();
-						return;
+				this.exit();
+			}
+		},
+		insertGroupMessage(group, msg) {
+			// 群视频信令
+			if (msgType.isRtcGroup(msg.type)) {
+				// #ifdef MP-WEIXIN
+				// 小程序不支持音视频
+				return;
+				// #endif
+				// 被呼叫，弹出视频页面
+				let delayTime = 100;
+				if (msg.type == enums.MESSAGE_TYPE.RTC_GROUP_SETUP) {
+					let pages = getCurrentPages();
+					let curPage = pages[pages.length - 1].route;
+					if (curPage != "pages/chat/chat-group-video") {
+						const userInfos = encodeURIComponent(msg.content);
+						const inviterId = msg.sendId;
+						const groupId = msg.groupId
+						uni.navigateTo({
+							url: `/pages/chat/chat-group-video?groupId=${groupId}&isHost=false
+									&inviterId=${inviterId}&userInfos=${userInfos}`
+						})
+						delayTime = 500;
 					}
-					http({
-						url: '/refreshToken',
-						method: 'PUT',
-						header: {
-							refreshToken: loginInfo.refreshToken
-						}
-					}).then((newLoginInfo) => {
-						uni.setStorageSync("loginInfo", newLoginInfo)
-						resolve()
-					}).catch((e) => {
-						reject(e)
-					})
-				})
-			},
-			reconnectWs() {
-				// 已退出则不再重连
-				if (this.isExit) {
-					return;
 				}
-				// 记录标志
-				this.reconnecting = true;
-				// 重新加载一次个人信息，目的是为了保证网络已经正常且token有效
-				this.reloadUserInfo().then((userInfo) => {
-					uni.showToast({
-						title: '连接已断开，尝试重新连接...',
-						icon: 'none',
-					})
-					this.userStore.setUserInfo(userInfo);
-					// 重新连接
-					let loginInfo = uni.getStorageSync("loginInfo")
-					wsApi.reconnect(UNI_APP.WS_URL, loginInfo.accessToken);
-				}).catch(() => {
-					// 5s后重试
-					setTimeout(() => {
-						this.reconnectWs();
-					}, 5000)
+				// 消息转发到chat-group-video页面进行处理
+				setTimeout(() => {
+					uni.$emit('WS_RTC_GROUP', msg);
+				}, delayTime)
+				return;
+			}
+
+			let chatInfo = {
+				type: 'GROUP',
+				targetId: group.id,
+				showName: group.showGroupName,
+				headImage: group.headImageThumb
+			};
+			// 打开会话
+			this.chatStore.openChat(chatInfo);
+			// 插入消息
+			this.chatStore.insertMessage(msg);
+			// 播放提示音
+			this.playAudioTip();
+		},
+		loadFriendInfo(id, callback) {
+			let friend = this.friendStore.findFriend(id);
+			if (friend) {
+				callback(friend);
+			} else {
+				http({
+					url: `/friend/find/${id}`,
+					method: 'GET'
+				}).then((friend) => {
+					this.friendStore.addFriend(friend);
+					callback(friend)
 				})
-			},
-			reloadUserInfo() {
-				return http({
-					url: '/user/self',
+			}
+		},
+		loadGroupInfo(id, callback) {
+			let group = this.groupStore.findGroup(id);
+			if (group) {
+				callback(group);
+			} else {
+				http({
+					url: `/group/find/${id}`,
 					method: 'GET'
+				}).then((group) => {
+					this.groupStore.addGroup(group);
+					callback(group)
 				})
 			}
 		},
-		onLaunch() {
-			this.$mountStore();
-			// 登录状态校验
-			let loginInfo = uni.getStorageSync("loginInfo")
-			this.refreshToken(loginInfo).then(() => {
-				// 初始化
-				this.init();
-				// 跳转到聊天页面
-				uni.switchTab({
-					url: "/pages/chat/chat"
+		exit() {
+			console.log("exit");
+			this.isExit = true;
+			wsApi.close(3099);
+			uni.removeStorageSync("loginInfo");
+			uni.reLaunch({
+				url: "/pages/login/login"
+			})
+			this.unloadStore();
+		},
+		playAudioTip() {
+			// 音频播放无法成功
+			// this.audioTip = uni.createInnerAudioContext();
+			// this.audioTip.src =  "/static/audio/tip.wav";
+			// this.audioTip.play();
+		},
+		refreshToken(loginInfo) {
+			return new Promise((resolve, reject) => {
+				if (!loginInfo || !loginInfo.refreshToken) {
+					reject();
+					return;
+				}
+				http({
+					url: '/refreshToken',
+					method: 'PUT',
+					header: {
+						refreshToken: loginInfo.refreshToken
+					}
+				}).then((newLoginInfo) => {
+					uni.setStorageSync("loginInfo", newLoginInfo)
+					resolve()
+				}).catch((e) => {
+					reject(e)
 				})
-			}).catch(() => {
-				// 跳转到登录页
-				// #ifdef H5
-				uni.navigateTo({
-					url: "/pages/login/login"
+			})
+		},
+		reconnectWs() {
+			// 已退出则不再重连
+			if (this.isExit) {
+				return;
+			}
+			// 记录标志
+			this.reconnecting = true;
+			// 重新加载一次个人信息，目的是为了保证网络已经正常且token有效
+			this.reloadUserInfo().then((userInfo) => {
+				uni.showToast({
+					title: '连接已断开，尝试重新连接...',
+					icon: 'none',
 				})
-				// #endif
+				this.userStore.setUserInfo(userInfo);
+				// 重新连接
+				let loginInfo = uni.getStorageSync("loginInfo")
+				wsApi.reconnect(UNI_APP.WS_URL, loginInfo.accessToken);
+			}).catch(() => {
+				// 5s后重试
+				setTimeout(() => {
+					this.reconnectWs();
+				}, 5000)
+			})
+		},
+		reloadUserInfo() {
+			return http({
+				url: '/user/self',
+				method: 'GET'
 			})
 		}
+	},
+	onLaunch() {
+		this.$mountStore();
+		// 登录状态校验
+		let loginInfo = uni.getStorageSync("loginInfo")
+		this.refreshToken(loginInfo).then(() => {
+			// 初始化
+			this.init();
+			// 跳转到聊天页面
+			uni.switchTab({
+				url: "/pages/chat/chat"
+			})
+		}).catch(() => {
+			// 跳转到登录页
+			// #ifdef H5
+			uni.navigateTo({
+				url: "/pages/login/login"
+			})
+			// #endif
+		})
 	}
+}
 </script>
 
 <style lang="scss">
-	@import "@/uni_modules/uview-plus/index.scss";
-	@import url('./static/icon/iconfont.css');
+@import "@/uni_modules/uview-plus/index.scss";
+@import "@/im.scss";
+@import url('./static/icon/iconfont.css');
 
-	// #ifdef H5 
-	uni-page-head {
-		display: none; // h5浏览器本身就有标题
-	}
+// #ifdef H5 
+uni-page-head {
+	display: none; // h5浏览器本身就有标题
+}
+
+// #endif
+
+.tab-page {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	// #ifdef H5
+	height: calc(100vh - 50px - $im-nav-bar-height); // h5平台100vh是包含了底部高度，需要减去
+	top: $im-nav-bar-height;
 	// #endif
 
-	.tab-page {
-		// #ifdef H5
-		height: calc(100vh - 50px); // h5平台100vh是包含了底部高度，需要减去
-		// #endif
-		// #ifndef H5
-		height: calc(100vh);
-		// #endif
-		background-color: #f8f8f8;
-	}
+	// #ifndef H5
+	height: calc(100vh - var(--status-bar-height) - $im-nav-bar-height); // app平台还要减去顶部手机状态栏高度
+	top: calc($im-nav-bar-height + var(--status-bar-height));
+	// #endif
+	color: $im-text-color;
+	background-color: $im-bg;
+	font-size: $im-font-size;
+	font-family: $font-family;
+}
 
-	.page {
-		height: calc(100vh);
-		background-color: #f8f8f8;
-	}
+.page {
+	position: relative;
+	// #ifdef H5
+	height: calc(100vh - $im-nav-bar-height); // app平台还要减去顶部手机状态栏高度
+	top: $im-nav-bar-height;
+	// #endif
+	// #ifndef H5
+	height: calc(100vh - var(--status-bar-height) - $im-nav-bar-height); // app平台还要减去顶部手机状态栏高度
+	top: calc($im-nav-bar-height + var(--status-bar-height));
+	// #endif
+	color: $im-text-color;
+	background-color: $im-bg;
+	font-size: $im-font-size;
+	font-family: $font-family;
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/common/date.js b/im-uniapp/common/date.js
index bba3e43..cd4fc17 100644
--- a/im-uniapp/common/date.js
+++ b/im-uniapp/common/date.js
@@ -5,23 +5,23 @@ let toTimeText = (timeStamp, simple) => {
 	var timeText = '';
 	if (timeDiff <= 60000) { //一分钟内
 		timeText = '刚刚';
-	} else if (timeDiff > 60000 && timeDiff < 3600000) { 
+	} else if (timeDiff > 60000 && timeDiff < 3600000) {
 		//1小时内
 		timeText = Math.floor(timeDiff / 60000) + '分钟前';
-	} else if (timeDiff >= 3600000 && timeDiff < 86400000 && !isYestday(dateTime)) { 
+	} else if (timeDiff >= 3600000 && timeDiff < 86400000 && !isYestday(dateTime)) {
 		//今日
 		timeText = formatDateTime(dateTime).substr(11, 5);
-	} else if (isYestday(dateTime)) { 
+	} else if (isYestday(dateTime)) {
 		//昨天
-		timeText = '昨天' + formatDateTime(dateTime).substr(11, 5); 
-	} else if (isYear(dateTime)) { 
+		timeText = '昨天' + formatDateTime(dateTime).substr(11, 5);
+	} else if (isYear(dateTime)) {
 		//今年
 		timeText = formatDateTime(dateTime).substr(5, simple ? 5 : 14);
-	} else { 
+	} else {
 		//不属于今年
 		timeText = formatDateTime(dateTime);
-		if(simple){
-			timeText = timeText.substr(2,8);
+		if (simple) {
+			timeText = timeText.substr(2, 8);
 		}
 	}
 	return timeText;
@@ -58,7 +58,7 @@ let formatDateTime = (date) => {
 }
 
 
-export{
+export {
 	toTimeText,
 	isYestday,
 	isYear,
diff --git a/im-uniapp/common/enums.js b/im-uniapp/common/enums.js
index d6f0c53..08510be 100644
--- a/im-uniapp/common/enums.js
+++ b/im-uniapp/common/enums.js
@@ -2,18 +2,18 @@
 const MESSAGE_TYPE = {
 	TEXT: 0,
 	IMAGE: 1,
-	FILE:2,
-	AUDIO:3,
-	VIDEO:4,
-	RECALL:10,
-	READED:11,
-	RECEIPT:12,
-	TIP_TIME:20,
-	TIP_TEXT:21,
-	LOADING:30,
-	ACT_RT_VOICE:40,
-	ACT_RT_VIDEO:41,
-	USER_BANNED:50,
+	FILE: 2,
+	AUDIO: 3,
+	VIDEO: 4,
+	RECALL: 10,
+	READED: 11,
+	RECEIPT: 12,
+	TIP_TIME: 20,
+	TIP_TEXT: 21,
+	LOADING: 30,
+	ACT_RT_VOICE: 40,
+	ACT_RT_VIDEO: 41,
+	USER_BANNED: 50,
 	RTC_CALL_VOICE: 100,
 	RTC_CALL_VIDEO: 101,
 	RTC_ACCEPT: 102,
@@ -22,18 +22,18 @@ const MESSAGE_TYPE = {
 	RTC_FAILED: 105,
 	RTC_HANDUP: 106,
 	RTC_CANDIDATE: 107,
-	RTC_GROUP_SETUP:200,
-	RTC_GROUP_ACCEPT:201,
-    RTC_GROUP_REJECT:202,
-    RTC_GROUP_FAILED:203,
-    RTC_GROUP_CANCEL:204,
-    RTC_GROUP_QUIT:205,
-    RTC_GROUP_INVITE:206,
-    RTC_GROUP_JOIN:207,
-    RTC_GROUP_OFFER:208,
-    RTC_GROUP_ANSWER:209,
-    RTC_GROUP_CANDIDATE:210,
-    RTC_GROUP_DEVICE:211
+	RTC_GROUP_SETUP: 200,
+	RTC_GROUP_ACCEPT: 201,
+	RTC_GROUP_REJECT: 202,
+	RTC_GROUP_FAILED: 203,
+	RTC_GROUP_CANCEL: 204,
+	RTC_GROUP_QUIT: 205,
+	RTC_GROUP_INVITE: 206,
+	RTC_GROUP_JOIN: 207,
+	RTC_GROUP_OFFER: 208,
+	RTC_GROUP_ANSWER: 209,
+	RTC_GROUP_CANDIDATE: 210,
+	RTC_GROUP_DEVICE: 211
 }
 
 const USER_STATE = {
@@ -50,8 +50,8 @@ const TERMINAL_TYPE = {
 const MESSAGE_STATUS = {
 	UNSEND: 0,
 	SENDED: 1,
-	RECALL:2,
-	READED:3
+	RECALL: 2,
+	READED: 3
 }
 
 export {
diff --git a/im-uniapp/common/messageType.js b/im-uniapp/common/messageType.js
index 99d1c00..f6b1caf 100644
--- a/im-uniapp/common/messageType.js
+++ b/im-uniapp/common/messageType.js
@@ -1,32 +1,32 @@
 
 // 是否普通消息
-let isNormal = function(type){
-	return type>=0 && type < 10;
+let isNormal = function (type) {
+	return type >= 0 && type < 10;
 }
 
 // 是否状态消息
-let isStatus = function(type){
-	return type>=10 && type < 20;
+let isStatus = function (type) {
+	return type >= 10 && type < 20;
 }
 
 // 是否提示消息
-let isTip = function(type){
-	return type>=20 && type < 30;
+let isTip = function (type) {
+	return type >= 20 && type < 30;
 }
 
 // 操作交互类消息
-let isAction = function(type){
-	return type>=40 && type < 50;
+let isAction = function (type) {
+	return type >= 40 && type < 50;
 }
 
 // 单人通话信令
-let isRtcPrivate = function(type){
-	return type>=100 && type < 200;
+let isRtcPrivate = function (type) {
+	return type >= 100 && type < 200;
 }
 
 // 多人通话信令
-let isRtcGroup = function(type){
-	return type>=200 && type < 300;
+let isRtcGroup = function (type) {
+	return type >= 200 && type < 300;
 }
 
 
diff --git a/im-uniapp/common/recorder-h5.js b/im-uniapp/common/recorder-h5.js
index b174081..fdf828d 100644
--- a/im-uniapp/common/recorder-h5.js
+++ b/im-uniapp/common/recorder-h5.js
@@ -3,7 +3,7 @@ import UNI_APP from '@/.env.js';
 
 let rc = null;
 let start = () => {
-	if(rc != null){
+	if (rc != null) {
 		close();
 	}
 	rc = new Recorder();
@@ -22,7 +22,7 @@ let close = () => {
 let upload = () => {
 	return new Promise((resolve, reject) => {
 		const wavBlob = rc.getWAVBlob();
-		const newbolb = new Blob([wavBlob], { type: 'audio/wav'})
+		const newbolb = new Blob([wavBlob], { type: 'audio/wav' })
 		const name = new Date().getDate() + '.wav';
 		const file = new File([newbolb], name)
 		uni.uploadFile({
@@ -34,10 +34,10 @@ let upload = () => {
 			name: 'file',
 			success: (res) => {
 				let r = JSON.parse(res.data);
-				if(r.code != 200){
+				if (r.code != 200) {
 					console.log(res)
 					reject(r.message);
-				}else {
+				} else {
 					const data = {
 						duration: parseInt(rc.duration),
 						url: r.data
diff --git a/im-uniapp/common/request.js b/im-uniapp/common/request.js
index 1360497..46775e0 100644
--- a/im-uniapp/common/request.js
+++ b/im-uniapp/common/request.js
@@ -11,7 +11,7 @@ const request = (options) => {
 	if (loginInfo) {
 		header.accessToken = loginInfo.accessToken;
 	}
-	return new Promise(function(resolve, reject) {
+	return new Promise(function (resolve, reject) {
 		uni.request({
 			url: UNI_APP.BASE_URL + options.url,
 			method: options.method || 'GET',
@@ -72,7 +72,7 @@ const request = (options) => {
 
 
 const reqRefreshToken = (loginInfo) => {
-	return new Promise(function(resolve, reject) {
+	return new Promise(function (resolve, reject) {
 		uni.request({
 			method: 'PUT',
 			url: UNI_APP.BASE_URL + '/refreshToken',
diff --git a/im-uniapp/common/wssocket.js b/im-uniapp/common/wssocket.js
index d7cce1a..144c746 100644
--- a/im-uniapp/common/wssocket.js
+++ b/im-uniapp/common/wssocket.js
@@ -55,7 +55,7 @@ let init = () => {
 		console.log(e)
 		isConnect = false;
 		// APP 应用切出超过一定时间(约1分钟)会触发报错，此处回调给应用进行重连
-		closeCallBack && closeCallBack({code: 1006});
+		closeCallBack && closeCallBack({ code: 1006 });
 	})
 };
 
@@ -92,7 +92,7 @@ let reconnect = (wsurl, accessToken) => {
 	let timeDiff = new Date().getTime() - lastConnectTime.getTime()
 	let delay = timeDiff < 10000 ? 10000 - timeDiff : 0;
 	rec && clearTimeout(rec);
-	rec = setTimeout(function() {
+	rec = setTimeout(function () {
 		connect(wsurl, accessToken);
 	}, delay);
 };
@@ -119,7 +119,7 @@ let close = (code) => {
 var heartCheck = {
 	timeout: 10000, //每段时间发送一次心跳包 这里设置为30s
 	timeoutObj: null, //延时发送消息对象（启动心跳新建这个对象，收到消息后重置对象）
-	start: function() {
+	start: function () {
 		if (isConnect) {
 			console.log('发送WebSocket心跳')
 			let heartBeat = {
@@ -134,9 +134,9 @@ var heartCheck = {
 			})
 		}
 	},
-	reset: function() {
+	reset: function () {
 		clearTimeout(this.timeoutObj);
-		this.timeoutObj = setTimeout(function() {
+		this.timeoutObj = setTimeout(function () {
 			heartCheck.start();
 		}, this.timeout);
 	}
diff --git a/im-uniapp/components/bar/arrow-bar.vue b/im-uniapp/components/bar/arrow-bar.vue
new file mode 100644
index 0000000..97e6dfb
--- /dev/null
+++ b/im-uniapp/components/bar/arrow-bar.vue
@@ -0,0 +1,40 @@
+<template>
+	<view class="arrow-bar">
+		<text class="title">{{ title }}</text>
+		<uni-icons class="arrow" type="right" size="16"></uni-icons>
+	</view>
+</template>
+
+<script>
+export default {
+	name: "arrow-bar",
+	props: {
+		title: {
+			type: String,
+			required: true
+		}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.arrow-bar {
+	width: 100%;
+	height: 90rpx;
+	font-size: 30rpx;
+	color: black;
+	margin-top: 5rpx;
+	background-color: white;
+	line-height: 90rpx;
+	display: flex;
+
+	.title {
+		flex: 1;
+		margin-left: 40rpx;
+	}
+
+	.arrow {
+		margin-right: 40rpx;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/im-uniapp/components/bar/bar-group.vue b/im-uniapp/components/bar/bar-group.vue
new file mode 100644
index 0000000..570965f
--- /dev/null
+++ b/im-uniapp/components/bar/bar-group.vue
@@ -0,0 +1,17 @@
+<template>
+	<view class="bar-group">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+export default {
+	name: "bar-group"
+}
+</script>
+
+<style lang="scss" scoped>
+.bar-group {
+	margin: 20rpx 0;
+}
+</style>
\ No newline at end of file
diff --git a/im-uniapp/components/bar/btn-bar.vue b/im-uniapp/components/bar/btn-bar.vue
new file mode 100644
index 0000000..cc9408c
--- /dev/null
+++ b/im-uniapp/components/bar/btn-bar.vue
@@ -0,0 +1,68 @@
+<template>
+	<view class="btn-bar" :style="style">
+		<text v-if="icon" class="icon iconfont" :class="icon"></text>
+		<text class="title">{{ title }}</text>
+	</view>
+</template>
+
+<script>
+export default {
+	name: "btn-bar",
+	props: {
+		title: {
+			type: String,
+			required: true
+		},
+		icon: {
+			type: String,
+			required: false
+		},
+		type: {
+			type: String,
+			default: "normal"
+		},
+		color: {
+			type: String,
+			default: "#000"
+		}
+	},
+	computed: {
+		style() {
+			let color = "#000";
+			switch (this.type) {
+				case 'danger':
+					color = "#f14747";
+					break;
+				case 'primary':
+					color = "#35567f";
+					break;
+			}
+			return `color: ${color};`
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.btn-bar {
+	width: 100%;
+	height: 100rpx;
+	margin-top: 5rpx;
+	background-color: white;
+	line-height: 100rpx;
+	text-align: center;
+	display: flex;
+	justify-content: center;
+
+	.icon {
+		font-size: 40rpx;
+		font-weight: 600;
+		margin-right: 10rpx;
+	}
+
+	.title {
+		font-size: 32rpx;
+		font-weight: 600;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/im-uniapp/components/bar/switch-bar.vue b/im-uniapp/components/bar/switch-bar.vue
new file mode 100644
index 0000000..3616229
--- /dev/null
+++ b/im-uniapp/components/bar/switch-bar.vue
@@ -0,0 +1,61 @@
+<template>
+	<view class="switch-bar">
+		<text class="title">{{ title }}</text>
+		<switch class="switch" :checked="checked" color="#18bc37" @change="onChange"></switch>
+	</view>
+</template>
+
+<script>
+export default {
+	name: "switch-bar",
+	props: {
+		title: {
+			type: String,
+			required: true
+		},
+		checked: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			value: this.checked
+		}
+	},
+	methods: {
+		onChange(e) {
+			this.value = true;
+			setTimeout(() => {
+				this.value = false;
+			}, 100)
+			//this.value = false;
+
+			this.$emit('change', e);
+		}
+	}
+
+}
+</script>
+
+<style lang="scss" scoped>
+.switch-bar {
+	width: 100%;
+	height: 100rpx;
+	font-size: 34rpx;
+	color: black;
+	margin-top: 5rpx;
+	background-color: white;
+	line-height: 100rpx;
+	display: flex;
+
+	.title {
+		flex: 1;
+		margin-left: 40rpx;
+	}
+
+	.switch {
+		margin-right: 40rpx;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/im-uniapp/components/chat-at-box/chat-at-box.vue b/im-uniapp/components/chat-at-box/chat-at-box.vue
index 0e497c5..ad1a9ed 100644
--- a/im-uniapp/components/chat-at-box/chat-at-box.vue
+++ b/im-uniapp/components/chat-at-box/chat-at-box.vue
@@ -4,13 +4,13 @@
 			<view class="chat-at-top">
 				<view class="chat-at-tip"> 选择要提醒的人</view>
 				<button class="chat-at-btn" type="warn" size="mini" @click="onClean()">清空 </button>
-				<button class="chat-at-btn" type="primary" size="mini" @click="onOk()">确定({{atUserIds.length}})
+				<button class="chat-at-btn" type="primary" size="mini" @click="onOk()">确定({{ atUserIds.length }})
 				</button>
 			</view>
-			<scroll-view v-show="atUserIds.length>0" scroll-x="true" scroll-left="120">
+			<scroll-view v-show="atUserIds.length > 0" scroll-x="true" scroll-left="120">
 				<view class="at-user-items">
-					<view v-for="m in showMembers" v-show="m.checked" class="at-user-item">
-						<head-image :name="m.showNickName" :url="m.headImage" :size="60"></head-image>
+					<view v-for="m in showMembers" v-show="m.checked" class="at-user-item" :key="m.userId">
+						<head-image :name="m.showNickName" :url="m.headImage" size="mini"></head-image>
 					</view>
 				</view>
 			</scroll-view>
@@ -19,15 +19,14 @@
 			</view>
 			<view class="member-items">
 				<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
-					<view v-for="m in showMembers" v-show="m.showNickName.includes(searchText)"
-						:key="m.userId">
-						<view class="member-item" @click="onSwitchChecked(m)">
+					<view v-for="m in showMembers" v-show="m.showNickName.includes(searchText)" :key="m.userId">
+						<view class="member-item" :class="{ checked: m.checked }" @click="onSwitchChecked(m)">
 							<head-image :name="m.showNickName" :online="m.online" :url="m.headImage"
-								:size="90"></head-image>
-							<view class="member-name">{{ m.showNickName}}</view>
-							<view class="member-checked">
-								<radio :checked="m.checked" @click.stop="onSwitchChecked(m)" />
-							</view>
+								size="small"></head-image>
+							<view class="member-name">{{ m.showNickName }}</view>
+							<!--							<view class="member-checked">-->
+							<!--								<radio :checked="m.checked" @click.stop="onSwitchChecked(m)" />-->
+							<!--							</view>-->
 						</view>
 					</view>
 				</scroll-view>
@@ -37,140 +36,143 @@
 </template>
 
 <script>
-	export default {
-		name: "chat-at-box",
-		props: {
-			ownerId: {
-				type: Number,
-			},
-			members: {
-				type: Array
-			}
-		},
-		data() {
-			return {
-				searchText: "",
-				showMembers:[]
-			};
+export default {
+	name: "chat-at-box",
+	props: {
+		ownerId: {
+			type: Number,
 		},
-		methods: {
-			init(atUserIds) {
-				this.showMembers = [];
-				let userId = this.userStore.userInfo.id;
-				if(this.ownerId == userId){
-					this.showMembers.push({
-						userId:-1,
-						showNickName: "全体成员"
-					})
-				}
-				this.members.forEach((m) => {
-					if(!m.quit && m.userId != userId){
-						m.checked = atUserIds.indexOf(m.userId) >= 0;
-						this.showMembers.push(m);
-					}
-				});
-			},
-			open() {
-				this.$refs.popup.open();
-			},
-			onSwitchChecked(member) {
-				member.checked = !member.checked;
-			},
-			onClean() {
-				this.showMembers.forEach((m) => {
-					m.checked = false;
+		members: {
+			type: Array
+		}
+	},
+	data() {
+		return {
+			searchText: "",
+			showMembers: []
+		};
+	},
+	methods: {
+		init(atUserIds) {
+			this.showMembers = [];
+			let userId = this.userStore.userInfo.id;
+			if (this.ownerId == userId) {
+				this.showMembers.push({
+					userId: -1,
+					showNickName: "全体成员"
 				})
-			},
-			onOk() {
-				this.$refs.popup.close();
-			},
-			onChange(e) {
-				if (!e.show) {
-					this.$emit("complete", this.atUserIds)
-				}
 			}
+			this.members.forEach((m) => {
+				if (!m.quit && m.userId != userId) {
+					m.checked = atUserIds.indexOf(m.userId) >= 0;
+					this.showMembers.push(m);
+				}
+			});
 		},
-		computed: {
-			atUserIds() {
-				let ids = [];
-				this.showMembers.forEach((m) => {
-					if (m.checked) {
-						ids.push(m.userId);
-					}
-				})
-				return ids;
+		open() {
+			this.$refs.popup.open();
+		},
+		onSwitchChecked(member) {
+			member.checked = !member.checked;
+		},
+		onClean() {
+			this.showMembers.forEach((m) => {
+				m.checked = false;
+			})
+		},
+		onOk() {
+			this.$refs.popup.close();
+		},
+		onChange(e) {
+			if (!e.show) {
+				this.$emit("complete", this.atUserIds)
 			}
 		}
+	},
+	computed: {
+		atUserIds() {
+			let ids = [];
+			this.showMembers.forEach((m) => {
+				if (m.checked) {
+					ids.push(m.userId);
+				}
+			})
+			return ids;
+		}
 	}
+}
 </script>
 
 
 <style lang="scss" scoped>
-	.chat-at-box {
-		position: relative;
-		border: #dddddd solid 1rpx;
+.chat-at-box {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	background-color: white;
+	padding: 10rpx;
+	//border-radius: 15rpx;
+
+	.chat-at-top {
 		display: flex;
-		flex-direction: column;
-		background-color: white;
+		align-items: center;
+		height: 70rpx;
 		padding: 10rpx;
-		border-radius: 15rpx;
 
-		.chat-at-top {
-			display: flex;
-			align-items: center;
-			height: 70rpx;
-			padding: 10rpx;
-
-			.chat-at-tip {
-				flex: 1;
-			}
+		.chat-at-tip {
+			flex: 1;
+		}
 
-			.chat-at-btn {
-				margin-left: 10rpx;
-			}
+		.chat-at-btn {
+			margin-left: 10rpx;
 		}
+	}
 
 
-		.at-user-items {
-			display: flex;
-			align-items: center;
-			height: 90rpx;
+	.at-user-items {
+		display: flex;
+		align-items: center;
+		height: 90rpx;
 
-			.at-user-item {
-				padding: 3rpx;
-			}
+		.at-user-item {
+			padding: 3rpx;
 		}
+	}
+
 
 
+	.member-items {
+		position: relative;
+		flex: 1;
+		overflow: hidden;
 
-		.member-items {
+		.member-item {
+			height: 110rpx;
+			display: flex;
 			position: relative;
-			flex: 1;
-			overflow: hidden;
-
-			.member-item {
-				height: 120rpx;
-				display: flex;
-				position: relative;
-				padding: 0 30rpx;
-				align-items: center;
-				background-color: white;
-				white-space: nowrap;
+			padding: 0 30rpx;
+			align-items: center;
+			background-color: white;
+			white-space: nowrap;
+			margin-bottom: 1px;
 
-				.member-name {
-					flex: 1;
-					padding-left: 20rpx;
-					font-size: 30rpx;
-					font-weight: 600;
-					line-height: 60rpx;
-					white-space: nowrap;
-					overflow: hidden;
-				}
+			&.checked {
+				background-color: $im-color-primary-light-9;
 			}
 
-			.scroll-bar {
-				height: 800rpx;
+			.member-name {
+				flex: 1;
+				padding-left: 20rpx;
+				font-size: $im-font-size;
+				line-height: 60rpx;
+				white-space: nowrap;
+				overflow: hidden;
 			}
 		}
+
+		.scroll-bar {
+			height: 800rpx;
+		}
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/components/chat-group-readed/chat-group-readed.vue b/im-uniapp/components/chat-group-readed/chat-group-readed.vue
index a55649b..c47a309 100644
--- a/im-uniapp/components/chat-group-readed/chat-group-readed.vue
+++ b/im-uniapp/components/chat-group-readed/chat-group-readed.vue
@@ -2,7 +2,8 @@
 	<uni-popup ref="popup" type="bottom">
 		<view class="chat-group-readed">
 			<view class="uni-padding-wrap uni-common-mt">
-				<uni-segmented-control :current="current" :values="items" style-type="button" active-color="#587ff0" @clickItem="onClickItem"/>
+				<uni-segmented-control :current="current" :values="items" style-type="button"
+					@clickItem="onClickItem" />
 			</view>
 			<view class="content">
 				<view v-if="current === 0">
@@ -11,7 +12,7 @@
 							<view class="member-item">
 								<head-image :name="m.aliasName" :online="m.online" :url="m.headImage"
 									:size="90"></head-image>
-								<view class="member-name">{{ m.aliasName}}</view>
+								<view class="member-name">{{ m.aliasName }}</view>
 							</view>
 						</view>
 					</scroll-view>
@@ -22,7 +23,7 @@
 							<view class="member-item">
 								<head-image :name="m.aliasName" :online="m.online" :url="m.headImage"
 									:size="90"></head-image>
-								<view class="member-name">{{ m.aliasName}}</view>
+								<view class="member-name">{{ m.aliasName }}</view>
 							</view>
 						</view>
 					</scroll-view>
@@ -33,99 +34,99 @@
 </template>
 
 <script>
-	export default {
-		name: "chat-group-readed",
-		data() {
-			return {
-				items: ['已读', '未读'],
-				current: 0,
-				readedMembers: [],
-				unreadMembers: []
-			};
+export default {
+	name: "chat-group-readed",
+	data() {
+		return {
+			items: ['已读', '未读'],
+			current: 0,
+			readedMembers: [],
+			unreadMembers: []
+		};
+	},
+	props: {
+		msgInfo: {
+			type: Object,
+			required: true
 		},
-		props: {
-			msgInfo: {
-				type: Object,
-				required: true
-			},
-			groupMembers: {
-				type: Array
-			}
+		groupMembers: {
+			type: Array
+		}
+	},
+	methods: {
+		open() {
+			this.$refs.popup.open();
+			this.loadReadedUser();
 		},
-		methods: {
-			open() {
-				this.$refs.popup.open();
-				this.loadReadedUser();
-			},
-			loadReadedUser() {
-				this.readedMembers = [];
-				this.unreadMembers = [];
-				this.$http({
-					url: `/message/group/findReadedUsers?groupId=${this.msgInfo.groupId}&messageId=${this.msgInfo.id}`,
-					method: 'Get'
-				}).then(userIds => {
-					this.groupMembers.forEach(member => {
-						// 发送者和已退群的不显示
-						if (member.userId == this.msgInfo.sendId || member.quit) {
-						    return;
-						}
-						// 区分已读还是未读
-						if (userIds.find(userId => member.userId == userId)) {
-							this.readedMembers.push(member);
-						} else {
-							this.unreadMembers.push(member);
-						}
-					})
-					this.items[0] = `已读(${this.readedMembers.length})`;
-					this.items[1] = `未读(${this.unreadMembers.length})`;
-					// 更新已读人数
-					this.chatStore.updateMessage({
-						id: this.msgInfo.id,
-						groupId: this.msgInfo.groupId,
-						readedCount: this.readedMembers.length
-					})
+		loadReadedUser() {
+			this.readedMembers = [];
+			this.unreadMembers = [];
+			this.$http({
+				url: `/message/group/findReadedUsers?groupId=${this.msgInfo.groupId}&messageId=${this.msgInfo.id}`,
+				method: 'Get'
+			}).then(userIds => {
+				this.groupMembers.forEach(member => {
+					// 发送者和已退群的不显示
+					if (member.userId == this.msgInfo.sendId || member.quit) {
+						return;
+					}
+					// 区分已读还是未读
+					if (userIds.find(userId => member.userId == userId)) {
+						this.readedMembers.push(member);
+					} else {
+						this.unreadMembers.push(member);
+					}
+				})
+				this.items[0] = `已读(${this.readedMembers.length})`;
+				this.items[1] = `未读(${this.unreadMembers.length})`;
+				// 更新已读人数
+				this.chatStore.updateMessage({
+					id: this.msgInfo.id,
+					groupId: this.msgInfo.groupId,
+					readedCount: this.readedMembers.length
 				})
-			},
-			onClickItem(e){
-				this.current = e.currentIndex;
-			}
+			})
+		},
+		onClickItem(e) {
+			this.current = e.currentIndex;
 		}
 	}
+}
 </script>
 
-<style lang="scss" scoped> 
-	.chat-group-readed {
-		position: relative;
-		border: #dddddd solid 1rpx;
+<style lang="scss" scoped>
+.chat-group-readed {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	background-color: white;
+	padding: 10rpx;
+
+	//border-radius: 15rpx;
+	.scroll-bar {
+		height: 800rpx;
+	}
+
+	.member-item {
+		height: 120rpx;
 		display: flex;
-		flex-direction: column;
+		position: relative;
+		padding: 0 30rpx;
+		align-items: center;
 		background-color: white;
-		padding: 10rpx;
-		border-radius: 15rpx;
-		.scroll-bar {
-			height: 800rpx;
-		}
-		
-		.member-item {
-			height: 120rpx;
-			display: flex;
-			position: relative;
-			padding: 0 30rpx;
-			align-items: center;
-			background-color: white;
+		white-space: nowrap;
+
+		.member-name {
+			flex: 1;
+			padding-left: 20rpx;
+			font-size: 30rpx;
+			font-weight: 600;
+			line-height: 60rpx;
 			white-space: nowrap;
-		
-			.member-name {
-				flex: 1;
-				padding-left: 20rpx;
-				font-size: 30rpx;
-				font-weight: 600;
-				line-height: 60rpx;
-				white-space: nowrap;
-				overflow: hidden;
-			}
+			overflow: hidden;
 		}
-		
-	
 	}
+
+
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/components/chat-item/chat-item.vue b/im-uniapp/components/chat-item/chat-item.vue
index 7dcf1c1..47131c8 100644
--- a/im-uniapp/components/chat-item/chat-item.vue
+++ b/im-uniapp/components/chat-item/chat-item.vue
@@ -1,184 +1,182 @@
 <template>
-	<view class="chat-item" :class="active?'active':''">
+	<view class="chat-item" :class="active ? 'active' : ''">
 		<!--rich-text中的表情包会屏蔽事件，所以这里用一个遮罩层捕获点击事件 -->
 		<view class="mask" @tap="showChatBox()"></view>
 		<view class="left">
-			<head-image :url="chat.headImage" :name="chat.showName" :size="90"></head-image>
+			<head-image :url="chat.headImage" :name="chat.showName"></head-image>
 		</view>
 		<view class="chat-right">
 			<view class="chat-name">
 				<view class="chat-name-text">
-					<view>{{chat.showName}}</view>
-					<uni-tag v-if="chat.type=='GROUP'" circle text="群" size="small"></uni-tag>
+					<view>{{ chat.showName }}</view>
+					<uni-tag v-if="chat.type == 'GROUP'" circle text="群" size="small" type="primary"></uni-tag>
 				</view>
-				<view class="chat-time">{{$date.toTimeText(chat.lastSendTime,true)}}</view>
+				<view class="chat-time">{{ $date.toTimeText(chat.lastSendTime, true) }}</view>
 			</view>
 			<view class="chat-content">
-				<view class="chat-at-text">{{atText}}</view>
-				<view class="chat-send-name" v-if="isShowSendName">{{chat.sendNickName+':&nbsp;'}}</view>
+				<view class="chat-at-text">{{ atText }}</view>
+				<view class="chat-send-name" v-if="isShowSendName">{{ chat.sendNickName + ':&nbsp;' }}</view>
 				<rich-text class="chat-content-text" :nodes="$emo.transform(chat.lastContent)"></rich-text>
-				<uni-badge v-if="chat.unreadCount>0" size="small" :max-num="99" :text="chat.unreadCount" />
+				<uni-badge v-if="chat.unreadCount > 0" :max-num="99" :text="chat.unreadCount" />
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
-	export default {
-		name: "chatItem",
-		data() {
-			return {}
+export default {
+	name: "chatItem",
+	data() {
+		return {}
+	},
+	props: {
+		chat: {
+			type: Object
 		},
-		props: {
-			chat: {
-				type: Object
-			},
-			index: {
-				type: Number
-			},
-			active: {
-				type: Boolean,
-				default: false
-			}
+		index: {
+			type: Number
 		},
-		methods: {
+		active: {
+			type: Boolean,
+			default: false
+		}
+	},
+	methods: {
 
-			showChatBox() {
-				uni.navigateTo({
-					url: "/pages/chat/chat-box?chatIdx=" + this.index
-				})
+		showChatBox() {
+			uni.navigateTo({
+				url: "/pages/chat/chat-box?chatIdx=" + this.index
+			})
+		}
+	},
+	computed: {
+		isShowSendName() {
+			if (!this.chat.sendNickName) {
+				return false;
 			}
+			let size = this.chat.messages.length;
+			if (size == 0) {
+				return false;
+			}
+			// 只有群聊的普通消息需要显示名称
+			let lastMsg = this.chat.messages[size - 1];
+			return this.$msgType.isNormal(lastMsg.type)
 		},
-		computed: {
-			isShowSendName() {
-				if (!this.chat.sendNickName) {
-					return false;
-				}
-				let size = this.chat.messages.length;
-				if (size == 0) {
-					return false;
-				}
-				// 只有群聊的普通消息需要显示名称
-				let lastMsg = this.chat.messages[size - 1];
-				return this.$msgType.isNormal(lastMsg.type)
-			},
-			atText() {
-				if (this.chat.atMe) {
-					return "[有人@我]"
-				} else if (this.chat.atAll) {
-					return "[@全体成员]"
-				}
-				return "";
+		atText() {
+			if (this.chat.atMe) {
+				return "[有人@我]"
+			} else if (this.chat.atAll) {
+				return "[@全体成员]"
 			}
+			return "";
 		}
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	.chat-item {
-		height: 100rpx;
-		display: flex;
-		margin-bottom: 2rpx;
-		position: relative;
-		padding: 10rpx 20rpx;
-		align-items: center;
-		background-color: white;
-		white-space: nowrap;
+.chat-item {
+	height: 96rpx;
+	display: flex;
+	margin-bottom: 2rpx;
+	position: relative;
+	padding: 18rpx 20rpx;
+	align-items: center;
+	background-color: white;
+	white-space: nowrap;
+
+	&:hover {
+		background-color: $im-bg-active;
+	}
 
-		&:hover {
-			background-color: #f5f6ff;
-		}
+	&.active {
+		background-color: $im-bg-active;
+	}
 
-		&.active {
-			background-color: #f5f6ff;
-		}
+	.mask {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		right: 0;
+		z-index: 99;
+	}
 
+	.left {
+		position: relative;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100rpx;
+		height: 100rpx;
+	}
 
-		.mask {
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			z-index: 99;
-		}
+	.chat-right {
+		height: 100%;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		padding-left: 20rpx;
+		text-align: left;
+		overflow: hidden;
 
-		.left {
-			position: relative;
+		.chat-name {
 			display: flex;
-			justify-content: center;
-			align-items: center;
-			width: 100rpx;
-			height: 100rpx;
 
+			.chat-name-text {
+				flex: 1;
+				font-size: $im-font-size-large;
+				white-space: nowrap;
+				overflow: hidden;
+				display: flex;
+				align-items: center;
+
+				.uni-tag {
+					text-align: center;
+					margin-left: 5rpx;
+					border: 0;
+					padding: 1px 5px;
+					//opacity: 0.8;
+				}
+			}
 
+			.chat-time {
+				font-size: $im-font-size-smaller-extra;
+				color: $im-text-color-lighter;
+				text-align: right;
+				white-space: nowrap;
+				overflow: hidden;
+			}
 		}
 
-		.chat-right {
-			flex: 1;
+		.chat-content {
 			display: flex;
-			flex-direction: column;
-			padding-left: 20rpx;
-			text-align: left;
-			overflow: hidden;
+			font-size: $im-font-size-smaller;
+			color: $im-text-color-lighter;
+			padding-top: 8rpx;
 
-			.chat-name {
-				display: flex;
-				line-height: 44rpx;
-				height: 44rpx;
-
-				.chat-name-text {
-					flex: 1;
-					font-size: 30rpx;
-					font-weight: 600;
-					white-space: nowrap;
-					overflow: hidden;
-					display: flex;
-					align-items: center;
-
-					.uni-tag {
-						text-align: center;
-						margin-left: 5rpx;
-						border: 0;
-						height: 30rpx;
-						line-height: 30rpx;
-						font-size: 20rpx;
-						padding: 1px 5px;
-						background-color: #de1c1c;
-						opacity: 0.8;
-					}
-				}
-
-				.chat-time {
-					font-size: 26rpx;
-					text-align: right;
-					color: #888888;
-					white-space: nowrap;
-					overflow: hidden;
-				}
+			.chat-at-text {
+				color: $im-color-danger;
 			}
 
-			.chat-content {
-				display: flex;
-				line-height: 60rpx;
-				height: 60rpx;
-
-				.chat-at-text {
-					color: #c70b0b;
-					font-size: 24rpx;
-				}
+			.chat-send-name {
+				font-size: $im-font-size-smaller;
+			}
 
-				.chat-send-name {
-					font-size: 26rpx;
-				}
+			.chat-content-text {
+				flex: 1;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
 
-				.chat-content-text {
-					flex: 1;
-					font-size: 28rpx;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
+				img {
+					width: 40rpx !important;
+					height: 40rpx !important;
 				}
-
 			}
+
 		}
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/components/chat-message-item/chat-message-item.vue b/im-uniapp/components/chat-message-item/chat-message-item.vue
index 4a90b0c..1c2fd88 100644
--- a/im-uniapp/components/chat-message-item/chat-message-item.vue
+++ b/im-uniapp/components/chat-message-item/chat-message-item.vue
@@ -1,78 +1,78 @@
 <template>
 	<view class="chat-msg-item">
 		<view class="chat-msg-tip"
-			v-if="msgInfo.type==$enums.MESSAGE_TYPE.RECALL||msgInfo.type == $enums.MESSAGE_TYPE.TIP_TEXT">
-			{{msgInfo.content}}
+			v-if="msgInfo.type == $enums.MESSAGE_TYPE.RECALL || msgInfo.type == $enums.MESSAGE_TYPE.TIP_TEXT">
+			{{ msgInfo.content }}
 		</view>
-		<view class="chat-msg-tip" v-if="msgInfo.type==$enums.MESSAGE_TYPE.TIP_TIME">
-			{{$date.toTimeText(msgInfo.sendTime)}}
+		<view class="chat-msg-tip" v-if="msgInfo.type == $enums.MESSAGE_TYPE.TIP_TIME">
+			{{ $date.toTimeText(msgInfo.sendTime) }}
 		</view>
-		<view class="chat-msg-normal" v-if="isNormal" :class="{'chat-msg-mine':msgInfo.selfSend}">
+		<view class="chat-msg-normal" v-if="isNormal" :class="{ 'chat-msg-mine': msgInfo.selfSend }">
 			<head-image class="avatar" @longpress.prevent="$emit('longPressHead')" :id="msgInfo.sendId" :url="headImage"
-				:name="showName" :size="80"></head-image>
+				:name="showName" size="small"></head-image>
 			<view class="chat-msg-content">
 				<view v-if="msgInfo.groupId && !msgInfo.selfSend" class="chat-msg-top">
-					<text>{{showName}}</text>
+					<text>{{ showName }}</text>
 				</view>
 				<view class="chat-msg-bottom">
-					<view v-if="msgInfo.type==$enums.MESSAGE_TYPE.TEXT">
-						<pop-menu :items="menuItems" @select="onSelectMenu">
+					<view v-if="msgInfo.type == $enums.MESSAGE_TYPE.TEXT">
+						<long-press-menu :items="menuItems" @select="onSelectMenu">
 							<rich-text class="chat-msg-text" :nodes="$emo.transform(msgInfo.content)"></rich-text>
-						</pop-menu>
+						</long-press-menu>
 					</view>
-					<view class="chat-msg-image" v-if="msgInfo.type==$enums.MESSAGE_TYPE.IMAGE">
-						<pop-menu :items="menuItems" @select="onSelectMenu">
+					<view class="chat-msg-image" v-if="msgInfo.type == $enums.MESSAGE_TYPE.IMAGE">
+						<long-press-menu :items="menuItems" @select="onSelectMenu">
 							<view class="img-load-box">
-								<image class="send-image" mode="heightFix" :src="JSON.parse(msgInfo.content).thumbUrl"
+								<image class="send-image" mode="widthFix" :src="JSON.parse(msgInfo.content).thumbUrl"
 									lazy-load="true" @click.stop="onShowFullImage()">
 								</image>
 								<loading v-if="loading"></loading>
 							</view>
-						</pop-menu>
+						</long-press-menu>
 						<text title="发送失败" v-if="loadFail" @click="onSendFail"
 							class="send-fail iconfont icon-warning-circle-fill"></text>
 					</view>
-					<view class="chat-msg-file" v-if="msgInfo.type==$enums.MESSAGE_TYPE.FILE">
-						<pop-menu :items="menuItems" @select="onSelectMenu">
+					<view class="chat-msg-file" v-if="msgInfo.type == $enums.MESSAGE_TYPE.FILE">
+						<long-press-menu :items="menuItems" @select="onSelectMenu">
 							<view class="chat-file-box">
 								<view class="chat-file-info">
 									<uni-link class="chat-file-name" :text="data.name" showUnderLine="true"
 										color="#007BFF" :href="data.url"></uni-link>
-									<view class="chat-file-size">{{fileSize}}</view>
+									<view class="chat-file-size">{{ fileSize }}</view>
 								</view>
 								<view class="chat-file-icon iconfont icon-file"></view>
 								<loading v-if="loading"></loading>
 							</view>
-						</pop-menu>
+						</long-press-menu>
 						<text title="发送失败" v-if="loadFail" @click="onSendFail"
 							class="send-fail iconfont icon-warning-circle-fill"></text>
 					</view>
-					<pop-menu v-if="msgInfo.type==$enums.MESSAGE_TYPE.AUDIO" :items="menuItems" @select="onSelectMenu">
+					<long-press-menu v-if="msgInfo.type == $enums.MESSAGE_TYPE.AUDIO" :items="menuItems" @select="onSelectMenu">
 						<view class="chat-msg-audio chat-msg-text" @click="onPlayAudio()">
 							<text class="iconfont icon-voice-play"></text>
-							<text class="chat-audio-text">{{JSON.parse(msgInfo.content).duration+'"'}}</text>
-							<text v-if="audioPlayState=='PAUSE'" class="iconfont icon-play"></text>
-							<text v-if="audioPlayState=='PLAYING'" class="iconfont icon-pause"></text>
+							<text class="chat-audio-text">{{ JSON.parse(msgInfo.content).duration + '"' }}</text>
+							<text v-if="audioPlayState == 'PAUSE'" class="iconfont icon-play"></text>
+							<text v-if="audioPlayState == 'PLAYING'" class="iconfont icon-pause"></text>
 						</view>
-					</pop-menu>
-					<pop-menu v-if="isAction" :items="menuItems" @select="onSelectMenu">
+					</long-press-menu>
+					<long-press-menu v-if="isAction" :items="menuItems" @select="onSelectMenu">
 						<view class="chat-realtime chat-msg-text" @click="$emit('call')">
-							<text v-if="msgInfo.type==$enums.MESSAGE_TYPE.ACT_RT_VOICE"
+							<text v-if="msgInfo.type == $enums.MESSAGE_TYPE.ACT_RT_VOICE"
 								class="iconfont icon-chat-voice"></text>
-							<text v-if="msgInfo.type==$enums.MESSAGE_TYPE.ACT_RT_VIDEO"
+							<text v-if="msgInfo.type == $enums.MESSAGE_TYPE.ACT_RT_VIDEO"
 								class="iconfont icon-chat-video"></text>
-							<text>{{msgInfo.content}}</text>
+							<text>{{ msgInfo.content }}</text>
 						</view>
-					</pop-menu>
+					</long-press-menu>
 					<view class="chat-msg-status" v-if="!isAction">
 						<text class="chat-readed" v-show="msgInfo.selfSend && !msgInfo.groupId
-								&& msgInfo.status==$enums.MESSAGE_STATUS.READED">已读</text>
-						<text class="chat-unread" v-show="msgInfo.selfSend && !msgInfo.groupId 
-								&& msgInfo.status!=$enums.MESSAGE_STATUS.READED">未读</text>
+							&& msgInfo.status == $enums.MESSAGE_STATUS.READED">已读</text>
+						<text class="chat-unread" v-show="msgInfo.selfSend && !msgInfo.groupId
+							&& msgInfo.status != $enums.MESSAGE_STATUS.READED">未读</text>
 					</view>
 					<view class="chat-receipt" v-show="msgInfo.receipt" @click="onShowReadedBox">
 						<text v-if="msgInfo.receiptOk" class="tool-icon iconfont icon-ok"></text>
-						<text v-else>{{msgInfo.readedCount}}人已读</text>
+						<text v-else>{{ msgInfo.readedCount }}人已读</text>
 					</view>
 				</view>
 			</view>
@@ -83,411 +83,405 @@
 </template>
 
 <script>
-	export default {
-		name: "chat-message-item",
-		props: {
-			headImage: {
-				type: String,
-				required: true
-			},
-			showName: {
-				type: String,
-				required: true
-			},
-			msgInfo: {
-				type: Object,
-				required: true
-			},
-			groupMembers: {
-				type: Array
-			}
+export default {
+	name: "chat-message-item",
+	props: {
+		headImage: {
+			type: String,
+			required: true
 		},
-		data() {
-			return {
-				audioPlayState: 'STOP',
-				innerAudioContext: null,
-				menu: {
-					show: false,
-					style: ""
-				}
+		showName: {
+			type: String,
+			required: true
+		},
+		msgInfo: {
+			type: Object,
+			required: true
+		},
+		groupMembers: {
+			type: Array
+		}
+	},
+	data() {
+		return {
+			audioPlayState: 'STOP',
+			innerAudioContext: null,
+			menu: {
+				show: false,
+				style: ""
 			}
+		}
+	},
+	methods: {
+		onSendFail() {
+			uni.showToast({
+				title: "该文件已发送失败，目前不支持自动重新发送，建议手动重新发送",
+				icon: "none"
+			})
 		},
-		methods: {
-			onSendFail() {
-				uni.showToast({
-					title: "该文件已发送失败，目前不支持自动重新发送，建议手动重新发送",
-					icon: "none"
-				})
-			},
-			onPlayAudio() {
-				// 初始化音频播放器
-				if (!this.innerAudioContext) {
-					this.innerAudioContext = uni.createInnerAudioContext();
-					let url = JSON.parse(this.msgInfo.content).url;
-					this.innerAudioContext.src = url;
-					console.log(url);
-					this.innerAudioContext.onEnded((e) => {
-						console.log('停止')
-						this.audioPlayState = "STOP"
-					})
-					this.innerAudioContext.onError((e) => {
-						console.log("播放音频出错");
-						console.log(e)
-					});
-				}
-				if (this.audioPlayState == 'STOP') {
-					this.innerAudioContext.play();
-					this.audioPlayState = "PLAYING";
-				} else if (this.audioPlayState == 'PLAYING') {
-					this.innerAudioContext.pause();
-					this.audioPlayState = "PAUSE"
-				} else if (this.audioPlayState == 'PAUSE') {
-					this.innerAudioContext.play();
-					this.audioPlayState = "PLAYING"
-				}
-			},
-			onSelectMenu(item) {
-				this.$emit(item.key.toLowerCase(), this.msgInfo);
-				this.menu.show = false;
-			},
-			onShowFullImage() {
-				let imageUrl = JSON.parse(this.msgInfo.content).originUrl;
-				uni.previewImage({
-					urls: [imageUrl]
+		onPlayAudio() {
+			// 初始化音频播放器
+			if (!this.innerAudioContext) {
+				this.innerAudioContext = uni.createInnerAudioContext();
+				let url = JSON.parse(this.msgInfo.content).url;
+				this.innerAudioContext.src = url;
+				console.log(url);
+				this.innerAudioContext.onEnded((e) => {
+					console.log('停止')
+					this.audioPlayState = "STOP"
 				})
-			},
-			onShowReadedBox() {
-				this.$refs.chatGroupReaded.open();
+				this.innerAudioContext.onError((e) => {
+					console.log("播放音频出错");
+					console.log(e)
+				});
+			}
+			if (this.audioPlayState == 'STOP') {
+				this.innerAudioContext.play();
+				this.audioPlayState = "PLAYING";
+			} else if (this.audioPlayState == 'PLAYING') {
+				this.innerAudioContext.pause();
+				this.audioPlayState = "PAUSE"
+			} else if (this.audioPlayState == 'PAUSE') {
+				this.innerAudioContext.play();
+				this.audioPlayState = "PLAYING"
 			}
 		},
-		computed: {
-			loading() {
-				return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "loading";
-			},
-			loadFail() {
-				return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "fail";
-			},
-			data() {
-				return JSON.parse(this.msgInfo.content)
-			},
-			fileSize() {
-				let size = this.data.size;
-				if (size > 1024 * 1024) {
-					return Math.round(size / 1024 / 1024) + "M";
-				}
-				if (size > 1024) {
-					return Math.round(size / 1024) + "KB";
-				}
-				return size + "B";
-			},
-			menuItems() {
-				let items = [];
-				if (this.msgInfo.type == this.$enums.MESSAGE_TYPE.TEXT) {
-					items.push({
-						key: 'COPY',
-						name: '复制',
-						icon: 'bars'
-					});
-				}
-				if (this.msgInfo.selfSend && this.msgInfo.id > 0) {
-					items.push({
-						key: 'RECALL',
-						name: '撤回',
-						icon: 'refreshempty'
-					});
-				}
+		onSelectMenu(item) {
+			this.$emit(item.key.toLowerCase(), this.msgInfo);
+			this.menu.show = false;
+		},
+		onShowFullImage() {
+			let imageUrl = JSON.parse(this.msgInfo.content).originUrl;
+			uni.previewImage({
+				urls: [imageUrl]
+			})
+		},
+		onShowReadedBox() {
+			this.$refs.chatGroupReaded.open();
+		}
+	},
+	computed: {
+		loading() {
+			return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "loading";
+		},
+		loadFail() {
+			return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "fail";
+		},
+		data() {
+			return JSON.parse(this.msgInfo.content)
+		},
+		fileSize() {
+			let size = this.data.size;
+			if (size > 1024 * 1024) {
+				return Math.round(size / 1024 / 1024) + "M";
+			}
+			if (size > 1024) {
+				return Math.round(size / 1024) + "KB";
+			}
+			return size + "B";
+		},
+		menuItems() {
+			let items = [];
+			if (this.msgInfo.type == this.$enums.MESSAGE_TYPE.TEXT) {
 				items.push({
-					key: 'DELETE',
-					name: '删除',
-					icon: 'trash',
-					color: '#e64e4e'
+					key: 'COPY',
+					name: '复制',
+					icon: 'bars'
 				});
-				if (this.msgInfo.type == this.$enums.MESSAGE_TYPE.FILE) {
-					items.push({
-						key: 'DOWNLOAD',
-						name: '下载并打开',
-						icon: 'download'
-					});
-				}
-				return items;
-			},
-			isAction() {
-				return this.$msgType.isAction(this.msgInfo.type);
-			},
-			isNormal() {
-				const type = this.msgInfo.type;
-				return this.$msgType.isNormal(type) || this.$msgType.isAction(type)
 			}
+			if (this.msgInfo.selfSend && this.msgInfo.id > 0) {
+				items.push({
+					key: 'RECALL',
+					name: '撤回',
+					icon: 'refreshempty'
+				});
+			}
+			items.push({
+				key: 'DELETE',
+				name: '删除',
+				icon: 'trash',
+				color: '#e64e4e'
+			});
+			if (this.msgInfo.type == this.$enums.MESSAGE_TYPE.FILE) {
+				items.push({
+					key: 'DOWNLOAD',
+					name: '下载并打开',
+					icon: 'download'
+				});
+			}
+			return items;
+		},
+		isAction() {
+			return this.$msgType.isAction(this.msgInfo.type);
+		},
+		isNormal() {
+			const type = this.msgInfo.type;
+			return this.$msgType.isNormal(type) || this.$msgType.isAction(type)
 		}
-
 	}
+
+}
 </script>
 
 <style scoped lang="scss">
-	.chat-msg-item {
-		padding: 2rpx 20rpx;
-
-		.chat-msg-tip {
-			line-height: 60rpx;
-			text-align: center;
-			color: #555;
-			font-size: 24rpx;
-			padding: 10rpx;
+.chat-msg-item {
+	padding: 2rpx 20rpx;
+
+	.chat-msg-tip {
+		line-height: 60rpx;
+		text-align: center;
+		color: $im-text-color-lighter;
+		font-size: $im-font-size-smaller-extra;
+		padding: 10rpx;
+	}
+
+	.chat-msg-normal {
+		position: relative;
+		margin-bottom: 22rpx;
+		padding-left: 110rpx;
+		min-height: 80rpx;
+
+		.avatar {
+			position: absolute;
+			top: 0;
+			left: 0;
 		}
 
-		.chat-msg-normal {
-			position: relative;
-			font-size: 0;
-			margin-bottom: 15rpx;
-			padding-left: 110rpx;
-			min-height: 80rpx;
+		.chat-msg-content {
+			text-align: left;
 
-			.avatar {
-				position: absolute;
-				top: 0;
-				left: 0;
+			.chat-msg-top {
+				display: flex;
+				flex-wrap: nowrap;
+				color: $im-text-color-lighter;
+				font-size: $im-font-size-smaller;
+				line-height: $im-font-size-smaller;
 			}
 
-			.chat-msg-content {
-				text-align: left;
+			.chat-msg-bottom {
+				display: inline-block;
+				padding-right: 80rpx;
+
+				.chat-msg-text {
+					position: relative;
+					line-height: 1.6;
+					margin-top: 10rpx;
+					padding: 16rpx 24rpx;
+					background-color: $im-bg;
+					border-radius: 20rpx;
+					color: $im-text-color;
+					font-size: $im-font-size;
+					text-align: left;
+					display: block;
+					word-break: break-all;
+					white-space: pre-line;
+
+
+					&:after {
+						content: "";
+						position: absolute;
+						left: -20rpx;
+						top: 26rpx;
+						width: 6rpx;
+						height: 6rpx;
+						border-style: solid dashed dashed;
+						border-color: $im-bg transparent transparent;
+						overflow: hidden;
+						border-width: 18rpx;
+						//box-shadow: $im-box-shadow-dark;
+					}
+				}
 
-				.chat-msg-top {
+
+				.chat-msg-image {
 					display: flex;
 					flex-wrap: nowrap;
-					color: #333;
-					font-size: 24rpx;
-					line-height: 24rpx;
-
-				}
-
-				.chat-msg-bottom {
-					display: inline-block;
-					padding-right: 80rpx;
+					flex-direction: row;
+					align-items: center;
 
-					.chat-msg-text {
+					.img-load-box {
 						position: relative;
-						line-height: 60rpx;
-						margin-top: 10rpx;
-						padding: 8rpx 20rpx;
-						background-color: #eee;
-						border-radius: 20rpx;
-						color: #333;
-						font-size: 30rpx;
-						text-align: left;
-						display: block;
-						word-break: break-all;
-						white-space: pre-line;
-
 
-						&:after {
-							content: "";
-							position: absolute;
-							left: -20rpx;
-							top: 26rpx;
-							width: 6rpx;
-							height: 6rpx;
-							border-style: solid dashed dashed;
-							border-color: #eee transparent transparent;
-							overflow: hidden;
-							border-width: 18rpx;
+						.send-image {
+							min-width: 200rpx;
+							max-width: 420rpx;
+							cursor: pointer;
+							border-radius: 4px;
 						}
 					}
 
 
-					.chat-msg-image {
+					.send-fail {
+						color: $im-color-danger;
+						font-size: $im-font-size;
+						cursor: pointer;
+						margin: 0 20px;
+					}
+				}
+
+				.chat-msg-file {
+					display: flex;
+					flex-wrap: nowrap;
+					flex-direction: row;
+					align-items: center;
+					cursor: pointer;
+
+					.chat-file-box {
+						position: relative;
 						display: flex;
 						flex-wrap: nowrap;
-						flex-direction: row;
 						align-items: center;
-
-						.img-load-box {
-							position: relative;
-
-							.send-image {
-								min-width: 200rpx;
-								min-height: 200rpx;
-								max-width: 400rpx;
-								max-height: 400rpx;
-								border: 8rpx solid #ebebf5;
-								cursor: pointer;
+						min-height: 60px;
+						border-radius: 4px;
+						padding: 10px 15px;
+						box-shadow: $im-box-shadow-dark;
+
+						.chat-file-info {
+							flex: 1;
+							height: 100%;
+							text-align: left;
+							font-size: 14px;
+							width: 300rpx;
+
+							.chat-file-name {
+								font-weight: 600;
+								margin-bottom: 15px;
+								word-break: break-all;
 							}
 						}
 
-
-						.send-fail {
-							color: #e60c0c;
-							font-size: 30px;
-							cursor: pointer;
-							margin: 0 20px;
+						.chat-file-icon {
+							font-size: 80rpx;
+							color: #d42e07;
 						}
 					}
 
-					.chat-msg-file {
-						display: flex;
-						flex-wrap: nowrap;
-						flex-direction: row;
-						align-items: center;
+					.send-fail {
+						color: #e60c0c;
+						font-size: 50rpx;
 						cursor: pointer;
+						margin: 0 20rpx;
+					}
 
-						.chat-file-box {
-							position: relative;
-							display: flex;
-							flex-wrap: nowrap;
-							align-items: center;
-							min-height: 80px;
-							border: #dddddd solid 1px;
-							border-radius: 10rpx;
-							background-color: #eeeeee;
-							padding: 10px 15px;
-							box-shadow: 2px 2px 2px #c0c0c0;
-
-							.chat-file-info {
-								flex: 1;
-								height: 100%;
-								text-align: left;
-								font-size: 14px;
-								width: 300rpx;
-
-								.chat-file-name {
-									font-size: 16px;
-									font-weight: 600;
-									margin-bottom: 15px;
-									word-break: break-all;
-								}
-							}
-
-							.chat-file-icon {
-								font-size: 80rpx;
-								color: #d42e07;
-							}
-						}
+				}
 
-						.send-fail {
-							color: #e60c0c;
-							font-size: 50rpx;
-							cursor: pointer;
-							margin: 0 20rpx;
-						}
+				.chat-msg-audio {
+					display: flex;
+					align-items: center;
 
+					.chat-audio-text {
+						padding-right: 8px;
 					}
 
-					.chat-msg-audio {
-						display: flex;
-						align-items: center;
-
-						.chat-audio-text {
-							padding-right: 8px;
-						}
-
-						.icon-voice-play {
-							font-size: 20px;
-							padding-right: 8px;
-						}
+					.icon-voice-play {
+						font-size: 18px;
+						padding-right: 8px;
 					}
+				}
 
-					.chat-realtime {
-						display: flex;
-						align-items: center;
+				.chat-realtime {
+					display: flex;
+					align-items: center;
 
-						.iconfont {
-							font-size: 20px;
-							padding-right: 8px;
-						}
+					.iconfont {
+						font-size: 20px;
+						padding-right: 8px;
 					}
+				}
 
-					.chat-msg-status {
-						display: block;
+				.chat-msg-status {
+					line-height: $im-font-size-smaller-extra;
+					font-size: $im-font-size-smaller-extra;
+					padding-top: 2rpx;
 
-						.chat-readed {
-							font-size: 12px;
-							color: #888;
-							font-weight: 600;
-						}
+					.chat-readed {
+						display: block;
+						padding-top: 2rpx;
+						color: $im-text-color-lighter;
+					}
 
-						.chat-unread {
-							font-size: 12px;
-							color: #f23c0f;
-							font-weight: 600;
-						}
+					.chat-unread {
+						color: $im-color-danger;
 					}
+				}
 
-					.chat-receipt {
-						font-size: 13px;
-						color: darkblue;
-						font-weight: 600;
+				.chat-receipt {
+					font-size: $im-font-size-smaller;
+					color: $im-text-color-lighter;
+					font-weight: 600;
 
-						.icon-ok {
-							font-size: 20px;
-							color: #329432;
-						}
+					.icon-ok {
+						font-size: 20px;
+						color: $im-color-success;
 					}
 				}
 			}
+		}
 
 
-			&.chat-msg-mine {
-				text-align: right;
-				padding-left: 0;
-				padding-right: 110rpx;
+		&.chat-msg-mine {
+			text-align: right;
+			padding-left: 0;
+			padding-right: 110rpx;
 
-				.avatar {
-					left: auto;
-					right: 0;
-				}
+			.avatar {
+				left: auto;
+				right: 0;
+			}
 
-				.chat-msg-content {
-					text-align: right;
+			.chat-msg-content {
+				text-align: right;
 
-					.chat-msg-bottom {
-						padding-left: 80rpx;
-						padding-right: 0;
+				.chat-msg-bottom {
+					padding-left: 80rpx;
+					padding-right: 0;
 
-						.chat-msg-text {
-							margin-left: 10px;
-							background-color: #587ff0;
-							color: #fff;
+					.chat-msg-text {
+						margin-left: 10px;
+						background-color: $im-color-primary-light-2;
+						color: #fff;
 
-							&:after {
-								left: auto;
-								right: -10px;
-								border-top-color: #587ff0;
-							}
+						&:after {
+							left: auto;
+							right: -9px;
+							border-top-color: $im-color-primary-light-2;
 						}
+					}
 
-						.chat-msg-image {
-							flex-direction: row-reverse;
-						}
+					.chat-msg-image {
+						flex-direction: row-reverse;
+					}
 
-						.chat-msg-file {
-							flex-direction: row-reverse;
-						}
+					.chat-msg-file {
+						flex-direction: row-reverse;
+					}
 
-						.chat-msg-audio {
-							flex-direction: row-reverse;
+					.chat-msg-audio {
+						flex-direction: row-reverse;
 
-							.chat-audio-text {
-								padding-right: 0;
-								padding-left: 8px;
-							}
+						.chat-audio-text {
+							padding-right: 0;
+							padding-left: 8px;
+						}
 
-							.icon-voice-play {
-								transform: rotateY(180deg);
-							}
+						.icon-voice-play {
+							transform: rotateY(180deg);
 						}
+					}
 
-						.chat-realtime {
-							display: flex;
-							flex-direction: row-reverse;
+					.chat-realtime {
+						display: flex;
+						flex-direction: row-reverse;
 
-							.iconfont {
-								transform: rotateY(180deg);
-							}
+						.iconfont {
+							transform: rotateY(180deg);
 						}
-
 					}
+
 				}
 			}
-
 		}
+
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/components/chat-record/chat-record.vue b/im-uniapp/components/chat-record/chat-record.vue
index ce77c32..659d95f 100644
--- a/im-uniapp/components/chat-record/chat-record.vue
+++ b/im-uniapp/components/chat-record/chat-record.vue
@@ -1,8 +1,8 @@
 <template>
 	<view class="chat-record">
-		<view class="chat-record-bar" id="chat-record-bar" :style="recordBarStyle" @click.stop=""
+		<view class="chat-record-bar" :class="{ recording: recording }" id="chat-record-bar" @click.stop=""
 			@touchstart.prevent="onStartRecord" @touchmove.prevent="onTouchMove" @touchend.prevent="onEndRecord">
-			{{recording?'正在录音':'长按 说话'}}</view>
+			{{ recording ? '正在录音' : '长按 说话' }}</view>
 		<view v-if="recording" class="chat-record-window" :style="recordWindowStyle">
 			<view class="rc-wave">
 				<text class="note" style="--d: 0"></text>
@@ -13,228 +13,226 @@
 				<text class="note" style="--d: 5"></text>
 				<text class="note" style="--d: 6"></text>
 			</view>
-			<view class="rc-tip">{{recordTip}}</view>
+			<view class="rc-tip">{{ recordTip }}</view>
 			<view class="cancel-btn" @click="onCancel">
-				<uni-icons :class="moveToCancel?'red':'black'" type="clear" :size="moveToCancel?45:40"></uni-icons>
+				<uni-icons :class="moveToCancel ? 'red' : 'black'" type="clear" :size="moveToCancel ? 45 : 40"></uni-icons>
 			</view>
-			<view class="opt-tip" :class="moveToCancel?'red':'black'">{{moveToCancel? '松手取消':'松手发送,上划取消'}}</view>
+			<view class="opt-tip" :class="moveToCancel ? 'red' : 'black'">{{ moveToCancel ? '松手取消' : '松手发送,上划取消' }}</view>
 		</view>
 
 	</view>
 </template>
 
 <script>
-	export default {
-		name: "chat-record",
-		data() {
-			return {
-				recording: false,
-				moveToCancel: false,
-				recordBarTop: 0,
-				druation: 0,
-				rcTimer: null
+export default {
+	name: "chat-record",
+	data() {
+		return {
+			recording: false,
+			moveToCancel: false,
+			recordBarTop: 0,
+			druation: 0,
+			rcTimer: null
+		}
+	},
+	methods: {
+		onTouchMove(e) {
+			const moveY = e.touches[0].clientY;
+			this.moveToCancel = moveY < this.recordBarTop - 40;
+		},
+		onCancel() {
+			if (this.recording) {
+				this.moveToCancel = true;
+				this.onEndRecord();
 			}
 		},
-		methods: {
-			onTouchMove(e) {
-				const moveY = e.touches[0].clientY;
-				this.moveToCancel = moveY < this.recordBarTop - 40;
-			},
-			onCancel() {
-				if (this.recording) {
-					this.moveToCancel = true;
-					this.onEndRecord();
-				}
-			},
-			onStartRecord() {
-				/* 用户第一次使用语音会唤醒录音权限请求，此时会导致@touchend失效，
-					一直处于录音状态，这里允许用户再次点击发送语音并结束录音 */
-				if (this.recording) {
-					this.onEndRecord();
-					return;
-				}
-				console.log("开始录音")
-				this.moveToCancel = false;
-				this.initRecordBar();
-				this.$rc.start().then(() => {
-					this.recording = true;
-					console.log("开始录音成功")
-					// 开始计时
-					this.startTimer();
-				}).catch((e) => {
-					console.log("录音失败" + JSON.stringify(e))
-					uni.showToast({
-						title: "录音失败",
-						icon: "none"
-					});
+		onStartRecord() {
+			/* 用户第一次使用语音会唤醒录音权限请求，此时会导致@touchend失效，
+				一直处于录音状态，这里允许用户再次点击发送语音并结束录音 */
+			if (this.recording) {
+				this.onEndRecord();
+				return;
+			}
+			console.log("开始录音")
+			this.moveToCancel = false;
+			this.initRecordBar();
+			this.$rc.start().then(() => {
+				this.recording = true;
+				console.log("开始录音成功")
+				// 开始计时
+				this.startTimer();
+			}).catch((e) => {
+				console.log("录音失败" + JSON.stringify(e))
+				uni.showToast({
+					title: "录音失败",
+					icon: "none"
 				});
-			},
-			onEndRecord() {
-				this.recording = false;
-				// 停止录音
-				this.$rc.pause();
-				// 停止计时
-				this.StopTimer();
-				// 触屏位置是否移动到了取消区域
-				if (this.moveToCancel) {
-					this.$rc.close();
-					console.log("录音取消")
-					return;
-				}
-				// 小于1秒不发送
-				if (this.druation == 0) {
-					uni.showToast({
-						title: "说话时间太短",
-						icon: 'none'
-					})
-					this.$rc.close();
-					return;
-				}
-				this.$rc.upload().then((data) => {
-					this.$emit("send", data);
-				}).catch((e) => {
-					uni.showToast({
-						title: e,
-						icon: 'none'
-					})
-				}).finally(() => {
-					this.$rc.close();
+			});
+		},
+		onEndRecord() {
+			this.recording = false;
+			// 停止录音
+			this.$rc.pause();
+			// 停止计时
+			this.StopTimer();
+			// 触屏位置是否移动到了取消区域
+			if (this.moveToCancel) {
+				this.$rc.close();
+				console.log("录音取消")
+				return;
+			}
+			// 小于1秒不发送
+			if (this.druation == 0) {
+				uni.showToast({
+					title: "说话时间太短",
+					icon: 'none'
 				})
-			},
-			startTimer() {
-				this.druation = 0;
-				this.StopTimer();
-				this.rcTimer = setInterval(() => {
-					this.druation++;
-					// 大于60s,直接结束
-					if (this.druation >= 60) {
-						this.onEndRecord();
-					}
-				}, 1000)
-			},
-			StopTimer() {
-				this.rcTimer && clearInterval(this.rcTimer);
-				this.rcTimer = null;
-			},
-			initRecordBar() {
-				const query = uni.createSelectorQuery().in(this);
-				query.select('#chat-record-bar').boundingClientRect((rect) => {
-					// 顶部高度位置
-					this.recordBarTop = rect.top;
-				}).exec()
+				this.$rc.close();
+				return;
 			}
+			this.$rc.upload().then((data) => {
+				this.$emit("send", data);
+			}).catch((e) => {
+				uni.showToast({
+					title: e,
+					icon: 'none'
+				})
+			}).finally(() => {
+				this.$rc.close();
+			})
 		},
-		computed: {
-			recordWindowStyle() {
-				const windowHeight = uni.getSystemInfoSync().windowHeight;
-				const bottom = windowHeight - this.recordBarTop + 12;
-				return `bottom:${bottom}px;`
-			},
-			recordBarStyle() {
-				const bgColor = this.recording ? "royalblue" : "white";
-				const textColor = this.recording ? "white" : "black";
-				return `background-color:${bgColor};
-						color:${textColor};`
-			},
-			recordTip() {
-				if (this.druation > 50) {
-					return `${60-this.druation}s后将停止录音`;
+		startTimer() {
+			this.druation = 0;
+			this.StopTimer();
+			this.rcTimer = setInterval(() => {
+				this.druation++;
+				// 大于60s,直接结束
+				if (this.druation >= 60) {
+					this.onEndRecord();
 				}
-				return `录音时长:${this.druation}s`;
+			}, 1000)
+		},
+		StopTimer() {
+			this.rcTimer && clearInterval(this.rcTimer);
+			this.rcTimer = null;
+		},
+		initRecordBar() {
+			const query = uni.createSelectorQuery().in(this);
+			query.select('#chat-record-bar').boundingClientRect((rect) => {
+				// 顶部高度位置
+				this.recordBarTop = rect.top;
+			}).exec()
+		}
+	},
+	computed: {
+		recordWindowStyle() {
+			const windowHeight = uni.getSystemInfoSync().windowHeight;
+			const bottom = windowHeight - this.recordBarTop + 12;
+			return `bottom:${bottom}px;`
+		},
+		recordTip() {
+			if (this.druation > 50) {
+				return `${60 - this.druation}s后将停止录音`;
 			}
+			return `录音时长:${this.druation}s`;
 		}
-
 	}
+
+}
 </script>
 
 <style lang="scss" scoped>
-	.chat-record {
-		.rc-wave {
-			display: flex;
-			align-items: flex-end;
-			justify-content: center;
-			position: relative;
-			height: 80rpx;
+.chat-record {
+	.rc-wave {
+		display: flex;
+		align-items: flex-end;
+		justify-content: center;
+		position: relative;
+		height: 80rpx;
+
+		.note {
+			background: linear-gradient(to top, $im-color-primary-light-1 0%, $im-color-primary-light-6 100%);
+			width: 4px;
+			height: 50%;
+			border-radius: 5rpx;
+			margin-right: 4px;
+			animation: loading 0.5s infinite linear;
+			animation-delay: calc(0.1s * var(--d));
+
+			@keyframes loading {
+				0% {
+					background-image: linear-gradient(to right, $im-color-primary-light-1 0%, $im-color-primary-light-6 100%);
+					height: 20%;
+					border-radius: 5rpx;
+				}
+
+				50% {
+					background-image: linear-gradient(to top, $im-color-primary-light-1 0%, $im-color-primary-light-6 100%);
+					height: 80%;
+					border-radius: 5rpx;
+				}
 
-			.note {
-				background: linear-gradient(to top, #395ff3 0%, #89aff3 100%);
-				width: 4px;
-				height: 50%;
-				border-radius: 5rpx;
-				margin-right: 4px;
-				animation: loading 0.5s infinite linear;
-				animation-delay: calc(0.1s * var(--d));
-
-				@keyframes loading {
-					0% {
-						background-image: linear-gradient(to right, #395ff3 0%, #89aff3 100%);
-						height: 20%;
-						border-radius: 5rpx;
-					}
-
-					50% {
-						background-image: linear-gradient(to top, #395ff3 0%, #a9cff3 100%);
-						height: 80%;
-						border-radius: 5rpx;
-					}
-
-					100% {
-						background-image: linear-gradient(to top, #395ff3 0%, #a9cff3 100%);
-						height: 20%;
-						border-radius: 5rpx;
-					}
+				100% {
+					background-image: linear-gradient(to top, $im-color-primary-light-1 0%, $im-color-primary-light-6 100%);
+					height: 20%;
+					border-radius: 5rpx;
 				}
 			}
 		}
+	}
 
-		.chat-record-bar {
-			padding: 10rpx;
-			margin: 10rpx;
-			border-radius: 10rpx;
-			text-align: center;
-		}
+	.chat-record-bar {
+		padding: 10rpx;
+		margin: 10rpx;
+		border-radius: 10rpx;
+		text-align: center;
+		box-shadow: $im-box-shadow;
 
-		.chat-record-window {
-			position: fixed;
-			left: 0;
-			height: 360rpx;
-			width: 100%;
-			background-color: rgba(255, 255, 255, 0.95);
-			padding: 30rpx;
+		&.recording {
+			background-color: $im-color-primary;
+			color: #fff;
+		}
+	}
 
-			.icon-microphone {
-				text-align: center;
-				font-size: 80rpx;
-				padding: 10rpx;
+	.chat-record-window {
+		position: fixed;
+		left: 0;
+		right: 0;
+		height: 360rpx;
+		background-color: rgba(255, 255, 255, 0.95);
+		padding: 30rpx;
 
-			}
+		.icon-microphone {
+			text-align: center;
+			font-size: 80rpx;
+			padding: 10rpx;
 
-			.rc-tip {
-				text-align: center;
-				font-size: 30rpx;
-				margin-top: 20rpx;
-			}
+		}
 
-			.cancel-btn {
-				text-align: center;
-				margin-top: 40rpx;
-				height: 80rpx;
+		.rc-tip {
+			text-align: center;
+			font-size: $im-font-size-small;
+			color: $im-text-color-light;
+			margin-top: 20rpx;
+		}
 
-			}
+		.cancel-btn {
+			text-align: center;
+			margin-top: 40rpx;
+			height: 80rpx;
 
-			.opt-tip {
-				text-align: center;
-				font-size: 30rpx;
-				padding: 20rpx;
-			}
+		}
 
-			.red {
-				color: red !important;
-			}
+		.opt-tip {
+			text-align: center;
+			font-size: 30rpx;
+			padding: 20rpx;
+		}
 
-			.black {
-				color: gray;
-			}
+		.red {
+			color: $im-color-danger !important;
 		}
+
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/components/file-upload/file-upload.vue b/im-uniapp/components/file-upload/file-upload.vue
index 2f815ca..f204243 100644
--- a/im-uniapp/components/file-upload/file-upload.vue
+++ b/im-uniapp/components/file-upload/file-upload.vue
@@ -8,110 +8,109 @@
 </template>
 
 <script>
-	import UNI_APP from '@/.env.js';
+import UNI_APP from '@/.env.js';
 
-	export default {
-		name: "file-upload",
-		data() {
-			return {
-				fileMap: new Map(),
-				option: {
-					url: UNI_APP.BASE_URL + '/file/upload',
-					name: 'file',
-					header: {
-						accessToken: uni.getStorageSync('loginInfo').accessToken
-					}
+export default {
+	name: "file-upload",
+	data() {
+		return {
+			fileMap: new Map(),
+			option: {
+				url: UNI_APP.BASE_URL + '/file/upload',
+				name: 'file',
+				header: {
+					accessToken: uni.getStorageSync('loginInfo').accessToken
 				}
 			}
+		}
+	},
+	props: {
+		maxSize: {
+			type: Number,
+			default: 10
 		},
-		props: {
-			maxSize: {
-				type: Number,
-				default: 10
-			},
-			onBefore: {
-				type: Function,
-				default: null
-			},
-			onSuccess: {
-				type: Function,
-				default: null
-			},
-			onError: {
-				type: Function,
-				default: null
-			}
+		onBefore: {
+			type: Function,
+			default: null
 		},
-		methods: {
-			onUploadEnd(item) {
-				let file = this.fileMap.get(item.path);
-				if (item.type == 'fail') {
-					this.onError(file)
-					return;
-				}
-				let res = JSON.parse(item.responseText);
-				if (res.code == 200) {
-					// 上传成功
-					this.onOk(file, res);
-				} else if (res.code == 401) {
-					// token已过期，重新获取token
-					this.refreshToken().then((res) => {
-						let newToken = res.data.accessToken;
-						this.option.header.accessToken = newToken;
-						this.$refs.lsjUpload.setData(this.option);
-						// 重新上传
-						this.$refs.lsjUpload.upload(file.name);
-					}).catch(() => {
-						this.onError(file, res);
-					})
-				} else {
-					// 上传失败
+		onSuccess: {
+			type: Function,
+			default: null
+		},
+		onError: {
+			type: Function,
+			default: null
+		}
+	},
+	methods: {
+		onUploadEnd(item) {
+			let file = this.fileMap.get(item.path);
+			if (item.type == 'fail') {
+				this.onError(file)
+				return;
+			}
+			let res = JSON.parse(item.responseText);
+			if (res.code == 200) {
+				// 上传成功
+				this.onOk(file, res);
+			} else if (res.code == 401) {
+				// token已过期，重新获取token
+				this.refreshToken().then((res) => {
+					let newToken = res.data.accessToken;
+					this.option.header.accessToken = newToken;
+					this.$refs.lsjUpload.setData(this.option);
+					// 重新上传
+					this.$refs.lsjUpload.upload(file.name);
+				}).catch(() => {
 					this.onError(file, res);
+				})
+			} else {
+				// 上传失败
+				this.onError(file, res);
+			}
+		},
+		onChange(files) {
+			if (!files.size) {
+				return;
+			}
+			files.forEach((file, name) => {
+				if (!this.fileMap.has(file.path)) {
+					this.onBefore && this.onBefore(file)
+					this.fileMap.set(file.path, file);
 				}
-			},
-			onChange(files) {
-				if (!files.size) {
-					return;
-				}
-				files.forEach((file, name) => {
-					if(!this.fileMap.has(file.path)){
-						this.onBefore && this.onBefore(file)
-						this.fileMap.set(file.path, file);
+			})
+		},
+		onOk(file, res) {
+			this.fileMap.delete(file.path);
+			this.$refs.lsjUpload.clear(file.name);
+			this.onSuccess && this.onSuccess(file, res);
+		},
+		onFailed(file, res) {
+			this.fileMap.delete(file.path);
+			this.$refs.lsjUpload.clear(file.name);
+			this.onError && this.onError(file, res);
+		},
+		refreshToken() {
+			return new Promise((resolve, reject) => {
+				let loginInfo = uni.getStorageSync('loginInfo')
+				uni.request({
+					method: 'PUT',
+					url: UNI_APP.BASE_URL + '/refreshToken',
+					header: {
+						refreshToken: loginInfo.refreshToken
+					},
+					success: (res) => {
+						resolve(res.data);
+					},
+					fail: (res) => {
+						reject(res);
 					}
 				})
-			},
-			onOk(file, res) {
-				this.fileMap.delete(file.path);
-				this.$refs.lsjUpload.clear(file.name);
-				this.onSuccess && this.onSuccess(file, res);
-			},
-			onFailed(file, res) {
-				this.fileMap.delete(file.path);
-				this.$refs.lsjUpload.clear(file.name);
-				this.onError && this.onError(file, res);
-			},
-			refreshToken() {
-				return new Promise((resolve, reject) => {
-					let loginInfo = uni.getStorageSync('loginInfo')
-					uni.request({
-						method: 'PUT',
-						url: UNI_APP.BASE_URL + '/refreshToken',
-						header: {
-							refreshToken: loginInfo.refreshToken
-						},
-						success: (res) => {
-							resolve(res.data);
-						},
-						fail: (res) => {
-							reject(res);
-						}
-					})
-				})
-			}
+			})
 		}
-
 	}
+
+}
 </script>
 
-<style>
-</style>
\ No newline at end of file
+<style></style>
\ No newline at end of file
diff --git a/im-uniapp/components/friend-item/friend-item.vue b/im-uniapp/components/friend-item/friend-item.vue
index 5a475f5..cd6627a 100644
--- a/im-uniapp/components/friend-item/friend-item.vue
+++ b/im-uniapp/components/friend-item/friend-item.vue
@@ -1,79 +1,75 @@
 <template>
 	<view class="friend-item" @click="showFriendInfo()">
-		<head-image :name="friend.nickName" :online="friend.online" :url="friend.headImage"
-			:size="90"></head-image>
+		<head-image :name="friend.nickName" :online="friend.online" :url="friend.headImage" size="small"></head-image>
 		<view class="friend-info">
-			<view class="friend-name">{{ friend.nickName}}</view>
+			<view class="friend-name">{{ friend.nickName }}</view>
 			<view class="friend-online">
-				<image v-show="friend.onlineWeb" class="online" src="/static/image/online_web.png"
-					title="电脑设备在线" />
-				<image v-show="friend.onlineApp" class="online" src="/static/image/online_app.png"
-					title="移动设备在线" />
+				<image v-show="friend.onlineWeb" class="online" src="/static/image/online_web.png" title="电脑设备在线" />
+				<image v-show="friend.onlineApp" class="online" src="/static/image/online_app.png" title="移动设备在线" />
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
-	export default {
-		name: "frined-item",
-		data() {
-			return {}
+export default {
+	name: "frined-item",
+	data() {
+		return {}
+	},
+	methods: {
+		showFriendInfo() {
+			uni.navigateTo({
+				url: "/pages/common/user-info?id=" + this.friend.id
+			})
 		},
-		methods: {
-			showFriendInfo() {
-				uni.navigateTo({
-					url: "/pages/common/user-info?id=" + this.friend.id
-				})
-			},
-		},
-		props: {
-			friend: {
-				type: Object
-			}
+	},
+	props: {
+		friend: {
+			type: Object
 		}
 	}
+}
 </script>
 
 <style scope lang="scss">
-	.friend-item {
-		height: 100rpx;
+.friend-item {
+	height: 90rpx;
+	display: flex;
+	margin-bottom: 1rpx;
+	position: relative;
+	padding: 10rpx;
+	padding-left: 20rpx;
+	align-items: center;
+	background-color: white;
+	white-space: nowrap;
+
+	&:hover {
+		background-color: $im-bg;
+	}
+
+	.friend-info {
+		flex: 1;
 		display: flex;
-		margin-bottom: 1rpx;
-		position: relative;
-		padding: 10rpx;
+		flex-direction: column;
 		padding-left: 20rpx;
-		align-items: center;
-		background-color: white;
-		white-space: nowrap;
+		text-align: left;
 
-		&:hover {
-			background-color: #f5f6ff;
+		.friend-name {
+			font-size: $im-font-size;
+			white-space: nowrap;
+			overflow: hidden;
 		}
 
-		.friend-info {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			padding-left: 20rpx;
-			text-align: left;
+		.friend-online {
+			margin-top: 4rpx;
 
-			.friend-name {
-				font-size: 30rpx;
-				font-weight: 600;
-				line-height: 60rpx;
-				white-space: nowrap;
-				overflow: hidden;
-			}
-			
-			.friend-online {
-				.online {
-					padding-right: 4rpx;
-					width: 32rpx;
-					height: 32rpx;
-				
-				}
+			.online {
+				padding-right: 4rpx;
+				width: 24rpx;
+				height: 24rpx;
 			}
 		}
 	}
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/im-uniapp/components/group-item/group-item.vue b/im-uniapp/components/group-item/group-item.vue
index 5bf3f89..14b4a63 100644
--- a/im-uniapp/components/group-item/group-item.vue
+++ b/im-uniapp/components/group-item/group-item.vue
@@ -1,56 +1,58 @@
 <template>
 	<view class="group-item" @click="showGroupInfo()">
-		<head-image :name="group.showGroupName"
-			:url="group.headImage" :size="90"></head-image>
+		<head-image :name="group.showGroupName" :url="group.headImage" size="small"></head-image>
 		<view class="group-name">
-			<view>{{ group.showGroupName}}</view>
+			<view>{{ group.showGroupName }}</view>
 		</view>
 	</view>
 </template>
 
 <script>
-	export default {
-		name: "group-item",
-		data() {
-			return {}
+export default {
+	name: "group-item",
+	data() {
+		return {}
+	},
+	methods: {
+		showGroupInfo() {
+			uni.navigateTo({
+				url: "/pages/group/group-info?id=" + this.group.id
+			})
 		},
-		methods:{
-			showGroupInfo(){
-				uni.navigateTo({
-					url:"/pages/group/group-info?id="+this.group.id
-				})
-			},
-		},
-		props: {
-			group: {
-				type: Object
-			}
+	},
+	props: {
+		group: {
+			type: Object
 		}
 	}
+}
 </script>
 
 <style scope lang="scss">
-	.group-item {
-		height: 100rpx;
-		display: flex;
-		margin-bottom: 1rpx;
-		position: relative;
-		padding: 10rpx;
+.group-item {
+	height: 90rpx;
+	display: flex;
+	margin-bottom: 2rpx;
+	position: relative;
+	padding: 18rpx 20rpx;
+	align-items: center;
+	background-color: white;
+	white-space: nowrap;
+
+	&:hover {
+		background-color: $im-bg-active;
+	}
+
+	&.active {
+		background-color: $im-bg-active;
+	}
+
+	.group-name {
+		font-size: $im-font-size;
 		padding-left: 20rpx;
-		align-items: center;
-		background-color: white;
+		text-align: left;
 		white-space: nowrap;
-		&:hover {
-			background-color: #f5f6ff;
-		}
-
-		.group-name {
-			font-size: 32rpx;
-			padding-left: 20rpx;
-			font-weight: 600;
-			text-align: left;
-			white-space: nowrap;
-			overflow: hidden;
-		}
+		overflow: hidden;
 	}
+}
 </style>
diff --git a/im-uniapp/components/group-member-selector/group-member-selector.vue b/im-uniapp/components/group-member-selector/group-member-selector.vue
index 64bf07f..ca87122 100644
--- a/im-uniapp/components/group-member-selector/group-member-selector.vue
+++ b/im-uniapp/components/group-member-selector/group-member-selector.vue
@@ -4,12 +4,12 @@
 			<view class="top-bar">
 				<view class="top-tip">选择成员</view>
 				<button class="top-btn" type="warn" size="mini" @click="onClean()">清空 </button>
-				<button class="top-btn" type="primary" size="mini" @click="onOk()">确定({{checkedIds.length}})
+				<button class="top-btn" type="primary" size="mini" @click="onOk()">确定({{ checkedIds.length }})
 				</button>
 			</view>
-			<scroll-view v-show="checkedIds.length>0" scroll-x="true" scroll-left="120">
+			<scroll-view v-show="checkedIds.length > 0" scroll-x="true" scroll-left="120">
 				<view class="checked-users">
-					<view v-for="m in members" v-show="m.checked" class="user-item">
+					<view v-for="m in members" v-show="m.checked" class="user-item" :key="m.userId">
 						<head-image :name="m.showNickName" :url="m.headImage" :size="60"></head-image>
 					</view>
 				</view>
@@ -23,7 +23,7 @@
 						<view class="member-item" @click="onSwitchChecked(m)">
 							<head-image :name="m.showNickName" :online="m.online" :url="m.headImage"
 								:size="90"></head-image>
-							<view class="member-name">{{ m.showNickName}}</view>
+							<view class="member-name">{{ m.showNickName }}</view>
 							<view class="member-checked">
 								<radio :checked="m.checked" :disabled="m.locked" @click.stop="onSwitchChecked(m)" />
 							</view>
@@ -37,138 +37,138 @@
 
 
 <script>
-	export default {
-		name: "chat-group-member-choose",
-		props: {
-			members: {
-				type: Array
-			},
-			maxSize: {
-				type: Number,
-				default: -1
-			}
+export default {
+	name: "chat-group-member-choose",
+	props: {
+		members: {
+			type: Array
+		},
+		maxSize: {
+			type: Number,
+			default: -1
+		}
+	},
+	data() {
+		return {
+			searchText: "",
+		};
+	},
+	methods: {
+		init(checkedIds, lockedIds) {
+			this.members.forEach((m) => {
+				m.checked = checkedIds.indexOf(m.userId) >= 0;
+				m.locked = lockedIds.indexOf(m.userId) >= 0;
+			});
 		},
-		data() {
-			return {
-				searchText: "",
-			};
+		open() {
+			this.$refs.popup.open();
 		},
-		methods: {
-			init(checkedIds, lockedIds) {
-				this.members.forEach((m) => {
-					m.checked = checkedIds.indexOf(m.userId) >= 0;
-					m.locked = lockedIds.indexOf(m.userId) >= 0;
-				});
-			},
-			open() {
-				this.$refs.popup.open();
-			},
-			onSwitchChecked(m) {
+		onSwitchChecked(m) {
+			if (!m.locked) {
+				m.checked = !m.checked;
+			}
+			// 达到选择上限
+			if (this.maxSize > 0 && this.checkedIds.length > this.maxSize) {
+				m.checked = false;
+				uni.showToast({
+					title: `最多选择${this.maxSize}位用户`,
+					icon: "none"
+				})
+			}
+		},
+		onClean() {
+			this.members.forEach((m) => {
 				if (!m.locked) {
-					m.checked = !m.checked;
-				}
-				// 达到选择上限
-				if (this.maxSize > 0 && this.checkedIds.length > this.maxSize) {
 					m.checked = false;
-					uni.showToast({
-						title: `最多选择${this.maxSize}位用户`,
-						icon: "none"
-					})
 				}
-			},
-			onClean() {
-				this.members.forEach((m) => {
-					if (!m.locked) {
-						m.checked = false;
-					}
-				})
-			},
-			onOk() {
-				this.$refs.popup.close();
-				this.$emit("complete", this.checkedIds)
-			},
-			isChecked(m) {
-				return this.checkedIds.indexOf(m.userId) >= 0;
-			}
+			})
 		},
-		computed: {
-			checkedIds() {
-				let ids = [];
-				this.members.forEach((m) => {
-					if (m.checked) {
-						ids.push(m.userId);
-					}
-				})
-				return ids;
-			}
+		onOk() {
+			this.$refs.popup.close();
+			this.$emit("complete", this.checkedIds)
+		},
+		isChecked(m) {
+			return this.checkedIds.indexOf(m.userId) >= 0;
+		}
+	},
+	computed: {
+		checkedIds() {
+			let ids = [];
+			this.members.forEach((m) => {
+				if (m.checked) {
+					ids.push(m.userId);
+				}
+			})
+			return ids;
 		}
 	}
+}
 </script>
 
 
 <style lang="scss" scoped>
-	.chat-group-member-choose {
-		position: relative;
-		border: #dddddd solid 1rpx;
-		display: flex;
-		flex-direction: column;
-		background-color: white;
-		padding: 10rpx;
-		border-radius: 15rpx;
+.chat-group-member-choose {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	background-color: white;
+	padding: 10rpx;
+	border-radius: 15rpx;
 
-		.top-bar {
-			display: flex;
-			align-items: center;
-			height: 70rpx;
-			padding: 10rpx 30rpx;
+	.top-bar {
+		display: flex;
+		align-items: center;
+		height: 70rpx;
+		padding: 10rpx 30rpx;
 
-			.top-tip {
-				flex: 1;
-			}
+		.top-tip {
+			flex: 1;
+		}
 
-			.top-btn {
-				margin-left: 10rpx;
-			}
+		.top-btn {
+			margin-left: 10rpx;
 		}
+	}
 
-		.checked-users {
-			display: flex;
-			align-items: center;
-			height: 90rpx;
-			padding: 0 30rpx;
-			.user-item {
-				padding: 3rpx;
-			}
+	.checked-users {
+		display: flex;
+		align-items: center;
+		height: 90rpx;
+		padding: 0 30rpx;
+
+		.user-item {
+			padding: 3rpx;
 		}
+	}
 
-		.member-items {
+	.member-items {
+		position: relative;
+		flex: 1;
+		overflow: hidden;
+
+		.member-item {
+			height: 120rpx;
+			display: flex;
 			position: relative;
-			flex: 1;
-			overflow: hidden;
+			padding: 0 30rpx;
+			align-items: center;
+			background-color: white;
+			white-space: nowrap;
 
-			.member-item {
-				height: 120rpx;
-				display: flex;
-				position: relative;
-				padding: 0 30rpx;
-				align-items: center;
-				background-color: white;
+			.member-name {
+				flex: 1;
+				padding-left: 20rpx;
+				font-size: 30rpx;
+				font-weight: 600;
+				line-height: 60rpx;
 				white-space: nowrap;
-
-				.member-name {
-					flex: 1;
-					padding-left: 20rpx;
-					font-size: 30rpx;
-					font-weight: 600;
-					line-height: 60rpx;
-					white-space: nowrap;
-					overflow: hidden;
-				}
+				overflow: hidden;
 			}
+		}
 
-			.scroll-bar {
-				height: 800rpx;
-			}
+		.scroll-bar {
+			height: 800rpx;
 		}
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/components/group-rtc-join/group-rtc-join.vue b/im-uniapp/components/group-rtc-join/group-rtc-join.vue
index 6b36b55..6ee2459 100644
--- a/im-uniapp/components/group-rtc-join/group-rtc-join.vue
+++ b/im-uniapp/components/group-rtc-join/group-rtc-join.vue
@@ -1,17 +1,16 @@
 <template>
 	<uni-popup ref="popup" type="center">
-		<uni-popup-dialog mode="base"  :duration="2000" title="是否加入通话?" confirmText="加入"
-			@confirm="onOk">
+		<uni-popup-dialog mode="base" :duration="2000" title="是否加入通话?" confirmText="加入" @confirm="onOk">
 			<div class="group-rtc-join">
 				<div class="host-info">
 					<div>发起人</div>
 					<head-image :name="rtcInfo.host.nickName" :url="rtcInfo.host.headImage" :size="80"></head-image>
 				</div>
 				<div class="user-info">
-					<div>{{rtcInfo.userInfos.length+'人正在通话中'}}</div>
+					<div>{{ rtcInfo.userInfos.length + '人正在通话中' }}</div>
 					<scroll-view scroll-x="true" scroll-left="120">
 						<view class="user-list">
-							<view v-for="user in rtcInfo.userInfos" class="user-item">
+							<view v-for="user in rtcInfo.userInfos" class="user-item" :key="user.id">
 								<head-image :name="user.nickName" :url="user.headImage" :size="80"></head-image>
 							</view>
 						</view>
@@ -23,67 +22,67 @@
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				rtcInfo: {}
-			}
-		},
-		props: {
-			groupId: {
-				type: Number
-			}
+export default {
+	data() {
+		return {
+			rtcInfo: {}
+		}
+	},
+	props: {
+		groupId: {
+			type: Number
+		}
+	},
+	methods: {
+		open(rtcInfo) {
+			this.rtcInfo = rtcInfo;
+			this.$refs.popup.open();
 		},
-		methods: {
-			open(rtcInfo) {
-				this.rtcInfo = rtcInfo;
-				this.$refs.popup.open();
-			},
-			onOk() {
-				let users = this.rtcInfo.userInfos;
-				let mine = this.userStore.userInfo;
-				// 加入自己的信息
-				if(!users.find((user)=>user.id==mine.id)){
-					users.push({
-						id: mine.id,
-						nickName: mine.nickName,
-						headImage: mine.headImageThumb,
-						isCamera: false,
-						isMicroPhone: true
-					})
-				}
-				const userInfos = encodeURIComponent(JSON.stringify(users));
-				uni.navigateTo({
-					url: `/pages/chat/chat-group-video?groupId=${this.groupId}&isHost=false
-						&inviterId=${mine.id}&userInfos=${userInfos}`
+		onOk() {
+			let users = this.rtcInfo.userInfos;
+			let mine = this.userStore.userInfo;
+			// 加入自己的信息
+			if (!users.find((user) => user.id == mine.id)) {
+				users.push({
+					id: mine.id,
+					nickName: mine.nickName,
+					headImage: mine.headImageThumb,
+					isCamera: false,
+					isMicroPhone: true
 				})
 			}
+			const userInfos = encodeURIComponent(JSON.stringify(users));
+			uni.navigateTo({
+				url: `/pages/chat/chat-group-video?groupId=${this.groupId}&isHost=false
+						&inviterId=${mine.id}&userInfos=${userInfos}`
+			})
 		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.group-rtc-join {
-		width: 100%;
+.group-rtc-join {
+	width: 100%;
 
-		.host-info {
-			font-size: 16px;
-			padding: 10px;
-		}
+	.host-info {
+		font-size: 16px;
+		padding: 10px;
+	}
 
-		.user-info {
-			font-size: 16px;
-			padding: 10px;
-		}
+	.user-info {
+		font-size: 16px;
+		padding: 10px;
+	}
 
-		.user-list {
-			display: flex;
-			align-items: center;
-			height: 90rpx;
+	.user-list {
+		display: flex;
+		align-items: center;
+		height: 90rpx;
 
-			.user-item {
-				padding: 3rpx;
-			}
+		.user-item {
+			padding: 3rpx;
 		}
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/components/head-image/head-image.vue b/im-uniapp/components/head-image/head-image.vue
index f8298c2..4bc68bf 100644
--- a/im-uniapp/components/head-image/head-image.vue
+++ b/im-uniapp/components/head-image/head-image.vue
@@ -1,9 +1,9 @@
 <template>
 	<view class="head-image" @click="showUserInfo($event)" :title="name">
-		<image class="avatar-image" v-if="url" :src="url" 
-		:style="avatarImageStyle"  lazy-load="true"  mode="aspectFill"/>
+		<image class="avatar-image" v-if="url" :src="url" :style="avatarImageStyle" lazy-load="true"
+			mode="aspectFill" />
 		<view class="avatar-text" v-if="!url" :style="avatarTextStyle">
-			{{name.substring(0,1).toUpperCase()}}
+			{{ name?.substring(0, 1).toUpperCase() }}
 		</view>
 		<view v-if="online" class="online" title="用户当前在线">
 		</view>
@@ -11,95 +11,110 @@
 </template>
 
 <script>
-	export default {
-		name: "head-image",
-		data() {
-			return {
-				colors: ["#5daa31", "#c7515a", "#e03697",  "#85029b",
-				"#c9b455",  "#326eb6"]
-			}
+export default {
+	name: "head-image",
+	data() {
+		return {
+			colors: ["#5daa31", "#c7515a", "#e03697", "#85029b",
+				"#c9b455", "#326eb6"]
+		}
+	},
+	props: {
+		id: {
+			type: Number
 		},
-		props: {
-			id: {
-				type: Number
-			},
-			size: {
-				type: Number,
-				default: 20
-			},
-			url: {
-				type: String
-			},
-			name: {
-				type: String,
-				default: "?"
-			},
-			online: {
-				type: Boolean,
-				default: false
-			}
+		size: {
+			type: [Number, String],
+			default: 'default'
+		},
+		url: {
+			type: String
+		},
+		name: {
+			type: String,
+			default: null
 		},
-		methods: {
-			showUserInfo(e) {
-				if (this.id && this.id > 0) {
-					uni.navigateTo({
-						url: "/pages/common/user-info?id="+this.id
-					})
-				}
+		online: {
+			type: Boolean,
+			default: false
+		},
+	},
+	methods: {
+		showUserInfo(e) {
+			if (this.id && this.id > 0) {
+				uni.navigateTo({
+					url: "/pages/common/user-info?id=" + this.id
+				})
+			}
+		}
+	},
+	computed: {
+		_size() {
+			if (typeof this.size === 'number') {
+				return this.size;
+			} else if (typeof this.size === 'string') {
+				return {
+					'default': 96,
+					'small': 84,
+					'smaller': 72,
+					'mini': 60,
+					'minier': 48,
+					'lage': 108,
+					'lager': 120,
+				}[this.size]
 			}
 		},
-		computed: {
-				avatarImageStyle() {
-					return `width:${this.size}rpx;
-					height:${this.size}rpx;`
-				},
-				avatarTextStyle() {
-					return `width: ${this.size}rpx;
-					height:${this.size}rpx;
-					background-color:${this.textColor};
-					font-size:${this.size*0.5}rpx;
+		avatarImageStyle() {
+			return `width:${this._size}rpx;
+					height:${this._size}rpx;`
+		},
+		avatarTextStyle() {
+			return `width: ${this._size}rpx;
+					height:${this._size}rpx;
+					background-color:${this.name ? this.textColor : '#fff'};
+					font-size:${this._size * 0.5}rpx;
 					`
-				},
-			textColor() {
-				let hash = 0;
-				for (var i = 0; i < this.name.length; i++) {
-					hash += this.name.charCodeAt(i);
-				}
-				return this.colors[hash % this.colors.length];
+		},
+		textColor() {
+			let hash = 0;
+			for (var i = 0; i < this.name.length; i++) {
+				hash += this.name.charCodeAt(i);
 			}
+			return this.colors[hash % this.colors.length];
 		}
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	.head-image {
-		position: relative;
-		cursor: pointer;
+.head-image {
+	position: relative;
+	cursor: pointer;
 
-		.avatar-image {
-			position: relative;
-			overflow: hidden;
-			border-radius: 50%;
-			vertical-align: bottom;	
-		}
+	.avatar-image {
+		position: relative;
+		overflow: hidden;
+		border-radius: 50%;
+		vertical-align: bottom;
+	}
 
-		.avatar-text {
-			color: white;
-			border-radius: 50%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
+	.avatar-text {
+		color: white;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 
-		.online {
-			position: absolute;
-			right: -10%;
-			bottom: 0;
-			width: 24rpx;
-			height: 24rpx;
-			background: limegreen;
-			border-radius: 50%;
-			border: 6rpx solid white;
-		}
+	.online {
+		position: absolute;
+		right: -10%;
+		bottom: 0;
+		width: 24rpx;
+		height: 24rpx;
+		background: limegreen;
+		border-radius: 50%;
+		border: 6rpx solid white;
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/components/image-upload/image-upload.vue b/im-uniapp/components/image-upload/image-upload.vue
index de625c3..6cfe9e5 100644
--- a/im-uniapp/components/image-upload/image-upload.vue
+++ b/im-uniapp/components/image-upload/image-upload.vue
@@ -5,89 +5,88 @@
 </template>
 
 <script>
-	import UNI_APP from '@/.env.js'
+import UNI_APP from '@/.env.js'
 
-	export default {
-		name: "image-upload",
-		data() {
-			return {
-				uploadHeaders: {
-					"accessToken": uni.getStorageSync('loginInfo').accessToken
-				}
+export default {
+	name: "image-upload",
+	data() {
+		return {
+			uploadHeaders: {
+				"accessToken": uni.getStorageSync('loginInfo').accessToken
 			}
+		}
+	},
+	props: {
+		maxCount: {
+			type: Number,
+			default: 1
 		},
-		props: {
-			maxCount:{
-				type: Number,
-				default: 1
-			},
-			maxSize: {
-				type: Number,
-				default: 5*1024*1024
-			},
-			sourceType:{
-				type: String,
-				default: 'album'
-			},
-			onBefore: {
-				type: Function,
-				default: null
-			},
-			onSuccess: {
-				type: Function,
-				default: null
-			},
-			onError: {
-				type: Function,
-				default: null
-			}
+		maxSize: {
+			type: Number,
+			default: 5 * 1024 * 1024
 		},
-		methods: {
-			selectAndUpload() {
-				uni.chooseImage({
-					count: this.maxCount, //最多可以选择的图片张数，默认9
-					sourceType: [this.sourceType], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
-					sizeType: ['original'], //original 原图，compressed 压缩图，默认二者都有
-					success: (res) => {
-						res.tempFiles.forEach((file) => {
-							console.log("文件:",file)
-							if (!this.onBefore || this.onBefore(file)) {
-								// 调用上传图片的接口
-								this.uploadImage(file);
-							}
-						})
-					}
-				})
-			},
-			uploadImage(file) {
-				uni.uploadFile({
-					url: UNI_APP.BASE_URL + '/image/upload',
-					header: {
-						accessToken: uni.getStorageSync("loginInfo").accessToken
-					},
-					filePath: file.path, // 要上传文件资源的路径
-					name: 'file',
-					success: (res) => {
-						let data = JSON.parse(res.data);
-						if(data.code != 200){
-							uni.showToast({
-								icon: "none",
-								title: data.message,
-							})
-							this.onError && this.onError(file, data);
-						}else{
-							this.onSuccess && this.onSuccess(file, data);
+		sourceType: {
+			type: String,
+			default: 'album'
+		},
+		onBefore: {
+			type: Function,
+			default: null
+		},
+		onSuccess: {
+			type: Function,
+			default: null
+		},
+		onError: {
+			type: Function,
+			default: null
+		}
+	},
+	methods: {
+		selectAndUpload() {
+			uni.chooseImage({
+				count: this.maxCount, //最多可以选择的图片张数，默认9
+				sourceType: [this.sourceType], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
+				sizeType: ['original'], //original 原图，compressed 压缩图，默认二者都有
+				success: (res) => {
+					res.tempFiles.forEach((file) => {
+						console.log("文件:", file)
+						if (!this.onBefore || this.onBefore(file)) {
+							// 调用上传图片的接口
+							this.uploadImage(file);
 						}
-					},
-					fail: (err) => {
-						console.log(err);
-						this.onError && this.onError(file, err);
+					})
+				}
+			})
+		},
+		uploadImage(file) {
+			uni.uploadFile({
+				url: UNI_APP.BASE_URL + '/image/upload',
+				header: {
+					accessToken: uni.getStorageSync("loginInfo").accessToken
+				},
+				filePath: file.path, // 要上传文件资源的路径
+				name: 'file',
+				success: (res) => {
+					let data = JSON.parse(res.data);
+					if (data.code != 200) {
+						uni.showToast({
+							icon: "none",
+							title: data.message,
+						})
+						this.onError && this.onError(file, data);
+					} else {
+						this.onSuccess && this.onSuccess(file, data);
 					}
-				})
-			}
+				},
+				fail: (err) => {
+					console.log(err);
+					this.onError && this.onError(file, err);
+				}
+			})
 		}
 	}
+}
 </script>
 
-<style>
-</style>
\ No newline at end of file
+<style></style>
\ No newline at end of file
diff --git a/im-uniapp/components/loading/loading.vue b/im-uniapp/components/loading/loading.vue
index bc33f11..a56b8ea 100644
--- a/im-uniapp/components/loading/loading.vue
+++ b/im-uniapp/components/loading/loading.vue
@@ -6,59 +6,57 @@
 </template>
 
 <script>
-	import {
-		computed
-	} from "vue"
-	export default {
-		data() {
-			return {}
+
+export default {
+	data() {
+		return {}
+	},
+	props: {
+		size: {
+			type: Number,
+			default: 100
 		},
-		props: {
-			size: {
-				type: Number,
-				default: 100
-			},
-			mask: {
-				type: Boolean,
-				default: true
-			}
+		mask: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		icontStyle() {
+			return `font-size:${this.size}rpx`;
 		},
-		computed: {
-			icontStyle() {
-				return `font-size:${this.size}rpx`;
-			},
-			loadingStyle() {
-				return this.mask ? "background: rgba(0, 0, 0, 0.3);" : "";
-			}
+		loadingStyle() {
+			return this.mask ? "background: rgba(0, 0, 0, 0.3);" : "";
 		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.loading-box {
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		left: 0;
-		top: 0;
-		z-index: 10000;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
+.loading-box {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 10000;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
 
-	.rotate {
-		animation: rotate 2s ease-in-out infinite;
+.rotate {
+	animation: rotate 2s ease-in-out infinite;
 
-	}
+}
 
-	@keyframes rotate {
-		from {
-			transform: rotate(0deg)
-		}
+@keyframes rotate {
+	from {
+		transform: rotate(0deg)
+	}
 
-		to {
-			transform: rotate(360deg)
-		}
+	to {
+		transform: rotate(360deg)
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/components/long-press-menu/long-press-menu.vue b/im-uniapp/components/long-press-menu/long-press-menu.vue
new file mode 100644
index 0000000..20a0244
--- /dev/null
+++ b/im-uniapp/components/long-press-menu/long-press-menu.vue
@@ -0,0 +1,121 @@
+<template>
+	<view>
+		<view @longpress.stop="onLongPress($event)" @touchmove="onTouchMove" @touchend="onTouchEnd">
+			<slot></slot>
+		</view>
+		<view v-if="isShowMenu" class="menu-mask" @touchstart="onClose()" @contextmenu.prevent=""></view>
+		<view v-if="isShowMenu" class="menu" :style="menuStyle">
+			<view class="menu-item" v-for="(item) in items" :key="item.key" @click.prevent="onSelectMenu(item)">
+				<text :style="itemStyle(item)"> {{ item.name }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: "long-press-menu",
+	data() {
+		return {
+			isShowMenu: false,
+			isTouchMove: false,
+			style: ""
+		}
+	},
+	props: {
+		items: {
+			type: Array
+		}
+	},
+	methods: {
+		onLongPress(e) {
+			if (this.isTouchMove) {
+				// 屏幕移动时不弹出
+				return;
+			}
+			uni.getSystemInfo({
+				success: (res) => {
+					let touches = e.touches[0];
+					let style = "";
+					/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
+					if (touches.clientY > (res.windowHeight / 2)) {
+						style = `bottom:${res.windowHeight - touches.clientY}px;`;
+					} else {
+						style = `top:${touches.clientY}px;`;
+					}
+					if (touches.clientX > (res.windowWidth / 2)) {
+						style += `right:${res.windowWidth - touches.clientX}px;`;
+					} else {
+						style += `left:${touches.clientX}px;`;
+					}
+					this.menuStyle = style;
+					//
+					this.$nextTick(() => {
+						this.isShowMenu = true;
+					});
+				}
+			})
+		},
+		onTouchMove() {
+			this.onClose();
+			this.isTouchMove = true;
+		},
+		onTouchEnd() {
+			this.isTouchMove = false;
+		},
+		onSelectMenu(item) {
+			this.$emit("select", item);
+			this.isShowMenu = false;
+		},
+		onClose() {
+			this.isShowMenu = false;
+		},
+		itemStyle(item) {
+			if (item.color) {
+				return `color:${item.color};`
+			}
+			return `color:#000;`;
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.menu-mask {
+	position: fixed;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 999;
+}
+
+.menu {
+	position: fixed;
+	border-radius: 4px;
+	overflow: hidden;
+	background-color: #fff;
+	z-index: 1000;
+	box-shadow: $im-box-shadow-dark;
+
+	.menu-item {
+		height: 28px;
+		min-width: 120rpx;
+		line-height: 28px;
+		font-size: $im-font-size-small;
+		display: flex;
+		padding: 6px 20px;
+		justify-content: flex-start;
+
+		&:hover {
+			background: $im-bg-active;
+		}
+
+		.menu-icon {
+			margin-right: 10rpx;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/im-uniapp/components/nav-bar/nav-bar.vue b/im-uniapp/components/nav-bar/nav-bar.vue
new file mode 100644
index 0000000..b2fb631
--- /dev/null
+++ b/im-uniapp/components/nav-bar/nav-bar.vue
@@ -0,0 +1,119 @@
+<template>
+  <view class="im-nav-bar">
+    <!-- #ifndef H5 -->
+    <view style="height: var(--status-bar-height)"></view>
+    <!-- #endif -->
+    <view class="im-nav-bar-content">
+      <view class="back" @click="handleBackClick" v-if="back">
+        <uni-icons type="back" :size="iconFontSize"></uni-icons>
+      </view>
+      <view class="title" v-if="title">
+        <slot></slot>
+      </view>
+      <view class="btn">
+        <uni-icons class="btn-item" v-if="search" type="search" :size="iconFontSize"
+          @click="$emit('search')"></uni-icons>
+        <uni-icons class="btn-item" v-if="add" type="plusempty" :size="iconFontSize" @click="$emit('add')"></uni-icons>
+        <uni-icons class="btn-item" v-if="more" type="more-filled" :size="iconFontSize"
+          @click="$emit('more')"></uni-icons>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "nav-bar",
+  props: {
+    back: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: Boolean,
+      default: true
+    },
+    search: {
+      type: Boolean,
+      default: false
+    },
+    add: {
+      type: Boolean,
+      default: false
+    },
+    more: {
+      type: Boolean,
+      default: false
+    },
+    iconFontSize: {
+      type: Number,
+      default: 24
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    height() {
+
+    }
+  },
+  methods: {
+    handleBackClick() {
+      uni.navigateBack({
+        delta: 1
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.im-nav-bar {
+  background-color: #fff;
+  //background-color: $im-bg;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  color: $im-text-color;
+  border-bottom: 1px solid $im-border-light;
+  font-size: $im-font-size-large;
+  z-index: 99;
+
+  .im-nav-bar-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    height: $im-nav-bar-height;
+
+    .title {}
+
+    .back {
+      position: absolute;
+      left: 0;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      font-size: 22px;
+      box-sizing: border-box;
+    }
+
+    .btn {
+      position: absolute;
+      right: 0;
+      height: 100%;
+      display: flex;
+      padding: 12px;
+      align-items: center;
+      box-sizing: border-box;
+
+      .btn-item {
+        margin-left: 8px;
+      }
+    }
+  }
+
+}
+</style>
\ No newline at end of file
diff --git a/im-uniapp/components/pop-menu/pop-menu.vue b/im-uniapp/components/pop-menu/pop-menu.vue
deleted file mode 100644
index 9677c9a..0000000
--- a/im-uniapp/components/pop-menu/pop-menu.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-	<view>
-		<view @longpress.stop="onLongPress($event)" @touchmove="onTouchMove" @touchend="onTouchEnd">
-			<slot></slot>
-		</view>
-		<view v-if="isShowMenu" class="pop-menu" @touchstart="onClose()" @contextmenu.prevent=""></view>
-		<view v-if="isShowMenu" class="menu" :style="menuStyle">
-			<view class="menu-item"  v-for="(item) in items" :key="item.key"  @click.prevent="onSelectMenu(item)">
-				<uni-icons class="menu-icon" :type="item.icon" :style="itemStyle(item)" size="22"></uni-icons>
-				<text :style="itemStyle(item)"> {{item.name}}</text>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		name: "pop-menu",
-		data() {
-			return {
-				isShowMenu : false,
-				isTouchMove: false,
-				style : ""
-			}
-		},
-		props: {
-			items: {
-				type: Array
-			}
-		},
-		methods: {
-			onLongPress(e){
-				if(this.isTouchMove){
-					// 屏幕移动时不弹出
-					return;
-				}
-				uni.getSystemInfo({
-					success: (res) => {
-						let touches = e.touches[0];
-						let style = "";
-						/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
-						if (touches.clientY > (res.windowHeight / 2)) {
-							style = `bottom:${res.windowHeight-touches.clientY}px;`;
-						} else {
-							style = `top:${touches.clientY}px;`;
-						}
-						if (touches.clientX > (res.windowWidth / 2)) {
-							style += `right:${res.windowWidth-touches.clientX}px;`;
-						} else {
-							style += `left:${touches.clientX}px;`;
-						}
-						this.menuStyle = style;
-						//
-						this.$nextTick(() => {
-							this.isShowMenu = true;
-						});
-					}
-				})
-			},
-			onTouchMove(){
-				this.onClose();
-				this.isTouchMove = true;
-			},
-			onTouchEnd(){
-				this.isTouchMove = false;
-			},
-			onSelectMenu(item) {
-				this.$emit("select", item);
-				this.isShowMenu = false;
-			},
-			onClose() {
-				this.isShowMenu = false;
-			},
-			itemStyle(item){
-				if(item.color){
-					return `color:${item.color};`
-				}
-				return `color:#4f76e6;`;
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.pop-menu {
-		position: fixed;
-		left: 0;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		width: 100%;
-		height: 100%;
-		background-color: #333;
-		z-index: 999;
-		opacity: 0.5;
-
-	}
-	
-	.menu {
-		position: fixed;
-		border: 1px solid #b4b4b4;
-		border-radius: 7px;
-		overflow: hidden;
-		background-color: #f5f6ff;
-		z-index: 1000;
-		.menu-item {
-			height: 25px;
-			min-width: 150rpx;
-			line-height: 25px;
-			font-size: 18px;
-			display: flex;
-			padding: 10px;
-			justify-content: center;
-			border-bottom: 1px solid #d0d0d8;
-			
-			.menu-icon {
-				margin-right: 10rpx;
-			}
-		}
-	}
-</style>
\ No newline at end of file
diff --git a/im-uniapp/im-var.scss b/im-uniapp/im-var.scss
new file mode 100644
index 0000000..2a06ac2
--- /dev/null
+++ b/im-uniapp/im-var.scss
@@ -0,0 +1,60 @@
+// 颜色
+$im-color-primary: #3e45d7;
+$im-color-primary-light-1: mix(#fff, $im-color-primary, 10%);
+$im-color-primary-light-2: mix(#fff, $im-color-primary, 20%);
+$im-color-primary-light-3: mix(#fff, $im-color-primary, 30%);
+$im-color-primary-light-4: mix(#fff, $im-color-primary, 40%);
+$im-color-primary-light-5: mix(#fff, $im-color-primary, 50%);
+$im-color-primary-light-6: mix(#fff, $im-color-primary, 60%);
+$im-color-primary-light-7: mix(#fff, $im-color-primary, 70%);
+$im-color-primary-light-8: mix(#fff, $im-color-primary, 80%);
+$im-color-primary-light-9: mix(#fff, $im-color-primary, 90%);
+$im-color-primary-dark-1: mix(#000, $im-color-primary, 10%);
+$im-color-primary-dark-2: mix(#000, $im-color-primary, 20%);
+$im-color-primary-dark-3: mix(#000, $im-color-primary, 30%);
+$im-color-primary-dark-4: mix(#000, $im-color-primary, 40%);
+
+$im-color-success: #18bc37;
+$im-color-warning: #f3a73f;
+$im-color-danger: #e43d33;
+$im-color-info: #8f939c;
+
+// 文字颜色
+$im-text-color: #000000;
+$im-text-color-light: #6a6a6a;  
+$im-text-color-lighter: #909399; 
+$im-text-color-lighter-extra: #c7c7c7;
+
+// 边框颜色
+$im-border: #F0F0F0;
+$im-border-light: #EDEDED;
+$im-border-lighter: #DCDCDC;
+$im-border-lighter-extra: #B9B9B9;
+
+// 文字大小
+$im-font-size: 30rpx;
+$im-font-size-small: 28rpx;
+$im-font-size-smaller: 26rpx;
+$im-font-size-smaller-extra: 24rpx;
+$im-font-size-large: 32rpx;
+$im-font-size-larger: 34rpx;
+$im-font-size-larger-extra: 36rpx;
+
+// 阴影
+$im-box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+$im-box-shadow-light:  0 2px 12px 0 rgba(0, 0, 0, 0.1);
+$im-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);
+$im-box-shadow-dark: 0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
+
+// 背景
+$im-bg: #f7f7f7;
+$im-bg-active: #f1f1f1;
+
+// 标题
+$im-title-size: 26px; 
+$im-title-size-1: 22px; 
+$im-title-size-2: 18px;
+
+$font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+
+$im-nav-bar-height: 50px;
\ No newline at end of file
diff --git a/im-uniapp/im.scss b/im-uniapp/im.scss
new file mode 100644
index 0000000..1f2856c
--- /dev/null
+++ b/im-uniapp/im.scss
@@ -0,0 +1,141 @@
+/** 原生button样式 **/
+uni-button {
+	font-size: $im-font-size !important;
+}
+uni-button[type='primary'] {
+	color: #fff !important;
+	background-color: $im-color-primary !important;
+}
+
+uni-button[type='primary'][plain] {
+	color: $im-color-primary !important;
+	border: 1px solid $im-color-primary;
+	background-color: transparent;
+}
+
+uni-button[type='warn'] {
+	color: #fff !important;
+	background-color: $im-color-danger !important;
+}
+
+uni-button[type='warn'][plain] {
+	color: $im-color-danger !important;
+	border: 1px solid $im-color-danger !important;
+	background-color: transparent !important;
+}
+
+uni-button[size='mini'] {
+	font-size: $im-font-size-smaller !important;
+}
+
+.button-hover[type='primary'] {
+	color: #fff !important;
+	background-color: $im-color-primary-dark-1 !important;
+}
+
+/** uni-ui input激活后边框、图标颜色 **/
+.uni-easyinput__content.is-focused:not(.is-input-error-border) {
+	border-color: $im-color-primary-light-2 !important;
+	
+	.content-clear-icon {
+		color: $im-color-primary-light-2 !important;	
+	}
+}
+
+/** 底部导航 **/
+.uni-tabbar-bottom .uni-tabbar {
+	box-shadow: $im-box-shadow;
+}
+
+.uni-tabbar-border {
+	display: none;
+}
+
+.segmented-control {
+	border-color: $im-color-primary !important;
+
+	.segmented-control__item--button {
+		border-color: $im-color-primary !important;
+	}
+	.segmented-control__item--button--active {
+		background-color: $im-color-primary !important;
+
+		.segmented-control__text{
+			color: #fff !important;
+		}
+	}
+	.segmented-control__text{
+		color: $im-color-primary !important;
+	}
+}
+
+.uni-radio-input {
+	//border-color: $im-color-primary !important;
+	//background-color: $im-color-primary !important;
+}
+
+.uni-section__content-title {
+	font-size: $im-font-size !important;
+	color: $im-text-color-light;
+}
+
+.uni-forms-item__label {
+	color: $im-text-color;
+	font-size: $im-font-size !important;
+}
+.uni-forms-item {
+	//margin-bottom: 8px !important;
+}
+.uni-easyinput__content-input {
+	font-size: $im-font-size !important;
+}
+.uni-easyinput__placeholder-class {
+	color: $im-text-color-lighter;
+	font-size: $im-font-size !important;;
+}
+.uni-easyinput__content-textarea {
+	font-size: $im-font-size !important;;
+}
+.uni-input-input:disabled {
+	color: $im-text-color-light;
+}
+.uni-forms-item.is-direction-top .uni-forms-item__label {
+	padding: 0 !important;
+}
+.uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
+	font-size: $im-font-size !important;
+}
+.uni-card .uni-card__content {
+	color: unset !important;
+	padding: 10px 0 !important;
+}
+.uni-tag-text--small{
+	font-size: 10px !important;
+	font-weight: bolder !important;
+}
+
+.nav-bar {
+	height: 100rpx;
+	padding: 0 20rpx;
+	display: flex;
+	align-items: center;
+	background-color: white;
+	border-bottom: 1px solid $im-border;
+
+	.nav-search {
+		flex: 1;
+	}
+
+	.nav-add {
+		cursor: pointer;
+	}
+}
+
+
+.bottom-btn {
+	margin: 40rpx 40rpx;
+
+	uni-button + uni-button {
+		margin-top: 20rpx;
+	}
+}
\ No newline at end of file
diff --git a/im-uniapp/main.js b/im-uniapp/main.js
index c4f6317..be8e65b 100644
--- a/im-uniapp/main.js
+++ b/im-uniapp/main.js
@@ -13,6 +13,10 @@ import useFriendStore from '@/store/friendStore.js'
 import useGroupStore from '@/store/groupStore.js'
 import useConfigStore from '@/store/configStore.js'
 import useUserStore from '@/store/userStore.js'
+import barGroup from '@/components/bar/bar-group'
+import arrowBar from '@/components/bar/arrow-bar'
+import btnBar from '@/components/bar/btn-bar'
+import switchBar from '@/components/bar/switch-bar'
 
 //import VConsole from 'vconsole'
 //new VConsole();
@@ -23,13 +27,14 @@ import * as recorder from './common/recorder-h5';
 // #ifndef H5
 import * as recorder from './common/recorder-app';
 // #endif
-
-
-
 export function createApp() {
   const app = createSSRApp(App)
   app.use(uviewPlus);
   app.use(pinia.createPinia());
+  app.component('bar-group', barGroup);
+  app.component('arrow-bar', arrowBar);
+  app.component('btn-bar', btnBar);
+  app.component('switch-bar', switchBar);
   app.config.globalProperties.$http = request;
   app.config.globalProperties.$wsApi = socketApi;
   app.config.globalProperties.$msgType = messageType;
@@ -38,15 +43,15 @@ export function createApp() {
   app.config.globalProperties.$date = date;
   app.config.globalProperties.$rc = recorder;
   // 初始化时再挂载store对象
-  app.config.globalProperties.$mountStore = ()=>{
-	  app.config.globalProperties.chatStore = useChatStore();
-	  app.config.globalProperties.friendStore = useFriendStore();
-	  app.config.globalProperties.groupStore = useGroupStore();
-	  app.config.globalProperties.configStore = useConfigStore();
-	  app.config.globalProperties.userStore = useUserStore();
+  app.config.globalProperties.$mountStore = () => {
+    app.config.globalProperties.chatStore = useChatStore();
+    app.config.globalProperties.friendStore = useFriendStore();
+    app.config.globalProperties.groupStore = useGroupStore();
+    app.config.globalProperties.configStore = useConfigStore();
+    app.config.globalProperties.userStore = useUserStore();
   }
   return {
     app,
-	pinia
+    pinia
   }
 }
diff --git a/im-uniapp/manifest.json b/im-uniapp/manifest.json
index bad16f3..eb44f57 100644
--- a/im-uniapp/manifest.json
+++ b/im-uniapp/manifest.json
@@ -1,32 +1,32 @@
 {
-    "name" : "盒子IM",
-    "appid" : "__UNI__69DD57A",
-    "description" : "",
-    "versionName" : "3.0.0",
-    "versionCode" : 300,
-    "transformPx" : false,
+    "name": "盒子IM",
+    "appid": "__UNI__69DD57A",
+    "description": "",
+    "versionName": "3.1.0",
+    "versionCode": 3100,
+    "transformPx": false,
     /* 5+App特有相关 */
-    "app-plus" : {
-        "usingComponents" : true,
-        "nvueStyleCompiler" : "uni-app",
-        "compilerVersion" : 3,
-        "splashscreen" : {
-            "alwaysShowBeforeRender" : true,
-            "waiting" : true,
-            "autoclose" : true,
-            "delay" : 0
+    "app-plus": {
+        "usingComponents": true,
+        "nvueStyleCompiler": "uni-app",
+        "compilerVersion": 3,
+        "splashscreen": {
+            "alwaysShowBeforeRender": true,
+            "waiting": true,
+            "autoclose": true,
+            "delay": 0
         },
         /* 模块配置 */
-        "modules" : {
-            "Camera" : {},
-            "Record" : {},
-            "Bluetooth" : {}
+        "modules": {
+            "Camera": {},
+            "Record": {},
+            "Bluetooth": {}
         },
         /* 应用发布信息 */
-        "distribute" : {
+        "distribute": {
             /* android打包配置 */
-            "android" : {
-                "permissions" : [
+            "android": {
+                "permissions": [
                     "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                     "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                     "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
@@ -45,87 +45,90 @@
                     "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\" />",
                     "<uses-permission android:name=\"android.permission.RECORD_AUDIO\" />"
                 ],
-                "abiFilters" : [ "armeabi-v7a", "arm64-v8a", "x86" ],
-                "minSdkVersion" : 21
+                "abiFilters": [
+                    "armeabi-v7a",
+                    "arm64-v8a",
+                    "x86"
+                ],
+                "minSdkVersion": 21
             },
             /* ios打包配置 */
-            "ios" : {
-                "dSYMs" : false,
-                "privacyDescription" : {
-                    "NSMicrophoneUsageDescription" : "",
-                    "NSCameraUsageDescription" : ""
+            "ios": {
+                "dSYMs": false,
+                "privacyDescription": {
+                    "NSMicrophoneUsageDescription": "",
+                    "NSCameraUsageDescription": ""
                 },
-                "idfa" : false
+                "idfa": false
             },
             /* SDK配置 */
-            "sdkConfigs" : {
-                "ad" : {},
-                "speech" : {}
+            "sdkConfigs": {
+                "ad": {},
+                "speech": {}
             },
-            "icons" : {
-                "android" : {
-                    "xhdpi" : "unpackage/res/icons/96x96.png",
-                    "hdpi" : "unpackage/res/icons/72x72.png",
-                    "xxhdpi" : "unpackage/res/icons/144x144.png",
-                    "xxxhdpi" : "unpackage/res/icons/192x192.png"
+            "icons": {
+                "android": {
+                    "xhdpi": "unpackage/res/icons/96x96.png",
+                    "hdpi": "unpackage/res/icons/72x72.png",
+                    "xxhdpi": "unpackage/res/icons/144x144.png",
+                    "xxxhdpi": "unpackage/res/icons/192x192.png"
                 },
-                "ios" : {
-                    "appstore" : "unpackage/res/icons/1024x1024.png",
-                    "ipad" : {
-                        "app" : "unpackage/res/icons/76x76.png",
-                        "app@2x" : "unpackage/res/icons/152x152.png",
-                        "notification" : "unpackage/res/icons/20x20.png",
-                        "notification@2x" : "unpackage/res/icons/40x40.png",
-                        "proapp@2x" : "unpackage/res/icons/167x167.png",
-                        "settings" : "unpackage/res/icons/29x29.png",
-                        "settings@2x" : "unpackage/res/icons/58x58.png",
-                        "spotlight" : "unpackage/res/icons/40x40.png",
-                        "spotlight@2x" : "unpackage/res/icons/80x80.png"
+                "ios": {
+                    "appstore": "unpackage/res/icons/1024x1024.png",
+                    "ipad": {
+                        "app": "unpackage/res/icons/76x76.png",
+                        "app@2x": "unpackage/res/icons/152x152.png",
+                        "notification": "unpackage/res/icons/20x20.png",
+                        "notification@2x": "unpackage/res/icons/40x40.png",
+                        "proapp@2x": "unpackage/res/icons/167x167.png",
+                        "settings": "unpackage/res/icons/29x29.png",
+                        "settings@2x": "unpackage/res/icons/58x58.png",
+                        "spotlight": "unpackage/res/icons/40x40.png",
+                        "spotlight@2x": "unpackage/res/icons/80x80.png"
                     },
-                    "iphone" : {
-                        "app@2x" : "unpackage/res/icons/120x120.png",
-                        "app@3x" : "unpackage/res/icons/180x180.png",
-                        "notification@2x" : "unpackage/res/icons/40x40.png",
-                        "notification@3x" : "unpackage/res/icons/60x60.png",
-                        "settings@2x" : "unpackage/res/icons/58x58.png",
-                        "settings@3x" : "unpackage/res/icons/87x87.png",
-                        "spotlight@2x" : "unpackage/res/icons/80x80.png",
-                        "spotlight@3x" : "unpackage/res/icons/120x120.png"
+                    "iphone": {
+                        "app@2x": "unpackage/res/icons/120x120.png",
+                        "app@3x": "unpackage/res/icons/180x180.png",
+                        "notification@2x": "unpackage/res/icons/40x40.png",
+                        "notification@3x": "unpackage/res/icons/60x60.png",
+                        "settings@2x": "unpackage/res/icons/58x58.png",
+                        "settings@3x": "unpackage/res/icons/87x87.png",
+                        "spotlight@2x": "unpackage/res/icons/80x80.png",
+                        "spotlight@3x": "unpackage/res/icons/120x120.png"
                     }
                 }
             }
         }
     },
     /* 快应用特有相关 */
-    "quickapp" : {},
+    "quickapp": {},
     /* 小程序特有相关 */
-    "mp-weixin" : {
-        "appid" : "wxda94f40bfad0262c",
-        "libVersion" : "latest",
-        "setting" : {
-            "urlCheck" : false
+    "mp-weixin": {
+        "appid": "wxda94f40bfad0262c",
+        "libVersion": "latest",
+        "setting": {
+            "urlCheck": false
         },
-        "usingComponents" : true
+        "usingComponents": true
     },
-    "mp-alipay" : {
-        "usingComponents" : true
+    "mp-alipay": {
+        "usingComponents": true
     },
-    "mp-baidu" : {
-        "usingComponents" : true
+    "mp-baidu": {
+        "usingComponents": true
     },
-    "mp-toutiao" : {
-        "usingComponents" : true
+    "mp-toutiao": {
+        "usingComponents": true
     },
-    "uniStatistics" : {
-        "enable" : false
+    "uniStatistics": {
+        "enable": false
     },
-    "vueVersion" : "3",
-    "h5" : {
-        "title" : "盒子IM",
-        "router" : {
-            "base" : "/h5/"
+    "vueVersion": "3",
+    "h5": {
+        "title": "盒子IM",
+        "router": {
+            "base": "/h5/"
         }
     }
 }
-/* ios打包配置 *//* SDK配置 */
-
+/* ios打包配置 */ /* SDK配置 */
\ No newline at end of file
diff --git a/im-uniapp/package.json b/im-uniapp/package.json
index f4368f4..2ada879 100644
--- a/im-uniapp/package.json
+++ b/im-uniapp/package.json
@@ -8,4 +8,4 @@
 		"pinyin-pro": "^3.23.1",
 		"vconsole": "^3.15.1"
 	}
-}
+}
\ No newline at end of file
diff --git a/im-uniapp/pages.json b/im-uniapp/pages.json
index 924ff42..6a499e6 100644
--- a/im-uniapp/pages.json
+++ b/im-uniapp/pages.json
@@ -1,65 +1,82 @@
 {
 	"easycom": {
-			"autoscan": true,
-			"custom": {
-				"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
-				"^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
-		    "^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
-			}
+		"autoscan": true,
+		"custom": {
+			"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
+			"^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
+			"^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
+		}
+	},
+	"pages": [
+		{
+			"path": "pages/login/login"
+		},
+		{
+			"path": "pages/register/register"
+		},
+		{
+			"path": "pages/chat/chat"
+		},
+		{
+			"path": "pages/friend/friend"
+		},
+		{
+			"path": "pages/group/group"
+		},
+		{
+			"path": "pages/mine/mine"
+		},
+		{
+			"path": "pages/common/user-info"
+		},
+		{
+			"path": "pages/chat/chat-box"
 		},
-	"pages": [{
-		"path": "pages/login/login"
-	}, {
-		"path" : "pages/register/register"
-	},{
-		"path": "pages/chat/chat"
-	}, {
-		"path": "pages/friend/friend"
-	}, {
-		"path": "pages/group/group"
-	}, {
-		"path": "pages/mine/mine"
-	}, {
-		"path": "pages/common/user-info"
-	}, {
-		"path": "pages/chat/chat-box"
-	},{
-		"path": "pages/chat/chat-private-video"
-	},{
-		"path": "pages/chat/chat-group-video"
-	}, {
-		"path": "pages/friend/friend-add"
-	}, {
-		"path": "pages/group/group-info"
-	}, {
-		"path": "pages/group/group-edit"
-	}, {
-		"path": "pages/group/group-invite"
-	}, {
-		"path": "pages/group/group-member"
-	}, {
-		"path": "pages/mine/mine-edit"
-	},{
-		"path": "pages/mine/mine-password"
-	}
+		{
+			"path": "pages/chat/chat-private-video"
+		},
+		{
+			"path": "pages/chat/chat-group-video"
+		},
+		{
+			"path": "pages/friend/friend-add"
+		},
+		{
+			"path": "pages/group/group-info"
+		},
+		{
+			"path": "pages/group/group-edit"
+		},
+		{
+			"path": "pages/group/group-invite"
+		},
+		{
+			"path": "pages/group/group-member"
+		},
+		{
+			"path": "pages/mine/mine-edit"
+		},
+		{
+			"path": "pages/mine/mine-password"
+		}
 	],
 	"globalStyle": {
 		"navigationBarTitleText": "盒子IM",
-		"navigationBarTextStyle": "black",
-		"navigationBarBackgroundColor": "#F0F0F0",
-		"backgroundColor": "#fdfdfd"
+		"navigationStyle": "custom",
+		"navigationBarBackgroundColor": "#f7f7f7",
+		"backgroundColor": "#f7f7f7"
 	},
 	"tabBar": {
 		"color": "#000000",
 		"selectedColor": "#587ff0",
 		"borderStyle": "black",
 		"backgroundColor": "#ffffff",
-		"list": [{
+		"list": [
+			{
 				"pagePath": "pages/chat/chat",
 				"iconPath": "static/tarbar/chat.png",
 				"selectedIconPath": "static/tarbar/chat_active.png",
 				"text": "消息"
-				
 			},
 			{
 				"pagePath": "pages/friend/friend",
diff --git a/im-uniapp/pages/chat/chat-box.vue b/im-uniapp/pages/chat/chat-box.vue
index 9e9bf90..add8199 100644
--- a/im-uniapp/pages/chat/chat-box.vue
+++ b/im-uniapp/pages/chat/chat-box.vue
@@ -1,27 +1,24 @@
 <template>
 	<view class="page chat-box">
-		<view class="header">
-			<text class="title">{{title}}</text>
-			<uni-icons class="btn-side right" type="more-filled" size="30" @click="onShowMore()"></uni-icons>
-		</view>
-		<view class="chat-msg" @click="switchChatTabBox('none',true)">
+		<nav-bar back more @more="onShowMore">{{ title }}</nav-bar>
+		<view class="chat-msg" @click="switchChatTabBox('none', true)">
 			<scroll-view class="scroll-box" scroll-y="true" upper-threshold="200" @scrolltoupper="onScrollToTop"
-				:scroll-into-view="'chat-item-'+scrollMsgIdx">
-				<view v-if="chat" v-for="(msgInfo,idx) in chat.messages" :key="idx">
-					<chat-message-item v-if="idx>=showMinIdx" :headImage="headImage(msgInfo)" @call="onRtCall(msgInfo)"
+				:scroll-into-view="'chat-item-' + scrollMsgIdx">
+				<view v-if="chat" v-for="(msgInfo, idx) in chat.messages" :key="idx">
+					<chat-message-item v-if="idx >= showMinIdx" :headImage="headImage(msgInfo)" @call="onRtCall(msgInfo)"
 						:showName="showName(msgInfo)" @recall="onRecallMessage" @copy="onCopyMessage"
 						@delete="onDeleteMessage" @longPressHead="onLongPressHead(msgInfo)" @download="onDownloadFile"
-						:id="'chat-item-'+idx" :msgInfo="msgInfo" :groupMembers="groupMembers">
+						:id="'chat-item-' + idx" :msgInfo="msgInfo" :groupMembers="groupMembers">
 					</chat-message-item>
 				</view>
 			</scroll-view>
 		</view>
-		<view v-if="atUserIds.length>0" class="chat-at-bar" @click="openAtBox()">
+		<view v-if="atUserIds.length > 0" class="chat-at-bar" @click="openAtBox()">
 			<view class="iconfont icon-at">:&nbsp;</view>
-			<scroll-view v-if="atUserIds.length>0" class="chat-at-scroll-box" scroll-x="true" scroll-left="120">
+			<scroll-view v-if="atUserIds.length > 0" class="chat-at-scroll-box" scroll-x="true" scroll-left="120">
 				<view class="chat-at-items">
 					<view v-for="m in atUserItems" class="chat-at-item">
-						<head-image :name="m.showNickName" :url="m.headImage" :size="50"></head-image>
+						<head-image :name="m.showNickName" :url="m.headImage" size="minier"></head-image>
 					</view>
 				</view>
 			</scroll-view>
@@ -32,19 +29,20 @@
 			<chat-record v-if="showRecord" class="chat-record" @send="onSendRecord"></chat-record>
 			<view v-else class="send-text">
 				<textarea class="send-text-area" v-model="sendText" auto-height :show-confirm-bar="false"
-					:placeholder="isReceipt?'[回执消息]':''" :adjust-position="false" @confirm="sendTextMessage()"
+					:placeholder="isReceipt ? '[回执消息]' : ''" :adjust-position="false" @confirm="sendTextMessage()"
 					@keyboardheightchange="onKeyboardheightchange" @input="onTextInput" confirm-type="send" confirm-hold
 					:hold-keyboard="true"></textarea>
 			</view>
-			<view v-if="chat && chat.type=='GROUP'" class="iconfont icon-at" @click="openAtBox()"></view>
+			<view v-if="chat && chat.type == 'GROUP'" class="iconfont icon-at" @click="openAtBox()"></view>
 			<view class="iconfont icon-icon_emoji" @click="onShowEmoChatTab()"></view>
-			<view v-if="sendText==''" class="iconfont icon-add" @click="onShowToolsChatTab()">
+			<view v-if="sendText == ''" class="iconfont icon-add" @click="onShowToolsChatTab()">
 			</view>
-			<button v-if="sendText!=''||atUserIds.length>0" class="btn-send" type="primary"
+			<button v-if="sendText != '' || atUserIds.length > 0" class="btn-send" type="primary"
 				@touchend.prevent="sendTextMessage()" size="mini">发送</button>
 		</view>
 
-		<view class="chat-tab-bar" v-show="chatTabBox!='none' || (showKeyBoard && !isH5) " :style="{height:`${keyboardHeight}px`}">
+		<view class="chat-tab-bar" v-show="chatTabBox != 'none' || (showKeyBoard && !isH5)"
+			:style="{ height: `${keyboardHeight}px` }">
 			<view v-if="chatTabBox == 'tools'" class="chat-tools">
 				<view class="chat-tools-item">
 					<image-upload :maxCount="9" sourceType="album" :onBefore="onUploadImageBefore"
@@ -74,7 +72,7 @@
 					<view class="tool-name">语音消息</view>
 				</view>
 				<view v-if="chat.type == 'GROUP'" class="chat-tools-item" @click="switchReceipt()">
-					<view class="tool-icon iconfont icon-receipt" :class="isReceipt?'active':''"></view>
+					<view class="tool-icon iconfont icon-receipt" :class="isReceipt ? 'active' : ''"></view>
 					<view class="tool-name">回执消息</view>
 				</view>
 				<!-- #ifndef MP-WEIXIN -->
@@ -93,7 +91,7 @@
 				</view>
 				<!-- #endif -->
 			</view>
-			<scroll-view v-if="chatTabBox==='emo'" class="chat-emotion" scroll-y="true">
+			<scroll-view v-if="chatTabBox === 'emo'" class="chat-emotion" scroll-y="true">
 				<view class="emotion-item-list">
 					<image class="emotion-item" :title="emoText" :src="$emo.textToPath(emoText)"
 						v-for="(emoText, i) in $emo.emoTextList" :key="i" @click="selectEmoji(emoText)" mode="aspectFit"
@@ -115,821 +113,825 @@
 </template>
 
 <script>
-	import UNI_APP from '@/.env.js';
-
-	export default {
-		data() {
-			return {
-				chat: {},
-				friend: {},
-				group: {},
-				groupMembers: [],
-				sendText: "",
-				isReceipt: false, // 是否回执消息
-				scrollMsgIdx: 0, // 滚动条定位为到哪条消息
-				chatTabBox: 'none',
-				showKeyBoard: false,
-				showRecord: false,
-				keyboardHeight: 322,
-				atUserIds: [],
-				needScrollToBottom: false, // 需要滚动到底部 
-				showMinIdx: 0, // 下标小于showMinIdx的消息不显示，否则可能很卡
-				reqQueue: [], // 请求队列
-				isSending: false, // 是否正在发送请求
-				isH5: false  // h5键盘会强制推起页面，有些地方要区别对待
-			}
-		},
-		methods: {
-			onRecorderInput() {
-				this.showRecord = true;
-				this.switchChatTabBox('none', true);
-			},
-			onKeyboardInput() {
-				this.showRecord = false;
-				this.switchChatTabBox('none', false);
-			},
-			onSendRecord(data) {
-				let msgInfo = {
-					content: JSON.stringify(data),
-					type: this.$enums.MESSAGE_TYPE.AUDIO,
-					receipt: this.isReceipt
-				}
-				// 填充对方id
-				this.fillTargetId(msgInfo, this.chat.targetId);
-				this.sendMessageRequest(msgInfo).then((m) => {
-					m.selfSend = true;
-					this.chatStore.insertMessage(m);
-					// 会话置顶
-					this.moveChatToTop();
-					// 滚动到底部
-					this.scrollToBottom();
-					this.isReceipt = false;
+import UNI_APP from '@/.env.js';
+
+export default {
+	data() {
+		return {
+			chat: {},
+			friend: {},
+			group: {},
+			groupMembers: [],
+			sendText: "",
+			isReceipt: false, // 是否回执消息
+			scrollMsgIdx: 0, // 滚动条定位为到哪条消息
+			chatTabBox: 'none',
+			showKeyBoard: false,
+			showRecord: false,
+			keyboardHeight: 322,
+			atUserIds: [],
+			needScrollToBottom: false, // 需要滚动到底部 
+			showMinIdx: 0, // 下标小于showMinIdx的消息不显示，否则可能很卡
+			reqQueue: [], // 请求队列
+			isSending: false, // 是否正在发送请求
+			isH5: false  // h5键盘会强制推起页面，有些地方要区别对待
+		}
+	},
+	methods: {
+		onRecorderInput() {
+			this.showRecord = true;
+			this.switchChatTabBox('none', true);
+		},
+		onKeyboardInput() {
+			this.showRecord = false;
+			this.switchChatTabBox('none', false);
+		},
+		onSendRecord(data) {
+			let msgInfo = {
+				content: JSON.stringify(data),
+				type: this.$enums.MESSAGE_TYPE.AUDIO,
+				receipt: this.isReceipt
+			}
+			// 填充对方id
+			this.fillTargetId(msgInfo, this.chat.targetId);
+			this.sendMessageRequest(msgInfo).then((m) => {
+				m.selfSend = true;
+				this.chatStore.insertMessage(m);
+				// 会话置顶
+				this.moveChatToTop();
+				// 滚动到底部
+				this.scrollToBottom();
+				this.isReceipt = false;
 
+			})
+		},
+		onRtCall(msgInfo) {
+			if (msgInfo.type == this.$enums.MESSAGE_TYPE.ACT_RT_VOICE) {
+				this.onPriviteVoice();
+			} else if (msgInfo.type == this.$enums.MESSAGE_TYPE.ACT_RT_VIDEO) {
+				this.onPriviteVideo();
+			}
+		},
+		onPriviteVideo() {
+			const friendInfo = encodeURIComponent(JSON.stringify(this.friend));
+			uni.navigateTo({
+				url: `/pages/chat/chat-private-video?mode=video&friend=${friendInfo}&isHost=true`
+			})
+		},
+		onPriviteVoice() {
+			const friendInfo = encodeURIComponent(JSON.stringify(this.friend));
+			uni.navigateTo({
+				url: `/pages/chat/chat-private-video?mode=voice&friend=${friendInfo}&isHost=true`
+			})
+		},
+		onGroupVideo() {
+			// 邀请成员发起通话
+			let ids = [this.mine.id];
+			this.$refs.selBox.init(ids, ids);
+			this.$refs.selBox.open();
+		},
+		onInviteOk(ids) {
+			if (ids.length < 2) {
+				return;
+			}
+			let users = [];
+			ids.forEach(id => {
+				let m = this.groupMembers.find(m => m.userId == id);
+				// 只取部分字段,压缩url长度
+				users.push({
+					id: m.userId,
+					nickName: m.showNickName,
+					headImage: m.headImage,
+					isCamera: false,
+					isMicroPhone: true
 				})
-			},
-			onRtCall(msgInfo) {
-				if (msgInfo.type == this.$enums.MESSAGE_TYPE.ACT_RT_VOICE) {
-					this.onPriviteVoice();
-				} else if (msgInfo.type == this.$enums.MESSAGE_TYPE.ACT_RT_VIDEO) {
-					this.onPriviteVideo();
-				}
-			},
-			onPriviteVideo() {
-				const friendInfo = encodeURIComponent(JSON.stringify(this.friend));
-				uni.navigateTo({
-					url: `/pages/chat/chat-private-video?mode=video&friend=${friendInfo}&isHost=true`
-				})
-			},
-			onPriviteVoice() {
-				const friendInfo = encodeURIComponent(JSON.stringify(this.friend));
-				uni.navigateTo({
-					url: `/pages/chat/chat-private-video?mode=voice&friend=${friendInfo}&isHost=true`
-				})
-			},
-			onGroupVideo() {
-				// 邀请成员发起通话
-				let ids = [this.mine.id];
-				this.$refs.selBox.init(ids, ids);
-				this.$refs.selBox.open();
-			},
-			onInviteOk(ids) {
-				if (ids.length < 2) {
-					return;
-				}
-				let users = [];
-				ids.forEach(id => {
-					let m = this.groupMembers.find(m => m.userId == id);
-					// 只取部分字段,压缩url长度
-					users.push({
-						id: m.userId,
-						nickName: m.showNickName,
-						headImage: m.headImage,
-						isCamera: false,
-						isMicroPhone: true
-					})
-				})
-				const groupId = this.group.id;
-				const inviterId = this.mine.id;
-				const userInfos = encodeURIComponent(JSON.stringify(users));
-				uni.navigateTo({
-					url: `/pages/chat/chat-group-video?groupId=${groupId}&isHost=true
+			})
+			const groupId = this.group.id;
+			const inviterId = this.mine.id;
+			const userInfos = encodeURIComponent(JSON.stringify(users));
+			uni.navigateTo({
+				url: `/pages/chat/chat-group-video?groupId=${groupId}&isHost=true
 						&inviterId=${inviterId}&userInfos=${userInfos}`
-				})
-			},
-			moveChatToTop() {
-				let chatIdx = this.chatStore.findChatIdx(this.chat);
-				this.chatStore.moveTop(chatIdx);
-			},
-			switchReceipt() {
-				this.isReceipt = !this.isReceipt;
-			},
-			openAtBox() {
-				this.$refs.atBox.init(this.atUserIds);
-				this.$refs.atBox.open();
-			},
-			onAtComplete(atUserIds) {
-				this.atUserIds = atUserIds;
-			},
-			onLongPressHead(msgInfo) {
-				if (!msgInfo.selfSend && this.chat.type == "GROUP" && this.atUserIds.indexOf(msgInfo.sendId) < 0) {
-					this.atUserIds.push(msgInfo.sendId);
-				}
-			},
-			headImage(msgInfo) {
-				if (this.chat.type == 'GROUP') {
-					let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId);
-					return member ? member.headImage : "";
-				} else {
-					return msgInfo.selfSend ? this.mine.headImageThumb : this.chat.headImage
-				}
-			},
-			showName(msgInfo) {
-				if (this.chat.type == 'GROUP') {
-					let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId);
-					return member ? member.showNickName : "";
-				} else {
-					return msgInfo.selfSend ? this.mine.nickName : this.chat.showName
-				}
-			},
-			sendTextMessage() {
-				if (!this.sendText.trim() && this.atUserIds.length == 0) {
-					return uni.showToast({
-						title: "不能发送空白信息",
-						icon: "none"
-					});
-				}
-				let receiptText = this.isReceipt ? "【回执消息】" : "";
-				let atText = this.createAtText();
-				let msgInfo = {
-					content: receiptText + this.sendText + atText,
-					atUserIds: this.atUserIds,
-					receipt: this.isReceipt,
-					type: 0
-				}
-				this.sendText = "";
-				// 填充对方id
-				this.fillTargetId(msgInfo, this.chat.targetId);
-				this.sendMessageRequest(msgInfo).then((m) => {
-					m.selfSend = true;
-					this.chatStore.insertMessage(m);
-					// 会话置顶
-					this.moveChatToTop();
-				}).finally(() => {
-					// 滚动到底部
-					this.scrollToBottom();
-					// 清空@用户列表
-					this.atUserIds = [];
-					this.isReceipt = false;
+			})
+		},
+		moveChatToTop() {
+			let chatIdx = this.chatStore.findChatIdx(this.chat);
+			this.chatStore.moveTop(chatIdx);
+		},
+		switchReceipt() {
+			this.isReceipt = !this.isReceipt;
+		},
+		openAtBox() {
+			this.$refs.atBox.init(this.atUserIds);
+			this.$refs.atBox.open();
+		},
+		onAtComplete(atUserIds) {
+			this.atUserIds = atUserIds;
+		},
+		onLongPressHead(msgInfo) {
+			if (!msgInfo.selfSend && this.chat.type == "GROUP" && this.atUserIds.indexOf(msgInfo.sendId) < 0) {
+				this.atUserIds.push(msgInfo.sendId);
+			}
+		},
+		headImage(msgInfo) {
+			if (this.chat.type == 'GROUP') {
+				let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId);
+				return member ? member.headImage : "";
+			} else {
+				return msgInfo.selfSend ? this.mine.headImageThumb : this.chat.headImage
+			}
+		},
+		showName(msgInfo) {
+			if (this.chat.type == 'GROUP') {
+				let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId);
+				return member ? member.showNickName : "";
+			} else {
+				return msgInfo.selfSend ? this.mine.nickName : this.chat.showName
+			}
+		},
+		sendTextMessage() {
+			if (!this.sendText.trim() && this.atUserIds.length == 0) {
+				return uni.showToast({
+					title: "不能发送空白信息",
+					icon: "none"
 				});
-			},
-			createAtText() {
-				let atText = "";
-				this.atUserIds.forEach((id) => {
-					if (id == -1) {
-						atText += ` @全体成员`;
-					} else {
-						let member = this.groupMembers.find((m) => m.userId == id);
-						if (member) {
-							atText += ` @${member.showNickName}`;
-						}
-					}
-				})
-				return atText;
-			},
-			fillTargetId(msgInfo, targetId) {
-				if (this.chat.type == "GROUP") {
-					msgInfo.groupId = targetId;
+			}
+			let receiptText = this.isReceipt ? "【回执消息】" : "";
+			let atText = this.createAtText();
+			let msgInfo = {
+				content: receiptText + this.sendText + atText,
+				atUserIds: this.atUserIds,
+				receipt: this.isReceipt,
+				type: 0
+			}
+			this.sendText = "";
+			// 填充对方id
+			this.fillTargetId(msgInfo, this.chat.targetId);
+			this.sendMessageRequest(msgInfo).then((m) => {
+				m.selfSend = true;
+				this.chatStore.insertMessage(m);
+				// 会话置顶
+				this.moveChatToTop();
+			}).finally(() => {
+				// 滚动到底部
+				this.scrollToBottom();
+				// 清空@用户列表
+				this.atUserIds = [];
+				this.isReceipt = false;
+			});
+		},
+		createAtText() {
+			let atText = "";
+			this.atUserIds.forEach((id) => {
+				if (id == -1) {
+					atText += ` @全体成员`;
 				} else {
-					msgInfo.recvId = targetId;
-				}
-			},
-			scrollToBottom() {
-				let size = this.messageSize;
-				if (size > 0) {
-					this.scrollToMsgIdx(size - 1);
-				}
-			},
-			scrollToMsgIdx(idx) {
-				// 如果scrollMsgIdx值没变化，滚动条不会移动
-				if (idx == this.scrollMsgIdx && idx > 0) {
-					this.$nextTick(() => {
-						// 先滚动到上一条
-						this.scrollMsgIdx = idx - 1;
-						// 再滚动目标位置
-						this.scrollToMsgIdx(idx);
-					});
-					return;
+					let member = this.groupMembers.find((m) => m.userId == id);
+					if (member) {
+						atText += ` @${member.showNickName}`;
+					}
 				}
+			})
+			return atText;
+		},
+		fillTargetId(msgInfo, targetId) {
+			if (this.chat.type == "GROUP") {
+				msgInfo.groupId = targetId;
+			} else {
+				msgInfo.recvId = targetId;
+			}
+		},
+		scrollToBottom() {
+			let size = this.messageSize;
+			if (size > 0) {
+				this.scrollToMsgIdx(size - 1);
+			}
+		},
+		scrollToMsgIdx(idx) {
+			// 如果scrollMsgIdx值没变化，滚动条不会移动
+			if (idx == this.scrollMsgIdx && idx > 0) {
 				this.$nextTick(() => {
-					this.scrollMsgIdx = idx;
+					// 先滚动到上一条
+					this.scrollMsgIdx = idx - 1;
+					// 再滚动目标位置
+					this.scrollToMsgIdx(idx);
 				});
+				return;
+			}
+			this.$nextTick(() => {
+				this.scrollMsgIdx = idx;
+			});
 
-			},
-			onShowEmoChatTab() {
-				this.showRecord = false;
-				this.switchChatTabBox('emo', true)
-			},
-			onShowToolsChatTab() {
-				this.showRecord = false;
-				this.switchChatTabBox('tools', true)
-			},
-			switchChatTabBox(chatTabBox, hideKeyBoard) {
-				this.chatTabBox = chatTabBox;
-				if (hideKeyBoard) {
-					uni.hideKeyboard();
-					this.showKeyBoard = false;
-				}
-			},
-			selectEmoji(emoText) {
-				this.sendText += `#${emoText};`;
-			},
-			onKeyboardheightchange(e) {
-				if (e.detail.height > 0) {
-					this.showKeyBoard = true;
-					this.switchChatTabBox('none', false)
-					this.keyboardHeight = this.rpxTopx(e.detail.height);
-					this.scrollToBottom();
-				} else {
-					this.showKeyBoard = false;
-				}
-			},
-			onUploadImageBefore(file) {
-				let data = {
-					originUrl: file.path,
-					thumbUrl: file.path
-				}
-				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: this.$enums.MESSAGE_TYPE.IMAGE,
-					readedCount: 0,
-					loadStatus: "loading",
-					status: this.$enums.MESSAGE_STATUS.UNSEND
-				}
-				// 填充对方id
-				this.fillTargetId(msgInfo, this.chat.targetId);
-				// 插入消息
-				this.chatStore.insertMessage(msgInfo);
-				// 会话置顶
-				this.moveChatToTop();
-				// 借助file对象保存
-				file.msgInfo = msgInfo;
-				// 滚到最低部
+		},
+		onShowEmoChatTab() {
+			this.showRecord = false;
+			this.switchChatTabBox('emo', true)
+		},
+		onShowToolsChatTab() {
+			this.showRecord = false;
+			this.switchChatTabBox('tools', true)
+		},
+		switchChatTabBox(chatTabBox, hideKeyBoard) {
+			this.chatTabBox = chatTabBox;
+			if (hideKeyBoard) {
+				uni.hideKeyboard();
+				this.showKeyBoard = false;
+			}
+		},
+		selectEmoji(emoText) {
+			this.sendText += `#${emoText};`;
+		},
+		onKeyboardheightchange(e) {
+			if (e.detail.height > 0) {
+				this.showKeyBoard = true;
+				this.switchChatTabBox('none', false)
+				this.keyboardHeight = this.rpxTopx(e.detail.height);
 				this.scrollToBottom();
-				return true;
-			},
-			onUploadImageSuccess(file, res) {
-				let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
-				msgInfo.content = JSON.stringify(res.data);
-				msgInfo.receipt = this.isReceipt
-				this.sendMessageRequest(msgInfo).then((m) => {
-					msgInfo.loadStatus = 'ok';
-					msgInfo.id = m.id;
-					this.isReceipt = false;
-					this.chatStore.insertMessage(msgInfo);
-				})
-			},
-			onUploadImageFail(file, err) {
-				let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
-				msgInfo.loadStatus = 'fail';
-				this.chatStore.insertMessage(msgInfo);
-			},
-			onUploadFileBefore(file) {
-				let data = {
-					name: file.name,
-					size: file.size,
-					url: file.path
-				}
-				let msgInfo = {
-					id: 0,
-					tmpId: this.generateId(),
-					sendId: this.mine.id,
-					content: JSON.stringify(data),
-					sendTime: new Date().getTime(),
-					selfSend: true,
-					type: this.$enums.MESSAGE_TYPE.FILE,
-					readedCount: 0,
-					loadStatus: "loading",
-					status: this.$enums.MESSAGE_STATUS.UNSEND
-				}
-				// 填充对方id
-				this.fillTargetId(msgInfo, this.chat.targetId);
-				// 插入消息
+			} else {
+				this.showKeyBoard = false;
+			}
+		},
+		onUploadImageBefore(file) {
+			let data = {
+				originUrl: file.path,
+				thumbUrl: file.path
+			}
+			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: this.$enums.MESSAGE_TYPE.IMAGE,
+				readedCount: 0,
+				loadStatus: "loading",
+				status: this.$enums.MESSAGE_STATUS.UNSEND
+			}
+			// 填充对方id
+			this.fillTargetId(msgInfo, this.chat.targetId);
+			// 插入消息
+			this.chatStore.insertMessage(msgInfo);
+			// 会话置顶
+			this.moveChatToTop();
+			// 借助file对象保存
+			file.msgInfo = msgInfo;
+			// 滚到最低部
+			this.scrollToBottom();
+			return true;
+		},
+		onUploadImageSuccess(file, res) {
+			let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
+			msgInfo.content = JSON.stringify(res.data);
+			msgInfo.receipt = this.isReceipt
+			this.sendMessageRequest(msgInfo).then((m) => {
+				msgInfo.loadStatus = 'ok';
+				msgInfo.id = m.id;
+				this.isReceipt = false;
 				this.chatStore.insertMessage(msgInfo);
-				// 会话置顶
-				this.moveChatToTop();
-				// 借助file对象保存
-				file.msgInfo = msgInfo;
-				// 滚到最低部
-				this.scrollToBottom();
-				return true;
-			},
-			onUploadFileSuccess(file, res) {
-				let data = {
-					name: file.name,
-					size: file.size,
-					url: res.data
-				}
-				let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
-				msgInfo.content = JSON.stringify(data);
-				msgInfo.receipt = this.isReceipt
-				this.sendMessageRequest(msgInfo).then((m) => {
-					msgInfo.loadStatus = 'ok';
-					msgInfo.id = m.id;
-					this.isReceipt = false;
-					this.chatStore.insertMessage(msgInfo);
-				})
-			},
-			onUploadFileFail(file, res) {
-				let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
-				msgInfo.loadStatus = 'fail';
+			})
+		},
+		onUploadImageFail(file, err) {
+			let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
+			msgInfo.loadStatus = 'fail';
+			this.chatStore.insertMessage(msgInfo);
+		},
+		onUploadFileBefore(file) {
+			let data = {
+				name: file.name,
+				size: file.size,
+				url: file.path
+			}
+			let msgInfo = {
+				id: 0,
+				tmpId: this.generateId(),
+				sendId: this.mine.id,
+				content: JSON.stringify(data),
+				sendTime: new Date().getTime(),
+				selfSend: true,
+				type: this.$enums.MESSAGE_TYPE.FILE,
+				readedCount: 0,
+				loadStatus: "loading",
+				status: this.$enums.MESSAGE_STATUS.UNSEND
+			}
+			// 填充对方id
+			this.fillTargetId(msgInfo, this.chat.targetId);
+			// 插入消息
+			this.chatStore.insertMessage(msgInfo);
+			// 会话置顶
+			this.moveChatToTop();
+			// 借助file对象保存
+			file.msgInfo = msgInfo;
+			// 滚到最低部
+			this.scrollToBottom();
+			return true;
+		},
+		onUploadFileSuccess(file, res) {
+			let data = {
+				name: file.name,
+				size: file.size,
+				url: res.data
+			}
+			let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
+			msgInfo.content = JSON.stringify(data);
+			msgInfo.receipt = this.isReceipt
+			this.sendMessageRequest(msgInfo).then((m) => {
+				msgInfo.loadStatus = 'ok';
+				msgInfo.id = m.id;
+				this.isReceipt = false;
 				this.chatStore.insertMessage(msgInfo);
-			},
-			onDeleteMessage(msgInfo) {
-				uni.showModal({
-					title: '删除消息',
-					content: '确认删除消息?',
-					success: (res) => {
-						if (!res.cancel) {
-							this.chatStore.deleteMessage(msgInfo);
-							uni.showToast({
-								title: "删除成功",
-								icon: "none"
-							})
-						}
-					}
-				})
-			},
-			onRecallMessage(msgInfo) {
-				uni.showModal({
-					title: '撤回消息',
-					content: '确认撤回消息?',
-					success: (res) => {
-						if (!res.cancel) {
-							let url = `/message/${this.chat.type.toLowerCase()}/recall/${msgInfo.id}`
-							this.$http({
-								url: url,
-								method: 'DELETE'
-							}).then(() => {
-								msgInfo = JSON.parse(JSON.stringify(msgInfo));
-								msgInfo.type = this.$enums.MESSAGE_TYPE.RECALL;
-								msgInfo.content = '你撤回了一条消息';
-								msgInfo.status = this.$enums.MESSAGE_STATUS.RECALL;
-								this.chatStore.insertMessage(msgInfo);
-							})
-						}
-					}
-				})
-			},
-			onCopyMessage(msgInfo) {
-				uni.setClipboardData({
-					data: msgInfo.content,
-					success: () => {
-						uni.showToast({ title: '已复制', icon: 'none' });
-					},
-					fail: () => {
-						uni.showToast({ title: '复制失败', icon: 'none' });
-					}
-				});
-			},
-			onDownloadFile(msgInfo) {
-				let url = JSON.parse(msgInfo.content).url;
-				uni.downloadFile({
-					url: url,
-					success(res) {
-						if (res.statusCode === 200) {
-							var filePath = encodeURI(res.tempFilePath);
-							uni.openDocument({
-								filePath: filePath,
-								showMenu: true
-							});
-						}
-					},
-					fail(e) {
+			})
+		},
+		onUploadFileFail(file, res) {
+			let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
+			msgInfo.loadStatus = 'fail';
+			this.chatStore.insertMessage(msgInfo);
+		},
+		onDeleteMessage(msgInfo) {
+			uni.showModal({
+				title: '删除消息',
+				content: '确认删除消息?',
+				success: (res) => {
+					if (!res.cancel) {
+						this.chatStore.deleteMessage(msgInfo);
 						uni.showToast({
-							title: "文件下载失败",
+							title: "删除成功",
 							icon: "none"
 						})
 					}
-				});
-			},
-			onScrollToTop() {
-				if (this.showMinIdx == 0) {
-					console.log("消息已滚动到顶部")
-					return;
 				}
-				//  #ifndef H5
-				// 防止滚动条定格在顶部，不能一直往上滚
-				this.scrollToMsgIdx(this.showMinIdx);
-				// #endif
-				// 多展示0条信息
-				this.showMinIdx = this.showMinIdx > 20 ? this.showMinIdx - 20 : 0;
-			},
-			onShowMore() {
-				if (this.chat.type == "GROUP") {
-					uni.navigateTo({
-						url: "/pages/group/group-info?id=" + this.group.id
-					})
-				} else {
-					uni.navigateTo({
-						url: "/pages/common/user-info?id=" + this.friend.id
-					})
+			})
+		},
+		onRecallMessage(msgInfo) {
+			uni.showModal({
+				title: '撤回消息',
+				content: '确认撤回消息?',
+				success: (res) => {
+					if (!res.cancel) {
+						let url = `/message/${this.chat.type.toLowerCase()}/recall/${msgInfo.id}`
+						this.$http({
+							url: url,
+							method: 'DELETE'
+						}).then(() => {
+							msgInfo = JSON.parse(JSON.stringify(msgInfo));
+							msgInfo.type = this.$enums.MESSAGE_TYPE.RECALL;
+							msgInfo.content = '你撤回了一条消息';
+							msgInfo.status = this.$enums.MESSAGE_STATUS.RECALL;
+							this.chatStore.insertMessage(msgInfo);
+						})
+					}
 				}
-			},
-			onTextInput(e) {
-				let idx = e.detail.cursor - 1;
-				if (this.chat.type == 'GROUP' && e.detail.value[idx] == '@') {
-					this.openAtBox();
-					let sendText = e.detail.value.replace("@", '');
-					this.$nextTick(() => {
-						this.sendText = sendText;
+			})
+		},
+		onCopyMessage(msgInfo) {
+			uni.setClipboardData({
+				data: msgInfo.content,
+				success: () => {
+					uni.showToast({ title: '已复制', icon: 'none' });
+				},
+				fail: () => {
+					uni.showToast({ title: '复制失败', icon: 'none' });
+				}
+			});
+		},
+		onDownloadFile(msgInfo) {
+			let url = JSON.parse(msgInfo.content).url;
+			uni.downloadFile({
+				url: url,
+				success(res) {
+					if (res.statusCode === 200) {
+						var filePath = encodeURI(res.tempFilePath);
+						uni.openDocument({
+							filePath: filePath,
+							showMenu: true
+						});
+					}
+				},
+				fail(e) {
+					uni.showToast({
+						title: "文件下载失败",
+						icon: "none"
 					})
 				}
-			},
-			loadReaded(fid) {
-				this.$http({
-					url: `/message/private/maxReadedId?friendId=${fid}`,
-					method: 'get'
-				}).then((id) => {
-					this.chatStore.readedMessage({
-						friendId: fid,
-						maxId: id
-					});
-				});
-			},
-			readedMessage() {
-				if (this.unreadCount == 0) {
-					return;
-				}
-				let url = ""
-				if (this.chat.type == "GROUP") {
-					url = `/message/group/readed?groupId=${this.chat.targetId}`
-				} else {
-					url = `/message/private/readed?friendId=${this.chat.targetId}`
-				}
-				this.$http({
-					url: url,
-					method: 'PUT'
-				}).then(() => {
-					this.chatStore.resetUnreadCount(this.chat)
-					this.scrollToBottom();
+			});
+		},
+		onScrollToTop() {
+			if (this.showMinIdx == 0) {
+				console.log("消息已滚动到顶部")
+				return;
+			}
+			//  #ifndef H5
+			// 防止滚动条定格在顶部，不能一直往上滚
+			this.scrollToMsgIdx(this.showMinIdx);
+			// #endif
+			// 多展示0条信息
+			this.showMinIdx = this.showMinIdx > 20 ? this.showMinIdx - 20 : 0;
+		},
+		onShowMore() {
+			if (this.chat.type == "GROUP") {
+				uni.navigateTo({
+					url: "/pages/group/group-info?id=" + this.group.id
 				})
-			},
-			loadGroup(groupId) {
-				this.$http({
-					url: `/group/find/${groupId}`,
-					method: 'GET'
-				}).then((group) => {
-					this.group = group;
-					this.chatStore.updateChatFromGroup(group);
-					this.groupStore.updateGroup(group);
-				});
-
-				this.$http({
-					url: `/group/members/${groupId}`,
-					method: 'GET'
-				}).then((groupMembers) => {
-					this.groupMembers = groupMembers;
+			} else {
+				uni.navigateTo({
+					url: "/pages/common/user-info?id=" + this.friend.id
+				})
+			}
+		},
+		onTextInput(e) {
+			let idx = e.detail.cursor - 1;
+			if (this.chat.type == 'GROUP' && e.detail.value[idx] == '@') {
+				this.openAtBox();
+				let sendText = e.detail.value.replace("@", '');
+				this.$nextTick(() => {
+					this.sendText = sendText;
+				})
+			}
+		},
+		loadReaded(fid) {
+			this.$http({
+				url: `/message/private/maxReadedId?friendId=${fid}`,
+				method: 'get'
+			}).then((id) => {
+				this.chatStore.readedMessage({
+					friendId: fid,
+					maxId: id
 				});
-			},
-			loadFriend(friendId) {
-				// 获取对方最新信息
+			});
+		},
+		readedMessage() {
+			if (this.unreadCount == 0) {
+				return;
+			}
+			let url = ""
+			if (this.chat.type == "GROUP") {
+				url = `/message/group/readed?groupId=${this.chat.targetId}`
+			} else {
+				url = `/message/private/readed?friendId=${this.chat.targetId}`
+			}
+			this.$http({
+				url: url,
+				method: 'PUT'
+			}).then(() => {
+				this.chatStore.resetUnreadCount(this.chat)
+				this.scrollToBottom();
+			})
+		},
+		loadGroup(groupId) {
+			this.$http({
+				url: `/group/find/${groupId}`,
+				method: 'GET'
+			}).then((group) => {
+				this.group = group;
+				this.chatStore.updateChatFromGroup(group);
+				this.groupStore.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.chatStore.updateChatFromFriend(friend);
+				this.friendStore.updateFriend(friend);
+			})
+		},
+		rpxTopx(rpx) {
+			// px转换成rpx
+			let info = uni.getSystemInfoSync()
+			let px = info.windowWidth * rpx / 750;
+			return Math.floor(rpx);
+		},
+		sendMessageRequest(msgInfo) {
+			return new Promise((resolve, reject) => {
+				// 请求入队列，防止请求"后发先至"，导致消息错序
+				this.reqQueue.push({ msgInfo, resolve, reject });
+				this.processReqQueue();
+			})
+		},
+		processReqQueue() {
+			if (this.reqQueue.length && !this.isSending) {
+				this.isSending = true;
+				const reqData = this.reqQueue.shift();
 				this.$http({
-					url: `/user/find/${friendId}`,
-					method: 'GET'
-				}).then((friend) => {
-					this.friend = friend;
-					this.chatStore.updateChatFromFriend(friend);
-					this.friendStore.updateFriend(friend);
-				})
-			},
-			rpxTopx(rpx) {
-				// px转换成rpx
-				let info = uni.getSystemInfoSync()
-				let px = info.windowWidth * rpx / 750;
-				return Math.floor(rpx);
-			},
-			sendMessageRequest(msgInfo) {
-				return new Promise((resolve, reject) => {
-					// 请求入队列，防止请求"后发先至"，导致消息错序
-					this.reqQueue.push({ msgInfo, resolve, reject });
+					url: this.messageAction,
+					method: 'post',
+					data: reqData.msgInfo
+				}).then((res) => {
+					reqData.resolve(res)
+				}).catch((e) => {
+					reqData.reject(e)
+				}).finally(() => {
+					this.isSending = false;
+					// 发送下一条请求
 					this.processReqQueue();
 				})
-			},
-			processReqQueue() {
-				if (this.reqQueue.length && !this.isSending) {
-					this.isSending = true;
-					const reqData = this.reqQueue.shift();
-					this.$http({
-						url: this.messageAction,
-						method: 'post',
-						data: reqData.msgInfo
-					}).then((res) => {
-						reqData.resolve(res)
-					}).catch((e) => {
-						reqData.reject(e)
-					}).finally(() => {
-						this.isSending = false;
-						// 发送下一条请求
-						this.processReqQueue();
-					})
-				}
-			},
-			listenKeyBoardForH5() {
-				// 由于H5无法触发TextArea的@keyboardheightchange事件，所以通过
-				// 监听屏幕高度变化来实现键盘监听
-				let initHeight = window.innerHeight;
-				window.addEventListener('resize', () => {
-					let keyboardHeight = initHeight - window.innerHeight;
-					if (keyboardHeight > 0) {
-						this.keyboardHeight = keyboardHeight - 20;
-						this.showKeyBoard = true;
-						this.switchChatTabBox('none', false)
-						this.scrollToBottom();
-					} else {
-						this.showKeyBoard = false;
-					}
-				});
-			},
-			generateId() {
-				// 生成临时id
-				return String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));
-			}
-		},
-		computed: {
-			mine() {
-				return this.userStore.userInfo;
-			},
-			title() {
-				if (!this.chat) {
-					return "";
-				}
-				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`;
-			},
-			messageSize() {
-				if (!this.chat || !this.chat.messages) {
-					return 0;
+			}
+		},
+		listenKeyBoardForH5() {
+			// 由于H5无法触发TextArea的@keyboardheightchange事件，所以通过
+			// 监听屏幕高度变化来实现键盘监听
+			let initHeight = window.innerHeight;
+			window.addEventListener('resize', () => {
+				let keyboardHeight = initHeight - window.innerHeight;
+				if (keyboardHeight > 0) {
+					this.keyboardHeight = keyboardHeight - 20;
+					this.showKeyBoard = true;
+					this.switchChatTabBox('none', false)
+					this.scrollToBottom();
+				} else {
+					this.showKeyBoard = false;
 				}
-				return this.chat.messages.length;
-			},
-			unreadCount() {
-				if (!this.chat || !this.chat.unreadCount) {
-					return 0;
+			});
+		},
+		generateId() {
+			// 生成临时id
+			return String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));
+		}
+	},
+	computed: {
+		mine() {
+			return this.userStore.userInfo;
+		},
+		title() {
+			if (!this.chat) {
+				return "";
+			}
+			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`;
+		},
+		messageSize() {
+			if (!this.chat || !this.chat.messages) {
+				return 0;
+			}
+			return this.chat.messages.length;
+		},
+		unreadCount() {
+			if (!this.chat || !this.chat.unreadCount) {
+				return 0;
+			}
+			return this.chat.unreadCount;
+		},
+		atUserItems() {
+			let atUsers = [];
+			this.atUserIds.forEach((id) => {
+				if (id == -1) {
+					atUsers.push({
+						id: -1,
+						showNickName: "全体成员"
+					})
+					return;
 				}
-				return this.chat.unreadCount;
-			},
-			atUserItems() {
-				let atUsers = [];
-				this.atUserIds.forEach((id) => {
-					if (id == -1) {
-						atUsers.push({
-							id: -1,
-							showNickName: "全体成员"
-						})
-						return;
-					}
-					let member = this.groupMembers.find((m) => m.userId == id);
-					if (member) {
-						atUsers.push(member);
-					}
-				})
-				return atUsers;
-			}
-		},
-		watch: {
-			messageSize: function(newSize, oldSize) {
-				// 接收到消息时滚动到底部
-				if (newSize > oldSize) {
-					let pages = getCurrentPages();
-					let curPage = pages[pages.length - 1].route;
-					if (curPage == "pages/chat/chat-box") {
-						this.scrollToBottom();
-					} else {
-						this.needScrollToBottom = true;
-					}
+				let member = this.groupMembers.find((m) => m.userId == id);
+				if (member) {
+					atUsers.push(member);
 				}
-			},
-			unreadCount: {
-				handler(newCount, oldCount) {
-					if (newCount > 0) {
-						// 消息已读
-						this.readedMessage()
-					}
+			})
+			return atUsers;
+		}
+	},
+	watch: {
+		messageSize: function (newSize, oldSize) {
+			// 接收到消息时滚动到底部
+			if (newSize > oldSize) {
+				let pages = getCurrentPages();
+				let curPage = pages[pages.length - 1].route;
+				if (curPage == "pages/chat/chat-box") {
+					this.scrollToBottom();
+				} else {
+					this.needScrollToBottom = true;
 				}
 			}
 		},
-		onLoad(options) {
-			// #ifdef H5
-				this.isH5 = true;
-				this.listenKeyBoardForH5();
-			// #endif
-			// 聊天数据
-			this.chat = this.chatStore.chats[options.chatIdx];
-			// 初始状态只显示20条消息
-			let size = this.messageSize;
-			this.showMinIdx = size > 20 ? size - 20 : 0;
-			// 消息已读
-			this.readedMessage()
-			// 加载好友或群聊信息
-			if (this.chat.type == "GROUP") {
-				this.loadGroup(this.chat.targetId);
-			} else {
-				this.loadFriend(this.chat.targetId);
-				this.loadReaded(this.chat.targetId)
-			}
-			// 激活当前会话
-			this.chatStore.activeChat(options.chatIdx);
-			// 复位回执消息
-			this.isReceipt = false;
-		},
-		onShow() {
-			if (this.needScrollToBottom) {
-				// 页面滚到底部
-				this.scrollToBottom();
-				this.needScrollToBottom = false;
+		unreadCount: {
+			handler(newCount, oldCount) {
+				if (newCount > 0) {
+					// 消息已读
+					this.readedMessage()
+				}
 			}
 		}
+	},
+	onLoad(options) {
+		// #ifdef H5
+		this.isH5 = true;
+		this.listenKeyBoardForH5();
+		// #endif
+		// 聊天数据
+		this.chat = this.chatStore.chats[options.chatIdx];
+		// 初始状态只显示20条消息
+		let size = this.messageSize;
+		this.showMinIdx = size > 20 ? size - 20 : 0;
+		// 消息已读
+		this.readedMessage()
+		// 加载好友或群聊信息
+		if (this.chat.type == "GROUP") {
+			this.loadGroup(this.chat.targetId);
+		} else {
+			this.loadFriend(this.chat.targetId);
+			this.loadReaded(this.chat.targetId)
+		}
+		// 激活当前会话
+		this.chatStore.activeChat(options.chatIdx);
+		// 复位回执消息
+		this.isReceipt = false;
+	},
+	onShow() {
+		if (this.needScrollToBottom) {
+			// 页面滚到底部
+			this.scrollToBottom();
+			this.needScrollToBottom = false;
+		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.chat-box {
-		position: relative;
-		border: #dddddd solid 1px;
-		display: flex;
-		flex-direction: column;
+.chat-box {
+	position: relative;
+	display: flex;
+	flex-direction: column;
 
-		.header {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			height: 60rpx;
-			padding: 5px;
-			background-color: #f8f8f8;
-			line-height: 50px;
-			font-size: 36rpx;
-			border: #dddddd solid 1px;
-
-
-			.btn-side {
-				position: absolute;
-				line-height: 60rpx;
-				font-size: 28rpx;
-				cursor: pointer;
-
-				&.right {
-					right: 30rpx;
-				}
+	.header {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 60rpx;
+		padding: 5px;
+		background-color: #f9f9f9;
+		line-height: 50px;
+		font-size: $im-font-size-large;
+		box-shadow: $im-box-shadow-lighter;
+		z-index: 1;
+
+		.btn-side {
+			position: absolute;
+			line-height: 60rpx;
+			cursor: pointer;
+
+			&.right {
+				right: 30rpx;
 			}
 		}
+	}
 
-		.chat-msg {
-			flex: 1;
-			padding: 0;
-			border: #dddddd solid 1px;
-			overflow: hidden;
-			position: relative;
-			background-color: white;
+	.chat-msg {
+		flex: 1;
+		padding: 0;
+		overflow: hidden;
+		position: relative;
+		background-color: white;
 
-			.scroll-box {
-				height: 100%;
-			}
+		.scroll-box {
+			height: 100%;
 		}
+	}
 
-		.chat-at-bar {
-			display: flex;
-			align-items: center;
-			padding: 0 10rpx;
-			border: #dddddd solid 1px;
+	.chat-at-bar {
+		display: flex;
+		align-items: center;
+		padding: 0 10rpx;
 
-			.icon-at {
-				font-size: 35rpx;
-				color: darkblue;
-				font-weight: 600;
-			}
+		.icon-at {
+			font-size: $im-font-size-larger;
+			color: $im-color-primary;
+			font-weight: bold;
+		}
 
-			.chat-at-scroll-box {
-				flex: 1;
-				width: 80%;
+		.chat-at-scroll-box {
+			flex: 1;
+			width: 80%;
 
-				.chat-at-items {
-					display: flex;
-					align-items: center;
-					height: 70rpx;
+			.chat-at-items {
+				display: flex;
+				align-items: center;
+				height: 70rpx;
 
-					.chat-at-item {
-						padding: 0 3rpx;
-					}
+				.chat-at-item {
+					padding: 0 3rpx;
 				}
 			}
-
 		}
 
-		.send-bar {
-			display: flex;
-			align-items: center;
-			padding: 10rpx;
-			margin-bottom: 10rpx;
-			border: #dddddd solid 1px;
-			background-color: #f7f8fd;
-			height: 80rpx;
-
-			.iconfont {
-				font-size: 68rpx;
-				margin: 6rpx;
-			}
+	}
 
-			.chat-record {
-				flex: 1;
+	$icon-color: rgba(0, 0, 0, 0.88);
 
-			}
+	.send-bar {
+		display: flex;
+		align-items: center;
+		padding: 10rpx;
+		//margin-bottom: 10rpx;
+		border-top: $im-border solid 1px;
+		background-color: $im-bg;
+		height: 80rpx;
+		//box-shadow: $im-box-shadow-lighter;
+		z-index: 1;
+
+		.iconfont {
+			font-size: 60rpx;
+			margin: 0 10rpx;
+			color: $icon-color;
+		}
 
-			.send-text {
-				flex: 1;
-				overflow: auto;
-				padding: 20rpx;
-				background-color: #fff;
-				border-radius: 20rpx;
-				font-size: 30rpx;
-				box-sizing: border-box;
+		.chat-record {
+			flex: 1;
+		}
 
-				.send-text-area {
-					width: 100%;
-				}
+		.send-text {
+			flex: 1;
+			overflow: auto;
+			padding: 14rpx 20rpx;
+			background-color: #fff;
+			border-radius: 8rpx;
+			font-size: $im-font-size;
+			box-sizing: border-box;
+			margin: 0 10rpx;
+
+			.send-text-area {
+				width: 100%;
 			}
+		}
 
-			.btn-send {
-				margin: 5rpx;
-			}
+		.btn-send {
+			margin: 5rpx;
 		}
+	}
 
 
-		.chat-tab-bar {
-			height: 500rpx;
-			padding: 20rpx;
-			background-color: #f8f8f8;
+	.chat-tab-bar {
+		height: 500rpx;
+		padding: 20rpx;
+		background-color: $im-bg;
 
-			.chat-tools {
-				display: flex;
-				flex-wrap: wrap;
+		.chat-tools {
+			display: flex;
+			flex-wrap: wrap;
+			padding-top: 20rpx;
 
-				.chat-tools-item {
-					width: 140rpx;
-					padding: 16rpx;
-					display: flex;
-					flex-direction: column;
-					align-items: center;
-
-					.tool-icon {
-						padding: 28rpx;
-						font-size: 60rpx;
-						border-radius: 20%;
-						background-color: white;
-						color: black;
-
-						&.active {
-							background-color: #ddd;
-						}
+			.chat-tools-item {
+				width: 25%;
+				padding: 16rpx;
+				box-sizing: border-box;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+
+				.tool-icon {
+					padding: 26rpx;
+					font-size: 54rpx;
+					border-radius: 20%;
+					background-color: white;
+					color: $icon-color;
+
+					&:active {
+						background-color: $im-bg-active;
 					}
+				}
 
-					.tool-name {
-						height: 60rpx;
-						line-height: 60rpx;
-						font-size: 28rpx;
-					}
+				.tool-name {
+					height: 60rpx;
+					line-height: 60rpx;
+					font-size: 28rpx;
 				}
 			}
+		}
 
-			.chat-emotion {
-				height: 100%;
+		.chat-emotion {
+			height: 100%;
 
-				.emotion-item-list {
-					display: flex;
-					flex-wrap: wrap;
+			.emotion-item-list {
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
 
-					.emotion-item {
-						width: 40px;
-						height: 40px;
-						text-align: center;
-						cursor: pointer;
-						padding: 6px;
-					}
+				.emotion-item {
+					width: 34px;
+					height: 34px;
+					text-align: center;
+					cursor: pointer;
+					padding: 6px;
 				}
 			}
-
 		}
+
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/pages/chat/chat-group-video.vue b/im-uniapp/pages/chat/chat-group-video.vue
index 85db1bb..7bb7314 100644
--- a/im-uniapp/pages/chat/chat-group-video.vue
+++ b/im-uniapp/pages/chat/chat-group-video.vue
@@ -3,138 +3,137 @@
 </template>
 
 <script>
-	import UNI_APP from '@/.env.js'
-	export default {
-		data() {
-			return {
-				url: "",
-				wv: '',
-				isHost: false,
-				groupId: null,
-				inviterId: null,
-				userInfos: []
-			}
+import UNI_APP from '@/.env.js'
+export default {
+	data() {
+		return {
+			url: "",
+			wv: '',
+			isHost: false,
+			groupId: null,
+			inviterId: null,
+			userInfos: []
+		}
+	},
+	methods: {
+		onMessage(e) {
+			this.onWebviewMessage(e.detail.data[0]);
 		},
-		methods: {
-			onMessage(e) {
-				this.onWebviewMessage(e.detail.data[0]);
-			},
-			onInsertMessage(msgInfo) {
+		onInsertMessage(msgInfo) {
 
-			},
-			onWebviewMessage(event) {
-				console.log("来自webview的消息:" + JSON.stringify(event))
-				switch (event.key) {
-					case "WV_READY":
-						this.initWebView();
-						break;
-					case "WV_CLOSE":
-						uni.navigateBack();
-						break;
-					case "INSERT_MESSAGE":
-						this.onInsertMessage(event.data);
-						break;
-				}
-			},
-			sendMessageToWebView(key, message) {
-				// 如果webview还没初始化好，则延迟100ms再推送
-				if (!this.wv) {
-					setTimeout(() => this.sendMessageToWebView(key, message), 100)
-					return;
-				}
-				let event = {
-					key: key,
-					data: message
-				}
-				// #ifdef APP-PLUS
-				this.wv.evalJS(`onEvent('${encodeURIComponent(JSON.stringify(event))}')`)
-				// #endif
-				// #ifdef H5
-				this.wv.postMessage(event, '*');
-				// #endif
-			},
-			initWebView() {
-				// #ifdef APP-PLUS
-				// APP的webview
-				this.wv = this.$scope.$getAppWebview().children()[0]
-				// #endif
-				// #ifdef H5
-				// H5的webview就是iframe
-				this.wv = document.getElementById('chat-video-wv').contentWindow
-				// #endif
-			},
-			initUrl() {
-				this.url = "/hybrid/html/rtc-group/index.html?";
-				this.url += "baseUrl=" + UNI_APP.BASE_URL;
-				this.url += "&groupId=" + this.groupId;
-				this.url += "&userId=" + this.userStore.userInfo.id;
-				this.url += "&inviterId=" + this.inviterId;
-				this.url += "&isHost=" + this.isHost;
-				this.url += "&loginInfo=" + JSON.stringify(uni.getStorageSync("loginInfo"));
-				this.url += "&userInfos=" + JSON.stringify(this.userInfos);
-				this.url += "&config=" + JSON.stringify(this.configStore.webrtc);
-			},
 		},
-		onBackPress() {
-			console.log("onBackPress")
-			this.sendMessageToWebView("NAV_BACK", {})
+		onWebviewMessage(event) {
+			console.log("来自webview的消息:" + JSON.stringify(event))
+			switch (event.key) {
+				case "WV_READY":
+					this.initWebView();
+					break;
+				case "WV_CLOSE":
+					uni.navigateBack();
+					break;
+				case "INSERT_MESSAGE":
+					this.onInsertMessage(event.data);
+					break;
+			}
 		},
-		onLoad(options) {
-			uni.$on('WS_RTC_GROUP', msg => {
-				// 推送给web-view处理
-				this.sendMessageToWebView("RTC_MESSAGE", msg);
-			})
-			// #ifdef H5
-			window.onmessage = (e) => {
-				this.onWebviewMessage(e.data.data.arg);
+		sendMessageToWebView(key, message) {
+			// 如果webview还没初始化好，则延迟100ms再推送
+			if (!this.wv) {
+				setTimeout(() => this.sendMessageToWebView(key, message), 100)
+				return;
 			}
+			let event = {
+				key: key,
+				data: message
+			}
+			// #ifdef APP-PLUS
+			this.wv.evalJS(`onEvent('${encodeURIComponent(JSON.stringify(event))}')`)
+			// #endif
+			// #ifdef H5
+			this.wv.postMessage(event, '*');
 			// #endif
-			// 是否发起人
-			this.isHost = JSON.parse(options.isHost);
-			// 发起者的用户
-			this.inviterId = options.inviterId;
-			// 解析页面跳转时带过来的好友信息
-			this.groupId = options.groupId;
-			// 邀请的用户信息
-			this.userInfos = JSON.parse(decodeURIComponent(options.userInfos));
-
-			// 构建url
-			this.initUrl();
 		},
-		onUnload() {
-			uni.$off('WS_RTC_GROUP')
+		initWebView() {
+			// #ifdef APP-PLUS
+			// APP的webview
+			this.wv = this.$scope.$getAppWebview().children()[0]
+			// #endif
+			// #ifdef H5
+			// H5的webview就是iframe
+			this.wv = document.getElementById('chat-video-wv').contentWindow
+			// #endif
+		},
+		initUrl() {
+			this.url = "/hybrid/html/rtc-group/index.html?";
+			this.url += "baseUrl=" + UNI_APP.BASE_URL;
+			this.url += "&groupId=" + this.groupId;
+			this.url += "&userId=" + this.userStore.userInfo.id;
+			this.url += "&inviterId=" + this.inviterId;
+			this.url += "&isHost=" + this.isHost;
+			this.url += "&loginInfo=" + JSON.stringify(uni.getStorageSync("loginInfo"));
+			this.url += "&userInfos=" + JSON.stringify(this.userInfos);
+			this.url += "&config=" + JSON.stringify(this.configStore.webrtc);
+		},
+	},
+	onBackPress() {
+		console.log("onBackPress")
+		this.sendMessageToWebView("NAV_BACK", {})
+	},
+	onLoad(options) {
+		uni.$on('WS_RTC_GROUP', msg => {
+			// 推送给web-view处理
+			this.sendMessageToWebView("RTC_MESSAGE", msg);
+		})
+		// #ifdef H5
+		window.onmessage = (e) => {
+			this.onWebviewMessage(e.data.data.arg);
 		}
+		// #endif
+		// 是否发起人
+		this.isHost = JSON.parse(options.isHost);
+		// 发起者的用户
+		this.inviterId = options.inviterId;
+		// 解析页面跳转时带过来的好友信息
+		this.groupId = options.groupId;
+		// 邀请的用户信息
+		this.userInfos = JSON.parse(decodeURIComponent(options.userInfos));
+
+		// 构建url
+		this.initUrl();
+	},
+	onUnload() {
+		uni.$off('WS_RTC_GROUP')
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.chat-group-video {
-		.header {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			height: 60rpx;
-			padding: 5px;
-			background-color: white;
-			line-height: 50px;
-			font-size: 40rpx;
-			font-weight: 600;
-			border: #dddddd solid 1px;
+.chat-group-video {
+	.header {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 60rpx;
+		padding: 5px;
+		background-color: white;
+		line-height: 50px;
+		font-size: 40rpx;
+		font-weight: 600;
 
-			.btn-side {
-				position: absolute;
-				line-height: 60rpx;
-				font-size: 28rpx;
-				cursor: pointer;
+		.btn-side {
+			position: absolute;
+			line-height: 60rpx;
+			font-size: 28rpx;
+			cursor: pointer;
 
-				&.left {
-					left: 30rpx;
-				}
+			&.left {
+				left: 30rpx;
+			}
 
-				&.right {
-					right: 30rpx;
-				}
+			&.right {
+				right: 30rpx;
 			}
 		}
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/pages/chat/chat-private-video.vue b/im-uniapp/pages/chat/chat-private-video.vue
index 60d217d..0677af7 100644
--- a/im-uniapp/pages/chat/chat-private-video.vue
+++ b/im-uniapp/pages/chat/chat-private-video.vue
@@ -3,101 +3,98 @@
 </template>
 
 <script>
-	import UNI_APP from '@/.env.js'
-	export default {
-		data() {
-			return {
-				url: "",
-				wv: '',
-				mode: "video",
-				isHost: true,
-				friend: {}
-			}
+import UNI_APP from '@/.env.js'
+export default {
+	data() {
+		return {
+			url: "",
+			wv: '',
+			mode: "video",
+			isHost: true,
+			friend: {}
+		}
+	},
+	methods: {
+		onMessage(e) {
+			this.onWebviewMessage(e.detail.data[0]);
 		},
-		methods: {
-			onMessage(e) {
-				this.onWebviewMessage(e.detail.data[0]);
-			},
-			onWebviewMessage(event) {
-				console.log("来自webview的消息:" + JSON.stringify(event))
-				switch (event.key) {
-					case "WV_READY":
-						this.initWebView();
-						break;
-					case "WV_CLOSE":
-						uni.navigateBack();
-						break;
-				}
-			},
-			sendMessageToWebView(key, message) {
-				// 如果webview还没初始化好，则延迟100ms再推送
-				if (!this.wv) {
-					setTimeout(() => this.sendMessageToWebView(key, message), 100)
-					return;
-				}
-				let event = {
-					key: key,
-					data: message
-				}
-				// #ifdef APP-PLUS
-				this.wv.evalJS(`onEvent('${encodeURIComponent(JSON.stringify(event))}')`)
-				// #endif
-				// #ifdef H5
-				this.wv.postMessage(event, '*');
-				// #endif
-			},
-			initWebView() {
-				// #ifdef APP-PLUS
-				// APP的webview
-				this.wv = this.$scope.$getAppWebview().children()[0]
-				// #endif
-				// #ifdef H5
-				// H5的webview就是iframe
-				this.wv = document.getElementById('chat-video-wv').contentWindow
-				// #endif
-			},
-			initUrl(){
-				this.url = "/hybrid/html/rtc-private/index.html";
-				this.url += "?mode="+this.mode;
-				this.url += "&isHost="+this.isHost;
-				this.url += "&baseUrl="+UNI_APP.BASE_URL;
-				this.url += "&loginInfo="+JSON.stringify(uni.getStorageSync("loginInfo"));
-				this.url += "&userInfo="+JSON.stringify(this.userStore.userInfo);
-				this.url += "&friend="+JSON.stringify(this.friend);
-				this.url += "&config=" + JSON.stringify(this.configStore.webrtc);
-			},
+		onWebviewMessage(event) {
+			console.log("来自webview的消息:" + JSON.stringify(event))
+			switch (event.key) {
+				case "WV_READY":
+					this.initWebView();
+					break;
+				case "WV_CLOSE":
+					uni.navigateBack();
+					break;
+			}
 		},
-		onBackPress() {
-			this.sendMessageToWebView("NAV_BACK",{})
+		sendMessageToWebView(key, message) {
+			// 如果webview还没初始化好，则延迟100ms再推送
+			if (!this.wv) {
+				setTimeout(() => this.sendMessageToWebView(key, message), 100)
+				return;
+			}
+			let event = {
+				key: key,
+				data: message
+			}
+			// #ifdef APP-PLUS
+			this.wv.evalJS(`onEvent('${encodeURIComponent(JSON.stringify(event))}')`)
+			// #endif
+			// #ifdef H5
+			this.wv.postMessage(event, '*');
+			// #endif
 		},
-		onLoad(options) {
-			uni.$on('WS_RTC_PRIVATE', msg => {
-				// 推送给web-view处理
-				this.sendMessageToWebView("RTC_MESSAGE", msg);
-			})
+		initWebView() {
+			// #ifdef APP-PLUS
+			// APP的webview
+			this.wv = this.$scope.$getAppWebview().children()[0]
+			// #endif
 			// #ifdef H5
-			window.onmessage = (e) => {
-				this.onWebviewMessage(e.data.data.arg);
-			}
+			// H5的webview就是iframe
+			this.wv = document.getElementById('chat-video-wv').contentWindow
 			// #endif
-			// 模式：视频呼叫/语音呼叫
-			this.mode = options.mode;
-			// 是否呼叫方
-			this.isHost = JSON.parse(options.isHost);
-			// 解析页面跳转时带过来的好友信息
-			this.friend = JSON.parse(decodeURIComponent(options.friend));
-			// 构建url
-			this.initUrl();
 		},
-		onUnload() {
-			uni.$off('WS_RTC_PRIVATE')
+		initUrl() {
+			this.url = "/hybrid/html/rtc-private/index.html";
+			this.url += "?mode=" + this.mode;
+			this.url += "&isHost=" + this.isHost;
+			this.url += "&baseUrl=" + UNI_APP.BASE_URL;
+			this.url += "&loginInfo=" + JSON.stringify(uni.getStorageSync("loginInfo"));
+			this.url += "&userInfo=" + JSON.stringify(this.userStore.userInfo);
+			this.url += "&friend=" + JSON.stringify(this.friend);
+			this.url += "&config=" + JSON.stringify(this.configStore.webrtc);
+		},
+	},
+	onBackPress() {
+		this.sendMessageToWebView("NAV_BACK", {})
+	},
+	onLoad(options) {
+		uni.$on('WS_RTC_PRIVATE', msg => {
+			// 推送给web-view处理
+			this.sendMessageToWebView("RTC_MESSAGE", msg);
+		})
+		// #ifdef H5
+		window.onmessage = (e) => {
+			this.onWebviewMessage(e.data.data.arg);
 		}
+		// #endif
+		// 模式：视频呼叫/语音呼叫
+		this.mode = options.mode;
+		// 是否呼叫方
+		this.isHost = JSON.parse(options.isHost);
+		// 解析页面跳转时带过来的好友信息
+		this.friend = JSON.parse(decodeURIComponent(options.friend));
+		// 构建url
+		this.initUrl();
+	},
+	onUnload() {
+		uni.$off('WS_RTC_PRIVATE')
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	
-	.chat-web-view{
-		
-	}
+.chat-web-view {}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/pages/chat/chat.vue b/im-uniapp/pages/chat/chat.vue
index b69f611..502f91f 100644
--- a/im-uniapp/pages/chat/chat.vue
+++ b/im-uniapp/pages/chat/chat.vue
@@ -1,174 +1,154 @@
 <template>
 	<view class="tab-page">
+		<nav-bar search @search="showSearch = !showSearch">消息</nav-bar>
 		<view v-if="loading" class="chat-loading">
 			<loading :size="50" :mask="false">
 				<view>消息接收中...</view>
 			</loading>
 		</view>
-		<view class="nav-bar">
+		<view class="nav-bar" v-if="showSearch">
 			<view class="nav-search">
 				<uni-search-bar radius="100" v-model="searchText" cancelButton="none" placeholder="搜索"></uni-search-bar>
 			</view>
 		</view>
-		<view class="chat-tip" v-if="!loading && chatStore.chats.length==0">
+		<view class="chat-tip" v-if="!loading && chatStore.chats.length == 0">
 			温馨提示：您现在还没有任何聊天消息，快跟您的好友发起聊天吧~
 		</view>
 		<scroll-view class="scroll-bar" v-else scroll-with-animation="true" scroll-y="true">
-			<view v-for="(chat,index) in chatStore.chats" :key="index">
-				<pop-menu v-if="isShowChat(chat)" :items="menu.items"
-					@select="onSelectMenu($event,index)">
-					<chat-item :chat="chat" :index="index" 
-						:active="menu.chatIdx==index"></chat-item>
-				</pop-menu>
+			<view v-for="(chat, index) in chatStore.chats" :key="index">
+				<long-press-menu v-if="isShowChat(chat)" :items="menu.items" @select="onSelectMenu($event, index)">
+					<chat-item :chat="chat" :index="index" :active="menu.chatIdx == index"></chat-item>
+				</long-press-menu>
 			</view>
 		</scroll-view>
 	</view>
 </template>
 
 <script>
-	import useChatStore from '@/store/chatStore.js'
-	
-	export default {
-		data() {
-			return {
-				searchText: "",
-				menu: {
-					show: false,
-					style: "",
-					chatIdx: -1,
-					isTouchMove: false,
-					items: [{
-							key: 'DELETE',
-							name: '删除该聊天',
-							icon: 'trash',
-							color: '#e64e4e'
-						},
-						{
-							key: 'TOP',
-							name: '置顶该聊天',
-							icon: 'arrow-up'
-						}
-					]
+
+export default {
+	data() {
+		return {
+			showSearch: false,
+			searchText: "",
+			menu: {
+				show: false,
+				style: "",
+				chatIdx: -1,
+				isTouchMove: false,
+				items: [{
+					key: 'DELETE',
+					name: '删除该聊天',
+					icon: 'trash',
+					color: '#e64e4e'
+				},
+				{
+					key: 'TOP',
+					name: '置顶该聊天',
+					icon: 'arrow-up'
 				}
+				]
 			}
-		},
-		methods: {
-			onSelectMenu(item,chatIdx) {
-				switch (item.key) {
-					case 'DELETE':
-						this.removeChat(chatIdx);
-						break;
-					case 'TOP':
-						this.moveToTop(chatIdx);
-						break;
-					default:
-						break;
-				}
-				this.menu.show = false;
-			},
-			removeChat(chatIdx) {
-				this.chatStore.removeChat(chatIdx);
-			},
-			moveToTop(chatIdx) {
-				this.chatStore.moveTop(chatIdx);
-			},
-			isShowChat(chat){
-				if(chat.delete){
-					return false;
-				}
-				return !this.searchText || chat.showName.includes(this.searchText)
-			},
-			refreshUnreadBadge() {
-				if (this.unreadCount > 0) {
-					uni.setTabBarBadge({
-						index: 0,
-						text: this.unreadCount + ""
-					})
-				} else {
-					uni.removeTabBarBadge({
-						index: 0,
-						complete: () => {}
-					})
-				}
+		}
+	},
+	methods: {
+		onSelectMenu(item, chatIdx) {
+			switch (item.key) {
+				case 'DELETE':
+					this.removeChat(chatIdx);
+					break;
+				case 'TOP':
+					this.moveToTop(chatIdx);
+					break;
+				default:
+					break;
 			}
+			this.menu.show = false;
 		},
-		computed: {
-			unreadCount() {
-				let count = 0;
-				this.chatStore.chats.forEach(chat => {
-					if (!chat.delete) {
-						count += chat.unreadCount;
-					}
-				})
-				return count;
-			},
-			loading() {
-				return this.chatStore.loadingGroupMsg || this.chatStore.loadingPrivateMsg
+		removeChat(chatIdx) {
+			this.chatStore.removeChat(chatIdx);
+		},
+		moveToTop(chatIdx) {
+			this.chatStore.moveTop(chatIdx);
+		},
+		isShowChat(chat) {
+			if (chat.delete) {
+				return false;
 			}
+			return !this.searchText || chat.showName.includes(this.searchText)
 		},
-		watch: {
-			unreadCount(newCount, oldCount) {
-				this.refreshUnreadBadge();
+		refreshUnreadBadge() {
+			if (this.unreadCount > 0) {
+				uni.setTabBarBadge({
+					index: 0,
+					text: this.unreadCount + ""
+				})
+			} else {
+				uni.removeTabBarBadge({
+					index: 0,
+					complete: () => { }
+				})
 			}
+		}
+	},
+	computed: {
+		unreadCount() {
+			let count = 0;
+			this.chatStore.chats.forEach(chat => {
+				if (!chat.delete) {
+					count += chat.unreadCount;
+				}
+			})
+			return count;
 		},
-		onShow() {
+		loading() {
+			return this.chatStore.loadingGroupMsg || this.chatStore.loadingPrivateMsg
+		}
+	},
+	watch: {
+		unreadCount(newCount, oldCount) {
 			this.refreshUnreadBadge();
 		}
+	},
+	onShow() {
+		this.refreshUnreadBadge();
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	.tab-page {
-		position: relative;
-		border: #dddddd solid 1px;
-		display: flex;
-		flex-direction: column;
-		
+.tab-page {
+	position: relative;
+	display: flex;
+	flex-direction: column;
 
-		.nav-bar {
-			padding: 2rpx 20rpx;
-			display: flex;
-			align-items: center;
-			background-color: white;
-			border-bottom: 1px solid #ddd;
-			height: 110rpx;
-			.nav-search {
-				flex: 1;
-				height: 110rpx;
-			}
-		
-			
-		}
-		
-		.chat-tip {
-			position: absolute;
-			top: 400rpx;
-			padding: 50rpx;
-			line-height: 50rpx;
-			text-align: left;
-			color: darkblue;
-			font-size: 30rpx;
-		}
-
-		.chat-loading {
-			display: block;
-			width: 100%;
-			height: 120rpx;
-			background: white;
-			position: fixed;
-			top:  0;
-			z-index: 999;
-			color: blue;
+	.chat-tip {
+		position: absolute;
+		top: 400rpx;
+		padding: 50rpx;
+		line-height: 50rpx;
+		text-align: center;
+		color: $im-text-color-lighter;
+	}
 
-			.loading-box {
-				position: relative;
+	.chat-loading {
+		display: block;
+		width: 100%;
+		height: 120rpx;
+		background: white;
+		position: fixed;
+		top: 0;
+		z-index: 999;
+		color: $im-text-color-lighter;
 
-			}
+		.loading-box {
+			position: relative;
 		}
+	}
 
-		.scroll-bar {
-			flex: 1;
-			height: 100%;
-		}
+	.scroll-bar {
+		flex: 1;
+		height: 100%;
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/pages/common/user-info.vue b/im-uniapp/pages/common/user-info.vue
index 4c6c25c..c226c63 100644
--- a/im-uniapp/pages/common/user-info.vue
+++ b/im-uniapp/pages/common/user-info.vue
@@ -1,192 +1,218 @@
 <template>
 	<view class="page user-info">
-		<view class="content">
-			<head-image  :name="userInfo.nickName" :url="userInfo.headImageThumb"
-			:size="160" @click="onShowFullImage()"></head-image>
-			
-			<view class="info-item">
-				<view class="info-primary">
-					<text class="info-username">
-						{{userInfo.userName}}
-					</text>
-					<uni-icons v-show="userInfo.sex==0" class="sex-boy" type="person-filled" size="20"
-						color="darkblue"></uni-icons>
-					<uni-icons v-show="userInfo.sex==1" class="sex-girl" type="person-filled" size="20"
-						color="darkred"></uni-icons>
+		<nav-bar back>用户信息</nav-bar>
+		<uni-card :is-shadow="false" is-full :border="false">
+			<view class="content">
+				<head-image :name="userInfo.nickName" :url="userInfo.headImageThumb" :size="160"
+					@click="onShowFullImage()"></head-image>
+
+				<view class="info-item">
+					<view class="info-primary">
+						<text class="info-username">
+							{{ userInfo.userName }}
+						</text>
+						<text v-show="userInfo.sex == 0" class="iconfont icon-man" color="darkblue"></text>
+						<text v-show="userInfo.sex == 1" class="iconfont icon-girl" color="darkred"></text>
+					</view>
+					<view class="info-text">
+						<text class="label-text">
+							昵称:
+						</text>
+						<text class="content-text">
+							{{ userInfo.nickName }}
+						</text>
+					</view>
+					<view class="info-text">
+						<view>
+							<text class="label-text">
+								签名:
+							</text>
+							<text class="content-text">
+								{{ userInfo.signature }}
+							</text>
+						</view>
+					</view>
 				</view>
-				<text>
-					昵称 ：{{userInfo.nickName}}
-				</text>
-				<text>
-					签名 ：{{userInfo.signature}}
-				</text>
 			</view>
-		</view>
-		<view class="line"></view>
-		<view class="btn-group">
-			<button class="btn" v-show="isFriend" type="primary" @click="onSendMessage()">发消息</button>
-			<button class="btn" v-show="!isFriend" type="primary" @click="onAddFriend()">加为好友</button>
-			<button class="btn" v-show="isFriend" type="warn" @click="onDelFriend()">删除好友</button>
-		</view>
+		</uni-card>
+		<bar-group>
+			<btn-bar v-show="isFriend" type="primary" title="发送消息" @click="onSendMessage()">
+			</btn-bar>
+			<btn-bar v-show="!isFriend" type="primary" title="加为好友" @click="onAddFriend()"></btn-bar>
+			<btn-bar v-show="isFriend" type="danger" title="删除好友" @click="onDelFriend()"></btn-bar>
+		</bar-group>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				userInfo: {}
+export default {
+	data() {
+		return {
+			userInfo: {}
+		}
+	},
+	methods: {
+		onShowFullImage() {
+			let imageUrl = this.userInfo.headImage;
+			if (imageUrl) {
+				uni.previewImage({
+					urls: [imageUrl]
+				})
 			}
 		},
-		methods: {
-			onShowFullImage(){
-				let imageUrl = this.userInfo.headImage;
-				if(imageUrl){
-					uni.previewImage({
-						urls: [imageUrl]
-					})
+		onSendMessage() {
+			let chat = {
+				type: 'PRIVATE',
+				targetId: this.userInfo.id,
+				showName: this.userInfo.nickName,
+				headImage: this.userInfo.headImage,
+			};
+			this.chatStore.openChat(chat);
+			let chatIdx = this.chatStore.findChatIdx(chat);
+			uni.navigateTo({
+				url: "/pages/chat/chat-box?chatIdx=" + chatIdx
+			})
+		},
+		onAddFriend() {
+			this.$http({
+				url: "/friend/add?friendId=" + this.userInfo.id,
+				method: "POST"
+			}).then((data) => {
+				let friend = {
+					id: this.userInfo.id,
+					nickName: this.userInfo.nickName,
+					headImage: this.userInfo.headImageThumb,
+					online: this.userInfo.online
 				}
-			},
-			onSendMessage() {
-				let chat = {
-					type: 'PRIVATE',
-					targetId: this.userInfo.id,
-					showName: this.userInfo.nickName,
-					headImage: this.userInfo.headImage,
-				};
-				this.chatStore.openChat(chat);
-				let chatIdx = this.chatStore.findChatIdx(chat);
-				uni.navigateTo({
-					url:"/pages/chat/chat-box?chatIdx=" + chatIdx
+				this.friendStore.addFriend(friend);
+				uni.showToast({
+					title: '对方已成为您的好友',
+					icon: 'none'
 				})
-			},
-			onAddFriend() {
-				this.$http({
-					url: "/friend/add?friendId=" + this.userInfo.id,
-					method: "POST"
-				}).then((data) => {
-					let friend = {
-						id: this.userInfo.id,
-						nickName: this.userInfo.nickName,
-						headImage: this.userInfo.headImageThumb,
-						online: this.userInfo.online
-					}
-					this.friendStore.addFriend(friend);
-					uni.showToast({
-						title: '对方已成为您的好友',
-						icon: 'none'
-					})
-				})
-			},
-			onDelFriend(){
-				uni.showModal({
-					title: "确认删除",
-					content: `确认删除 '${this.userInfo.nickName}',并删除聊天记录吗?`,
-					success: (res)=> {
-						if(res.cancel)
-							return;
-						this.$http({
-							url: `/friend/delete/${this.userInfo.id}`,
-							method: 'delete'
-						}).then((data) => {
-							this.friendStore.removeFriend(this.userInfo.id);
-							this.chatStore.removePrivateChat(this.userInfo.id);
-							uni.showToast({
-								title: 	`与 '${this.userInfo.nickName}'的好友关系已解除`,
-								icon: 'none'
-							})
+			})
+		},
+		onDelFriend() {
+			uni.showModal({
+				title: "确认删除",
+				content: `确认删除 '${this.userInfo.nickName}',并删除聊天记录吗?`,
+				success: (res) => {
+					if (res.cancel)
+						return;
+					this.$http({
+						url: `/friend/delete/${this.userInfo.id}`,
+						method: 'delete'
+					}).then((data) => {
+						this.friendStore.removeFriend(this.userInfo.id);
+						this.chatStore.removePrivateChat(this.userInfo.id);
+						uni.showToast({
+							title: `与 '${this.userInfo.nickName}'的好友关系已解除`,
+							icon: 'none'
 						})
-					}
-				})
-			},
-			updateFriendInfo() {
-				// store的数据不能直接修改，深拷贝一份store的数据
-				let friend = JSON.parse(JSON.stringify(this.friendInfo));
-				friend.headImage = this.userInfo.headImageThumb;
-				friend.nickName = this.userInfo.nickName;
-				this.$http({
-					url: "/friend/update",
-					method: "PUT",
-					data: friend
-				}).then(() => {
-					// 更新好友列表中的昵称和头像
-					this.friendStore.updateFriend(friend);
-					// 更新会话中的头像和昵称
-					this.chatStore.updateChatFromFriend(this.userInfo);
-				})
-			},
-			loadUserInfo(id){
-				this.$http({
-					url: "/user/find/" + id,
-					method: 'GET'
-				}).then((user) => {
-					this.userInfo = user;
-					// 如果发现好友的头像和昵称改了，进行更新
-					if (this.isFriend && (this.userInfo.headImageThumb != this.friendInfo.headImage ||
-						this.userInfo.nickName != this.friendInfo.nickName)) {
-						this.updateFriendInfo()
-					}
-				})
-			}
+					})
+				}
+			})
 		},
-		computed: {
-			isFriend() {
-				return !!this.friendInfo;
-			},
-			friendInfo(){
-				let friends = this.friendStore.friends;
-				let friend = friends.find((f) => f.id == this.userInfo.id);
-				return friend;
-			}
+		updateFriendInfo() {
+			// store的数据不能直接修改，深拷贝一份store的数据
+			let friend = JSON.parse(JSON.stringify(this.friendInfo));
+			friend.headImage = this.userInfo.headImageThumb;
+			friend.nickName = this.userInfo.nickName;
+			this.$http({
+				url: "/friend/update",
+				method: "PUT",
+				data: friend
+			}).then(() => {
+				// 更新好友列表中的昵称和头像
+				this.friendStore.updateFriend(friend);
+				// 更新会话中的头像和昵称
+				this.chatStore.updateChatFromFriend(this.userInfo);
+			})
 		},
-		onLoad(options) {
-			// 查询用户信息
-			this.loadUserInfo(options.id);
+		loadUserInfo(id) {
+			this.$http({
+				url: "/user/find/" + id,
+				method: 'GET'
+			}).then((user) => {
+				this.userInfo = user;
+				// 如果发现好友的头像和昵称改了，进行更新
+				if (this.isFriend && (this.userInfo.headImageThumb != this.friendInfo.headImage ||
+					this.userInfo.nickName != this.friendInfo.nickName)) {
+					this.updateFriendInfo()
+				}
+			})
 		}
+	},
+	computed: {
+		isFriend() {
+			return !!this.friendInfo;
+		},
+		friendInfo() {
+			let friends = this.friendStore.friends;
+			let friend = friends.find((f) => f.id == this.userInfo.id);
+			return friend;
+		}
+	},
+	onLoad(options) {
+		// 查询用户信息
+		this.loadUserInfo(options.id);
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.user-info {
-		.content {
-			height: 200rpx;
+.user-info {
+	.content {
+		height: 200rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx;
+
+		.info-item {
 			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding: 20rpx;
+			align-items: flex-start;
+			flex-direction: column;
+			padding-left: 40rpx;
+			flex: 1;
+
+			.info-text {
+				line-height: 1.5;
+				//margin-bottom: 10rpx;
+			}
+
+			.label-text {
+				font-size: $im-font-size-small;
+				color: $im-text-color-light;
+
+			}
+
+			.content-text {
+				font-size: $im-font-size-small;
+				color: $im-text-color-light;
+			}
 
-			.info-item {
+			.info-primary {
 				display: flex;
-				align-items: flex-start;
-				flex-direction: column;
-				padding-left: 40rpx;
-				flex: 1;
-				
-				
-				.info-primary {
-					display: flex;
-					align-items: center;
-					
-					.info-username {
-						font-size: 40rpx;
-						font-weight: 600;
-					}
+				align-items: center;
+				margin-bottom: 10rpx;
+
+				.info-username {
+					font-size: $im-font-size-large;
+					font-weight: 600;
 				}
-			}
-		}
 
-		.line {
-			margin: 20rpx;
-			border-bottom: 1px solid #aaaaaa;
-		}
+				.icon-man {
+					color: $im-text-color;
+					font-size: $im-font-size-large;
+					padding-left: 10rpx;
+				}
 
-		.btn-group {
-			margin: 100rpx;
-			
-			.btn{
-				margin-top: 20rpx;
+				.icon-girl {
+					color: darkred;
+				}
 			}
-			
 		}
 	}
+
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/pages/friend/friend-add.vue b/im-uniapp/pages/friend/friend-add.vue
index d50e919..15231f0 100644
--- a/im-uniapp/pages/friend/friend-add.vue
+++ b/im-uniapp/pages/friend/friend-add.vue
@@ -1,17 +1,19 @@
 <template>
 	<view class="page friend-add">
-		<view class="search-bar">
-			<uni-search-bar v-model="searchText" radius="100" :focus="true" @confirm="onSearch()" @cancel="onCancel()"
-				placeholder="用户名/昵称"></uni-search-bar>
+		<nav-bar back>添加好友</nav-bar>
+		<view class="nav-bar">
+			<view class="nav-search">
+				<uni-search-bar v-model="searchText" radius="100" :focus="true" @confirm="onSearch()"
+					@cancel="onCancel()" placeholder="用户名/昵称"></uni-search-bar>
+			</view>
 		</view>
 		<view class="user-items">
 			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
 				<view v-for="(user) in users" :key="user.id" v-show="user.id != userStore.userInfo.id">
 					<view class="user-item">
-						<head-image :id="user.id" :name="user.nickName" 
-							:online="user.online" :url="user.headImage"
-							:size="100"></head-image>
-						<view class="user-name">{{ user.nickName}}</view>
+						<head-image :id="user.id" :name="user.nickName" :online="user.online"
+							:url="user.headImage"></head-image>
+						<view class="user-name">{{ user.nickName }}</view>
 						<view class="user-btns">
 							<button type="primary" v-show="!isFriend(user.id)" size="mini"
 								@click.stop="onAddFriend(user)">加为好友</button>
@@ -25,96 +27,92 @@
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				searchText: "",
-				users: []
-			}
+export default {
+	data() {
+		return {
+			searchText: "",
+			users: []
+		}
+	},
+	methods: {
+		onCancel() {
+			uni.navigateBack();
 		},
-		methods: {
-			onCancel() {
-				uni.navigateBack();
-			},
-			onSearch() {
-				this.$http({
-					url: "/user/findByName?name=" + this.searchText,
-					method: "GET"
-				}).then((data) => {
-					this.users = data;
-				})
-			},
-			onAddFriend(user) {
-				this.$http({
-					url: "/friend/add?friendId=" + user.id,
-					method: "POST"
-				}).then((data) => {
-					let friend = {
-						id: user.id,
-						nickName: user.nickName,
-						headImage: user.headImage,
-						online: user.online
-					}
-					this.friendStore.addFriend(friend);
-					uni.showToast({
-						title: "添加成功，对方已成为您的好友",
-						icon: "none"
-					})
-				})
-			},
-			onShowUserInfo(user) {
-				uni.navigateTo({
-					url: "/pages/common/user-info?id=" + user.id
+		onSearch() {
+			this.$http({
+				url: "/user/findByName?name=" + this.searchText,
+				method: "GET"
+			}).then((data) => {
+				this.users = data;
+			})
+		},
+		onAddFriend(user) {
+			this.$http({
+				url: "/friend/add?friendId=" + user.id,
+				method: "POST"
+			}).then((data) => {
+				let friend = {
+					id: user.id,
+					nickName: user.nickName,
+					headImage: user.headImage,
+					online: user.online
+				}
+				this.friendStore.addFriend(friend);
+				uni.showToast({
+					title: "添加成功，对方已成为您的好友",
+					icon: "none"
 				})
-			},
-			isFriend(userId) {
-				let friends = this.friendStore.friends;
-				let friend = friends.find((f) => f.id == userId);
-				return !!friend;
-			}
+			})
+		},
+		onShowUserInfo(user) {
+			uni.navigateTo({
+				url: "/pages/common/user-info?id=" + user.id
+			})
+		},
+		isFriend(userId) {
+			let friends = this.friendStore.friends;
+			let friend = friends.find((f) => f.id == userId);
+			return !!friend;
 		}
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	.friend-add {
+.friend-add {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+
+	.user-items {
 		position: relative;
-		border: #dddddd solid 1px;
-		display: flex;
-		flex-direction: column;
+		flex: 1;
+		overflow: hidden;
 
-		.search-bar {
-			background: white;
-		}
-		.user-items{
+		.user-item {
+			height: 120rpx;
+			display: flex;
+			margin-bottom: 1rpx;
 			position: relative;
-			flex: 1;
-			overflow: hidden;
-			.user-item {
-				height: 120rpx;
-				display: flex;
-				margin-bottom: 1rpx;
-				position: relative;
-				padding: 0 30rpx ;
-				align-items: center;
-				background-color: white;
+			padding: 0 30rpx;
+			align-items: center;
+			background-color: white;
+			white-space: nowrap;
+
+			.user-name {
+				flex: 1;
+				padding-left: 20rpx;
+				font-size: $im-font-size;
+				line-height: 60rpx;
 				white-space: nowrap;
-			
-				.user-name {
-					flex:1;	
-					padding-left: 20rpx;
-					font-size: 30rpx;
-					font-weight: 600;
-					line-height: 60rpx;
-					white-space: nowrap;
-					overflow: hidden;
-				}
-			}
-			
-			.scroll-bar {
-				height: 100%;
+				overflow: hidden;
 			}
 		}
-		
+
+		.scroll-bar {
+			height: 100%;
+		}
 	}
+
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/pages/friend/friend.vue b/im-uniapp/pages/friend/friend.vue
index 2ceb147..736674a 100644
--- a/im-uniapp/pages/friend/friend.vue
+++ b/im-uniapp/pages/friend/friend.vue
@@ -1,151 +1,150 @@
 <template>
+
 	<view class="tab-page friend">
-		<view class="nav-bar">
+		<nav-bar add search @add="onAddNewFriends" @search="showSearch = !showSearch">好友</nav-bar>
+		<view class="nav-bar" v-if="showSearch">
 			<view class="nav-search">
-				<uni-search-bar v-model="searchText" radius="100" cancelButton="none" placeholder="点击搜索好友"></uni-search-bar>
-			</view>
-			<view class="nav-add" @click="onAddNewFriends()">
-				<uni-icons type="personadd" size="35"></uni-icons>
+				<uni-search-bar v-model="searchText" radius="100" cancelButton="none"
+					placeholder="点击搜索好友"></uni-search-bar>
 			</view>
 		</view>
-		<view class="friend-tip" v-if="friends.length==0">
+		<view class="friend-tip" v-if="friends.length == 0">
 			温馨提示：您现在还没有任何好友，快点击右上方'+'按钮添加好友吧~
 		</view>
 		<view class="friend-items" v-else>
-			<up-index-list :index-list="friendIdx" >
-				<template v-for="(friends,i) in friendGroups">
+			<up-index-list :index-list="friendIdx">
+				<template v-for="(friends, i) in friendGroups">
 					<up-index-item>
-						<up-index-anchor :text="friendIdx[i]=='*'?'在线':friendIdx[i]"
-							bgColor="#f2f3fd"></up-index-anchor>
-						<view v-for="(friend,idx) in friends" :key="idx">
+						<up-index-anchor :text="friendIdx[i] == '*' ? '在线' : friendIdx[i]"></up-index-anchor>
+						<view v-for="(friend, idx) in friends" :key="idx">
 							<friend-item :friend="friend"></friend-item>
 						</view>
 					</up-index-item>
 				</template>
 			</up-index-list>
 		</view>
-
 	</view>
 </template>
 
 <script>
-	import { pinyin } from 'pinyin-pro';
+import { pinyin } from 'pinyin-pro';
 
-	export default {
-		data() {
-			return {
-				searchText: ''
-			}
+export default {
+	data() {
+		return {
+			showSearch: false,
+			searchText: ''
+		}
+	},
+	methods: {
+		onAddNewFriends() {
+			uni.navigateTo({
+				url: "/pages/friend/friend-add"
+			})
+		},
+		firstLetter(strText) {
+			// 使用pinyin-pro库将中文转换为拼音
+			let pinyinOptions = {
+				toneType: 'none', // 无声调
+				type: 'normal' // 普通拼音
+			};
+			let pyText = pinyin(strText, pinyinOptions);
+			return pyText[0];
 		},
-		methods: {
-			onAddNewFriends() {
-				uni.navigateTo({
-					url: "/pages/friend/friend-add"
-				})
-			},
-			firstLetter(strText) {
-				// 使用pinyin-pro库将中文转换为拼音
-				let pinyinOptions = {
-					toneType: 'none', // 无声调
-					type: 'normal' // 普通拼音
-				};
-				let pyText = pinyin(strText, pinyinOptions);
-				return pyText[0];
-			},
-			isEnglish(character) {
-				return /^[A-Za-z]+$/.test(character);
-			}
+		isEnglish(character) {
+			return /^[A-Za-z]+$/.test(character);
+		}
+	},
+	computed: {
+		friends() {
+			return this.friendStore.friends;
+		},
+		friendGroupMap() {
+			// 按首字母分组
+			let groupMap = new Map();
+			this.friends.forEach((f) => {
+				if (this.searchText && !f.nickName.includes(this.searchText)) {
+					return;
+				}
+				let letter = this.firstLetter(f.nickName).toUpperCase();
+				// 非英文一律为#组
+				if (!this.isEnglish(letter)) {
+					letter = "#"
+				}
+				if (f.online) {
+					letter = '*'
+				}
+				if (groupMap.has(letter)) {
+					groupMap.get(letter).push(f);
+				} else {
+					groupMap.set(letter, [f]);
+				}
+			})
+			// 排序
+			let arrayObj = Array.from(groupMap);
+			arrayObj.sort((a, b) => {
+				// #组在最后面
+				if (a[0] == '#' || b[0] == '#') {
+					return b[0].localeCompare(a[0])
+				}
+				return a[0].localeCompare(b[0])
+			})
+			groupMap = new Map(arrayObj.map(i => [i[0], i[1]]));
+			return groupMap;
+		},
+		friendIdx() {
+			return Array.from(this.friendGroupMap.keys());
 		},
-		computed: {
-			friends() {
-				return this.friendStore.friends;
-			},
-			friendGroupMap(){
-				// 按首字母分组
-				let groupMap = new Map();
-				this.friends.forEach((f) => {
-					if(this.searchText && !f.nickName.includes(this.searchText)){
-						return;
-					}
-					let letter = this.firstLetter(f.nickName).toUpperCase();
-					// 非英文一律为#组
-					if (!this.isEnglish(letter)) {
-						letter = "#"
-					}
-					if (f.online) {
-						letter = '*'
-					}
-					if (groupMap.has(letter)) {
-						groupMap.get(letter).push(f);
-					} else {
-						groupMap.set(letter, [f]);
-					}
-				})
-				// 排序
-				let arrayObj = Array.from(groupMap);
-				arrayObj.sort((a, b) => {
-					// #组在最后面
-					if (a[0] == '#' || b[0] == '#') {
-						return b[0].localeCompare(a[0])
-					}
-					return a[0].localeCompare(b[0])
-				})
-				groupMap = new Map(arrayObj.map(i => [i[0], i[1]]));
-				return groupMap;
-			},
-			friendIdx(){
-				return Array.from(this.friendGroupMap.keys());
-			},
-			friendGroups(){
-				return Array.from(this.friendGroupMap.values());
-			}
+		friendGroups() {
+			return Array.from(this.friendGroupMap.values());
 		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.friend {
-		position: relative;
-		border: #dddddd solid 1px;
-		display: flex;
-		flex-direction: column;
+.friend {
+	position: relative;
+	display: flex;
+	flex-direction: column;
 
-		.friend-tip {
-			position: absolute;
-			top: 400rpx;
-			padding: 50rpx;
-			text-align: center;
-			line-height: 50rpx;
-			text-align: left;
-			color: darkblue;
-			font-size: 30rpx;
-		}
+	:deep(.u-index-anchor) {
+		height: 60rpx !important;
+		background-color: unset !important;
+		border-bottom: none !important;
+	}
 
-		.nav-bar {
-			padding: 2rpx 10rpx;
-			display: flex;
-			align-items: center;
-			background-color: white;
+	:deep(.u-index-anchor__text) {
+		color: $im-text-color !important;
+	}
 
-			.nav-search {
-				flex: 1;
-			}
+	:deep(.u-index-list__letter__item) {
+		width: 48rpx !important;
+		height: 48rpx !important;
+	}
 
-			.nav-add {
-				cursor: pointer;
-			}
-		}
+	:deep(.u-index-list__letter__item__index) {
+		font-size: $im-font-size-small !important;
+	}
+
+	.friend-tip {
+		position: absolute;
+		top: 400rpx;
+		padding: 50rpx;
+		text-align: center;
+		line-height: 50rpx;
+		color: $im-text-color-lighter;
+	}
+
+	.friend-items {
+		flex: 1;
+		padding: 0;
+		overflow: hidden;
+		position: relative;
 
-		.friend-items {
-			flex: 1;
-			padding: 0;
-			border: #dddddd solid 1px;
-			overflow: hidden;
-			position: relative;
-				
-			.scroll-bar {
-				height: 100%;
-			}
+		.scroll-bar {
+			height: 100%;
 		}
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/pages/group/group-edit.vue b/im-uniapp/pages/group/group-edit.vue
index fb64bd1..1b5f6e8 100644
--- a/im-uniapp/pages/group/group-edit.vue
+++ b/im-uniapp/pages/group/group-edit.vue
@@ -1,150 +1,157 @@
 <template>
 	<view v-if="userStore.userInfo.type == 1" class="page group-edit">
-		<uni-forms ref="form" :modelValue="group" :rules="rules" validate-trigger="bind" label-position="top"
-			label-width="100%">
-			<uni-forms-item label="群聊头像:" name="headImage">
-				<image-upload v-if="isOwner" :onSuccess="onUnloadImageSuccess">
-					<image :src="group.headImageThumb" class="group-image"></image>
-				</image-upload>
-				<head-image  v-if="!isOwner" :name="group.showGroupName" 
-					:url="group.headImageThumb" :size="200"></head-image>
-			</uni-forms-item>
-			<uni-forms-item label="群聊名称:" name="name" :required="true">
-				<uni-easyinput type="text" v-model="group.name" :disabled="!isOwner" placeholder="请输入群聊名称" />
-			</uni-forms-item>
-			<uni-forms-item label="群聊备注:" name="remarkGroupName">
-				<uni-easyinput v-model="group.remarkGroupName" type="text" :placeholder="group.name" />
-			</uni-forms-item>
-			<uni-forms-item label="我在本群的昵称:" name="remarkNickName">
-				<uni-easyinput v-model="group.remarkNickName" type="text" :placeholder="userStore.userInfo.nickName" />
-			</uni-forms-item>
-			<uni-forms-item label="群公告:" name="notice">
-				<uni-easyinput type="textarea" v-model="group.notice" :disabled="!isOwner" placeholder="请输入群公告" />
-			</uni-forms-item>
-		</uni-forms>
-		<button type="primary" @click="submit()">提交</button>
+		<nav-bar back>修改群资料</nav-bar>
+		<uni-card :is-shadow="false" is-full :border="false">
+			<uni-forms ref="form" :modelValue="group" :rules="rules" validate-trigger="bind" label-position="top"
+				label-width="100%">
+				<uni-forms-item name="headImage" class="avatar">
+					<image-upload v-if="isOwner" :onSuccess="onUnloadImageSuccess">
+						<image :src="group.headImageThumb" class="group-image"></image>
+					</image-upload>
+					<head-image v-if="!isOwner" :name="group.showGroupName" :url="group.headImageThumb"
+						:size="200"></head-image>
+				</uni-forms-item>
+				<uni-forms-item label="群聊名称" name="name" :required="true">
+					<uni-easyinput type="text" v-model="group.name" :disabled="!isOwner" placeholder="请输入群聊名称" />
+				</uni-forms-item>
+				<uni-forms-item label="群聊备注" name="remarkGroupName">
+					<uni-easyinput v-model="group.remarkGroupName" type="text" :placeholder="group.name" />
+				</uni-forms-item>
+				<uni-forms-item label="我在本群的昵称" name="remarkNickName">
+					<uni-easyinput v-model="group.remarkNickName" type="text"
+						:placeholder="userStore.userInfo.nickName" />
+				</uni-forms-item>
+				<uni-forms-item label="群公告" name="notice">
+					<uni-easyinput type="textarea" v-model="group.notice" :disabled="!isOwner" placeholder="请输入群公告" />
+				</uni-forms-item>
+			</uni-forms>
+		</uni-card>
+		<button class="bottom-btn" type="primary" @click="submit()">提交</button>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				group: {},
-				rules: {
-					name: {
-						rules: [{
-							required: true,
-							errorMessage: '请输入群聊名称',
-						}]
-					}
-
+export default {
+	data() {
+		return {
+			group: {},
+			rules: {
+				name: {
+					rules: [{
+						required: true,
+						errorMessage: '请输入群聊名称',
+					}]
 				}
+
+			}
+		}
+	},
+	methods: {
+		submit() {
+			if (this.group.id) {
+				this.modifyGroup();
+			} else {
+				this.createNewGroup();
 			}
 		},
+		onUnloadImageSuccess(file, res) {
+			this.group.headImage = res.data.originUrl;
+			this.group.headImageThumb = res.data.thumbUrl;
+		},
+		modifyGroup() {
+			this.$http({
+				url: "/group/modify",
+				method: "PUT",
+				data: this.group
+			}).then((group) => {
+				this.groupStore.updateGroup(group);
+				uni.showToast({
+					title: "修改群聊信息成功",
+					icon: 'none'
+				});
+				setTimeout(() => {
+					let pages = getCurrentPages();
+					let prevPage = pages[pages.length - 2];
+					prevPage.$vm.loadGroupInfo();
+					uni.navigateBack();
+				}, 1000);
 
-		methods: {
-			submit() {
-				if (this.group.id) {
-					this.modifyGroup();
-				} else {
-					this.createNewGroup();
-				}
-			},
-			onUnloadImageSuccess(file, res) {
-				this.group.headImage = res.data.originUrl;
-				this.group.headImageThumb = res.data.thumbUrl;
-			},
-			modifyGroup() {
-				this.$http({
-					url: "/group/modify",
-					method: "PUT",
-					data: this.group
-				}).then((group) => {
-					this.groupStore.updateGroup(group);
-					uni.showToast({
-						title: "修改群聊信息成功",
-						icon: 'none'
-					});
-					setTimeout(() => {
-						let pages = getCurrentPages();
-						let prevPage = pages[pages.length - 2];
-						prevPage.$vm.loadGroupInfo();
-						uni.navigateBack();
-					}, 1000);
-
-				})
-			},
-			createNewGroup() {
-				this.$http({
-					url: "/group/create",
-					method: 'POST',
-					data: this.group
-				}).then((group) => {
-					this.groupStore.addGroup(group);
-					uni.showToast({
-						title: `群聊创建成功，快邀请小伙伴进群吧`,
-						icon: 'none',
-						duration: 1500
+			})
+		},
+		createNewGroup() {
+			this.$http({
+				url: "/group/create",
+				method: 'POST',
+				data: this.group
+			}).then((group) => {
+				this.groupStore.addGroup(group);
+				uni.showToast({
+					title: `群聊创建成功，快邀请小伙伴进群吧`,
+					icon: 'none',
+					duration: 1500
+				});
+				setTimeout(() => {
+					uni.navigateTo({
+						url: "/pages/group/group-info?id=" + group.id
 					});
-					setTimeout(() => {
-						uni.navigateTo({
-							url: "/pages/group/group-info?id=" + group.id
-						});
-					}, 1500)
-
-				})
-			},
-			loadGroupInfo(id) {
-				this.$http({
-					url: `/group/find/${id}`,
-					method: 'GET'
-				}).then((group) => {
-					this.group = group;
-					// 更新聊天页面的群聊信息
-					this.chatStore.updateChatFromGroup(group);
-					// 更新聊天列表的群聊信息
-					this.groupStore.updateGroup(group);
+				}, 1500)
 
-				});
-			},
-			initNewGroup() {
-				let userInfo = this.userStore.userInfo;
-				this.group = {
-					name: `${userInfo.userName}创建的群聊`,
-					headImage: userInfo.headImage,
-					headImageThumb: userInfo.headImageThumb,
-					ownerId: this.userStore.userInfo.id
-				}
-			}
+			})
 		},
-		computed: {
-			isOwner() {
-				return this.userStore.userInfo.id == this.group.ownerId
-			}
+		loadGroupInfo(id) {
+			this.$http({
+				url: `/group/find/${id}`,
+				method: 'GET'
+			}).then((group) => {
+				this.group = group;
+				// 更新聊天页面的群聊信息
+				this.chatStore.updateChatFromGroup(group);
+				// 更新聊天列表的群聊信息
+				this.groupStore.updateGroup(group);
+
+			});
 		},
-		onLoad(options) {
-			if (options.id) {
-				// 修改群聊
-				this.loadGroupInfo(options.id);
-			} else {
-				// 创建群聊
-				this.initNewGroup();
+		initNewGroup() {
+			let userInfo = this.userStore.userInfo;
+			this.group = {
+				name: `${userInfo.userName}创建的群聊`,
+				headImage: userInfo.headImage,
+				headImageThumb: userInfo.headImageThumb,
+				ownerId: this.userStore.userInfo.id
 			}
-
 		}
+	},
+	computed: {
+		isOwner() {
+			return this.userStore.userInfo.id == this.group.ownerId
+		}
+	},
+	onLoad(options) {
+		if (options.id) {
+			// 修改群聊
+			this.loadGroupInfo(options.id);
+		} else {
+			// 创建群聊
+			this.initNewGroup();
+		}
+
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.group-edit {
-		padding: 20rpx;
+.group-edit {
+	//padding: 20rpx;
 
-		.group-image {
-			width: 200rpx;
-			height: 200rpx;
-			border: 1px solid #ccc;
-			border-radius: 5%;
-		}
+	.group-image {
+		width: 200rpx;
+		height: 200rpx;
+		border: 1px solid #ccc;
+		border-radius: 5%;
 	}
-</style>
\ No newline at end of file
+}
+
+.avatar {
+	margin-top: -30px;
+}
+</style>
diff --git a/im-uniapp/pages/group/group-info.vue b/im-uniapp/pages/group/group-info.vue
index d764fd3..9944bd4 100644
--- a/im-uniapp/pages/group/group-info.vue
+++ b/im-uniapp/pages/group/group-info.vue
@@ -1,280 +1,266 @@
 <template>
 	<view v-if="userStore.userInfo.type == 1" class="page group-info">
-		<view v-if="!group.quit"  class="group-members">
+		<nav-bar back>群聊信息</nav-bar>
+		<view v-if="!group.quit" class="group-members">
 			<view class="member-items">
-				<view v-for="(member,idx) in  groupMembers" :key="idx">
-					<view class="member-item" v-if="idx<9">
-						<head-image :id="member.userId" :name="member.showNickName" :url="member.headImage" 
-						:size="100" :online="member.online" ></head-image>
+				<view v-for="(member, idx) in groupMembers" :key="idx">
+					<view class="member-item" v-if="idx < 9">
+						<head-image :id="member.userId" :name="member.showNickName" :url="member.headImage" size="small"
+							:online="member.online"></head-image>
 						<view class="member-name">
-							<text>{{member.showNickName}}</text>
+							<text>{{ member.showNickName }}</text>
 						</view>
 					</view>
 				</view>
 				<view class="invite-btn" @click="onInviteMember()">
-					<uni-icons type="plusempty" size="28" color="#888888"></uni-icons>
+					<uni-icons type="plusempty" size="20" color="#888888"></uni-icons>
 				</view>
 			</view>
-			<view class="member-more" @click="onShowMoreMmeber()">{{`查看全部群成员${groupMembers.length}人`}}></view>
+			<view class="member-more" @click="onShowMoreMmeber()">{{ `查看全部群成员${groupMembers.length}人` }}></view>
 		</view>
 		<view class="group-detail">
-			<uni-section title="群聊名称:" titleFontSize="14px">
+
+			<uni-section title="群聊名称">
 				<template v-slot:right>
-					<text class="detail-text">{{group.name}}</text>
+					<text class="detail-text">{{ group.name }}</text>
 				</template>
 			</uni-section>
-			<uni-section title="群主:" titleFontSize="14px">
+			<uni-section title="群主">
 				<template v-slot:right>
-					<text class="detail-text">{{ownerName}}</text>
+					<text class="detail-text">{{ ownerName }}</text>
 				</template>
 			</uni-section>
-
-			<uni-section title="群名备注:" titleFontSize="14px">
+			<uni-section title="群名备注">
 				<template v-slot:right>
-					<text class="detail-text"> {{group.remarkGroupName}}</text>
+					<text class="detail-text"> {{ group.remarkGroupName }}</text>
 				</template>
 			</uni-section>
-			<uni-section title="我在本群的昵称:" titleFontSize="14px">
+			<uni-section title="我在本群的昵称">
 				<template v-slot:right>
-					<text class="detail-text"> {{group.showNickName}}</text>
+					<text class="detail-text"> {{ group.showNickName }}</text>
 				</template>
 			</uni-section>
-			<uni-section v-if="group.notice" title="群公告:"  titleFontSize="14px">
+			<uni-section v-if="group.notice" title="群公告">
 				<uni-notice-bar :text="group.notice" />
 			</uni-section>
-			<view v-if="!group.quit"  class="group-edit" @click="onEditGroup()">修改群聊资料 > </view>
-		</view>
-		<view v-if="!group.quit"  class="btn-group">
-			<button class="btn" type="primary" @click="onSendMessage()">发消息</button>
-			<button class="btn" v-show="!isOwner" type="warn" @click="onQuitGroup()">退出群聊</button>
-			<button class="btn" v-show="isOwner" type="warn" @click="onDissolveGroup()">解散群聊</button>
+			<view v-if="!group.quit" class="group-edit" @click="onEditGroup()">修改群聊资料 > </view>
 		</view>
+		<bar-group v-if="!group.quit">
+			<btn-bar type="primary" title="发送消息" @click="onSendMessage()"></btn-bar>
+			<btn-bar v-if="!isOwner" type="danger" title="退出群聊" @click="onQuitGroup()"></btn-bar>
+			<btn-bar v-if="isOwner" type="danger" title="解散群聊" @click="onDissolveGroup()"></btn-bar>
+		</bar-group>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				groupId: null,
-				group:{},
-				groupMembers: []
-			}
+export default {
+	data() {
+		return {
+			groupId: null,
+			group: {},
+			groupMembers: []
+		}
+	},
+	methods: {
+		onFocusSearch() { },
+		onInviteMember() {
+			uni.navigateTo({
+				url: `/pages/group/group-invite?id=${this.groupId}`
+			})
+		},
+		onShowMoreMmeber() {
+			uni.navigateTo({
+				url: `/pages/group/group-member?id=${this.groupId}`
+			})
+		},
+		onEditGroup() {
+			uni.navigateTo({
+				url: `/pages/group/group-edit?id=${this.groupId}`
+			})
+		},
+		onSendMessage() {
+			let chat = {
+				type: 'GROUP',
+				targetId: this.group.id,
+				showName: this.group.showGroupName,
+				headImage: this.group.headImage,
+			};
+			this.chatStore.openChat(chat);
+			let chatIdx = this.chatStore.findChatIdx(chat);
+			uni.navigateTo({
+				url: "/pages/chat/chat-box?chatIdx=" + chatIdx
+			})
 		},
-		methods: {
-			onFocusSearch() {},
-			onInviteMember() {
-				uni.navigateTo({
-					url: `/pages/group/group-invite?id=${this.groupId}`
-				})
-			},
-			onShowMoreMmeber() {
-				uni.navigateTo({
-					url: `/pages/group/group-member?id=${this.groupId}`
-				})
-			},
-			onEditGroup() {
-				uni.navigateTo({
-					url: `/pages/group/group-edit?id=${this.groupId}`
-				})
-			},
-			onSendMessage() {
-				let chat = {
-					type: 'GROUP',
-					targetId: this.group.id,
-					showName: this.group.showGroupName,
-					headImage: this.group.headImage,
-				};
-				this.chatStore.openChat(chat);
-				let chatIdx = this.chatStore.findChatIdx(chat);
-				uni.navigateTo({
-					url: "/pages/chat/chat-box?chatIdx=" + chatIdx
-				})
-			},
-			onQuitGroup() {
-				uni.showModal({
-					title: '确认退出?',
-					content: `退出群聊后将不再接受群里的消息，确认退出吗?`,
-					success: (res) => {
-						if (res.cancel)
-							return;
-						this.$http({
-							url: `/group/quit/${this.groupId}`,
-							method: 'DELETE'
-						}).then(() => {
-							uni.showModal({
-								title: `退出成功`,
-								content: `您已退出群聊'${this.group.name}'`,
-								showCancel: false,
-								success: () => {
-									setTimeout(()=>{
-										uni.switchTab({
-											url:"/pages/group/group"
-										});
-										this.groupStore.removeGroup(this.groupId);
-										this.chatStore.removeGroupChat(this.groupId);
-									},100)
-								}
-							})
-						});
-					}
-				});
-			},
-			onDissolveGroup() {
-				uni.showModal({
-					title: '确认解散?',
-					content: `确认要解散群聊'${this.group.name}'吗?`,
-					success: (res) => {
-						if (res.cancel)
-							return;
-						this.$http({
-							url: `/group/delete/${this.groupId}`,
-							method: 'delete'
-						}).then(() => {
-							uni.showModal({
-								title: `解散成功`,
-								content: `群聊'${this.group.name}'已解散`,
-								showCancel: false,
-								success: () => {	
-									setTimeout(()=>{
-										uni.switchTab({
-											url:"/pages/group/group"
-										});
-										this.groupStore.removeGroup(this.groupId);
-										this.chatStore.removeGroupChat(this.groupId);
-									},100)	
-								}
-							})
-						});
-					}
-				});
+		onQuitGroup() {
+			uni.showModal({
+				title: '确认退出?',
+				content: `退出群聊后将不再接受群里的消息，确认退出吗?`,
+				success: (res) => {
+					if (res.cancel)
+						return;
+					this.$http({
+						url: `/group/quit/${this.groupId}`,
+						method: 'DELETE'
+					}).then(() => {
+						uni.showModal({
+							title: `退出成功`,
+							content: `您已退出群聊'${this.group.name}'`,
+							showCancel: false,
+							success: () => {
+								setTimeout(() => {
+									uni.switchTab({
+										url: "/pages/group/group"
+									});
+									this.groupStore.removeGroup(this.groupId);
+									this.chatStore.removeGroupChat(this.groupId);
+								}, 100)
+							}
+						})
+					});
+				}
+			});
+		},
+		onDissolveGroup() {
+			uni.showModal({
+				title: '确认解散?',
+				content: `确认要解散群聊'${this.group.name}'吗?`,
+				success: (res) => {
+					if (res.cancel)
+						return;
+					this.$http({
+						url: `/group/delete/${this.groupId}`,
+						method: 'delete'
+					}).then(() => {
+						uni.showModal({
+							title: `解散成功`,
+							content: `群聊'${this.group.name}'已解散`,
+							showCancel: false,
+							success: () => {
+								setTimeout(() => {
+									uni.switchTab({
+										url: "/pages/group/group"
+									});
+									this.groupStore.removeGroup(this.groupId);
+									this.chatStore.removeGroupChat(this.groupId);
+								}, 100)
+							}
+						})
+					});
+				}
+			});
 
-			},
-			loadGroupInfo() {
-				this.$http({
-					url: `/group/find/${this.groupId}`,
-					method: 'GET'
-				}).then((group) => {
-					this.group = group;
-					// 更新聊天页面的群聊信息
-					this.chatStore.updateChatFromGroup(group);
-					// 更新聊天列表的群聊信息
-					this.groupStore.updateGroup(group);
+		},
+		loadGroupInfo() {
+			this.$http({
+				url: `/group/find/${this.groupId}`,
+				method: 'GET'
+			}).then((group) => {
+				this.group = group;
+				// 更新聊天页面的群聊信息
+				this.chatStore.updateChatFromGroup(group);
+				// 更新聊天列表的群聊信息
+				this.groupStore.updateGroup(group);
 
-				});
-			},
-			loadGroupMembers() {
-				console.log("loadGroupMembers")
-				this.$http({
-					url: `/group/members/${this.groupId}`,
-					method: "GET"
-				}).then((members) => {
-					this.groupMembers = members.filter(m => !m.quit);
-				})
-			}
+			});
 		},
-		computed: {
-			ownerName() {
-				let member = this.groupMembers.find((m) => m.userId == this.group.ownerId);
-				return member && member.showNickName;
-			},
-			isOwner() {
-				return this.group.ownerId == this.userStore.userInfo.id;
-			}
+		loadGroupMembers() {
+			console.log("loadGroupMembers")
+			this.$http({
+				url: `/group/members/${this.groupId}`,
+				method: "GET"
+			}).then((members) => {
+				this.groupMembers = members.filter(m => !m.quit);
+			})
+		}
+	},
+	computed: {
+		ownerName() {
+			let member = this.groupMembers.find((m) => m.userId == this.group.ownerId);
+			return member && member.showNickName;
 		},
-		onLoad(options) {
-			this.groupId = options.id;
-			// 查询群聊信息
-			this.loadGroupInfo(options.id);
-			// 查询群聊成员
-			this.loadGroupMembers(options.id)
+		isOwner() {
+			return this.group.ownerId == this.userStore.userInfo.id;
 		}
-		
+	},
+	onLoad(options) {
+		this.groupId = options.id;
+		// 查询群聊信息
+		this.loadGroupInfo(options.id);
+		// 查询群聊成员
+		this.loadGroupMembers(options.id)
 	}
+
+}
 </script>
 
 <style lang="scss" scoped>
-	.group-info {
-		.group-members {
-			padding: 30rpx;
-			background: white;
-			
-			.member-items {
+.group-info {
+	.group-members {
+		padding: 30rpx;
+		background: white;
+
+		.member-items {
+			display: flex;
+			flex-wrap: wrap;
+
+			.member-item {
+				width: 120rpx;
 				display: flex;
-				flex-wrap: wrap;
+				flex-direction: column;
+				margin: 8rpx 2rpx;
+				position: relative;
+				align-items: center;
+				padding-right: 5px;
+				white-space: nowrap;
 
-				.member-item {
-					width: 120rpx;
-					display: flex;
-					flex-direction: column;
-					margin: 8rpx 2rpx;
-					position: relative;
-					align-items: center;
-					padding-right: 5px;
-					background-color: #fafafa;
+				.member-name {
+					width: 100%;
+					flex: 1;
+					overflow: hidden;
+					text-align: center;
 					white-space: nowrap;
-					
-					.member-name {
-						width: 100%;
-						flex: 1;
-						font-size: 14px;
-						overflow: hidden;
-						text-align: center;
-						white-space: nowrap;
-					}
-				}
-
-				.invite-btn {
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					width: 100rpx;
-					height: 100rpx;
-					margin: 10rpx;
-					border: #686868 dashed 2px;
-					border-radius: 10%;
+					padding-top: 8rpx;
+					font-size: $im-font-size-smaller;
 				}
 			}
 
-			.member-more {
-				padding-top: 30rpx;
-				text-align: center;
-				font-size: 32rpx;
-				color: #333;
+			.invite-btn {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 86rpx;
+				height: 86rpx;
+				margin: 10rpx;
+				border: $im-border solid 2rpx;
+				border-radius: 10%;
 			}
 		}
 
-
-		.group-detail {
-			margin-top: 30rpx;
-			padding: 30rpx;
-			background: white;
-			
-			.detail-text{
-				font-size: 28rpx;
-				font-weight: 600;
-			}
-			
-			.group-edit {
-				padding-top: 30rpx;
-				text-align: center;
-				font-size: 32rpx;	
-				color: #333;
-			}
+		.member-more {
+			padding-top: 24rpx;
+			text-align: center;
+			font-size: $im-font-size-small;
+			color: $im-text-color-lighter;
 		}
+	}
 
 
-		.btn-group {
-			margin-top: 30rpx;
-			padding: 30rpx;
-			background: white;
-
+	.group-detail {
+		margin-top: 30rpx;
+		padding: 20rpx 20rpx;
+		background: white;
 
-			.btn {
-				margin: 10rpx;
-			}
+		.detail-text {
+			font-size: $im-font-size;
 		}
 
-
+		.group-edit {
+			padding-top: 30rpx;
+			text-align: center;
+			font-size: $im-font-size-small;
+			color: $im-text-color-lighter;
+		}
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/pages/group/group-invite.vue b/im-uniapp/pages/group/group-invite.vue
index 2676a40..a5a6db3 100644
--- a/im-uniapp/pages/group/group-invite.vue
+++ b/im-uniapp/pages/group/group-invite.vue
@@ -1,160 +1,165 @@
 <template>
 	<view class="page group-invite">
-		<view class="search-bar">
-			<uni-search-bar v-model="searchText" radius="100" cancelButton="none" placeholder="输入好友昵称搜索"></uni-search-bar>
+		<view class="nav-bar">
+			<view class="nav-search">
+				<uni-search-bar v-model="searchText" radius="100" cancelButton="none"
+					placeholder="输入好友昵称搜索"></uni-search-bar>
+			</view>
 		</view>
 		<view class="friend-items">
 			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
 				<view v-for="friend in friendItems" v-show="!searchText || friend.nickName.includes(searchText)"
 					:key="friend.id">
-					<view class="friend-item" @click="onSwitchChecked(friend)">
-						<head-image :name="friend.nickName" 
-							:online="friend.online" :url="friend.headImage"
-							:size="100"></head-image>
-						
-						<view class="friend-name">{{ friend.nickName}}</view>
-						<view class="friend-checked">
-							<radio :checked="friend.checked" :disabled="friend.disabled" @click.stop="onSwitchChecked(friend)"/>
-						</view>
+					<view class="friend-item" @click="onSwitchChecked(friend)"
+						:class="{ checked: friend.checked, disabled: friend.disabled }">
+						<head-image :name="friend.nickName" :online="friend.online"
+							:url="friend.headImage"></head-image>
+						<view class="friend-name">{{ friend.nickName }}</view>
 					</view>
 				</view>
 			</scroll-view>
 		</view>
-		<view>
-			<button type="primary" :disabled="inviteSize==0" @click="onInviteFriends()">邀请({{inviteSize}}) </button>
-		</view>
+		<button class="bottom-btn" type="primary" :disabled="inviteSize == 0"
+			@click="onInviteFriends()">邀请({{ inviteSize }}) </button>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				groupId: null,
-				searchText: "",
-				groupMembers: [],
-				friendItems: []
+export default {
+	data() {
+		return {
+			groupId: null,
+			searchText: "",
+			groupMembers: [],
+			friendItems: []
+		}
+	},
+	methods: {
+		onInviteFriends() {
+			let inviteVo = {
+				groupId: this.groupId,
+				friendIds: []
 			}
-		},
-		methods: {
-			onInviteFriends() {
-				let inviteVo = {
-					groupId: this.groupId,
-					friendIds: []
-				}
-				this.friendItems.forEach((f) => {
-					if (f.checked && !f.disabled) {
-						inviteVo.friendIds.push(f.id);
-					}
-				})
-				if (inviteVo.friendIds.length > 0) {
-					this.$http({
-						url: "/group/invite",
-						method: 'POST',
-						data: inviteVo
-					}).then(() => {
-						uni.showToast({
-							title: "邀请成功",
-							icon: 'none'
-						})
-						setTimeout(() => {
-							// 回退并刷新
-							let pages = getCurrentPages();
-							let prevPage = pages[pages.length - 2];
-							prevPage.$vm.loadGroupMembers();
-							uni.navigateBack();
-						}, 1000);
-
-					})
+			this.friendItems.forEach((f) => {
+				if (f.checked && !f.disabled) {
+					inviteVo.friendIds.push(f.id);
 				}
-			},
-			onShowUserInfo(userId) {
-				uni.navigateTo({
-					url: "/pages/common/user-info?id=" + userId
-				})
-			},
-			onSwitchChecked(friend) {
-				if (!friend.disabled) {
-					friend.checked = !friend.checked;
-				}
-			},
-			initFriendItems() {
-				this.friendItems = [];
-				let friends = this.friendStore.friends;
-				friends.forEach((f => {
-					let item = {
-						id: f.id,
-						headImage: f.headImage,
-						nickName: f.nickName,
-						online: f.online
-					}
-					item.disabled = this.isGroupMember(f.id);
-					item.checked = item.disabled;
-					this.friendItems.push(item);
-				}))
-			},
-			loadGroupMembers(id) {
+			})
+			if (inviteVo.friendIds.length > 0) {
 				this.$http({
-					url: `/group/members/${id}`,
-					method: "GET"
-				}).then((members) => {
-					this.groupMembers = members.filter(m => !m.quit);
-					this.initFriendItems();
-				})
-			},
+					url: "/group/invite",
+					method: 'POST',
+					data: inviteVo
+				}).then(() => {
+					uni.showToast({
+						title: "邀请成功",
+						icon: 'none'
+					})
+					setTimeout(() => {
+						// 回退并刷新
+						let pages = getCurrentPages();
+						let prevPage = pages[pages.length - 2];
+						prevPage.$vm.loadGroupMembers();
+						uni.navigateBack();
+					}, 1000);
 
-			isGroupMember(id) {
-				return this.groupMembers.some(m => m.userId == id);
+				})
 			}
 		},
-		computed: {
-			inviteSize() {
-				return this.friendItems.filter(f => !f.disabled && f.checked).length;
+		onShowUserInfo(userId) {
+			uni.navigateTo({
+				url: "/pages/common/user-info?id=" + userId
+			})
+		},
+		onSwitchChecked(friend) {
+			if (!friend.disabled) {
+				friend.checked = !friend.checked;
 			}
 		},
-		onLoad(options) {
-			this.groupId = options.id;
-			this.loadGroupMembers(options.id);
+		initFriendItems() {
+			this.friendItems = [];
+			let friends = this.friendStore.friends;
+			friends.forEach((f => {
+				let item = {
+					id: f.id,
+					headImage: f.headImage,
+					nickName: f.nickName,
+					online: f.online
+				}
+				item.disabled = this.isGroupMember(f.id);
+				item.checked = item.disabled;
+				this.friendItems.push(item);
+			}))
+		},
+		loadGroupMembers(id) {
+			this.$http({
+				url: `/group/members/${id}`,
+				method: "GET"
+			}).then((members) => {
+				this.groupMembers = members.filter(m => !m.quit);
+				this.initFriendItems();
+			})
+		},
+
+		isGroupMember(id) {
+			return this.groupMembers.some(m => m.userId == id);
+		}
+	},
+	computed: {
+		inviteSize() {
+			return this.friendItems.filter(f => !f.disabled && f.checked).length;
 		}
+	},
+	onLoad(options) {
+		this.groupId = options.id;
+		this.loadGroupMembers(options.id);
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.group-invite {
+.group-invite {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+
+	.friend-items {
 		position: relative;
-		border: #dddddd solid 1px;
-		display: flex;
-		flex-direction: column;
+		flex: 1;
+		overflow: hidden;
 
-		.friend-items {
+		.friend-item {
+			height: 120rpx;
+			display: flex;
+			margin-bottom: 1rpx;
 			position: relative;
-			flex: 1;
-			overflow: hidden;
+			padding: 0 30rpx;
+			align-items: center;
+			background-color: white;
+			white-space: nowrap;
 
-			.friend-item {
-				height: 120rpx;
-				display: flex;
-				margin-bottom: 1rpx;
-				position: relative;
-				padding: 0 30rpx ;
-				align-items: center;
-				background-color: white;
-				white-space: nowrap;
-			
-				.friend-name {
-					flex:1;	
-					padding-left: 20rpx;
-					font-size: 30rpx;
-					font-weight: 600;
-					line-height: 60rpx;
-					white-space: nowrap;
-					overflow: hidden;
-				}
+			&.disabled {
+				background-color: $im-bg-active !important;
 			}
-			
-			.scroll-bar {
-				height: 100%;
+
+			&.checked {
+				background-color: $im-color-primary-light-9;
+			}
+
+			.friend-name {
+				flex: 1;
+				padding-left: 20rpx;
+				font-size: 30rpx;
+				font-weight: 600;
+				line-height: 60rpx;
+				white-space: nowrap;
+				overflow: hidden;
 			}
 		}
+
+		.scroll-bar {
+			height: 100%;
+		}
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/pages/group/group-member.vue b/im-uniapp/pages/group/group-member.vue
index 1b42ee9..d90a813 100644
--- a/im-uniapp/pages/group/group-member.vue
+++ b/im-uniapp/pages/group/group-member.vue
@@ -1,29 +1,27 @@
 <template>
-	<view  class="page group-member">
-		<view class="search-bar">
-			<uni-search-bar v-model="searchText" radius="100" cancelButton="none" placeholder="输入昵称搜索"></uni-search-bar>
+	<view class="page group-member">
+		<nav-bar back>群成员</nav-bar>
+		<view class="nav-bar">
+			<view class="nav-search">
+				<uni-search-bar v-model="searchText" radius="100" cancelButton="none"
+					placeholder="输入昵称搜索"></uni-search-bar>
+			</view>
 		</view>
 		<view class="member-items">
 			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
-				<view v-for="(member,idx) in groupMembers"
+				<view v-for="(member, idx) in groupMembers"
 					v-show="!searchText || member.showNickName.includes(searchText)" :key="idx">
 					<view class="member-item" @click="onShowUserInfo(member.userId)">
-						<head-image :name="member.showNickName" 
-							:online="member.online" :url="member.headImage"
-							:size="100"></head-image>
-						<view class="member-name">{{ member.showNickName}}
-						<uni-tag v-if="member.userId==group.ownerId" 
-							text="群主" size="small" circle
-							custom-style="background-color: #e30a0a;">
-						</uni-tag>
-						<uni-tag v-if="member.userId==userStore.userInfo.id"
-							 text="我" size="small" circle></uni-tag>
-							 
+						<head-image :name="member.showNickName" :online="member.online"
+							:url="member.headImage"></head-image>
+						<view class="member-name">{{ member.showNickName }}
+							<uni-tag v-if="member.userId == group.ownerId" text="群主" size="small" circle type="error">
+							</uni-tag>
+							<uni-tag v-if="member.userId == userStore.userInfo.id" text="我" size="small" circle></uni-tag>
 						</view>
-						
 						<view class="member-kick">
 							<button type="warn" plain v-show="isOwner && !isSelf(member.userId)" size="mini"
-								@click.stop="onKickOut(member,idx)">移出群聊</button>
+								@click.stop="onKickOut(member, idx)">移出群聊</button>
 						</view>
 					</view>
 				</view>
@@ -33,130 +31,128 @@
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				isModify: false,
-				searchText: "",
-				group: {},
-				groupMembers: []
-			}
+export default {
+	data() {
+		return {
+			isModify: false,
+			searchText: "",
+			group: {},
+			groupMembers: []
+		}
+	},
+	methods: {
+		onShowUserInfo(userId) {
+			uni.navigateTo({
+				url: "/pages/common/user-info?id=" + userId
+			})
 		},
-		methods: {
-			onShowUserInfo(userId) {
-				uni.navigateTo({
-					url: "/pages/common/user-info?id=" + userId
-				})
-			},
-			onKickOut(member, idx) {
-				uni.showModal({
-					title: '确认移出?',
-					content: `确定将成员'${member.showNickName}'移出群聊吗？`,
-					success: (res) => {
-						if (res.cancel)
-							return;
-						this.$http({
-							url: `/group/kick/${this.group.id}?userId=${member.userId}`,
-							method: 'DELETE'
-						}).then(() => {
-							uni.showToast({
-								title: `已将${member.showNickName}移出群聊`,
-								icon: 'none'
-							})
-							this.groupMembers.splice(idx, 1);
-							this.isModify = true;
-						});
-					}
-				})
-			},
-			loadGroupInfo(id) {
-				this.$http({
-					url: `/group/find/${id}`,
-					method: 'GET'
-				}).then((group) => {
-					this.group = group;
-				});
-			},
-			loadGroupMembers(id) {
-				this.$http({
-					url: `/group/members/${id}`,
-					method: "GET"
-				}).then((members) => {
-					this.groupMembers = members.filter(m => !m.quit);
-				})
-			},
-			isSelf(userId) {
-				return this.userStore.userInfo.id == userId
-			}
+		onKickOut(member, idx) {
+			uni.showModal({
+				title: '确认移出?',
+				content: `确定将成员'${member.showNickName}'移出群聊吗？`,
+				success: (res) => {
+					if (res.cancel)
+						return;
+					this.$http({
+						url: `/group/kick/${this.group.id}?userId=${member.userId}`,
+						method: 'DELETE'
+					}).then(() => {
+						uni.showToast({
+							title: `已将${member.showNickName}移出群聊`,
+							icon: 'none'
+						})
+						this.groupMembers.splice(idx, 1);
+						this.isModify = true;
+					});
+				}
+			})
 		},
-		computed: {
-			isOwner() {
-				return this.userStore.userInfo.id == this.group.ownerId;
-			}
+		loadGroupInfo(id) {
+			this.$http({
+				url: `/group/find/${id}`,
+				method: 'GET'
+			}).then((group) => {
+				this.group = group;
+			});
 		},
-		onLoad(options) {
-			this.loadGroupInfo(options.id);
-			this.loadGroupMembers(options.id);
+		loadGroupMembers(id) {
+			this.$http({
+				url: `/group/members/${id}`,
+				method: "GET"
+			}).then((members) => {
+				this.groupMembers = members.filter(m => !m.quit);
+			})
 		},
-		onUnload() {
-			if (this.isModify) {
-				// 刷新页面
-				let pages = getCurrentPages();
-				let prevPage = pages[pages.length - 2];
-				prevPage.$vm.loadGroupMembers();
-			}
+		isSelf(userId) {
+			return this.userStore.userInfo.id == userId
+		}
+	},
+	computed: {
+		isOwner() {
+			return this.userStore.userInfo.id == this.group.ownerId;
+		}
+	},
+	onLoad(options) {
+		this.loadGroupInfo(options.id);
+		this.loadGroupMembers(options.id);
+	},
+	onUnload() {
+		if (this.isModify) {
+			// 刷新页面
+			let pages = getCurrentPages();
+			let prevPage = pages[pages.length - 2];
+			prevPage.$vm.loadGroupMembers();
 		}
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	.group-member {
+.group-member {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+
+	.member-items {
 		position: relative;
-		border: #dddddd solid 1px;
-		display: flex;
-		flex-direction: column;
+		flex: 1;
+		overflow: hidden;
 
-		.member-items {
+		.member-item {
+			height: 120rpx;
+			display: flex;
+			margin-bottom: 1rpx;
 			position: relative;
-			flex: 1;
-			overflow: hidden;
+			padding: 0 30rpx;
+			align-items: center;
+			background-color: white;
+			white-space: nowrap;
 
-			.member-item {
-				height: 120rpx;
+			.member-name {
 				display: flex;
-				margin-bottom: 1rpx;
-				position: relative;
-				padding: 0 30rpx ;
 				align-items: center;
-				background-color: white;
+				flex: 1;
+				padding-left: 20rpx;
+				font-size: $im-font-size;
+				line-height: $im-font-size * 2;
 				white-space: nowrap;
-			
-				.member-name {
-					display: flex;
-					align-items: center;
-					flex:1;	
-					padding-left: 20rpx;
-					font-size: 30rpx;
-					font-weight: 600;
-					line-height: 60rpx;
-					white-space: nowrap;
-					overflow: hidden;
-					
-					.uni-tag {
-						margin-left: 5rpx;
-						width: 40rpx;
-						border: 0;
-						height: 30rpx;
-						line-height: 30rpx;
-						font-size: 20rpx;
-						text-align: center;
-					}
+				overflow: hidden;
+
+				.uni-tag {
+					margin-left: 5rpx;
+					width: 40rpx;
+					border: 0;
+					height: 30rpx;
+					line-height: 30rpx;
+					font-size: 20rpx;
+					text-align: center;
 				}
 			}
+		}
 
-			.scroll-bar {
-				height: 100%;
-			}
+		.scroll-bar {
+			height: 100%;
 		}
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/pages/group/group.vue b/im-uniapp/pages/group/group.vue
index 2a14cf8..1242d84 100644
--- a/im-uniapp/pages/group/group.vue
+++ b/im-uniapp/pages/group/group.vue
@@ -1,21 +1,19 @@
 <template>
 	<view class="tab-page group">
-		<view class="nav-bar">
+		<nav-bar add search @add="onCreateNewGroup" @search="showSearch = !showSearch">群聊</nav-bar>
+		<view class="nav-bar" v-if="showSearch">
 			<view class="nav-search">
 				<uni-search-bar v-model="searchText" cancelButton="none" radius="100"
 					placeholder="点击搜索群聊"></uni-search-bar>
 			</view>
-			<view class="nav-add" @click="onCreateNewGroup()">
-				<uni-icons type="personadd" size="35"></uni-icons>
-			</view>
 		</view>
-		<view class="group-tip" v-if="groupStore.groups.length==0">
+		<view class="group-tip" v-if="groupStore.groups.length == 0">
 			温馨提示：您现在还没有加入任何群聊，点击右上方'+'按钮可以创建群聊哦~
 		</view>
 		<view class="group-items" v-else>
 			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
 				<view v-for="group in groupStore.groups" :key="group.id">
-					<group-item v-if="!group.quit&&group.showGroupName.includes(searchText)"
+					<group-item v-if="!group.quit && group.showGroupName.includes(searchText)"
 						:group="group"></group-item>
 				</view>
 			</scroll-view>
@@ -24,68 +22,51 @@
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				searchText: ""
-			}
-		},
-		methods: {
-			onFocusSearch() {
-
-			},
-			onCreateNewGroup() {
-				uni.navigateTo({
-					url: "/pages/group/group-edit"
-				})
-			}
+export default {
+	data() {
+		return {
+			showSearch: false,
+			searchText: ""
 		}
+	},
+	methods: {
+		onFocusSearch() {
 
+		},
+		onCreateNewGroup() {
+			uni.navigateTo({
+				url: "/pages/group/group-edit"
+			})
+		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.group {
-		position: relative;
-		border: #dddddd solid 1px;
-		display: flex;
-		flex-direction: column;
-
-		.nav-bar {
-			padding: 2rpx 10rpx;
-			display: flex;
-			align-items: center;
-			background-color: white;
+.group {
+	position: relative;
+	display: flex;
+	flex-direction: column;
 
-			.nav-search {
-				flex: 1;
-			}
-
-			.nav-add {
-				cursor: pointer;
-			}
-		}
-
-		.group-tip {
-			position: absolute;
-			top: 400rpx;
-			padding: 50rpx;
-			text-align: left;
-			line-height: 50rpx;
-			color: darkblue;
-			font-size: 30rpx;
-		}
+	.group-tip {
+		position: absolute;
+		top: 400rpx;
+		padding: 50rpx;
+		text-align: left;
+		line-height: 50rpx;
+		color: darkblue;
+		font-size: 30rpx;
+	}
 
-		.group-items {
-			flex: 1;
-			padding: 0;
-			border: #dddddd solid 1px;
-			overflow: hidden;
-			position: relative;
+	.group-items {
+		flex: 1;
+		padding: 0;
+		overflow: hidden;
+		position: relative;
 
-			.scroll-bar {
-				height: 100%;
-			}
+		.scroll-bar {
+			height: 100%;
 		}
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/pages/login/login.vue b/im-uniapp/pages/login/login.vue
index 5be5079..b8e5faf 100644
--- a/im-uniapp/pages/login/login.vue
+++ b/im-uniapp/pages/login/login.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="page login">
+	<view class="login">
 		<view class="title">欢迎登录</view>
 		<uni-forms class="form" :modelValue="loginForm" :rules="rules" validate-trigger="bind">
 			<uni-forms-item name="userName">
@@ -17,85 +17,85 @@
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				loginForm: {
-					terminal: 1, // APP终端
-					userName: '',
-					password: ''
+export default {
+	data() {
+		return {
+			loginForm: {
+				terminal: 1, // APP终端
+				userName: '',
+				password: ''
+			},
+			rules: {
+				userName: {
+					rules: [{
+						required: true,
+						errorMessage: '请输入用户名',
+					}]
 				},
-				rules: {
-					userName: {
-						rules: [{
-							required: true,
-							errorMessage: '请输入用户名',
-						}]
-					},
-					password: {
-						rules: [{
-							required: true,
-							errorMessage: '请输入密码',
-						}]
-					}
+				password: {
+					rules: [{
+						required: true,
+						errorMessage: '请输入密码',
+					}]
 				}
 			}
-		},
-		methods: {
-			submit() {
-				this.$http({
-					url: '/login',
-					data: this.loginForm,
-					method: 'POST'
-				}).then(loginInfo => {
-					console.log("登录成功,自动跳转到聊天页面...")
-					uni.setStorageSync("userName", this.loginForm.userName);
-					uni.setStorageSync("password", this.loginForm.password);
-					uni.setStorageSync("loginInfo", loginInfo);
-					// 调用App.vue的初始化方法
-					getApp().$vm.init()
-					// 跳转到聊天页面   
-					uni.switchTab({
-						url: "/pages/chat/chat"
-					})
+		}
+	},
+	methods: {
+		submit() {
+			this.$http({
+				url: '/login',
+				data: this.loginForm,
+				method: 'POST'
+			}).then(loginInfo => {
+				console.log("登录成功,自动跳转到聊天页面...")
+				uni.setStorageSync("userName", this.loginForm.userName);
+				uni.setStorageSync("password", this.loginForm.password);
+				uni.setStorageSync("loginInfo", loginInfo);
+				// 调用App.vue的初始化方法
+				getApp().$vm.init()
+				// 跳转到聊天页面   
+				uni.switchTab({
+					url: "/pages/chat/chat"
 				})
-			}
-		},
-
-		onLoad() {
-			this.loginForm.userName = uni.getStorageSync("userName");
-			this.loginForm.password = uni.getStorageSync("password");
+			})
 		}
+	},
+
+	onLoad() {
+		this.loginForm.userName = uni.getStorageSync("userName");
+		this.loginForm.password = uni.getStorageSync("password");
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.login {
-		.title {
-			padding-top: 150rpx;
-			padding-bottom: 50rpx;
-			color: royalblue;
-			text-align: center;
-			font-size: 60rpx;
-			font-weight: 600;
-		}
+.login {
+	.title {
+		padding-top: 150rpx;
+		padding-bottom: 50rpx;
+		color: $im-color-primary;
+		text-align: center;
+		font-size: 24px;
+		font-weight: bold;
+	}
 
-		.form {
-			padding: 50rpx;
+	.form {
+		padding: 50rpx;
 
-			.btn-submit {
-				margin-top: 80rpx;
-				border-radius: 50rpx;
-			}
+		.btn-submit {
+			margin-top: 80rpx;
+			border-radius: 50rpx;
 		}
+	}
 
-		.nav-register {
-			position: fixed;
-			width: 100%;
-			bottom: 100rpx;
-			color: royalblue;
-			text-align: center;
-			font-size: 32rpx;
-		}
+	.nav-register {
+		position: fixed;
+		width: 100%;
+		bottom: 100rpx;
+		color: $im-color-primary;
+		text-align: center;
+		font-size: $im-font-size;
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/pages/mine/mine-edit.vue b/im-uniapp/pages/mine/mine-edit.vue
index 515d0cc..8fda220 100644
--- a/im-uniapp/pages/mine/mine-edit.vue
+++ b/im-uniapp/pages/mine/mine-edit.vue
@@ -1,79 +1,81 @@
 <template>
 	<view class="page mine-edit">
-		<uni-forms ref="form" :modelValue="userInfo" label-position="top"
-			label-width="100%">
-			<uni-forms-item label="头像:" name="headImage">
-				<image-upload :onSuccess="onUnloadImageSuccess">
-					<image :src="userInfo.headImageThumb" class="head-image"></image>
-				</image-upload>
-			</uni-forms-item>
-			<uni-forms-item label="用户名:" name="userName">
-				<uni-easyinput type="text" v-model="userInfo.userName" :disabled="true" />
-			</uni-forms-item>
-			<uni-forms-item label="昵称:" name="nickName">
-				<uni-easyinput v-model="userInfo.nickName" type="text" :placeholder="userInfo.userName" />
-			</uni-forms-item>
-			<uni-forms-item label="性别:" name="sex">
-				<radio-group @change="onSexchange">
-					<label class="radio"><radio value="0" :checked="userInfo.sex==0" />男</label>
-					<label class="radio"><radio value="1" :checked="userInfo.sex==1" />女  </label>
-				</radio-group>
-			</uni-forms-item>
-			<uni-forms-item label="签名:" name="signature">
-				<uni-easyinput type="textarea" v-model="userInfo.signature" placeholder="编辑个性标签,展示我的独特态度" />
-			</uni-forms-item>
-		</uni-forms>
-		<button type="primary" @click="onSubmit()">提交</button>
+		<nav-bar back>修改我的信息</nav-bar>
+		<uni-card :is-shadow="false" is-full :border="false">
+			<uni-forms ref="form" :modelValue="userInfo" label-position="top" label-width="100%">
+				<uni-forms-item name="headImage" class="avatar">
+					<image-upload :onSuccess="onUnloadImageSuccess">
+						<image :src="userInfo.headImageThumb" class="head-image"></image>
+					</image-upload>
+				</uni-forms-item>
+				<uni-forms-item label="用户名" name="userName">
+					<uni-easyinput type="text" v-model="userInfo.userName" :disabled="true" />
+				</uni-forms-item>
+				<uni-forms-item label="昵称" name="nickName">
+					<uni-easyinput v-model="userInfo.nickName" type="text" :placeholder="userInfo.userName" />
+				</uni-forms-item>
+				<uni-forms-item label="性别" name="sex">
+					<uni-data-checkbox v-model="userInfo.sex"
+						:localdata="[{ text: '男', value: 0 }, { text: '女', value: 1 }]"></uni-data-checkbox>
+				</uni-forms-item>
+				<uni-forms-item label="签名" name="signature">
+					<uni-easyinput type="textarea" v-model="userInfo.signature" placeholder="编辑个性标签,展示我的独特态度" />
+				</uni-forms-item>
+			</uni-forms>
+		</uni-card>
+		<button type="primary" class="bottom-btn" @click="onSubmit()">提交</button>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				userInfo: {}
-			}
+export default {
+	data() {
+		return {
+			userInfo: {}
+		}
+	},
+	methods: {
+		onSexchange(e) {
+			this.userInfo.sex = e.detail.value;
 		},
-		methods:{
-			onSexchange(e){
-				this.userInfo.sex=e.detail.value;
-			},
-			onUnloadImageSuccess(file, res) {
-				this.userInfo.headImage = res.data.originUrl;
-				this.userInfo.headImageThumb = res.data.thumbUrl;
-			},
-			onSubmit(){
-				this.$http({
-					url: "/user/update",
-					method: "PUT",
-					data: this.userInfo
-				}).then(()=>{
-					this.userStore.setUserInfo(this.userInfo);
-					uni.showToast({
-						title:"修改成功",
-						icon: 'none'
-					});
-					setTimeout(()=>{
-						uni.navigateBack();
-					},1000);
-				})	
-			}
+		onUnloadImageSuccess(file, res) {
+			this.userInfo.headImage = res.data.originUrl;
+			this.userInfo.headImageThumb = res.data.thumbUrl;
 		},
-		onLoad() {
-			// 深拷贝一份数据
-			let mine = this.userStore.userInfo;
-			this.userInfo = JSON.parse(JSON.stringify(mine));
+		onSubmit() {
+			this.$http({
+				url: "/user/update",
+				method: "PUT",
+				data: this.userInfo
+			}).then(() => {
+				this.userStore.setUserInfo(this.userInfo);
+				uni.showToast({
+					title: "修改成功",
+					icon: 'none'
+				});
+				setTimeout(() => {
+					uni.navigateBack();
+				}, 1000);
+			})
 		}
+	},
+	onLoad() {
+		// 深拷贝一份数据
+		let mine = this.userStore.userInfo;
+		this.userInfo = JSON.parse(JSON.stringify(mine));
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	.mine-edit {
-		padding: 20rpx;
-
-		.head-image {
-			width: 200rpx;
-			height: 200rpx;
-		}
+.mine-edit {
+	.head-image {
+		width: 200rpx;
+		height: 200rpx;
 	}
-</style>
\ No newline at end of file
+}
+
+.avatar {
+	margin-top: -30px;
+}
+</style>
diff --git a/im-uniapp/pages/mine/mine-password.vue b/im-uniapp/pages/mine/mine-password.vue
index c494396..a029d15 100644
--- a/im-uniapp/pages/mine/mine-password.vue
+++ b/im-uniapp/pages/mine/mine-password.vue
@@ -1,104 +1,101 @@
 <template>
 	<view class="page mine-password">
-		<uni-forms ref="form" :modelValue="formData" label-position="top" label-width="100%" >
-			<uni-forms-item label="原密码:" name="oldPassword">
-				<uni-easyinput type="password" v-model="formData.oldPassword" />
-			</uni-forms-item>
-			<uni-forms-item label="新密码:" name="newPassword">
-				<uni-easyinput type="password" v-model="formData.newPassword" />
-			</uni-forms-item>
-			<uni-forms-item label="确认密码:" name="confirmPassword">
-				<uni-easyinput type="password" v-model="formData.confirmPassword" />
-			</uni-forms-item>
-			<button type="primary" @click="onSubmit()">提交</button>
-		</uni-forms>
-
+		<nav-bar back>修改密码</nav-bar>
+		<uni-card :is-shadow="false" is-full :border="false">
+			<uni-forms ref="form" :modelValue="formData" label-position="top" label-width="100%">
+				<uni-forms-item label="原密码" name="oldPassword">
+					<uni-easyinput type="password" v-model="formData.oldPassword" />
+				</uni-forms-item>
+				<uni-forms-item label="新密码" name="newPassword">
+					<uni-easyinput type="password" v-model="formData.newPassword" />
+				</uni-forms-item>
+				<uni-forms-item label="确认密码" name="confirmPassword">
+					<uni-easyinput type="password" v-model="formData.confirmPassword" />
+				</uni-forms-item>
+			</uni-forms>
+		</uni-card>
+		<button class="bottom-btn" type="primary" @click="onSubmit()">提交</button>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				formData: {
-					oldPassword: "",
-					newPassword: "",
-					confirmPassword: ""
+export default {
+	data() {
+		return {
+			formData: {
+				oldPassword: "",
+				newPassword: "",
+				confirmPassword: ""
+			},
+			rules: {
+				oldPassword: {
+					rules: [{
+						required: true,
+						errorMessage: '请输入原密码',
+					}]
 				},
-				rules: {
-					oldPassword: {
-						rules: [{
-							required: true,
-							errorMessage: '请输入原密码',
-						}]
-					},
-					newPassword: {
-						rules: [{
-							required: true,
-							errorMessage: '请输入新密码',
-						}, {
-							validateFunction: function(rule, value, data, callback) {
-								if (data.confirmPassword != data.newPassword) {
-									callback("两次输入的密码不一致");
-								}
-								if (data.newPassword == data.oldPassword) {
-									callback("新密码不能和原密码一致");
-								}
-								return true;
+				newPassword: {
+					rules: [{
+						required: true,
+						errorMessage: '请输入新密码',
+					}, {
+						validateFunction: function (rule, value, data, callback) {
+							if (data.confirmPassword != data.newPassword) {
+								callback("两次输入的密码不一致");
+							}
+							if (data.newPassword == data.oldPassword) {
+								callback("新密码不能和原密码一致");
 							}
-						}]
-					},
-					confirmPassword: {
-						rules: [{
-							required: true,
-							errorMessage: '请输入确认密码',
-						}, {
-							validateFunction: function(rule, value, data, callback) {
-								if (data.confirmPassword != data.newPassword) {
-									callback("两次输入的密码不一致");
-								}
-								
-								return true;
+							return true;
+						}
+					}]
+				},
+				confirmPassword: {
+					rules: [{
+						required: true,
+						errorMessage: '请输入确认密码',
+					}, {
+						validateFunction: function (rule, value, data, callback) {
+							if (data.confirmPassword != data.newPassword) {
+								callback("两次输入的密码不一致");
 							}
-						}]
-					}
 
+							return true;
+						}
+					}]
 				}
+
 			}
-		},
-		methods: {
-			onSubmit() {
-				this.$refs.form.validate().then(res => {
-					this.$http({
-						url: "/modifyPwd",
-						method: "PUT",
-						data: this.formData
-					}).then((res) => {
-						uni.showToast({
-							title: "修改密码成功",
-							icon: 'none'
-						})
-						setTimeout(()=>{
-							uni.navigateBack();
-						},1000);
+		}
+	},
+	methods: {
+		onSubmit() {
+			this.$refs.form.validate().then(res => {
+				this.$http({
+					url: "/modifyPwd",
+					method: "PUT",
+					data: this.formData
+				}).then((res) => {
+					uni.showToast({
+						title: "修改密码成功",
+						icon: 'none'
 					})
-				}).catch(err => {
-					console.log('表单错误信息：', err);
+					setTimeout(() => {
+						uni.navigateBack();
+					}, 1000);
 				})
+			}).catch(err => {
+				console.log('表单错误信息：', err);
+			})
 
-			}
-		},
-		onReady() {
-			// 需要在onReady中设置规则
-			this.$refs.form.setRules(this.rules)
 		}
-
+	},
+	onReady() {
+		// 需要在onReady中设置规则
+		this.$refs.form.setRules(this.rules)
 	}
-</script>
 
-<style scoped lang="scss">
-	.mine-password {
-		padding: 20rpx;
+}
+</script>
 
-	}
-</style>
\ No newline at end of file
+<style scoped lang="scss"></style>
\ No newline at end of file
diff --git a/im-uniapp/pages/mine/mine.vue b/im-uniapp/pages/mine/mine.vue
index 29b7c02..c863fda 100644
--- a/im-uniapp/pages/mine/mine.vue
+++ b/im-uniapp/pages/mine/mine.vue
@@ -1,127 +1,149 @@
 <template>
 	<view class="page mine">
-		<view class="content" @click="onModifyInfo()">
-			<head-image :name="userInfo.nickName"  
-				:url="userInfo.headImage"
-				:size="160"></head-image>
-			<view class="info-item">
-				<view class="info-primary">
-					<text class="info-username">
-						{{userInfo.userName}}
-					</text>
-					<text v-show="userInfo.sex==0" class="iconfont icon-man" 
-						color="darkblue"></text>
-					<text v-show="userInfo.sex==1" class="iconfont icon-girl"
-						color="darkred"></text>
+		<nav-bar>我的</nav-bar>
+		<uni-card :is-shadow="false" is-full :border="false">
+			<view class="content" @click="onModifyInfo()">
+				<head-image :name="userInfo.nickName" :url="userInfo.headImage" :size="160"></head-image>
+				<view class="info-item">
+					<view class="info-primary">
+						<text class="info-username">
+							{{ userInfo.userName }}
+						</text>
+						<text v-show="userInfo.sex == 0" class="iconfont icon-man" color="darkblue"></text>
+						<text v-show="userInfo.sex == 1" class="iconfont icon-girl" color="darkred"></text>
+					</view>
+					<view class="info-text">
+						<text class="label-text">
+							昵称:
+						</text>
+						<text class="content-text">
+							{{ userInfo.nickName }}
+						</text>
+					</view>
+					<view class="info-text">
+						<view>
+							<text class="label-text">
+								签名:
+							</text>
+							<text class="content-text">
+								{{ userInfo.signature }}
+							</text>
+						</view>
+					</view>
+				</view>
+				<view class="info-arrow">
+
 				</view>
-				<text>
-					昵称 ：{{userInfo.nickName}}
-				</text>
-				<text>
-					签名 ：{{userInfo.signature}}
-				</text>
 			</view>
-			<view class="info-arrow">></view>
-		</view>
-		<view class="line"></view>
-		<view class="btn-group">
-			<button class="btn" type="primary" @click="onModifyPassword()">修改密码</button>
-			<button class="btn" type="warn" @click="onQuit()">退出</button>
-		</view>
+		</uni-card>
+		<bar-group>
+			<arrow-bar title="修改密码" @click="onModifyPassword()"></arrow-bar>
+		</bar-group>
+		<bar-group>
+			<btn-bar title="退出登陆" type="danger" @click="onQuit()"></btn-bar>
+		</bar-group>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {}
+export default {
+	data() {
+		return {}
+	},
+	methods: {
+		onModifyInfo() {
+			uni.navigateTo({
+				url: "/pages/mine/mine-edit"
+			})
 		},
-		methods: {
-			onModifyInfo() {
-				uni.navigateTo({
-					url: "/pages/mine/mine-edit"
-				})
-			},
-			onModifyPassword() {
-				uni.navigateTo({
-					url: "/pages/mine/mine-password"
-				})
-			},
-			onQuit() {
-				uni.showModal({
-					title: '确认退出?',
-					success: (res) => {
-						if (res.confirm) {
-							console.log(getApp())
-							getApp().$vm.exit()
-						}
-					}
-				});
-			}
+		onModifyPassword() {
+			uni.navigateTo({
+				url: "/pages/mine/mine-password"
+			})
 		},
-		computed: {
-			userInfo() {
-				return this.userStore.userInfo;
-			}
+		onQuit() {
+			uni.showModal({
+				title: '确认退出?',
+				success: (res) => {
+					if (res.confirm) {
+						console.log(getApp())
+						getApp().$vm.exit()
+					}
+				}
+			});
 		}
+	},
+	computed: {
+		userInfo() {
+			return this.userStore.userInfo;
+		}
+	}
 
 
-	}
+}
 </script>
 
 <style scoped lang="scss">
-	.mine {
-		.content {
-			height: 200rpx;
+.mine {
+	.content {
+		//height: 200rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx;
+
+		.info-item {
 			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding: 20rpx;
+			align-items: flex-start;
+			flex-direction: column;
+			padding-left: 40rpx;
+			flex: 1;
 
-			.info-item {
-				display: flex;
-				align-items: flex-start;
-				flex-direction: column;
-				padding-left: 40rpx;
-				flex: 1;
-
-				.info-primary {
-					display: flex;
-					align-items: center;
-					.info-username {
-						font-size: 40rpx;
-						font-weight: 600;
-					}
-					
-					.icon-man {
-						color: darkblue;
-					}
-					
-					.icon-girl {
-						color: darkred;
-					}
-				}
+			.info-text {
+				line-height: 1.5;
+				//margin-bottom: 10rpx;
 			}
 
-			.info-arrow {
-				width: 50rpx;
-				font-size: 30rpx;
-				font-weight: 600;
+			.label-text {
+				font-size: $im-font-size-small;
+				color: $im-text-color-light;
+
 			}
-		}
 
-		.line {
-			margin: 20rpx;
-			border-bottom: 1px solid #aaaaaa;
-		}
+			.content-text {
+				font-size: $im-font-size-small;
+				color: $im-text-color-light;
+			}
+
+			.info-primary {
+				display: flex;
+				align-items: center;
+				margin-bottom: 10rpx;
+
+				.info-username {
+					font-size: $im-font-size-large;
+					font-weight: 600;
+				}
 
-		.btn-group {
-			margin: 100rpx;
+				.icon-man {
+					color: $im-text-color;
+					font-size: $im-font-size-large;
+					padding-left: 10rpx;
+				}
 
-			.btn {
-				margin-top: 20rpx;
+				.icon-girl {
+					color: darkred;
+				}
 			}
+		}
 
+		.info-arrow {
+			width: 50rpx;
+			font-size: 30rpx;
+			position: relative;
+			left: 30rpx;
 		}
 	}
-</style>
\ No newline at end of file
+
+}
+</style>
diff --git a/im-uniapp/pages/register/register.vue b/im-uniapp/pages/register/register.vue
index 3b3f01c..2061ff8 100644
--- a/im-uniapp/pages/register/register.vue
+++ b/im-uniapp/pages/register/register.vue
@@ -14,62 +14,63 @@
 			<uni-forms-item name="corfirmPassword" label="确认密码">
 				<uni-easyinput type="password" v-model="dataForm.corfirmPassword" placeholder="确认密码" />
 			</uni-forms-item>
-			<button class="btn-submit" @click="submit" type="warn">注册并登陆</button>
+			<button class="btn-submit" @click="submit" type="primary">注册并登陆</button>
 		</uni-forms>
-		<navigator class="nav-login" url="/pages/login/login"  >
+		<navigator class="nav-login" url="/pages/login/login">
 			返回登陆页面
 		</navigator>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				dataForm: {
-					userName: '',
-					nickName: '',
-					password: '',
-					corfirmPassword: ''
+export default {
+	data() {
+		return {
+			dataForm: {
+				userName: '',
+				nickName: '',
+				password: '',
+				corfirmPassword: ''
+			},
+			rules: {
+				userName: {
+					rules: [{
+						required: true,
+						errorMessage: '请输入用户名',
+					}]
+				},
+				nickName: {
+					rules: [{
+						required: true,
+						errorMessage: '请输入昵称',
+					}]
+				},
+				password: {
+					rules: [{
+						required: true,
+						errorMessage: '请输入密码',
+					}]
 				},
-				rules: {
-					userName: {
-						rules: [{
-							required: true,
-							errorMessage: '请输入用户名',
-						}]
-					},
-					nickName: {
-						rules: [{
-							required: true,
-							errorMessage: '请输入昵称',
-						}]
-					},
-					password: {
-						rules: [{
-							required: true,
-							errorMessage: '请输入密码',
-						}]
-					},
-					corfirmPassword: {
-						rules: [{
-							required: true,
-							errorMessage: '请输入确认密码',
-						}, {
-							validateFunction: (rule, value, data, callback) => {
-								console.log("validateFunction")
-								if (data.password != value) {
-									callback('两次密码输入不一致')
-								}
-								return true;
+				corfirmPassword: {
+					rules: [{
+						required: true,
+						errorMessage: '请输入确认密码',
+					}, {
+						validateFunction: (rule, value, data, callback) => {
+							console.log("validateFunction")
+							if (data.password != value) {
+								callback('两次密码输入不一致')
 							}
-						}]
-					}
+							return true;
+						}
+					}]
 				}
 			}
-		},
-		methods: {
-			submit() {
+		}
+	},
+	methods: {
+		submit() {
+			this.$refs.form.validate().then(() => {
 				this.$http({
 					url: '/register',
 					data: this.dataForm,
@@ -81,61 +82,62 @@
 					})
 					this.login();
 				})
-			},
-			login() {
-				const loginForm = {
-					terminal: this.$enums.TERMINAL_TYPE.APP,
-					userName: this.dataForm.userName,
-					password: this.dataForm.password
-				}
-				this.$http({
-					url: '/login',
-					data: loginForm,
-					method: 'POST'
-				}).then((loginInfo) => {
-					console.log("登录成功,自动跳转到聊天页面...")
-					uni.setStorageSync("userName", loginForm.userName);
-					uni.setStorageSync("password", loginForm.password);
-					uni.setStorageSync("loginInfo", loginInfo);
-					// 调用App.vue的初始化方法
-					getApp().init()
-					// 跳转到聊天页面   
-					uni.switchTab({
-						url: "/pages/chat/chat"
-					})
-				})
+			})
+		},
+		login() {
+			const loginForm = {
+				terminal: this.$enums.TERMINAL_TYPE.APP,
+				userName: this.dataForm.userName,
+				password: this.dataForm.password
 			}
+			this.$http({
+				url: '/login',
+				data: loginForm,
+				method: 'POST'
+			}).then((loginInfo) => {
+				console.log("登录成功,自动跳转到聊天页面...")
+				uni.setStorageSync("userName", loginForm.userName);
+				uni.setStorageSync("password", loginForm.password);
+				uni.setStorageSync("loginInfo", loginInfo);
+				// 调用App.vue的初始化方法
+				getApp().init()
+				// 跳转到聊天页面   
+				uni.switchTab({
+					url: "/pages/chat/chat"
+				})
+			})
 		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.register {
-		.title {
-			padding-top: 150rpx;
-			padding-bottom: 50rpx;
-			color: royalblue;
-			text-align: center;
-			font-size: 60rpx;
-			font-weight: 600;
-		}
+.register {
+	.title {
+		padding-top: 150rpx;
+		padding-bottom: 50rpx;
+		color: $im-color-primary;
+		text-align: center;
+		font-size: 24px;
+		font-weight: 600;
+	}
 
-		.form {
-			padding: 50rpx;
+	.form {
+		padding: 50rpx;
 
-			.btn-submit {
-				margin-top: 80rpx;
-				border-radius: 50rpx;
-			}
+		.btn-submit {
+			margin-top: 80rpx;
+			border-radius: 50rpx;
 		}
+	}
 
-		.nav-login {
-			position: fixed;
-			width: 100%;
-			bottom: 100rpx;
-			color: royalblue;
-			text-align: center;
-			font-size: 32rpx;
-		}
+	.nav-login {
+		position: fixed;
+		width: 100%;
+		bottom: 100rpx;
+		color: $im-color-primary;
+		text-align: center;
+		font-size: 32rpx;
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/static/logo/logo.png b/im-uniapp/static/logo/logo.png
index 8ed4af2..7078e93 100644
Binary files a/im-uniapp/static/logo/logo.png and b/im-uniapp/static/logo/logo.png differ
diff --git a/im-uniapp/static/tarbar/mine.png b/im-uniapp/static/tarbar/mine.png
index e9c00f3..b51be26 100644
Binary files a/im-uniapp/static/tarbar/mine.png and b/im-uniapp/static/tarbar/mine.png differ
diff --git a/im-uniapp/static/tarbar/mine_active.png b/im-uniapp/static/tarbar/mine_active.png
index 9701d3b..b0ad923 100644
Binary files a/im-uniapp/static/tarbar/mine_active.png and b/im-uniapp/static/tarbar/mine_active.png differ
diff --git a/im-uniapp/store/chatStore.js b/im-uniapp/store/chatStore.js
index e85cd24..da631dc 100644
--- a/im-uniapp/store/chatStore.js
+++ b/im-uniapp/store/chatStore.js
@@ -86,7 +86,7 @@ export default defineStore('chatStore', {
 					this.saveToStorage();
 				}
 			}
-			
+
 		},
 		readedMessage(pos) {
 			let chat = this.findChatByFriend(pos.friendId);
@@ -99,7 +99,7 @@ export default defineStore('chatStore', {
 					}
 				}
 			})
-			if(!chat.stored){
+			if (!chat.stored) {
 				this.saveToStorage();
 			}
 		},
@@ -293,7 +293,7 @@ export default defineStore('chatStore', {
 			}
 		},
 		refreshChats() {
-			if(!cacheChats){
+			if (!cacheChats) {
 				return;
 			}
 			// 排序
@@ -316,18 +316,18 @@ export default defineStore('chatStore', {
 			let key = "chats-app-" + userId;
 			let chatKeys = [];
 			// 按会话为单位存储，只存储有改动的会话
-			this.chats.forEach((chat)=>{
+			this.chats.forEach((chat) => {
 				let chatKey = `${key}-${chat.type}-${chat.targetId}`
-				if(!chat.stored){
-					if(chat.delete){
+				if (!chat.stored) {
+					if (chat.delete) {
 						uni.removeStorageSync(chatKey);
-					}else{
-						uni.setStorageSync(chatKey,chat);
+					} else {
+						uni.setStorageSync(chatKey, chat);
 					}
 					chat.stored = true;
 				}
-				if(!chat.delete){
-					chatKeys.push(chatKey);	
+				if (!chat.delete) {
+					chatKeys.push(chatKey);
 				}
 			})
 			// 会话核心信息
@@ -353,15 +353,15 @@ export default defineStore('chatStore', {
 				let userStore = useUserStore();
 				let userId = userStore.userInfo.id;
 				let chatsData = uni.getStorageSync("chats-app-" + userId)
-				if(chatsData){
-					if(chatsData.chatKeys){
+				if (chatsData) {
+					if (chatsData.chatKeys) {
 						let time = new Date().getTime();
 						chatsData.chats = [];
-						chatsData.chatKeys.forEach(key=>{
+						chatsData.chatKeys.forEach(key => {
 							let chat = uni.getStorageSync(key);
-							if(chat){
+							if (chat) {
 								chatsData.chats.push(chat);
-							}	
+							}
 						})
 					}
 					this.initChats(chatsData);
@@ -375,7 +375,7 @@ export default defineStore('chatStore', {
 			return state.loadingPrivateMsg || state.loadingGroupMsg
 		},
 		curChats: (state) => {
-			if(cacheChats && state.isLoading()){
+			if (cacheChats && state.isLoading()) {
 				return cacheChats;
 			}
 			return state.chats;
diff --git a/im-uniapp/store/userStore.js b/im-uniapp/store/userStore.js
index 0023d63..168fc1b 100644
--- a/im-uniapp/store/userStore.js
+++ b/im-uniapp/store/userStore.js
@@ -14,7 +14,7 @@ export default defineStore('userStore', {
 		clear() {
 			this.userInfo = {};
 		},
-		loadUser(context) {
+		loadUser() {
 			return new Promise((resolve, reject) => {
 				http({
 					url: '/user/self',
diff --git a/im-uniapp/uni.scss b/im-uniapp/uni.scss
index fb06dae..f6d11bf 100644
--- a/im-uniapp/uni.scss
+++ b/im-uniapp/uni.scss
@@ -1,5 +1,51 @@
 @import '@/uni_modules/uview-plus/theme.scss';
 @import '@/uni_modules/uni-scss/variables.scss';
+@import '@/im-var.scss';
+
+// 修改uni-ui主题
+$uni-primary: $im-color-primary;
+$uni-success: $im-color-success;
+$uni-warning: $im-color-warning;
+$uni-error: $im-color-danger;
+$uni-info: $im-color-info;
+
+// $uni-main-color: #3a3a3a; 			// 主要文字
+// $uni-base-color: #6a6a6a;			// 常规文字
+// $uni-secondary-color: #909399;	// 次要文字
+// $uni-extra-color: #c7c7c7;			// 辅助说明
+
+// // 边框颜色
+// $uni-border-1: #F0F0F0;
+// $uni-border-2: #EDEDED;
+// $uni-border-3: #DCDCDC;
+// $uni-border-4: #B9B9B9;
+
+// // 常规色
+// $uni-black: #000000;
+// $uni-white: #ffffff;
+// $uni-transparent: rgba($color: #000000, $alpha: 0);
+
+// // 背景色
+// $uni-bg-color: #f7f7f7;
+
+// /* 水平间距 */
+// $uni-spacing-sm: 8px;
+// $uni-spacing-base: 15px;
+// $uni-spacing-lg: 30px;
+
+// // 阴影
+// $uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
+// $uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
+// $uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
+
+// // 蒙版
+// $uni-mask: rgba($color: #000000, $alpha: 0.4);
+
+
+
+
+/**************************************************/
+
 /* 行为相关颜色 */
 $uni-color-primary: #007aff;
 $uni-color-success: #4cd964;
diff --git a/im-uniapp/unpackage/res/icons/1024x1024.png b/im-uniapp/unpackage/res/icons/1024x1024.png
new file mode 100644
index 0000000..cfb68fe
Binary files /dev/null and b/im-uniapp/unpackage/res/icons/1024x1024.png differ
diff --git a/im-uniapp/unpackage/res/icons/120x120.png b/im-uniapp/unpackage/res/icons/120x120.png
new file mode 100644
index 0000000..4fc3d3a
Binary files /dev/null and b/im-uniapp/unpackage/res/icons/120x120.png differ
diff --git a/im-uniapp/unpackage/res/icons/144x144.png b/im-uniapp/unpackage/res/icons/144x144.png
new file mode 100644
index 0000000..9d96cf3
Binary files /dev/null and b/im-uniapp/unpackage/res/icons/144x144.png differ
diff --git a/im-uniapp/unpackage/res/icons/152x152.png b/im-uniapp/unpackage/res/icons/152x152.png
new file mode 100644
index 0000000..57ba978
Binary files /dev/null and b/im-uniapp/unpackage/res/icons/152x152.png differ
diff --git a/im-uniapp/unpackage/res/icons/167x167.png b/im-uniapp/unpackage/res/icons/167x167.png
new file mode 100644
index 0000000..39208df
Binary files /dev/null and b/im-uniapp/unpackage/res/icons/167x167.png differ
diff --git a/im-uniapp/unpackage/res/icons/180x180.png b/im-uniapp/unpackage/res/icons/180x180.png
new file mode 100644
index 0000000..7cb6c49
Binary files /dev/null and b/im-uniapp/unpackage/res/icons/180x180.png differ
diff --git a/im-uniapp/unpackage/res/icons/192x192.png b/im-uniapp/unpackage/res/icons/192x192.png
new file mode 100644
index 0000000..282b8f3
Binary files /dev/null and b/im-uniapp/unpackage/res/icons/192x192.png differ
diff --git a/im-uniapp/unpackage/res/icons/20x20.png b/im-uniapp/unpackage/res/icons/20x20.png
new file mode 100644
index 0000000..9afcc04
Binary files /dev/null and b/im-uniapp/unpackage/res/icons/20x20.png differ
diff --git a/im-uniapp/unpackage/res/icons/29x29.png b/im-uniapp/unpackage/res/icons/29x29.png
new file mode 100644
index 0000000..55e9244
Binary files /dev/null and b/im-uniapp/unpackage/res/icons/29x29.png differ
diff --git a/im-uniapp/unpackage/res/icons/40x40.png b/im-uniapp/unpackage/res/icons/40x40.png
new file mode 100644
index 0000000..1a1e0c7
Binary files /dev/null and b/im-uniapp/unpackage/res/icons/40x40.png differ
diff --git a/im-uniapp/unpackage/res/icons/58x58.png b/im-uniapp/unpackage/res/icons/58x58.png
new file mode 100644
index 0000000..951b951
Binary files /dev/null and b/im-uniapp/unpackage/res/icons/58x58.png differ
diff --git a/im-uniapp/unpackage/res/icons/60x60.png b/im-uniapp/unpackage/res/icons/60x60.png
new file mode 100644
index 0000000..e5e140f
Binary files /dev/null and b/im-uniapp/unpackage/res/icons/60x60.png differ
diff --git a/im-uniapp/unpackage/res/icons/72x72.png b/im-uniapp/unpackage/res/icons/72x72.png
new file mode 100644
index 0000000..b644a72
Binary files /dev/null and b/im-uniapp/unpackage/res/icons/72x72.png differ
diff --git a/im-uniapp/unpackage/res/icons/76x76.png b/im-uniapp/unpackage/res/icons/76x76.png
new file mode 100644
index 0000000..92cb1fd
Binary files /dev/null and b/im-uniapp/unpackage/res/icons/76x76.png differ
diff --git a/im-uniapp/unpackage/res/icons/80x80.png b/im-uniapp/unpackage/res/icons/80x80.png
new file mode 100644
index 0000000..e738d6b
Binary files /dev/null and b/im-uniapp/unpackage/res/icons/80x80.png differ
diff --git a/im-uniapp/unpackage/res/icons/87x87.png b/im-uniapp/unpackage/res/icons/87x87.png
new file mode 100644
index 0000000..08e0775
Binary files /dev/null and b/im-uniapp/unpackage/res/icons/87x87.png differ
diff --git a/im-uniapp/unpackage/res/icons/96x96.png b/im-uniapp/unpackage/res/icons/96x96.png
new file mode 100644
index 0000000..9514402
Binary files /dev/null and b/im-uniapp/unpackage/res/icons/96x96.png differ
diff --git a/im-uniapp/vite.config.js b/im-uniapp/vite.config.js
index d337d8c..8f10427 100644
--- a/im-uniapp/vite.config.js
+++ b/im-uniapp/vite.config.js
@@ -1,7 +1,5 @@
 import { defineConfig } from "vite"
 import uni from "@dcloudio/vite-plugin-uni";
-const path = require('path')
-const fs = require('fs')
 export default defineConfig({
 	plugins: [
 		uni()
diff --git a/im-web/package.json b/im-web/package.json
index 4c29794..2cf6146 100644
--- a/im-web/package.json
+++ b/im-web/package.json
@@ -8,18 +8,18 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "axios": "^1.1.3",
-    "core-js": "^3.6.5",
-    "element-ui": "^2.15.10",
-    "js-audio-recorder": "^1.0.7",
-    "localforage": "^1.10.0",
-    "sass": "^1.47.0",
-    "sass-loader": "^10.1.1",
-    "vue": "^2.6.11",
-    "vue-axios": "^3.5.0",
-    "vue-router": "^3.3.3",
-    "vuex": "^3.6.2",
-    "vuex-persist": "^3.1.3"
+    "axios": "1.7.7",
+    "core-js": "3.38.1",
+    "element-ui": "2.15.14",
+    "js-audio-recorder": "1.0.7",
+    "localforage": "1.10.0",
+    "sass": "1.32.12",
+    "sass-loader": "10.1.1",
+    "vue": "2.7.16",
+    "vue-axios": "3.5.2",
+    "vue-router": "3.6.5",
+    "vuex": "3.6.2",
+    "vuex-persist": "3.1.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.12",
diff --git a/im-web/public/logo.png b/im-web/public/logo.png
index 8cd39d4..0d38b90 100644
Binary files a/im-web/public/logo.png and b/im-web/public/logo.png differ
diff --git a/im-web/src/App.vue b/im-web/src/App.vue
index 6e991bb..50069d7 100644
--- a/im-web/src/App.vue
+++ b/im-web/src/App.vue
@@ -1,115 +1,24 @@
 <template>
-	<div id="app">
-		<router-view></router-view>
-	</div>
+  <div id="app">
+    <router-view></router-view>
+  </div>
 </template>
 
 <script>
-	export default {
-		name: 'App',
-		components: {}
-	}
+export default {
+  name: 'App',
+  components: {}
+}
 </script>
 
 <style lang="scss">
-@import './assets/style/global.css';
-
 #app {
-	font-family: 'Avenir', Helvetica, Arial, sans-serif;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	position: absolute;
-	height: 100%;
-	width: 100%;
-}
-
-.el-message {
-	z-index: 99999999 !important;
-}
-
-.el-scrollbar__thumb {
-	background-color: #A0A8AF !important;
-}
-
-.el-dialog {
-	border-radius: 8px !important;
-	overflow: hidden !important;
-}
-
-.el-dialog__header {
-	background-color: #5870e6 !important;
-	
-}
-
-.el-dialog__title {
-	color: #f8f8f8 !important;
-}
-
-.el-dialog__close {
-	color: white !important;
-	font-size: 20px;
-}
-
-.el-checkbox__inner {
-	border-radius: 50% !important;
-}
-
-.el-input__inner {
-	border-radius: 5px !important;
-	border: #587FF0 1px solid !important;
-}
-
-.el-textarea__inner{
-	border-radius: 5px !important;
-	border: #587FF0 1px solid !important;
-}
-
-.el-icon-search {
-	color:#587FF0 !important;
-}
-
-.el-button--primary {
-    background-color: #687Ff0 !important;
-	border-color: #687Ff0 !important;
-}
-
-.el-button--success {
-	background-color: #4cae1b !important;
-	border-color: #4cae1b !important;
-}
-.el-button--danger {
-	background-color: #ea4949 !important;
-	border-color: #ea4949 !important;
-}
-
-.el-button {
-	padding: 8px 15px !important;
-}
-
-.el-checkbox {
-	display: flex;
-	align-items: center;
-
-	//修改选中框的大小
-	.el-checkbox__inner {
-		width: 20px;
-		height: 20px;
-
-		//修改选中框中的对勾的大小和位置
-		&::after {
-			height: 12px;
-			left: 7px;
-		}
-	}
-
-	//修改点击文字颜色不变
-	.el-checkbox__input.is-checked+.el-checkbox__label {
-		color: #333333;
-	}
-
-	.el-checkbox__label {
-		line-height: 20px;
-		padding-left: 8px;
-	}
-}
-</style>
\ No newline at end of file
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  color: var(--im-text-color);
+  font-family: var(--im-font-family);
+}
+</style>
diff --git a/im-web/src/api/camera.js b/im-web/src/api/camera.js
index 0cb5f0e..dc75a78 100644
--- a/im-web/src/api/camera.js
+++ b/im-web/src/api/camera.js
@@ -5,20 +5,17 @@ class ImCamera {
 	}
 }
 
-ImCamera.prototype.isEnable = function() {
+ImCamera.prototype.isEnable = function () {
 	return !!navigator && !!navigator.mediaDevices && !!navigator.mediaDevices.getUserMedia;
 }
 
-ImCamera.prototype.openVideo = function() {
+ImCamera.prototype.openVideo = function () {
 	return new Promise((resolve, reject) => {
-		if(this.stream){
+		if (this.stream) {
 			this.close()
 		}
 		let constraints = {
-			video: {
-				with: window.screen.width,
-				height: window.screen.height
-			},
+			video: true,
 			audio: {
 				echoCancellation: true, //音频开启回音消除
 				noiseSuppression: true // 开启降噪
@@ -41,7 +38,7 @@ ImCamera.prototype.openVideo = function() {
 }
 
 
-ImCamera.prototype.openAudio = function() {
+ImCamera.prototype.openAudio = function () {
 	return new Promise((resolve, reject) => {
 		let constraints = {
 			video: false,
@@ -64,7 +61,7 @@ ImCamera.prototype.openAudio = function() {
 	})
 }
 
-ImCamera.prototype.close = function() {
+ImCamera.prototype.close = function () {
 	// 停止流
 	if (this.stream) {
 		this.stream.getTracks().forEach((track) => {
diff --git a/im-web/src/api/date.js b/im-web/src/api/date.js
index bba3e43..cd4fc17 100644
--- a/im-web/src/api/date.js
+++ b/im-web/src/api/date.js
@@ -5,23 +5,23 @@ let toTimeText = (timeStamp, simple) => {
 	var timeText = '';
 	if (timeDiff <= 60000) { //一分钟内
 		timeText = '刚刚';
-	} else if (timeDiff > 60000 && timeDiff < 3600000) { 
+	} else if (timeDiff > 60000 && timeDiff < 3600000) {
 		//1小时内
 		timeText = Math.floor(timeDiff / 60000) + '分钟前';
-	} else if (timeDiff >= 3600000 && timeDiff < 86400000 && !isYestday(dateTime)) { 
+	} else if (timeDiff >= 3600000 && timeDiff < 86400000 && !isYestday(dateTime)) {
 		//今日
 		timeText = formatDateTime(dateTime).substr(11, 5);
-	} else if (isYestday(dateTime)) { 
+	} else if (isYestday(dateTime)) {
 		//昨天
-		timeText = '昨天' + formatDateTime(dateTime).substr(11, 5); 
-	} else if (isYear(dateTime)) { 
+		timeText = '昨天' + formatDateTime(dateTime).substr(11, 5);
+	} else if (isYear(dateTime)) {
 		//今年
 		timeText = formatDateTime(dateTime).substr(5, simple ? 5 : 14);
-	} else { 
+	} else {
 		//不属于今年
 		timeText = formatDateTime(dateTime);
-		if(simple){
-			timeText = timeText.substr(2,8);
+		if (simple) {
+			timeText = timeText.substr(2, 8);
 		}
 	}
 	return timeText;
@@ -58,7 +58,7 @@ let formatDateTime = (date) => {
 }
 
 
-export{
+export {
 	toTimeText,
 	isYestday,
 	isYear,
diff --git a/im-web/src/api/element.js b/im-web/src/api/element.js
index a92fde5..3554347 100644
--- a/im-web/src/api/element.js
+++ b/im-web/src/api/element.js
@@ -16,14 +16,14 @@ let fixLeft = (e) => {
 
 let setTitleTip = (tip) => {
 	let title = process.env.VUE_APP_NAME;
-	if(tip){
+	if (tip) {
 		title = `(${tip})${title}`;
 	}
-	document.title =title;
-	
+	document.title = title;
+
 }
 
-export default{
+export default {
 	fixTop,
 	fixLeft,
 	setTitleTip
diff --git a/im-web/src/api/emotion.js b/im-web/src/api/emotion.js
index c391496..5d4bab7 100644
--- a/im-web/src/api/emotion.js
+++ b/im-web/src/api/emotion.js
@@ -15,17 +15,17 @@ let transform = (content) => {
 let textToImg = (emoText) => {
 	let word = emoText.replace(/\#|\;/gi, '');
 	let idx = emoTextList.indexOf(word);
-	if(idx==-1){
+	if (idx == -1) {
 		return emoText;
 	}
 	let url = require(`@/assets/emoji/${idx}.gif`);
-	return `<img src="${url}" style="width:35px;height:35px;vertical-align:bottom;"/>`
+	return `<img src="${url}" style="width:32px;height:32px;vertical-align:bottom;"/>`
 }
 
 let textToUrl = (emoText) => {
 	let word = emoText.replace(/\#|\;/gi, '');
 	let idx = emoTextList.indexOf(word);
-	if(idx==-1){
+	if (idx == -1) {
 		return "";
 	}
 	let url = require(`@/assets/emoji/${idx}.gif`);
diff --git a/im-web/src/api/httpRequest.js b/im-web/src/api/httpRequest.js
index 9d012e0..c30682c 100644
--- a/im-web/src/api/httpRequest.js
+++ b/im-web/src/api/httpRequest.js
@@ -42,7 +42,7 @@ http.interceptors.response.use(async response => {
 			headers: {
 				refreshToken: refreshToken
 			}
-		}).catch(()=>{
+		}).catch(() => {
 			location.href = "/";
 		})
 		// 保存token
diff --git a/im-web/src/api/messageType.js b/im-web/src/api/messageType.js
index 99d1c00..f6b1caf 100644
--- a/im-web/src/api/messageType.js
+++ b/im-web/src/api/messageType.js
@@ -1,32 +1,32 @@
 
 // 是否普通消息
-let isNormal = function(type){
-	return type>=0 && type < 10;
+let isNormal = function (type) {
+	return type >= 0 && type < 10;
 }
 
 // 是否状态消息
-let isStatus = function(type){
-	return type>=10 && type < 20;
+let isStatus = function (type) {
+	return type >= 10 && type < 20;
 }
 
 // 是否提示消息
-let isTip = function(type){
-	return type>=20 && type < 30;
+let isTip = function (type) {
+	return type >= 20 && type < 30;
 }
 
 // 操作交互类消息
-let isAction = function(type){
-	return type>=40 && type < 50;
+let isAction = function (type) {
+	return type >= 40 && type < 50;
 }
 
 // 单人通话信令
-let isRtcPrivate = function(type){
-	return type>=100 && type < 200;
+let isRtcPrivate = function (type) {
+	return type >= 100 && type < 200;
 }
 
 // 多人通话信令
-let isRtcGroup = function(type){
-	return type>=200 && type < 300;
+let isRtcGroup = function (type) {
+	return type >= 200 && type < 300;
 }
 
 
diff --git a/im-web/src/api/rtcGroupApi.js b/im-web/src/api/rtcGroupApi.js
index 42fc4f0..8cea9ba 100644
--- a/im-web/src/api/rtcGroupApi.js
+++ b/im-web/src/api/rtcGroupApi.js
@@ -1,8 +1,8 @@
 import http from './httpRequest.js'
 
-class RtcGroupApi {}
+class RtcGroupApi { }
 
-RtcGroupApi.prototype.setup = function(groupId, userInfos) {
+RtcGroupApi.prototype.setup = function (groupId, userInfos) {
 	let formData = {
 		groupId,
 		userInfos
@@ -14,21 +14,21 @@ RtcGroupApi.prototype.setup = function(groupId, userInfos) {
 	})
 }
 
-RtcGroupApi.prototype.accept = function(groupId) {
+RtcGroupApi.prototype.accept = function (groupId) {
 	return http({
-		url: '/webrtc/group/accept?groupId='+groupId,
+		url: '/webrtc/group/accept?groupId=' + groupId,
 		method: 'post'
 	})
 }
 
-RtcGroupApi.prototype.reject = function(groupId) {
+RtcGroupApi.prototype.reject = function (groupId) {
 	return http({
-		url: '/webrtc/group/reject?groupId='+groupId,
+		url: '/webrtc/group/reject?groupId=' + groupId,
 		method: 'post'
 	})
 }
 
-RtcGroupApi.prototype.failed = function(groupId,reason) {
+RtcGroupApi.prototype.failed = function (groupId, reason) {
 	let formData = {
 		groupId,
 		reason
@@ -41,14 +41,14 @@ RtcGroupApi.prototype.failed = function(groupId,reason) {
 }
 
 
-RtcGroupApi.prototype.join = function(groupId) {
+RtcGroupApi.prototype.join = function (groupId) {
 	return http({
-		url: '/webrtc/group/join?groupId='+groupId,
+		url: '/webrtc/group/join?groupId=' + groupId,
 		method: 'post'
 	})
 }
 
-RtcGroupApi.prototype.invite = function(groupId, userInfos) {
+RtcGroupApi.prototype.invite = function (groupId, userInfos) {
 	let formData = {
 		groupId,
 		userInfos
@@ -61,7 +61,7 @@ RtcGroupApi.prototype.invite = function(groupId, userInfos) {
 }
 
 
-RtcGroupApi.prototype.offer = function(groupId, userId, offer) {
+RtcGroupApi.prototype.offer = function (groupId, userId, offer) {
 	let formData = {
 		groupId,
 		userId,
@@ -74,7 +74,7 @@ RtcGroupApi.prototype.offer = function(groupId, userId, offer) {
 	})
 }
 
-RtcGroupApi.prototype.answer = function(groupId, userId, answer) {
+RtcGroupApi.prototype.answer = function (groupId, userId, answer) {
 	let formData = {
 		groupId,
 		userId,
@@ -87,21 +87,21 @@ RtcGroupApi.prototype.answer = function(groupId, userId, answer) {
 	})
 }
 
-RtcGroupApi.prototype.quit = function(groupId) {
+RtcGroupApi.prototype.quit = function (groupId) {
 	return http({
 		url: '/webrtc/group/quit?groupId=' + groupId,
 		method: 'post'
 	})
 }
 
-RtcGroupApi.prototype.cancel = function(groupId) {
+RtcGroupApi.prototype.cancel = function (groupId) {
 	return http({
 		url: '/webrtc/group/cancel?groupId=' + groupId,
 		method: 'post'
 	})
 }
 
-RtcGroupApi.prototype.candidate = function(groupId, userId, candidate) {
+RtcGroupApi.prototype.candidate = function (groupId, userId, candidate) {
 	let formData = {
 		groupId,
 		userId,
@@ -114,7 +114,7 @@ RtcGroupApi.prototype.candidate = function(groupId, userId, candidate) {
 	})
 }
 
-RtcGroupApi.prototype.device = function(groupId, isCamera, isMicroPhone) {
+RtcGroupApi.prototype.device = function (groupId, isCamera, isMicroPhone) {
 	let formData = {
 		groupId,
 		isCamera,
@@ -128,7 +128,7 @@ RtcGroupApi.prototype.device = function(groupId, isCamera, isMicroPhone) {
 }
 
 
-RtcGroupApi.prototype.candidate = function(groupId, userId, candidate) {
+RtcGroupApi.prototype.candidate = function (groupId, userId, candidate) {
 	let formData = {
 		groupId,
 		userId,
@@ -141,7 +141,7 @@ RtcGroupApi.prototype.candidate = function(groupId, userId, candidate) {
 	})
 }
 
-RtcGroupApi.prototype.heartbeat = function(groupId) {
+RtcGroupApi.prototype.heartbeat = function (groupId) {
 	return http({
 		url: '/webrtc/group/heartbeat?groupId=' + groupId,
 		method: 'post'
diff --git a/im-web/src/api/rtcPrivateApi.js b/im-web/src/api/rtcPrivateApi.js
index 82dddab..4a24e27 100644
--- a/im-web/src/api/rtcPrivateApi.js
+++ b/im-web/src/api/rtcPrivateApi.js
@@ -3,7 +3,7 @@ import http from './httpRequest.js'
 class RtcPrivateApi {
 }
 
-RtcPrivateApi.prototype.call = function(uid, mode, offer) {
+RtcPrivateApi.prototype.call = function (uid, mode, offer) {
 	return http({
 		url: `/webrtc/private/call?uid=${uid}&mode=${mode}`,
 		method: 'post',
@@ -14,7 +14,7 @@ RtcPrivateApi.prototype.call = function(uid, mode, offer) {
 	})
 }
 
-RtcPrivateApi.prototype.accept = function(uid, answer) {
+RtcPrivateApi.prototype.accept = function (uid, answer) {
 	return http({
 		url: `/webrtc/private/accept?uid=${uid}`,
 		method: 'post',
@@ -26,35 +26,35 @@ RtcPrivateApi.prototype.accept = function(uid, answer) {
 }
 
 
-RtcPrivateApi.prototype.handup = function(uid) {
+RtcPrivateApi.prototype.handup = function (uid) {
 	return http({
 		url: `/webrtc/private/handup?uid=${uid}`,
 		method: 'post'
 	})
 }
 
-RtcPrivateApi.prototype.cancel = function(uid) {
+RtcPrivateApi.prototype.cancel = function (uid) {
 	return http({
 		url: `/webrtc/private/cancel?uid=${uid}`,
 		method: 'post'
 	})
 }
 
-RtcPrivateApi.prototype.reject = function(uid) {
+RtcPrivateApi.prototype.reject = function (uid) {
 	return http({
 		url: `/webrtc/private/reject?uid=${uid}`,
 		method: 'post'
 	})
 }
 
-RtcPrivateApi.prototype.failed = function(uid, reason) {
+RtcPrivateApi.prototype.failed = function (uid, reason) {
 	return http({
 		url: `/webrtc/private/failed?uid=${uid}&reason=${reason}`,
 		method: 'post'
 	})
 }
 
-RtcPrivateApi.prototype.sendCandidate = function(uid, candidate) {
+RtcPrivateApi.prototype.sendCandidate = function (uid, candidate) {
 	return http({
 		url: `/webrtc/private/candidate?uid=${uid}`,
 		method: 'post',
@@ -65,7 +65,7 @@ RtcPrivateApi.prototype.sendCandidate = function(uid, candidate) {
 	});
 }
 
-RtcPrivateApi.prototype.heartbeat = function(uid) {
+RtcPrivateApi.prototype.heartbeat = function (uid) {
 	return http({
 		url: `/webrtc/private/heartbeat?uid=${uid}`,
 		method: 'post'
diff --git a/im-web/src/api/webrtc.js b/im-web/src/api/webrtc.js
index 8382cd1..60f77fb 100644
--- a/im-web/src/api/webrtc.js
+++ b/im-web/src/api/webrtc.js
@@ -6,7 +6,7 @@ class ImWebRtc {
 	}
 }
 
-ImWebRtc.prototype.isEnable = function() {
+ImWebRtc.prototype.isEnable = function () {
 	window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window
 		.mozRTCPeerConnection;
 	window.RTCSessionDescription = window.RTCSessionDescription || window.webkitRTCSessionDescription || window
@@ -16,11 +16,11 @@ ImWebRtc.prototype.isEnable = function() {
 	return !!window.RTCPeerConnection;
 }
 
-ImWebRtc.prototype.init = function(configuration) {
+ImWebRtc.prototype.init = function (configuration) {
 	this.configuration = configuration;
 }
 
-ImWebRtc.prototype.setupPeerConnection = function(callback) {
+ImWebRtc.prototype.setupPeerConnection = function (callback) {
 	this.peerConnection = new RTCPeerConnection(this.configuration);
 	this.peerConnection.ontrack = (e) => {
 		// 对方的视频流
@@ -29,11 +29,11 @@ ImWebRtc.prototype.setupPeerConnection = function(callback) {
 }
 
 
-ImWebRtc.prototype.setStream = function(stream) {
-	if(this.stream){
+ImWebRtc.prototype.setStream = function (stream) {
+	if (this.stream) {
 		this.peerConnection.removeStream(this.stream)
 	}
-	if(stream){
+	if (stream) {
 		stream.getTracks().forEach((track) => {
 			this.peerConnection.addTrack(track, stream);
 		});
@@ -42,7 +42,7 @@ ImWebRtc.prototype.setStream = function(stream) {
 }
 
 
-ImWebRtc.prototype.onIcecandidate = function(callback) {
+ImWebRtc.prototype.onIcecandidate = function (callback) {
 	this.peerConnection.onicecandidate = (event) => {
 		// 追踪到候选信息
 		if (event.candidate) {
@@ -51,7 +51,7 @@ ImWebRtc.prototype.onIcecandidate = function(callback) {
 	}
 }
 
-ImWebRtc.prototype.onStateChange = function(callback) {
+ImWebRtc.prototype.onStateChange = function (callback) {
 	// 监听连接状态
 	this.peerConnection.oniceconnectionstatechange = (event) => {
 		let state = event.target.iceConnectionState;
@@ -60,7 +60,7 @@ ImWebRtc.prototype.onStateChange = function(callback) {
 	};
 }
 
-ImWebRtc.prototype.createOffer = function() {
+ImWebRtc.prototype.createOffer = function () {
 	return new Promise((resolve, reject) => {
 		const offerParam = {};
 		offerParam.offerToRecieveAudio = 1;
@@ -78,7 +78,7 @@ ImWebRtc.prototype.createOffer = function() {
 }
 
 
-ImWebRtc.prototype.createAnswer = function(offer) {
+ImWebRtc.prototype.createAnswer = function (offer) {
 	return new Promise((resolve, reject) => {
 		// 设置远端的sdp
 		this.setRemoteDescription(offer);
@@ -97,17 +97,17 @@ ImWebRtc.prototype.createAnswer = function(offer) {
 	});
 }
 
-ImWebRtc.prototype.setRemoteDescription = function(offer) {
+ImWebRtc.prototype.setRemoteDescription = function (offer) {
 	// 设置对方的sdp信息
 	this.peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
 }
 
-ImWebRtc.prototype.addIceCandidate = function(candidate) {
+ImWebRtc.prototype.addIceCandidate = function (candidate) {
 	// 添加对方的候选人信息
 	this.peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
 }
 
-ImWebRtc.prototype.close = function(uid) {
+ImWebRtc.prototype.close = function (uid) {
 	// 关闭RTC连接
 	if (this.peerConnection) {
 		this.peerConnection.close();
diff --git a/im-web/src/api/wssocket.js b/im-web/src/api/wssocket.js
index de000ef..5ef1c71 100644
--- a/im-web/src/api/wssocket.js
+++ b/im-web/src/api/wssocket.js
@@ -1,21 +1,21 @@
 var websock = null;
 let rec; //断线重连后，延迟5秒重新创建WebSocket连接  rec用来存储延迟请求的代码
 let isConnect = false; //连接标识 避免重复连接
-let connectCallBack= null;
+let connectCallBack = null;
 let messageCallBack = null;
 let closeCallBack = null
 
 
-let connect = (wsurl,accessToken) => {
+let connect = (wsurl, accessToken) => {
 	try {
 		if (isConnect) {
 			return;
 		}
 		console.log("连接WebSocket");
-		websock = new WebSocket(wsurl); 
-		websock.onmessage = function(e) {
+		websock = new WebSocket(wsurl);
+		websock.onmessage = function (e) {
 			let sendInfo = JSON.parse(e.data)
-			if (sendInfo.cmd == 0) {	
+			if (sendInfo.cmd == 0) {
 				heartCheck.start()
 				// 登录成功才算真正完成连接
 				connectCallBack && connectCallBack();
@@ -25,16 +25,16 @@ let connect = (wsurl,accessToken) => {
 				heartCheck.reset();
 			} else {
 				// 其他消息转发出去
-				console.log("收到消息:",sendInfo);  
+				console.log("收到消息:", sendInfo);
 				messageCallBack && messageCallBack(sendInfo.cmd, sendInfo.data)
 			}
 		}
-		websock.onclose = function(e) {
+		websock.onclose = function (e) {
 			console.log('WebSocket连接关闭')
 			isConnect = false; //断开后修改标识
 			closeCallBack && closeCallBack(e);
 		}
-		websock.onopen = function() {
+		websock.onopen = function () {
 			console.log("WebSocket连接成功");
 			isConnect = true;
 			// 发送登录命令
@@ -48,27 +48,27 @@ let connect = (wsurl,accessToken) => {
 		}
 
 		// 连接发生错误的回调方法
-		websock.onerror = function() {
+		websock.onerror = function () {
 			console.log('WebSocket连接发生错误')
 			isConnect = false; //连接断开修改标识
-			reconnect(wsurl,accessToken);
+			reconnect(wsurl, accessToken);
 		}
 	} catch (e) {
 		console.log("尝试创建连接失败");
-		reconnect(wsurl,accessToken); //如果无法连接上webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
+		reconnect(wsurl, accessToken); //如果无法连接上webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
 	}
 };
 
 //定义重连函数
-let reconnect = (wsurl,accessToken) => {
+let reconnect = (wsurl, accessToken) => {
 	console.log("尝试重新连接");
-	if (isConnect){
+	if (isConnect) {
 		//如果已经连上就不在重连了
-		return; 
+		return;
 	}
 	rec && clearTimeout(rec);
-	rec = setTimeout(function() { // 延迟5秒重连  避免过多次过频繁请求重连
-		connect(wsurl,accessToken);
+	rec = setTimeout(function () { // 延迟5秒重连  避免过多次过频繁请求重连
+		connect(wsurl, accessToken);
 	}, 15000);
 };
 //设置关闭连接
@@ -81,7 +81,7 @@ let close = (code) => {
 let heartCheck = {
 	timeout: 5000, //每段时间发送一次心跳包 这里设置为20s
 	timeoutObj: null, //延时发送消息对象（启动心跳新建这个对象，收到消息后重置对象）
-	start: function() {
+	start: function () {
 		if (isConnect) {
 			console.log('发送WebSocket心跳')
 			let heartBeat = {
@@ -92,9 +92,9 @@ let heartCheck = {
 		}
 	},
 
-	reset: function() {
+	reset: function () {
 		clearTimeout(this.timeoutObj);
-		this.timeoutObj = setTimeout(function() {
+		this.timeoutObj = setTimeout(function () {
 			heartCheck.start();
 		}, this.timeout);
 
@@ -110,12 +110,12 @@ let sendMessage = (agentData) => {
 		websock.send(JSON.stringify(agentData))
 	} else if (websock.readyState === websock.CONNECTING) {
 		// 若是 正在开启状态，则等待1s后重新调用
-		setTimeout(function() {
+		setTimeout(function () {
 			sendMessage(agentData)
 		}, 1000)
 	} else {
 		// 若未开启 ，则等待1s后重新调用
-		setTimeout(function() {
+		setTimeout(function () {
 			sendMessage(agentData)
 		}, 1000)
 	}
diff --git a/im-web/src/assets/image/online_app.png b/im-web/src/assets/image/online_app.png
deleted file mode 100644
index 173d415..0000000
Binary files a/im-web/src/assets/image/online_app.png and /dev/null differ
diff --git a/im-web/src/assets/image/online_web.png b/im-web/src/assets/image/online_web.png
deleted file mode 100644
index 6e47078..0000000
Binary files a/im-web/src/assets/image/online_web.png and /dev/null differ
diff --git a/im-web/src/assets/style/element.scss b/im-web/src/assets/style/element.scss
new file mode 100644
index 0000000..8a26ba9
--- /dev/null
+++ b/im-web/src/assets/style/element.scss
@@ -0,0 +1,112 @@
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+// 文字
+$--font-family: Microsoft YaHei, 'Avenir', Helvetica, Arial, sans-serif;
+@import "thems";
+@import "~element-ui/packages/theme-chalk/src/index";
+
+.el-message {
+  z-index: 99999999 !important;
+  background: #fff !important;
+  box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);
+  border: none !important;
+  min-width: unset !important;
+  border-radius: 3px !important;
+  padding: 14px 18px 14px 16px !important;
+
+  .el-message__content {
+    color: #000 !important;
+  }
+}
+
+.el-scrollbar__thumb {
+  background-color: #A0A8AF !important;
+}
+
+.el-dialog__title {
+  font-size: var(--im-font-size-larger);
+  color: var(--im-text-color);
+}
+
+.el-dialog__header {
+  padding: 12px 18px !important;
+
+}
+
+.el-dialog__headerbtn {
+  top: 15px;
+  right: 20px;
+  font-size: 18px;
+}
+
+.el-checkbox__inner {
+  border-radius: 50% !important;
+}
+
+
+.el-button--success {
+  //background-color: #688758 !important;
+  //border-color: #4cae1b !important;
+}
+
+.el-button--danger {
+  //background-color: #ea4949 !important;
+  //border-color: #ea4949 !important;
+}
+
+.el-button {
+  padding: 8px 15px !important;
+}
+
+.el-checkbox {
+  display: flex;
+  align-items: center;
+
+  //修改选中框的大小
+  .el-checkbox__inner {
+    width: 16px;
+    height: 16px;
+
+    //修改选中框中的对勾的大小和位置
+    &::after {
+      height: 7px;
+      left: 5px;
+      top: 2px;
+    }
+  }
+
+  // 修改点击文字颜色不变
+  .el-checkbox__input.is-checked + .el-checkbox__label {
+    color: #333333;
+  }
+
+  .el-checkbox__label {
+    line-height: 20px;
+    padding-left: 8px;
+  }
+}
+
+.el-form-item {
+  margin-bottom: 15px !important;
+}
+
+.el-input--small {
+  font-size: $--font-size-base;
+}
+
+.el-input__inner {
+  padding: 0 10px;
+}
+
+.el-textarea__inner {
+  padding: 5px 10px;
+  font-family: $--font-family;
+}
+
+.el-tag--mini {
+  height: 18px;
+  padding: 0 2px;
+  line-height: 16px;
+  border-radius: 2px;
+}
diff --git a/im-web/src/assets/style/global.css b/im-web/src/assets/style/global.css
deleted file mode 100644
index ce8be83..0000000
--- a/im-web/src/assets/style/global.css
+++ /dev/null
@@ -1,43 +0,0 @@
-@charset "UTF-8";
-
-html {
-  height: 100%;
-  overflow: hidden;
-       
-}
-
-body {
-  height: 100%;
-  margin: 0;
-  overflow: hidden;
-
-}
-
-section {
-	  height: 100%;
-}
-
-.el-dialog__body{
-	padding: 10px 15px !important;
-}
-
-::-webkit-scrollbar {
-  width: 6px;
-  height: 1px;
-}
-
-::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 2px;
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background: #535353;
-}
-
-::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  -webkit-box-shadow: inset 0 0 5px transparent;
-  border-radius: 2px;
-  background: #ededed;
-}
-
-/*# sourceMappingURL=v-im.cssss.map */
diff --git a/im-web/src/assets/style/im.scss b/im-web/src/assets/style/im.scss
new file mode 100644
index 0000000..d3d40c0
--- /dev/null
+++ b/im-web/src/assets/style/im.scss
@@ -0,0 +1,91 @@
+@charset "UTF-8";
+@import "element";
+
+// im全局样式变量
+:root {
+  // 主色
+  --im-color-primary: #{$--color-primary};
+  --im-color-primary-light-1: #{$--color-primary-light-1};
+  --im-color-primary-light-2: #{$--color-primary-light-2};
+  --im-color-primary-light-3: #{$--color-primary-light-3};
+  --im-color-primary-light-4: #{$--color-primary-light-4};
+  --im-color-primary-light-5: #{$--color-primary-light-5};
+  --im-color-primary-light-6: #{$--color-primary-light-6};
+  --im-color-primary-light-7: #{$--color-primary-light-7};
+  --im-color-primary-light-8: #{$--color-primary-light-8};
+  --im-color-primary-light-9: #{$--color-primary-light-9};
+
+  --im-color-sucess: #{$--color-success};
+  --im-color-warning: #{$--color-warning};
+  --im-color-danger: #{$--color-danger};
+  --im-color-info: #{$--color-info};
+
+  // 文字颜色
+  --im-text-color: #{$--color-text-regular};
+  --im-text-color-light: #999999;
+  --im-text-color-lighter: #C0C4CC;
+
+  // 文字大小
+  --im-font-size: #{$--font-size-base};
+  --im-font-size-small: #{$--font-size-small};
+  --im-font-size-smaller: #{$--font-size-extra-small};
+  --im-font-size-large: #{$--font-size-medium};
+  --im-font-size-larger: #{$--font-size-large};
+  --im-font-family: #{$--font-family};
+
+
+  // 边框颜色
+  --im-border: 1px solid #EBEEF5;
+
+  // 阴影
+  --im-box-shadow: #{$--box-shadow-base};
+  --im-box-shadow-light: #{$--box-shadow-light};
+  --im-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);
+  --im-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16);
+
+  // 背景色
+  --im-background: #F3F3F3;
+  --im-background-active: #F1F1F1;
+  --im-background-active-dark: #E9E9E9;
+}
+
+html {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+section {
+  height: 100%;
+}
+
+.el-dialog__body {
+  padding: 10px 20px !important;
+}
+
+// 滚动条样式
+::-webkit-scrollbar {
+  width: 8px;
+  height: 1px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background: hsla(0, 0%, 73%, .5);
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 4px;
+}
+
+.search-input {
+  .el-input__inner {
+    border: unset !important;
+  }
+
+}
diff --git a/im-web/src/assets/style/thems.scss b/im-web/src/assets/style/thems.scss
new file mode 100644
index 0000000..569a39e
--- /dev/null
+++ b/im-web/src/assets/style/thems.scss
@@ -0,0 +1,6 @@
+// 主题色
+$--color-primary: #2830d3;
+//$--color-primary: #687ff0;
+//$--color-primary: #096bff;
+$--font-size-base: 14px;
+$--color-text-regular: #000000;
diff --git a/im-web/src/components/chat/ChatAtBox.vue b/im-web/src/components/chat/ChatAtBox.vue
index 556b1cf..d90fc85 100644
--- a/im-web/src/components/chat/ChatAtBox.vue
+++ b/im-web/src/components/chat/ChatAtBox.vue
@@ -1,131 +1,131 @@
 <template>
-	<el-scrollbar v-show="show&&showMembers.length" ref="scrollBox" class="group-member-choose"
-		:style="{'left':pos.x+'px','top':pos.y-300+'px'}">
-		<div v-for="(member,idx) in showMembers" :key="member.id">
-			<chat-group-member :member="member" :height="40" :active='activeIdx==idx'
-			@click.native="onSelectMember(member)"></chat-group-member>
+	<el-scrollbar v-show="show && showMembers.length" ref="scrollBox" class="group-member-choose"
+		:style="{ 'left': pos.x + 'px', 'top': pos.y - 300 + 'px' }">
+		<div v-for="(member, idx) in showMembers" :key="member.id">
+			<chat-group-member :member="member" :height="40" :active='activeIdx == idx'
+				@click.native="onSelectMember(member)"></chat-group-member>
 		</div>
 	</el-scrollbar>
 </template>
 
 <script>
-	import ChatGroupMember from "./ChatGroupMember.vue";
-	export default {
-		name: "chatAtBox",
-		components: {
-			ChatGroupMember
+import ChatGroupMember from "./ChatGroupMember.vue";
+export default {
+	name: "chatAtBox",
+	components: {
+		ChatGroupMember
+	},
+	props: {
+		searchText: {
+			type: String,
+			default: ""
 		},
-		props: {
-			searchText: {
-				type: String,
-				default: ""
-			},
-			ownerId: {
-				type: Number,
+		ownerId: {
+			type: Number,
+		},
+		members: {
+			type: Array
+		}
+	},
+	data() {
+		return {
+			show: false,
+			pos: {
+				x: 0,
+				y: 0
 			},
-			members: {
-				type: Array
+			activeIdx: 0,
+			showMembers: []
+		};
+	},
+	methods: {
+		init() {
+			this.$refs.scrollBox.wrap.scrollTop = 0;
+			this.showMembers = [];
+			let userId = this.$store.state.userStore.userInfo.id;
+			let name = "全体成员";
+			if (this.ownerId == userId && name.startsWith(this.searchText)) {
+				this.showMembers.push({
+					userId: -1,
+					showNickName: name
+				})
 			}
+			this.members.forEach((m) => {
+				if (m.userId != userId && !m.quit && m.showNickName.startsWith(this.searchText)) {
+					this.showMembers.push(m);
+				}
+			})
+			this.activeIdx = this.showMembers.length > 0 ? 0 : -1;
 		},
-		data() {
-			return {
-				show: false,
-				pos: {
-					x: 0,
-					y: 0
-				},
-				activeIdx: 0,
-				showMembers: []
-			};
+		open(pos) {
+			this.show = true;
+			this.pos = pos;
+			this.init();
 		},
-		methods: {
-			init() {
-				this.$refs.scrollBox.wrap.scrollTop = 0;
-				this.showMembers = [];
-				let userId = this.$store.state.userStore.userInfo.id;
-				let name = "全体成员";
-				if (this.ownerId == userId && name.startsWith(this.searchText)) {
-					this.showMembers.push({
-						userId: -1,
-						showNickName: name
-					})
-				}
-				this.members.forEach((m) => {
-					if (m.userId != userId && !m.quit && m.showNickName.startsWith(this.searchText)) {
-						this.showMembers.push(m);
-					}
-				})
-				this.activeIdx = this.showMembers.length > 0 ? 0: -1;
-			},
-			open(pos) {
-				this.show = true;
-				this.pos = pos;
-				this.init();
-			},
-			close() {
-				this.show = false;
-			},
-			moveUp() {
-				if (this.activeIdx > 0) {
-					this.activeIdx--;
-					this.scrollToActive()
-				}
-			},
-			moveDown() {
-				if (this.activeIdx < this.showMembers.length - 1) {
-					this.activeIdx++;
-					this.scrollToActive()
-				}
-			},
-			select() {
-				if (this.activeIdx >= 0) {
-					this.onSelectMember(this.showMembers[this.activeIdx])
-				}
-				this.close();
-			},
-			scrollToActive() {
-				if (this.activeIdx * 35 - this.$refs.scrollBox.wrap.clientHeight > this.$refs.scrollBox.wrap.scrollTop) {
-					this.$refs.scrollBox.wrap.scrollTop += 140;
-					if (this.$refs.scrollBox.wrap.scrollTop > this.$refs.scrollBox.wrap.scrollHeight) {
-						this.$refs.scrollBox.wrap.scrollTop = this.$refs.scrollBox.wrap.scrollHeight
-					}
-				}
-				if (this.activeIdx * 35 < this.$refs.scrollBox.wrap.scrollTop) {
-					this.$refs.scrollBox.wrap.scrollTop -= 140;
-					if (this.$refs.scrollBox.wrap.scrollTop < 0) {
-						this.$refs.scrollBox.wrap.scrollTop = 0;
-					}
-				}
-			},
-			onSelectMember(member) {
-				this.$emit("select", member);
-				this.show = false;
+		close() {
+			this.show = false;
+		},
+		moveUp() {
+			if (this.activeIdx > 0) {
+				this.activeIdx--;
+				this.scrollToActive()
 			}
 		},
-		computed: {
-			isOwner() {
-				return this.$store.state.userStore.userInfo.id == this.ownerId;
+		moveDown() {
+			if (this.activeIdx < this.showMembers.length - 1) {
+				this.activeIdx++;
+				this.scrollToActive()
 			}
 		},
-		watch: {
-			searchText: {
-				handler(newText, oldText) {
-					this.init();
+		select() {
+			if (this.activeIdx >= 0) {
+				this.onSelectMember(this.showMembers[this.activeIdx])
+			}
+			this.close();
+		},
+		scrollToActive() {
+			if (this.activeIdx * 35 - this.$refs.scrollBox.wrap.clientHeight > this.$refs.scrollBox.wrap.scrollTop) {
+				this.$refs.scrollBox.wrap.scrollTop += 140;
+				if (this.$refs.scrollBox.wrap.scrollTop > this.$refs.scrollBox.wrap.scrollHeight) {
+					this.$refs.scrollBox.wrap.scrollTop = this.$refs.scrollBox.wrap.scrollHeight
+				}
+			}
+			if (this.activeIdx * 35 < this.$refs.scrollBox.wrap.scrollTop) {
+				this.$refs.scrollBox.wrap.scrollTop -= 140;
+				if (this.$refs.scrollBox.wrap.scrollTop < 0) {
+					this.$refs.scrollBox.wrap.scrollTop = 0;
 				}
 			}
+		},
+		onSelectMember(member) {
+			this.$emit("select", member);
+			this.show = false;
+		}
+	},
+	computed: {
+		isOwner() {
+			return this.$store.state.userStore.userInfo.id == this.ownerId;
+		}
+	},
+	watch: {
+		searchText: {
+			handler(newText, oldText) {
+				this.init();
+			}
 		}
-
 	}
+
+}
 </script>
 
 <style scoped lang="scss">
-	.group-member-choose {
-		position: fixed;
-		width: 200px;
-		height: 300px;
-		border: 1px solid #53a0e79c;
-		border-radius: 5px;
-		background-color: #f5f5f5;
-		box-shadow: 0px 0px 10px #ccc;
-	}
-</style>
\ No newline at end of file
+.group-member-choose {
+	position: fixed;
+	width: 200px;
+	height: 300px;
+	//border: 1px solid #53a0e79c;
+	//border-radius: 5px;
+	background-color: #fff;
+	box-shadow: var(--im-box-shadow);
+}
+</style>
diff --git a/im-web/src/components/chat/ChatBox.vue b/im-web/src/components/chat/ChatBox.vue
index 3239e69..1f8c019 100644
--- a/im-web/src/components/chat/ChatBox.vue
+++ b/im-web/src/components/chat/ChatBox.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="chat-box" @click="closeRefBox()" @mousemove="readedMessage()">
 		<el-container>
-			<el-header height="56px">
+			<el-header height="50px">
 				<span>{{ title }}</span>
 				<span title="群聊信息" v-show="this.chat.type == 'GROUP'" class="btn-side el-icon-more"
 					@click="showSide = !showSide"></span>
@@ -23,7 +23,7 @@
 								</ul>
 							</div>
 						</el-main>
-						<el-footer height="240px" class="im-chat-footer">
+						<el-footer height="220px" class="im-chat-footer">
 							<div class="chat-tool-bar">
 								<div title="表情" class="icon iconfont icon-emoji" ref="emotion"
 									@click.stop="showEmotionBox()">
@@ -61,12 +61,13 @@
 								<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>
+									<el-button type="primary" icon="el-icon-s-promotion"
+										@click="notifySend()">发送</el-button>
 								</div>
 							</div>
 						</el-footer>
 					</el-container>
-					<el-aside class="chat-group-side-box" width="300px" v-if="showSide">
+					<el-aside class="chat-group-side-box" width="260px" v-if="showSide">
 						<chat-group-side :group="group" :groupMembers="groupMembers" @reload="loadGroup(group.id)">
 						</chat-group-side>
 					</el-aside>
@@ -83,752 +84,751 @@
 </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"
-	import ChatInput from "./ChatInput";
-
-
-	export default {
-		name: "chatPrivate",
-		components: {
-			ChatInput,
-			ChatMessageItem,
-			FileUpload,
-			ChatGroupSide,
-			Emotion,
-			ChatRecord,
-			ChatHistory,
-			ChatAtBox,
-			GroupMemberSelector,
-			RtcGroupJoin
-		},
-		props: {
-			chat: {
-				type: Object
+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的消息不显示，否则页面会很卡置
+			reqQueue: [],
+			isSending: 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');
 			}
 		},
-		data() {
-			return {
-				friend: {},
-				group: {},
-				groupMembers: [],
-				sendImageUrl: "",
-				sendImageFile: "",
-				placeholder: "",
-				isReceipt: true,
-				showRecord: false, // 是否显示语音录制弹窗
-				showSide: false, // 是否显示群聊信息栏
-				showHistory: false, // 是否显示历史聊天记录
-				lockMessage: false, // 是否锁定发送，
-				showMinIdx: 0, // 下标低于showMinIdx的消息不显示，否则页面会很卡置
-				reqQueue: [],
-				isSending : false
+		onSwitchReceipt() {
+			this.isReceipt = !this.isReceipt;
+			this.refreshPlaceHolder();
+		},
+		onImageSuccess(data, file) {
+			let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
+			msgInfo.content = JSON.stringify(data);
+			msgInfo.receipt = this.isReceipt;
+			this.sendMessageRequest(msgInfo).then((m) => {
+				msgInfo.loadStatus = 'ok';
+				msgInfo.id = m.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;
 		},
-		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;
+		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.sendMessageRequest(msgInfo).then((m) => {
+				msgInfo.loadStatus = 'ok';
+				msgInfo.id = m.id;
+				this.isReceipt = false;
 				this.refreshPlaceHolder();
-			},
-			onImageSuccess(data, file) {
-				let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
-				msgInfo.content = JSON.stringify(data);
-				msgInfo.receipt = this.isReceipt;
-				this.sendMessageRequest(msgInfo).then((m) => {
-					msgInfo.loadStatus = 'ok';
-					msgInfo.id = m.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.sendMessageRequest(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.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() {
+			// 邀请成员发起通话
+			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
 				})
-			},
-			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);
+			})
+			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.sendMessageRequest(msgInfo).then((m) => {
+				m.selfSend = true;
+				this.$store.commit("insertMessage", m);
 				// 会话置顶
 				this.moveChatToTop();
+				// 保持输入框焦点
+				this.$refs.chatInputEditor.focus();
 				// 滚动到底部
 				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.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() {
-				// 邀请成员发起通话
-				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;
+				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();
+		},
+		async sendMessage(fullList) {
+			this.resetEditor();
+			this.readedMessage();
+			let sendText = this.isReceipt ? "【回执消息】" : "";
+			let promiseList = [];
+			for (let i = 0; i < fullList.length; i++) {
+				let msg = fullList[i];
+				switch (msg.type) {
+					case "text":
+						await this.sendTextMessage(sendText + msg.content, msg.atUserIds);
+						break;
+					case "image":
+						await this.sendImageMessage(msg.content.file);
+						break;
+					case "file":
+						await this.sendFileMessage(msg.content.file);
+						break;
 				}
-				let userInfos = [];
-				members.forEach(m => {
-					userInfos.push({
-						id: m.userId,
-						nickName: m.showNickName,
-						headImage: m.headImage,
-						isCamera: false,
-						isMicroPhone: true
-					})
+
+			}
+		},
+		sendImageMessage(file) {
+			return new Promise((resolve, reject) => {
+				this.onImageBefore(file);
+				let formData = new FormData()
+				formData.append('file', file)
+				this.$http.post("/image/upload", formData, {
+					headers: {
+						'Content-Type': 'multipart/form-data'
+					}
+				}).then((data) => {
+					this.onImageSuccess(data, file);
+					resolve();
+				}).catch((res) => {
+					this.onImageFail(res, file);
+					reject();
 				})
-				let rtcInfo = {
-					isHost: true,
-					groupId: this.group.id,
-					inviterId: this.mine.id,
-					userInfos: userInfos
+				this.$nextTick(() => this.$refs.chatInputEditor.focus());
+				this.scrollToBottom();
+			});
+		},
+		sendTextMessage(sendText, atUserIds) {
+			return new Promise((resolve, reject) => {
+				if (!sendText.trim()) {
+					reject();
 				}
-				// 通过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
+					content: sendText,
+					type: 0
 				}
 				// 填充对方id
 				this.fillTargetId(msgInfo, this.chat.targetId);
+				// 被@人员列表
+				if (this.chat.type == "GROUP") {
+					msgInfo.atUserIds = atUserIds;
+					msgInfo.receipt = this.isReceipt;
+				}
+				this.lockMessage = true;
 				this.sendMessageRequest(msgInfo).then((m) => {
 					m.selfSend = true;
 					this.$store.commit("insertMessage", m);
 					// 会话置顶
 					this.moveChatToTop();
-					// 保持输入框焦点
-					this.$refs.chatInputEditor.focus();
-					// 滚动到底部
+				}).finally(() => {
+					// 解除锁定
 					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();
-			},
-			async sendMessage(fullList) {
-				this.resetEditor();
-				this.readedMessage();
-				let sendText = this.isReceipt ? "【回执消息】" : "";
-				let promiseList = [];
-				for (let i = 0; i < fullList.length; i++) {
-					let msg = fullList[i];
-					switch (msg.type) {
-						case "text":
-							await this.sendTextMessage(sendText + msg.content,msg.atUserIds);
-							break;
-						case "image":
-							await this.sendImageMessage(msg.content.file);
-							break;
-						case "file":
-							await this.sendFileMessage(msg.content.file);
-							break;
-					}
-				
-				}
-			},
-			sendImageMessage(file) {
-				return new Promise((resolve,reject)=>{
-					this.onImageBefore(file);
-					let formData = new FormData()
-					formData.append('file', file)
-					this.$http.post("/image/upload", formData, {
-						headers: {
-							'Content-Type': 'multipart/form-data'
-						}
-					}).then((data) => {
-						this.onImageSuccess(data, file);
-						resolve();
-					}).catch((res) => {
-						this.onImageFail(res, file);
-						reject();
-					})
-					this.$nextTick(() => this.$refs.chatInputEditor.focus());
-					this.scrollToBottom();
-					});
-			},
-			 sendTextMessage(sendText,atUserIds) {
-				return new Promise((resolve,reject)=>{
-					if (!sendText.trim()) {
-						reject();
-					}
-					let msgInfo = {
-						content: sendText,
-						type: 0
-					}
-					// 填充对方id
-					this.fillTargetId(msgInfo, this.chat.targetId);
-					// 被@人员列表
-					if (this.chat.type == "GROUP") {
-						msgInfo.atUserIds = atUserIds;
-						msgInfo.receipt = this.isReceipt;
-					}
-					this.lockMessage = true;
-					this.sendMessageRequest(msgInfo).then((m) => {
-						m.selfSend = true;
-						this.$store.commit("insertMessage", m);
-						// 会话置顶
-						this.moveChatToTop();
-					}).finally(() => {
-						// 解除锁定
-						this.scrollToBottom();
-						this.isReceipt = false;
-						resolve();
-					});
-				});
-			},
-			sendFileMessage(file) {
-				return new Promise((resolve,reject)=>{
-					let check = this.$refs.fileUpload.beforeUpload(file);
-					if (check) {
-						this.$refs.fileUpload.onFileUpload({ file });
-					}
-				})
-			},
-			deleteMessage(msgInfo) {
-				this.$confirm('确认删除消息?', '删除消息', {
-					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);
-					})
+					resolve();
 				});
-			},
-			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}`
+			});
+		},
+		sendFileMessage(file) {
+			return new Promise((resolve, reject) => {
+				let check = this.$refs.fileUpload.beforeUpload(file);
+				if (check) {
+					this.$refs.fileUpload.onFileUpload({ file });
 				}
+			})
+		},
+		deleteMessage(msgInfo) {
+			this.$confirm('确认删除消息?', '删除消息', {
+				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: '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);
+					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
-				}
+			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.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 = "聊点什么吧~";
-				}
-			},
-			sendMessageRequest(msgInfo){
-				return  new Promise((resolve,reject)=>{
-					// 请求入队列，防止请求"后发先至"，导致消息错序
-					this.reqQueue.push({msgInfo,resolve,reject});
+		},
+		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.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 = "聊点什么吧~";
+			}
+		},
+		sendMessageRequest(msgInfo) {
+			return new Promise((resolve, reject) => {
+				// 请求入队列，防止请求"后发先至"，导致消息错序
+				this.reqQueue.push({ msgInfo, resolve, reject });
+				this.processReqQueue();
+			})
+		},
+		processReqQueue() {
+			if (this.reqQueue.length && !this.isSending) {
+				this.isSending = true;
+				const reqData = this.reqQueue.shift();
+				this.$http({
+					url: this.messageAction,
+					method: 'post',
+					data: reqData.msgInfo
+				}).then((res) => {
+					reqData.resolve(res)
+				}).catch((e) => {
+					reqData.reject(e)
+				}).finally(() => {
+					this.isSending = false;
+					// 发送下一条请求
 					this.processReqQueue();
 				})
-			},
-			processReqQueue(){
-				if (this.reqQueue.length && !this.isSending) {
-					this.isSending = true;
-					const reqData = this.reqQueue.shift();
-					this.$http({
-						url: this.messageAction,
-						method: 'post',
-						data: reqData.msgInfo
-					}).then((res)=>{
-						reqData.resolve(res)
-					}).catch((e)=>{
-						reqData.reject(e)
-					}).finally(()=>{
-						this.isSending = false;
-						// 发送下一条请求
-						this.processReqQueue();
-					})
-				}
-			},
-			generateId() {
-				// 生成临时id
-				return String(new Date().getTime()) + String(Math.floor(Math.random() * 1000));
 			}
 		},
-		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;
+		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`;
 		},
-		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();
+		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)
 					}
-				},
-				immediate: true
+					// 滚到底部
+					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();
+				}
 			},
-			messageSize: {
-				handler(newSize, oldSize) {
-					if (newSize > oldSize) {
-						// 拉至底部
-						this.scrollToBottom();
-					}
+			immediate: true
+		},
+		messageSize: {
+			handler(newSize, oldSize) {
+				if (newSize > oldSize) {
+					// 拉至底部
+					this.scrollToBottom();
 				}
 			}
-		},
-		mounted() {
-			let div = document.getElementById("chatScrollBox");
-			div.addEventListener('scroll', this.onScroll)
 		}
+	},
+	mounted() {
+		let div = document.getElementById("chatScrollBox");
+		div.addEventListener('scroll', this.onScroll)
 	}
+}
 </script>
 
 <style lang="scss">
-	.chat-box {
-		position: relative;
-		width: 100%;
-		background: #f8f8f8;
-		border: #dddddd solid 1px;
-
-		.el-header {
-			padding: 3px;
-			background-color: white;
+.chat-box {
+	position: relative;
+	width: 100%;
+	background: #fff;
+
+	.el-header {
+		display: flex;
+		justify-content: space-between;
+		padding: 0 12px;
+		line-height: 50px;
+		font-size: var(--im-font-size-larger);
+		border-bottom: var(--im-border);
+
+
+		.btn-side {
+			position: absolute;
+			right: 20px;
 			line-height: 50px;
 			font-size: 20px;
-			font-weight: 600;
-			border-bottom: 1px #ddd solid;
+			cursor: pointer;
+			color: var(--im-text-color-light);
+		}
+	}
 
-			.btn-side {
-				position: absolute;
-				right: 20px;
-				line-height: 50px;
-				font-size: 25px;
-				cursor: pointer;
+	.im-chat-main {
+		padding: 0;
+		background-color: #fff;
+
+		.im-chat-box {
+			>ul {
+				padding: 0 20px;
+
+				li {
+					list-style-type: none;
+				}
 			}
 		}
+	}
 
-		.im-chat-main {
-			padding: 0;
-			background-color: white;
+	.im-chat-footer {
+		display: flex;
+		flex-direction: column;
+		padding: 0;
 
-			.im-chat-box {
-				>ul {
-					padding: 0 20px;
+		.chat-tool-bar {
+			display: flex;
+			position: relative;
+			width: 100%;
+			height: 36px;
+			text-align: left;
+			box-sizing: border-box;
+			border-top: var(--im-border);
+			padding: 4px 2px 2px 8px;
 
-					li {
-						list-style-type: none;
-					}
+			>div {
+				font-size: 22px;
+				cursor: pointer;
+				line-height: 30px;
+				width: 30px;
+				height: 30px;
+				text-align: center;
+				border-radius: 2px;
+				margin-right: 8px;
+				color: #999;
+				transition: 0.3s;
+
+				&.chat-tool-active {
+					font-weight: 600;
+					color: var(--im-color-primary);
+					background-color: #ddd;
 				}
 			}
+
+			>div:hover {
+				color: #333;
+			}
 		}
 
-		.im-chat-footer {
+		.send-content-area {
+			position: relative;
 			display: flex;
 			flex-direction: column;
-			padding: 0;
+			height: 100%;
+			background-color: white !important;
 
-			.chat-tool-bar {
-				display: flex;
-				position: relative;
+			.send-text-area {
+				box-sizing: border-box;
+				padding: 5px;
 				width: 100%;
-				height: 40px;
+				flex: 1;
+				resize: none;
+				font-size: 16px;
+				outline: none;
+
 				text-align: left;
-				box-sizing: border-box;
-				border-top: #ccc solid 1px;
-				padding: 2px;
-				background-color: #f8faff;
-
-				>div {
-					font-size: 22px;
-					cursor: pointer;
-					color: black;
-					line-height: 30px;
-					width: 30px;
-					height: 30px;
-					text-align: center;
-					border-radius: 3px;
-					margin: 3px 5px;
-					color: #0f46ae;
-					&:hover {
-						font-weight: 600;
-						color: #042259;
-					}
+				line-height: 30px;
 
-					&.chat-tool-active {
-						color: white;
-						background-color: #195ee2;
-					}
+				&: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-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: none;
-
-					text-align: left;
-					line-height: 30px;
-
-					&:before {
-						content: attr(placeholder);
-						color: gray;
-					}
+			.send-image-area {
+				text-align: left;
+				border: #53a0e7 solid 1px;
 
-					.at {
-						color: blue;
-						font-weight: 600;
+				.send-image-box {
+					position: relative;
+					display: inline-block;
+
+					.send-image {
+						max-height: 180px;
+						border: 1px solid #ccc;
+						border-radius: 2%;
+						margin: 2px;
 					}
 
-					.receipt {
-						color: darkblue;
+					.send-image-close {
+						position: absolute;
+						padding: 3px;
+						right: 7px;
+						top: 7px;
+						color: white;
+						cursor: pointer;
 						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;
-						}
+						background-color: #aaa;
+						border-radius: 50%;
+						border: 1px solid #ccc;
 					}
 				}
+			}
 
-				.send-btn-area {
-					padding: 10px;
-					position: absolute;
-					bottom: 0;
-					right: 0;
-				}
+			.send-btn-area {
+				padding: 10px;
+				position: absolute;
+				bottom: 4px;
+				right: 6px;
 			}
 		}
+	}
 
-		.chat-group-side-box {
-			border: #dddddd solid 1px;
-			animation: rtl-drawer-in .3s 1ms;
-		}
+	.chat-group-side-box {
+		border-left: var(--im-border);
+		//animation: rtl-drawer-in .3s 1ms;
 	}
-</style>
\ No newline at end of file
+
+}
+</style>
diff --git a/im-web/src/components/chat/ChatGroupMember.vue b/im-web/src/components/chat/ChatGroupMember.vue
index 666b2c2..beea61f 100644
--- a/im-web/src/components/chat/ChatGroupMember.vue
+++ b/im-web/src/components/chat/ChatGroupMember.vue
@@ -1,9 +1,9 @@
 <template>
-    <div class="chat-group-member" :class="active?'active':''" :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>
-        <div class="member-name" :style="{'line-height':height+'px'}">
+        <div class="member-name" :style="{ 'line-height': height + 'px' }">
             <div>{{ member.showNickName }}</div>
         </div>
     </div>
@@ -22,17 +22,17 @@ export default {
             type: Object,
             required: true
         },
-        height:{
+        height: {
             type: Number,
             default: 50
         },
-		active: {
-			type: Boolean,
-			default: false
-		}
+        active: {
+            type: Boolean,
+            default: false
+        }
     },
-    computed:{
-        headImageSize(){
+    computed: {
+        headImageSize() {
             return Math.ceil(this.height * 0.75)
         }
     }
@@ -42,30 +42,19 @@ export default {
 <style lang="scss">
 .chat-group-member {
     display: flex;
-    margin-bottom: 1px;
     position: relative;
     padding: 0 5px;
     align-items: center;
-    background-color: #fafafa;
     white-space: nowrap;
     box-sizing: border-box;
 
-    &:hover {
-        background-color: #F8FAFF;
-    }
-
-    &.active {
-        background-color: #E8F2FF;
-    }
-
     .member-name {
         padding-left: 10px;
         height: 100%;
         text-align: left;
         white-space: nowrap;
         overflow: hidden;
-        font-size: 14px;
-        font-weight: 600;
+        font-size: var(--im-font-size);
     }
 }
 </style>
diff --git a/im-web/src/components/chat/ChatGroupReaded.vue b/im-web/src/components/chat/ChatGroupReaded.vue
index f9e5867..0759f4d 100644
--- a/im-web/src/components/chat/ChatGroupReaded.vue
+++ b/im-web/src/components/chat/ChatGroupReaded.vue
@@ -57,9 +57,9 @@ export default {
         groupMembers: {
             type: Array
         },
-		msgInfo: {
-			type: Object
-		}
+        msgInfo: {
+            type: Object
+        }
     },
     methods: {
         close() {
@@ -100,16 +100,16 @@ export default {
                     // 区分已读还是未读
                     if (userIds.find(userId => member.userId == userId)) {
                         this.readedMembers.push(member);
-                    } else  {
+                    } else {
                         this.unreadMembers.push(member);
                     }
                 })
-				// 更新已读人数
-				this.$store.commit("updateMessage", {
-				    id: this.msgInfo.id,
-				    groupId: this.msgInfo.groupId,
-				    readedCount: this.readedMembers.length
-				})
+                // 更新已读人数
+                this.$store.commit("updateMessage", {
+                    id: this.msgInfo.id,
+                    groupId: this.msgInfo.groupId,
+                    readedCount: this.readedMembers.length
+                })
             })
         }
     }
@@ -130,17 +130,13 @@ export default {
 
 .chat-group-readed {
     position: fixed;
-    box-shadow: 0px 0px 10px #ccc;
     width: 300px;
-    background-color: #fafafa;
-    border-radius: 8px;
 
     .scroll-box {
         height: 400px;
     }
 
     .arrow-left {
-
         position: absolute;
         left: -15px;
         width: 0;
@@ -184,4 +180,4 @@ export default {
         }
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/im-web/src/components/chat/ChatGroupSide.vue b/im-web/src/components/chat/ChatGroupSide.vue
index 3891879..047711a 100644
--- a/im-web/src/components/chat/ChatGroupSide.vue
+++ b/im-web/src/components/chat/ChatGroupSide.vue
@@ -1,206 +1,229 @@
 <template>
-	<div class="chat-group-side">
-		<div v-show="!group.quit" class="group-side-search">
-			<el-input placeholder="搜索群成员" v-model="searchText">
-				<i class="el-icon-search el-input__icon" slot="prefix"> </i>
-			</el-input>
-		</div>
-		<el-scrollbar class="group-side-scrollbar">
-			<div v-show="!group.quit" class="group-side-member-list">
-				<div class="group-side-invite">
-					<div class="invite-member-btn" title="邀请好友进群聊" @click="showAddGroupMember=true">
-						<i class="el-icon-plus"></i>
-					</div>
-					<div class="invite-member-text">邀请</div>
-					<add-group-member :visible="showAddGroupMember" :groupId="group.id" :members="groupMembers" @reload="$emit('reload')"
-					 @close="showAddGroupMember=false"></add-group-member>
-				</div>
-				<div v-for="(member) in groupMembers" :key="member.id">
-					<group-member class="group-side-member" v-show="!member.quit && member.showNickName.includes(searchText)" :member="member"
-					 :showDel="false"></group-member>
-				</div>
-			</div>
-			<el-divider v-if="!group.quit" content-position="center"></el-divider>
-			<el-form labelPosition="top" class="group-side-form" :model="group">
-				<el-form-item label="群聊名称">
-					<el-input v-model="group.name" disabled maxlength="20"></el-input>
-				</el-form-item>
-				<el-form-item label="群主">
-					<el-input :value="ownerName" disabled></el-input>
-				</el-form-item>
-				<el-form-item label="群公告">
-					<el-input v-model="group.notice" disabled type="textarea" maxlength="1024" placeholder="群主未设置"></el-input>
-				</el-form-item>
-				<el-form-item label="备注">
-					<el-input v-model="group.remarkGroupName" :disabled="!editing" :placeholder="group.name" maxlength="20"></el-input>
-				</el-form-item>
-				<el-form-item label="我在本群的昵称">
-					<el-input v-model="group.remarkNickName" :disabled="!editing"  maxlength="20"
-						:placeholder="$store.state.userStore.userInfo.nickName" ></el-input>
-				</el-form-item>
-				<div v-show="!group.quit" class="btn-group">
-					<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="onQuit()">退出群聊</el-button>
-				</div>
-			</el-form>
-		</el-scrollbar>
-
-	</div>
+  <div class="chat-group-side">
+    <div v-show="!group.quit" class="group-side-search">
+      <el-input placeholder="搜索群成员" v-model="searchText" size="small">
+        <i class="el-icon-search el-input__icon" slot="prefix"> </i>
+      </el-input>
+    </div>
+    <div class="group-side-scrollbar">
+      <div v-show="!group.quit" class="group-side-member-list">
+        <div class="group-side-invite">
+          <div class="invite-member-btn" title="邀请好友进群聊" @click="showAddGroupMember = true">
+            <i class="el-icon-plus"></i>
+          </div>
+          <div class="invite-member-text">邀请</div>
+          <add-group-member :visible="showAddGroupMember" :groupId="group.id" :members="groupMembers"
+            @reload="$emit('reload')" @close="showAddGroupMember = false"></add-group-member>
+        </div>
+        <div v-for="(member) in groupMembers" :key="member.id">
+          <group-member class="group-side-member" v-show="!member.quit && member.showNickName.includes(searchText)"
+            :member="member" :showDel="false"></group-member>
+        </div>
+      </div>
+      <el-divider v-if="!group.quit" content-position="center"></el-divider>
+      <el-form labelPosition="top" class="group-side-form" :model="group" size="small">
+        <el-form-item label="群聊名称">
+          <el-input v-model="group.name" disabled maxlength="20"></el-input>
+        </el-form-item>
+        <el-form-item label="群主">
+          <el-input :value="ownerName" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="群公告">
+          <el-input v-model="group.notice" disabled type="textarea" maxlength="1024"></el-input>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="group.remarkGroupName" :disabled="!editing" maxlength="20"></el-input>
+        </el-form-item>
+        <el-form-item label="我在本群的昵称">
+          <el-input v-model="group.remarkNickName" :disabled="!editing" maxlength="20"></el-input>
+        </el-form-item>
+        <div v-show="!group.quit" class="btn-group">
+          <el-button v-if="editing" type="success" @click="onSaveGroup()">保存</el-button>
+          <el-button v-if="!editing" type="primary" @click="editing = !editing">编辑</el-button>
+          <el-button type="danger" v-show="!isOwner" @click="onQuit()">退出群聊</el-button>
+        </div>
+      </el-form>
+    </div>
+
+  </div>
 </template>
 
 <script>
-	import AddGroupMember from '../group/AddGroupMember.vue';
-	import GroupMember from '../group/GroupMember.vue';
-
-	export default {
-		name: "chatGroupSide",
-		components: {
-			AddGroupMember,
-			GroupMember
-		},
-		data() {
-			return {
-				searchText: "",
-				editing: false,
-				showAddGroupMember: false
-			}
-		},
-		props: {
-			group: {
-				type: Object
-			},
-			groupMembers: {
-				type: Array
-			}
-		},
-		methods: {
-			onClose() {
-				this.$emit('close');
-			},
-			loadGroupMembers() {
-				this.$http({
-					url: `/group/members/${this.group.id}`,
-					method: "get"
-				}).then((members) => {
-					this.groupMembers = members;
-				})
-			},
-			onSaveGroup() {
-				let vo = this.group;
-				this.$http({
-					url: "/group/modify",
-					method: "put",
-					data: vo
-				}).then((group) => {
-					this.$store.commit("updateGroup", group);
-					this.$emit('reload');
-					this.$message.success("修改成功");
-				})
-			},
-			onQuit() {
-				this.$confirm('退出群聊后将不再接受群里的消息，确认退出吗？', '确认退出?', {
-					confirmButtonText: '确定',
-					cancelButtonText: '取消',
-					type: 'warning'
-				}).then(() => {
-					this.$http({
-						url: `/group/quit/${this.group.id}`,
-						method: 'delete'
-					}).then(() => {
-						this.$store.commit("removeGroup", this.group.id);
-						this.$store.commit("activeGroup", -1);
-						this.$store.commit("removeGroupChat", this.group.id);
-					});
-				})
-			},
-
-		},
-		computed: {
-			ownerName() {
-				let member = this.groupMembers.find((m) => m.userId == this.group.ownerId);
-				return member && member.showNickName;
-			},
-			isOwner() {
-				return this.group.ownerId == this.$store.state.userStore.userInfo.id;
-			}
-			
-		}
-	}
+import AddGroupMember from '../group/AddGroupMember.vue';
+import GroupMember from '../group/GroupMember.vue';
+
+export default {
+  name: "chatGroupSide",
+  components: {
+    AddGroupMember,
+    GroupMember
+  },
+  data() {
+    return {
+      searchText: "",
+      editing: false,
+      showAddGroupMember: false
+    }
+  },
+  props: {
+    group: {
+      type: Object
+    },
+    groupMembers: {
+      type: Array
+    }
+  },
+  methods: {
+    onClose() {
+      this.$emit('close');
+    },
+    loadGroupMembers() {
+      this.$http({
+        url: `/group/members/${this.group.id}`,
+        method: "get"
+      }).then((members) => {
+        this.groupMembers = members;
+      })
+    },
+    onSaveGroup() {
+      let vo = this.group;
+      this.$http({
+        url: "/group/modify",
+        method: "put",
+        data: vo
+      }).then((group) => {
+        this.editing = !this.editing
+        this.$store.commit("updateGroup", group);
+        this.$emit('reload');
+        this.$message.success("修改成功");
+      })
+    },
+    onQuit() {
+      this.$confirm('退出群聊后将不再接受群里的消息，确认退出吗？', '确认退出?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: `/group/quit/${this.group.id}`,
+          method: 'delete'
+        }).then(() => {
+          this.$store.commit("removeGroup", this.group.id);
+          this.$store.commit("activeGroup", -1);
+          this.$store.commit("removeGroupChat", this.group.id);
+        });
+      })
+    },
+
+  },
+  computed: {
+    ownerName() {
+      let member = this.groupMembers.find((m) => m.userId == this.group.ownerId);
+      return member && member.showNickName;
+    },
+    isOwner() {
+      return this.group.ownerId == this.$store.state.userStore.userInfo.id;
+    }
+
+  }
+}
 </script>
 
 <style lang="scss">
-	.chat-group-side {
-		position: relative;
-
-		.group-side-member-list {
-			padding: 10px;
-			display: flex;
-			align-items: center;
-			flex-wrap: wrap;
-			font-size: 16px;
-			text-align: center;
-
-			.group-side-member {
-				margin-left: 15px;
-			}
-
-			.group-side-invite {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				width: 50px;
-				margin-left: 15px;
-
-				.invite-member-btn {
-					width: 100%;
-					height: 50px;
-					line-height: 50px;
-					border: #cccccc solid 1px;
-					font-size: 25px;
-					cursor: pointer;
-					box-sizing: border-box;
-
-					&:hover {
-						border: #aaaaaa solid 1px;
-					}
-				}
-
-				.invite-member-text {
-					font-size: 16px;
-					text-align: center;
-					width: 100%;
-					height: 30px;
-					line-height: 30px;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					overflow: hidden
-				}
-			}
-		}
-
-		.group-side-form {
-			text-align: left;
-			padding: 10px;
-			height: 30%;
-
-			.el-form-item {
-				margin-bottom: 12px;
-
-				.el-form-item__label {
-					padding: 0;
-					line-height: 30px;
-				}
-
-				.el-textarea__inner {
-					min-height: 100px !important;
-				}
-			}
-
-			.btn-group {
-				text-align: center;
-			}
-		}
-
-	}
+.chat-group-side {
+  position: relative;
+
+  .group-side-search {
+    padding: 10px;
+  }
+
+  .group-side-scrollbar {
+    overflow: auto;
+  }
+
+  .el-divider--horizontal {
+    margin: 0;
+  }
+
+  .el-form-item {
+    margin-bottom: 0px !important;
+  }
+
+  .group-side-member-list {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    font-size: 14px;
+    text-align: center;
+
+    .group-side-member {
+      margin-left: 5px;
+    }
+
+    .group-side-invite {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 50px;
+      margin-left: 5px;
+
+      .invite-member-btn {
+        width: 38px;
+        height: 38px;
+        line-height: 38px;
+        border: var(--im-border);
+        font-size: 14px;
+        cursor: pointer;
+        box-sizing: border-box;
+
+        &:hover {
+          border: #aaaaaa solid 1px;
+        }
+      }
+
+      .invite-member-text {
+        font-size: 12px;
+        text-align: center;
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden
+      }
+    }
+  }
+
+  .group-side-form {
+    text-align: left;
+    padding: 10px;
+    height: 30%;
+
+    .el-form-item {
+      margin-bottom: 12px;
+
+      .el-form-item__label {
+        padding: 0;
+        line-height: 30px;
+      }
+
+      .el-textarea__inner {
+        min-height: 100px !important;
+      }
+    }
+
+    .el-input__inner,
+    .el-textarea__inner {
+      color: var(--im-text-color) !important;
+    }
+
+
+    .btn-group {
+      text-align: center;
+      margin-top: 12px;
+    }
+  }
+
+}
 </style>
diff --git a/im-web/src/components/chat/ChatHistory.vue b/im-web/src/components/chat/ChatHistory.vue
index 4d89e8c..442eeaa 100644
--- a/im-web/src/components/chat/ChatHistory.vue
+++ b/im-web/src/components/chat/ChatHistory.vue
@@ -1,12 +1,11 @@
 <template>
-	<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" >
+	<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">
 				<ul>
-					<li v-for="(msgInfo,idx) in messages" :key="idx">
-						<chat-message-item :mode="2" :mine="msgInfo.sendId == mine.id" :headImage="headImage(msgInfo)" :showName="showName(msgInfo)"
-						 :msgInfo="msgInfo" :menu="false">
+					<li v-for="(msgInfo, idx) in messages" :key="idx">
+						<chat-message-item :mode="2" :mine="msgInfo.sendId == mine.id" :headImage="headImage(msgInfo)"
+							:showName="showName(msgInfo)" :msgInfo="msgInfo" :menu="false">
 						</chat-message-item>
 					</li>
 				</ul>
@@ -16,155 +15,157 @@
 </template>
 
 <script>
-	import ChatMessageItem from './ChatMessageItem.vue';
+import ChatMessageItem from './ChatMessageItem.vue';
 
-	export default {
-		name: 'chatHistory',
-		components: {
-			ChatMessageItem
+export default {
+	name: 'chatHistory',
+	components: {
+		ChatMessageItem
+	},
+	props: {
+		visible: {
+			type: Boolean
 		},
-		props: {
-			visible: {
-				type: Boolean
-			},
-			chat: {
-				type: Object
-			},
-			friend: {
-				type: Object
-			},
-			group: {
-				type: Object
-			},
-			groupMembers: {
-				type: Array,
-			}
+		chat: {
+			type: Object
+		},
+		friend: {
+			type: Object
+		},
+		group: {
+			type: Object
+		},
+		groupMembers: {
+			type: Array,
+		}
+	},
+	data() {
+		return {
+			page: 1,
+			size: 10,
+			messages: [],
+			loadAll: false,
+			loading: false,
+			lastScrollTime: new Date()
+		}
+	},
+	methods: {
+		onClose() {
+			this.page = 1;
+			this.messages = [];
+			this.loadAll = false;
+			this.$emit('close');
 		},
-		data() {
-			return {
-				page: 1,
-				size: 10,
-				messages: [],
-				loadAll: false,
-				loading: false,
-				lastScrollTime: new Date()
+		onScroll() {
+			let high = this.$refs.scrollbar.$refs.wrap.scrollTop; //距离顶部的距离
+			let timeDiff = new Date().getTime() - this.lastScrollTime.getTime();
+			if (high < 30 && timeDiff > 500) {
+				this.lastScrollTime = new Date();
+				this.loadMessages();
+
 			}
 		},
-		methods: {
-			onClose() {
-				this.page = 1;
-				this.messages = [];
-				this.loadAll = false;
-				this.$emit('close');
-			},
-			onScroll() {
-				let high = this.$refs.scrollbar.$refs.wrap.scrollTop; //距离顶部的距离
-				let timeDiff = new Date().getTime() - this.lastScrollTime.getTime();
-				if ( high < 30 && timeDiff>500) {
-					this.lastScrollTime = new Date();
-					this.loadMessages();
-					
-				}
-			},
-			loadMessages() {
-				if(this.loadAll){
-					return this.$message.success("已到达顶部");
-				}
-				let param = {
-					page: this.page++,
-					size: this.size
-				}
-				if (this.chat.type == 'GROUP') {
-					param.groupId = this.group.id;
-				} else {
-					param.friendId = this.friend.id;
-				}
-				this.loading = true;
-				this.$http({
-					url: this.histroyAction,
-					method: 'get',
-					params: param
-				}).then(messages => {
-					messages.forEach(m => this.messages.unshift(m));
-					this.loading = false;
-					if(messages.length <this.size){
-						this.loadAll = true;
-					}
-					this.refreshScrollPos();
-				}).catch(()=>{
-					this.loading = false;
-				})
-			},
-			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
+		loadMessages() {
+			if (this.loadAll) {
+				return this.$message.success("已到达顶部");
+			}
+			let param = {
+				page: this.page++,
+				size: this.size
+			}
+			if (this.chat.type == 'GROUP') {
+				param.groupId = this.group.id;
+			} else {
+				param.friendId = this.friend.id;
+			}
+			this.loading = true;
+			this.$http({
+				url: this.histroyAction,
+				method: 'get',
+				params: param
+			}).then(messages => {
+				messages.forEach(m => this.messages.unshift(m));
+				this.loading = false;
+				if (messages.length < this.size) {
+					this.loadAll = true;
 				}
-			},
-			refreshScrollPos(){
-				let scrollWrap =  this.$refs.scrollbar.$refs.wrap;
-				let scrollHeight = scrollWrap.scrollHeight;
-				let scrollTop = scrollWrap.scrollTop;
-				this.$nextTick(() => {
-					let offsetTop = scrollWrap.scrollHeight - scrollHeight;
-					scrollWrap.scrollTop = scrollTop + offsetTop;
-					// 滚动条没出来，继续加载
-					if(scrollWrap.scrollHeight == scrollHeight){
-						this.loadMessages();
-					}
-				});
+				this.refreshScrollPos();
+			}).catch(() => {
+				this.loading = false;
+			})
+		},
+		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
 			}
 		},
-		computed: {
-			mine() {
-				return this.$store.state.userStore.userInfo;
-			},
-			histroyAction() {
-				return `/message/${this.chat.type.toLowerCase()}/history`;
+		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
 			}
 		},
-		watch: {
-			visible: {
-				handler(newValue, oldValue) {
-					if (newValue) {
-						this.loadMessages();
-						this.$nextTick(() => {
-							document.getElementById('historyScrollbar').addEventListener("mousewheel", this.onScroll,true);
-						});
-					}
+		refreshScrollPos() {
+			let scrollWrap = this.$refs.scrollbar.$refs.wrap;
+			let scrollHeight = scrollWrap.scrollHeight;
+			let scrollTop = scrollWrap.scrollTop;
+			this.$nextTick(() => {
+				let offsetTop = scrollWrap.scrollHeight - scrollHeight;
+				scrollWrap.scrollTop = scrollTop + offsetTop;
+				// 滚动条没出来，继续加载
+				if (scrollWrap.scrollHeight == scrollHeight) {
+					this.loadMessages();
+				}
+			});
+		}
+	},
+	computed: {
+		mine() {
+			return this.$store.state.userStore.userInfo;
+		},
+		histroyAction() {
+			return `/message/${this.chat.type.toLowerCase()}/history`;
+		}
+	},
+	watch: {
+		visible: {
+			handler(newValue, oldValue) {
+				if (newValue) {
+					this.loadMessages();
+					this.$nextTick(() => {
+						document.getElementById('historyScrollbar').addEventListener("mousewheel", this.onScroll, true);
+					});
 				}
 			}
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	.chat-history {
-		display: flex;
-		height: 100%;
-		
-		.chat-history-scrollbar {
-			flex: 1;
-			.el-scrollbar__thumb {
-			    background-color: #555555;
-			}
-			ul {
-				padding: 20px;
+.chat-history {
+	display: flex;
+	height: 100%;
 
-				li {
-					list-style-type: none;
-				}
+	.chat-history-scrollbar {
+		flex: 1;
+
+		.el-scrollbar__thumb {
+			background-color: #555555;
+		}
+
+		ul {
+			padding: 20px;
+
+			li {
+				list-style-type: none;
 			}
 		}
 	}
+}
 </style>
diff --git a/im-web/src/components/chat/ChatInput.vue b/im-web/src/components/chat/ChatInput.vue
index 8f7a449..2a032d1 100644
--- a/im-web/src/components/chat/ChatInput.vue
+++ b/im-web/src/components/chat/ChatInput.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="chat-input-area">
-		<div :class="['edit-chat-container',isEmpty?'':'not-empty']" contenteditable="true" @paste.prevent="onPaste"
-			@keydown="onKeydown" @compositionstart="compositionFlag=true" @compositionend="onCompositionEnd"
+		<div :class="['edit-chat-container', isEmpty ? '' : 'not-empty']" contenteditable="true" @paste.prevent="onPaste"
+			@keydown="onKeydown" @compositionstart="compositionFlag = true" @compositionend="onCompositionEnd"
 			@input="onEditorInput" @mousedown="onMousedown" ref="content" @blur="onBlur">
 		</div>
 		<chat-at-box @select="onAtSelect" :search-text="atSearchText" ref="atBox" :ownerId="ownerId"
@@ -10,561 +10,558 @@
 </template>
 
 <script>
-	import ChatAtBox from "./ChatAtBox";
-
-	export default {
-		name: "ChatInput",
-		components: { ChatAtBox },
-		props: {
-			ownerId: {
-				type: Number,
-			},
-			groupMembers: {
-				type: Array,
-			},
+import ChatAtBox from "./ChatAtBox";
+
+export default {
+	name: "ChatInput",
+	components: { ChatAtBox },
+	props: {
+		ownerId: {
+			type: Number,
 		},
-		data() {
-			return {
-				imageList: [],
-				fileList: [],
-				currentId: 0,
-				atSearchText: null,
-				compositionFlag: false,
-				atIng: false,
-				isEmpty: true,
-				changeStored: true,
-				blurRange: null
-			}
+		groupMembers: {
+			type: Array,
 		},
-		methods: {
-			onPaste(e) {
-				this.isEmpty = false;
-				let txt = e.clipboardData.getData('Text')
-				let range = window.getSelection().getRangeAt(0)
-				if (range.startContainer !== range.endContainer || range.startOffset !== range.endOffset) {
-					range.deleteContents();
-				}
-				// 粘贴图片和文件时，这里没有数据
-				if (txt && typeof(txt) == 'string') {
-					let textNode = document.createTextNode(txt);
-					range.insertNode(textNode)
-					range.collapse();
-					return;
-				}
-				let items = (e.clipboardData || window.clipboardData).items
-				if (items.length) {
-					for (let i = 0; i < items.length; i++) {
-						if (items[i].type.indexOf('image') !== -1) {
-							let file = items[i].getAsFile();
-							let imagePush = {
-								fileId: this.generateId(),
-								file: file,
-								url: URL.createObjectURL(file)
-							};
-							this.imageList[imagePush.fileId] = (imagePush);
-							let line = this.newLine();
-							let imageElement = document.createElement('img');
-							imageElement.className = 'chat-image no-text';
-							imageElement.src = imagePush.url;
-							imageElement.dataset.imgId = imagePush.fileId;
-							line.appendChild(imageElement);
-							let after = document.createTextNode('\u00A0');
-							line.appendChild(after);
-							this.selectElement(after, 1);		
-						} else {
-							let asFile = items[i].getAsFile();
-							if (!asFile) {
-								continue;
-							}
-							let filePush = { fileId: this.generateId(), file: asFile };
-							this.fileList[filePush.fileId] = (filePush)
-							let line = this.newLine();
-							let fileElement = this.createFile(filePush);
-							line.appendChild(fileElement);
-							let after = document.createTextNode('\u00A0');
-							line.appendChild(after);
-							this.selectElement(after, 1);
-						}
-					}
-				}
+	},
+	data() {
+		return {
+			imageList: [],
+			fileList: [],
+			currentId: 0,
+			atSearchText: null,
+			compositionFlag: false,
+			atIng: false,
+			isEmpty: true,
+			changeStored: true,
+			blurRange: null
+		}
+	},
+	methods: {
+		onPaste(e) {
+			this.isEmpty = false;
+			let txt = e.clipboardData.getData('Text')
+			let range = window.getSelection().getRangeAt(0)
+			if (range.startContainer !== range.endContainer || range.startOffset !== range.endOffset) {
+				range.deleteContents();
+			}
+			// 粘贴图片和文件时，这里没有数据
+			if (txt && typeof (txt) == 'string') {
+				let textNode = document.createTextNode(txt);
+				range.insertNode(textNode)
 				range.collapse();
-			},
-			selectElement(element, endOffset) {
-				let selection = window.getSelection();
-				// 插入元素可能不是立即执行的，vue可能会在插入元素后再更新dom
-				this.$nextTick(() => {
-					let t1 = document.createRange();
-					t1.setStart(element, 0);
-					t1.setEnd(element, endOffset || 0);
-					if (element.firstChild) {
-						t1.selectNodeContents(element.firstChild);
-					}
-					t1.collapse();
-					selection.removeAllRanges();
-					selection.addRange(t1);
-					// 需要时自动聚焦
-					if (element.focus) {
-						element.focus();
-					}
-				})
-			},
-			onCompositionEnd(e) {
-				this.compositionFlag = false;
-				this.onEditorInput(e);
-			},
-			onKeydown(e) {
-				if (e.keyCode === 13) {
-					e.preventDefault();
-					e.stopPropagation();
-					if (this.atIng) {
-						console.log('选中at的人')
-						this.$refs.atBox.select();
-						return;
-					}
-					if (e.ctrlKey) {
+				return;
+			}
+			let items = (e.clipboardData || window.clipboardData).items
+			if (items.length) {
+				for (let i = 0; i < items.length; i++) {
+					if (items[i].type.indexOf('image') !== -1) {
+						let file = items[i].getAsFile();
+						let imagePush = {
+							fileId: this.generateId(),
+							file: file,
+							url: URL.createObjectURL(file)
+						};
+						this.imageList[imagePush.fileId] = (imagePush);
 						let line = this.newLine();
+						let imageElement = document.createElement('img');
+						imageElement.className = 'chat-image no-text';
+						imageElement.src = imagePush.url;
+						imageElement.dataset.imgId = imagePush.fileId;
+						line.appendChild(imageElement);
 						let after = document.createTextNode('\u00A0');
 						line.appendChild(after);
-						this.selectElement(line.childNodes[0], 0);
+						this.selectElement(after, 1);
 					} else {
-						// 中文输入标记
-						if (this.compositionFlag) {
-							return;
+						let asFile = items[i].getAsFile();
+						if (!asFile) {
+							continue;
 						}
-						this.submit();
+						let filePush = { fileId: this.generateId(), file: asFile };
+						this.fileList[filePush.fileId] = (filePush)
+						let line = this.newLine();
+						let fileElement = this.createFile(filePush);
+						line.appendChild(fileElement);
+						let after = document.createTextNode('\u00A0');
+						line.appendChild(after);
+						this.selectElement(after, 1);
 					}
-					return;
 				}
-				// 删除键
-				if (e.keyCode === 8) {
-					console.log("delete")
-					// 等待dom更新
-					setTimeout(() => {
-						let s = this.$refs.content.innerHTML.trim();
-						// 空dom时，需要刷新dom
-						console.log(s);
-						if (s === '' || s === '<br>' || s === '<div>&nbsp;</div>' ) {
-							// 拼接随机长度的空格，以刷新dom
-							this.empty();
-							this.isEmpty = true;
-							this.selectElement(this.$refs.content);
-						} else {
-							this.isEmpty = false;
-						}
-					})
+			}
+			range.collapse();
+		},
+		selectElement(element, endOffset) {
+			let selection = window.getSelection();
+			// 插入元素可能不是立即执行的，vue可能会在插入元素后再更新dom
+			this.$nextTick(() => {
+				let t1 = document.createRange();
+				t1.setStart(element, 0);
+				t1.setEnd(element, endOffset || 0);
+				if (element.firstChild) {
+					t1.selectNodeContents(element.firstChild);
+				}
+				t1.collapse();
+				selection.removeAllRanges();
+				selection.addRange(t1);
+				// 需要时自动聚焦
+				if (element.focus) {
+					element.focus();
 				}
-				// at框打开时，上下键移动特殊处理
+			})
+		},
+		onCompositionEnd(e) {
+			this.compositionFlag = false;
+			this.onEditorInput(e);
+		},
+		onKeydown(e) {
+			if (e.keyCode === 13) {
+				e.preventDefault();
+				e.stopPropagation();
 				if (this.atIng) {
-					if (e.keyCode === 38) {
-						e.preventDefault();
-						e.stopPropagation();
-						this.$refs.atBox.moveUp();
-					}
-					if (e.keyCode === 40) {
-						e.preventDefault();
-						e.stopPropagation();
-						this.$refs.atBox.moveDown();
-					}
+					console.log('选中at的人')
+					this.$refs.atBox.select();
+					return;
 				}
-
-			},
-			onAtSelect(member) {
-				this.atIng = false;
-				// 选中输入的 @xx 符
-				let blurRange = this.blurRange;
-				let endContainer = blurRange.endContainer
-				let startOffset = endContainer.data.indexOf("@"+this.atSearchText);
-				let endOffset = startOffset + this.atSearchText.length + 1;
-				blurRange.setStart(blurRange.endContainer, startOffset);
-				blurRange.setEnd(blurRange.endContainer,  endOffset);
-				blurRange.deleteContents()
-				blurRange.collapse();
-				console.log("onAtSelect")
-				this.focus();
-				// 创建元素节点
-				let element = document.createElement('SPAN')
-				element.className = "chat-at-user";
-				element.dataset.id = member.userId;
-				element.contentEditable = 'false'
-				element.innerText = `@${member.showNickName}`
-				blurRange.insertNode(element)
-				// 光标移动到末尾
-				blurRange.collapse()
-
-				// 插入空格
-				let textNode = document.createTextNode('\u00A0');
-				blurRange.insertNode(textNode);
-
-				blurRange.collapse()
-				this.atSearchText = "";
-				this.selectElement(textNode, 1);
-			},
-			onEditorInput(e) {
-				this.isEmpty = false;
-				this.changeStored = false;
-				if (this.$props.groupMembers && !this.compositionFlag) {
-					let selection = window.getSelection()
-					let range = selection.getRangeAt(0);
-					// 截取@后面的名称作为过滤条件，并以空格结束
-					let endContainer = range.endContainer;
-					let endOffset = range.endOffset;
-					let textContent = endContainer.textContent;
-					let startIndex = -1;
-					for (let i = endOffset; i >= 0; i--) {
-						if (textContent[i] === '@') {
-							startIndex = i;
-							break;
-						}
-					}
-					// 没有at符号，则关闭弹窗
-					if (startIndex === -1) {
-						this.$refs.atBox.close();
+				if (e.ctrlKey) {
+					let line = this.newLine();
+					let after = document.createTextNode('\u00A0');
+					line.appendChild(after);
+					this.selectElement(line.childNodes[0], 0);
+				} else {
+					// 中文输入标记
+					if (this.compositionFlag) {
 						return;
 					}
-
-					let endIndex = endOffset;
-					for (let i = endOffset; i < textContent.length; i++) {
-						if (textContent[i] === ' ') {
-							endIndex = i;
-							break;
-						}
-					}
-					this.atSearchText = textContent.substring(startIndex + 1, endIndex).trim();
-					// 打开选择弹窗
-					if (this.atSearchText == '') {
-						this.showAtBox(e)
+					this.submit();
+				}
+				return;
+			}
+			// 删除键
+			if (e.keyCode === 8) {
+				console.log("delete")
+				// 等待dom更新
+				setTimeout(() => {
+					let s = this.$refs.content.innerHTML.trim();
+					// 空dom时，需要刷新dom
+					console.log(s);
+					if (s === '' || s === '<br>' || s === '<div>&nbsp;</div>') {
+						// 拼接随机长度的空格，以刷新dom
+						this.empty();
+						this.isEmpty = true;
+						this.selectElement(this.$refs.content);
+					} else {
+						this.isEmpty = false;
 					}
+				})
+			}
+			// at框打开时，上下键移动特殊处理
+			if (this.atIng) {
+				if (e.keyCode === 38) {
+					e.preventDefault();
+					e.stopPropagation();
+					this.$refs.atBox.moveUp();
+				}
+				if (e.keyCode === 40) {
+					e.preventDefault();
+					e.stopPropagation();
+					this.$refs.atBox.moveDown();
 				}
+			}
 
-			},
-			onBlur(e) {
-				this.updateRange();
-				
-			},
-			onMousedown() {
-				if (this.atIng) {
+		},
+		onAtSelect(member) {
+			this.atIng = false;
+			// 选中输入的 @xx 符
+			let blurRange = this.blurRange;
+			let endContainer = blurRange.endContainer
+			let startOffset = endContainer.data.indexOf("@" + this.atSearchText);
+			let endOffset = startOffset + this.atSearchText.length + 1;
+			blurRange.setStart(blurRange.endContainer, startOffset);
+			blurRange.setEnd(blurRange.endContainer, endOffset);
+			blurRange.deleteContents()
+			blurRange.collapse();
+			console.log("onAtSelect")
+			this.focus();
+			// 创建元素节点
+			let element = document.createElement('SPAN')
+			element.className = "chat-at-user";
+			element.dataset.id = member.userId;
+			element.contentEditable = 'false'
+			element.innerText = `@${member.showNickName}`
+			blurRange.insertNode(element)
+			// 光标移动到末尾
+			blurRange.collapse()
+
+			// 插入空格
+			let textNode = document.createTextNode('\u00A0');
+			blurRange.insertNode(textNode);
+
+			blurRange.collapse()
+			this.atSearchText = "";
+			this.selectElement(textNode, 1);
+		},
+		onEditorInput(e) {
+			this.isEmpty = false;
+			this.changeStored = false;
+			if (this.$props.groupMembers && !this.compositionFlag) {
+				let selection = window.getSelection()
+				let range = selection.getRangeAt(0);
+				// 截取@后面的名称作为过滤条件，并以空格结束
+				let endContainer = range.endContainer;
+				let endOffset = range.endOffset;
+				let textContent = endContainer.textContent;
+				let startIndex = -1;
+				for (let i = endOffset; i >= 0; i--) {
+					if (textContent[i] === '@') {
+						startIndex = i;
+						break;
+					}
+				}
+				// 没有at符号，则关闭弹窗
+				if (startIndex === -1) {
 					this.$refs.atBox.close();
-					this.atIng = false;
+					return;
 				}
-			},
-			insertEmoji(emojiText) {
-				let emojiElement = document.createElement('img');
-				emojiElement.className = 'chat-emoji no-text';
-				emojiElement.dataset.emojiCode = emojiText;
-				emojiElement.src = this.$emo.textToUrl(emojiText);
-
-				let blurRange = this.blurRange;
-				if (!blurRange) {
-					this.focus();
-					this.updateRange();
-					blurRange = this.blurRange;
+
+				let endIndex = endOffset;
+				for (let i = endOffset; i < textContent.length; i++) {
+					if (textContent[i] === ' ') {
+						endIndex = i;
+						break;
+					}
 				}
-				if (blurRange.startContainer !== blurRange.endContainer || blurRange.startOffset !== blurRange.endOffset) {
-					blurRange.deleteContents();
+				this.atSearchText = textContent.substring(startIndex + 1, endIndex).trim();
+				// 打开选择弹窗
+				if (this.atSearchText == '') {
+					this.showAtBox(e)
 				}
-				blurRange.insertNode(emojiElement);
-				blurRange.collapse()
+			}
 
-				let textNode = document.createTextNode('\u00A0');
-				blurRange.insertNode(textNode)
-				blurRange.collapse()
+		},
+		onBlur(e) {
+			this.updateRange();
 
-				this.selectElement(textNode);
-				this.updateRange();
-				this.isEmpty = false;
-			},
-			generateId() {
-				return this.currentId++;
-			},
-			createFile(filePush) {
-				let file = filePush.file;
-				let fileId = filePush.fileId;
-				let container = document.createElement('div');
-				container.className = 'chat-file-container no-text';
-				container.contentEditable = 'false';
-				container.dataset.fileId = fileId;
-
-				let left = document.createElement('div');
-				left.className = 'file-position-left';
-				container.appendChild(left);
-
-				let icon = document.createElement('div');
-				icon.className = 'el-icon-document';
-				left.appendChild(icon);
-
-				let right = document.createElement('div');
-				right.className = 'file-position-right';
-				container.appendChild(right);
-
-				let fileName = document.createElement('div');
-				fileName.className = 'file-name';
-				fileName.innerText = file.name;
-
-				let fileSize = document.createElement('div');
-				fileSize.className = 'file-size';
-				fileSize.innerText = this.sizeConvert(file.size);
-
-				right.appendChild(fileName);
-				right.appendChild(fileSize);
-
-				return container;
-			},
-			sizeConvert(len) {
-				if (len < 1024) {
-					return len + 'B';
-				} else if (len < 1024 * 1024) {
-					return (len / 1024).toFixed(2) + 'KB';
-				} else if (len < 1024 * 1024 * 1024) {
-					return (len / 1024 / 1024).toFixed(2) + 'MB';
-				} else {
-					return (len / 1024 / 1024 / 1024).toFixed(2) + 'GB';
-				}
-			},
-			updateRange() {
-				let selection = window.getSelection();
-				this.blurRange = selection.getRangeAt(0);
-			},
-			newLine() {
-				let selection = window.getSelection();
-				let range = selection.getRangeAt(0);
-				let divElement = document.createElement('div');
-				let endContainer = range.endContainer;
-				let parentElement = endContainer.parentElement;
-				if (parentElement.parentElement === this.$refs.content) {
-					divElement.innerHTML  = endContainer.textContent.substring(range.endOffset).trim(); 
-					endContainer.textContent = endContainer.textContent.substring(0, range.endOffset);
-					// 插入到当前div（当前行）后面
-					parentElement.insertAdjacentElement('afterend', divElement);
-				} else {
-					divElement.innerHTML = '';
-					this.$refs.content.append(divElement);
-				}
-				return divElement;
-			},
-			clear() {
-				this.empty();
-				this.imageList = [];
-				this.fileList = [];
-			},
-			empty() {
-				this.$refs.content.innerHTML = "";
-				let line = this.newLine();
-				let after = document.createTextNode('\u00A0');
-				line.appendChild(after);
-				this.$nextTick(()=>this.selectElement(after));
-			},
-			showAtBox(e) {
-				this.atIng = true;
-				// show之后会自动更新当前搜索的text
-				// this.atSearchText = "";
-				let selection = window.getSelection()
-				let range = selection.getRangeAt(0)
-				// 光标所在坐标
-				let pos = range.getBoundingClientRect();
-				this.$refs.atBox.open({
-					x: pos.x,
-					y: pos.y
-				})
-				// 记录光标所在位置
+		},
+		onMousedown() {
+			if (this.atIng) {
+				this.$refs.atBox.close();
+				this.atIng = false;
+			}
+		},
+		insertEmoji(emojiText) {
+			let emojiElement = document.createElement('img');
+			emojiElement.className = 'chat-emoji no-text';
+			emojiElement.dataset.emojiCode = emojiText;
+			emojiElement.src = this.$emo.textToUrl(emojiText);
+
+			let blurRange = this.blurRange;
+			if (!blurRange) {
+				this.focus();
 				this.updateRange();
-			},
-			html2Escape(strHtml) {
-				return strHtml.replace(/[<>&"]/g, function(c) {
-					return {
-						'<': '&lt;',
-						'>': '&gt;',
-						'&': '&amp;',
-						'"': '&quot;'
-					} [c];
-				});
-			},
-			submit() {
-				let nodes = this.$refs.content.childNodes;
-				let fullList = [];
-				let tempText = '';
-				let atUserIds = [];
-				let each = (nodes) => {
-					for (let i = 0; i < nodes.length; i++) {
-						let node = nodes[i];
-						if (!node) {
-							continue;
-						}
-						if (node.nodeType === 3) {
-							tempText += this.html2Escape(node.textContent);
-							continue;
-						}
-						let nodeName = node.nodeName.toLowerCase();
-						if (nodeName === 'script') {
-							continue;
-						}
-						let text = tempText.trim();
-						if (nodeName === 'img') {
-							let imgId = node.dataset.imgId;
-							if (imgId) {
-								if (text) {
-									fullList.push({
-										type: 'text',
-										content: text,
-										atUserIds: atUserIds
-									})
-									tempText = '';
-									atUserIds = []
-								}
+				blurRange = this.blurRange;
+			}
+			if (blurRange.startContainer !== blurRange.endContainer || blurRange.startOffset !== blurRange.endOffset) {
+				blurRange.deleteContents();
+			}
+			blurRange.insertNode(emojiElement);
+			blurRange.collapse()
+
+			let textNode = document.createTextNode('\u00A0');
+			blurRange.insertNode(textNode)
+			blurRange.collapse()
+
+			this.selectElement(textNode);
+			this.updateRange();
+			this.isEmpty = false;
+		},
+		generateId() {
+			return this.currentId++;
+		},
+		createFile(filePush) {
+			let file = filePush.file;
+			let fileId = filePush.fileId;
+			let container = document.createElement('div');
+			container.className = 'chat-file-container no-text';
+			container.contentEditable = 'false';
+			container.dataset.fileId = fileId;
+
+			let left = document.createElement('div');
+			left.className = 'file-position-left';
+			container.appendChild(left);
+
+			let icon = document.createElement('div');
+			icon.className = 'el-icon-document';
+			left.appendChild(icon);
+
+			let right = document.createElement('div');
+			right.className = 'file-position-right';
+			container.appendChild(right);
+
+			let fileName = document.createElement('div');
+			fileName.className = 'file-name';
+			fileName.innerText = file.name;
+
+			let fileSize = document.createElement('div');
+			fileSize.className = 'file-size';
+			fileSize.innerText = this.sizeConvert(file.size);
+
+			right.appendChild(fileName);
+			right.appendChild(fileSize);
+
+			return container;
+		},
+		sizeConvert(len) {
+			if (len < 1024) {
+				return len + 'B';
+			} else if (len < 1024 * 1024) {
+				return (len / 1024).toFixed(2) + 'KB';
+			} else if (len < 1024 * 1024 * 1024) {
+				return (len / 1024 / 1024).toFixed(2) + 'MB';
+			} else {
+				return (len / 1024 / 1024 / 1024).toFixed(2) + 'GB';
+			}
+		},
+		updateRange() {
+			let selection = window.getSelection();
+			this.blurRange = selection.getRangeAt(0);
+		},
+		newLine() {
+			let selection = window.getSelection();
+			let range = selection.getRangeAt(0);
+			let divElement = document.createElement('div');
+			let endContainer = range.endContainer;
+			let parentElement = endContainer.parentElement;
+			if (parentElement.parentElement === this.$refs.content) {
+				divElement.innerHTML = endContainer.textContent.substring(range.endOffset).trim();
+				endContainer.textContent = endContainer.textContent.substring(0, range.endOffset);
+				// 插入到当前div（当前行）后面
+				parentElement.insertAdjacentElement('afterend', divElement);
+			} else {
+				divElement.innerHTML = '';
+				this.$refs.content.append(divElement);
+			}
+			return divElement;
+		},
+		clear() {
+			this.empty();
+			this.imageList = [];
+			this.fileList = [];
+		},
+		empty() {
+			this.$refs.content.innerHTML = "";
+			let line = this.newLine();
+			let after = document.createTextNode('\u00A0');
+			line.appendChild(after);
+			this.$nextTick(() => this.selectElement(after));
+		},
+		showAtBox(e) {
+			this.atIng = true;
+			// show之后会自动更新当前搜索的text
+			// this.atSearchText = "";
+			let selection = window.getSelection()
+			let range = selection.getRangeAt(0)
+			// 光标所在坐标
+			let pos = range.getBoundingClientRect();
+			this.$refs.atBox.open({
+				x: pos.x,
+				y: pos.y
+			})
+			// 记录光标所在位置
+			this.updateRange();
+		},
+		html2Escape(strHtml) {
+			return strHtml.replace(/[<>&"]/g, function (c) {
+				return {
+					'<': '&lt;',
+					'>': '&gt;',
+					'&': '&amp;',
+					'"': '&quot;'
+				}[c];
+			});
+		},
+		submit() {
+			let nodes = this.$refs.content.childNodes;
+			let fullList = [];
+			let tempText = '';
+			let atUserIds = [];
+			let each = (nodes) => {
+				for (let i = 0; i < nodes.length; i++) {
+					let node = nodes[i];
+					if (!node) {
+						continue;
+					}
+					if (node.nodeType === 3) {
+						tempText += this.html2Escape(node.textContent);
+						continue;
+					}
+					let nodeName = node.nodeName.toLowerCase();
+					if (nodeName === 'script') {
+						continue;
+					}
+					let text = tempText.trim();
+					if (nodeName === 'img') {
+						let imgId = node.dataset.imgId;
+						if (imgId) {
+							if (text) {
 								fullList.push({
-									type: 'image',
-									content: this.imageList[imgId]
+									type: 'text',
+									content: text,
+									atUserIds: atUserIds
 								})
-							} else {
-								let emojiCode = node.dataset.emojiCode;
-								tempText += emojiCode;
+								tempText = '';
+								atUserIds = []
 							}
-						} else if (nodeName === 'div') {
-							let fileId = node.dataset.fileId
-							// 文件
-							if (fileId) {
-								if (text) {
-									fullList.push({
-										type: 'text',
-										content: text,
-										atUserIds: atUserIds
-									})
-									tempText = '';
-									atUserIds = []
-								}
+							fullList.push({
+								type: 'image',
+								content: this.imageList[imgId]
+							})
+						} else {
+							let emojiCode = node.dataset.emojiCode;
+							tempText += emojiCode;
+						}
+					} else if (nodeName === 'div') {
+						let fileId = node.dataset.fileId
+						// 文件
+						if (fileId) {
+							if (text) {
 								fullList.push({
-									type: 'file',
-									content: this.fileList[fileId]
+									type: 'text',
+									content: text,
+									atUserIds: atUserIds
 								})
-							} else {
-								tempText += '\n';
-								each(node.childNodes);
-							}
-						} else if (nodeName === 'span') {
-							if(node.dataset.id){
-								tempText += node.innerHTML;
-								atUserIds.push(node.dataset.id)
-							}else {
-								tempText += node.outerHtml;
+								tempText = '';
+								atUserIds = []
 							}
+							fullList.push({
+								type: 'file',
+								content: this.fileList[fileId]
+							})
+						} else {
+							tempText += '\n';
+							each(node.childNodes);
+						}
+					} else if (nodeName === 'span') {
+						if (node.dataset.id) {
+							tempText += node.innerHTML;
+							atUserIds.push(node.dataset.id)
+						} else {
+							tempText += node.outerHtml;
 						}
 					}
 				}
-				each(nodes)
-				let text = tempText.trim();
-				if (text !== '') {
-					fullList.push({
-						type: 'text',
-						content: text,
-						atUserIds: atUserIds
-					})
-				}
-				this.$emit('submit', fullList);
-			},
-			focus() {
-				this.$refs.content.focus();
 			}
-
+			each(nodes)
+			let text = tempText.trim();
+			if (text !== '') {
+				fullList.push({
+					type: 'text',
+					content: text,
+					atUserIds: atUserIds
+				})
+			}
+			this.$emit('submit', fullList);
+		},
+		focus() {
+			this.$refs.content.focus();
 		}
+
 	}
+}
 </script>
 
 <style lang="scss">
-	.chat-input-area {
-		width: 100%;
-		height: 100%;
-		position: relative;
-
-		.edit-chat-container {
+.chat-input-area {
+	width: 100%;
+	height: 100%;
+	position: relative;
+
+	.edit-chat-container {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		outline: none;
+		padding: 5px;
+		line-height: 1.5;
+		font-size: var(--im-font-size);
+		text-align: left;
+		overflow-y: auto;
+
+		// 单独一行时，无法在前面输入的bug
+		>div:before {
+			content: "\00a0";
+			font-size: 14px;
 			position: absolute;
 			top: 0;
 			left: 0;
-			right: 0;
-			bottom: 0;
-			outline: none;
-			padding: 5px;
-			line-height: 30px;
-			font-size: 16px;
-			text-align: left;
-			overflow-y: scroll;
-
-			// 单独一行时，无法在前面输入的bug
-			>div:before {
-				content: "\00a0";
-				font-size: 14px;
-				position: absolute;
-				top: 0;
-				left: 0;
-			}
+		}
 
-			.chat-image {
-				display: block;
-				max-width: 200px;
-				max-height: 100px;
-				border: 1px solid #e6e6e6;
-				cursor: pointer;
-			}
+		.chat-image {
+			display: block;
+			max-width: 200px;
+			max-height: 100px;
+			border: 1px solid #e6e6e6;
+			cursor: pointer;
+		}
 
-			.chat-emoji {
-				width: 30px;
-				height: 30px;
-				vertical-align: top;
-				cursor: pointer;
-			}
+		.chat-emoji {
+			width: 30px;
+			height: 30px;
+			vertical-align: top;
+			cursor: pointer;
+		}
+
+		.chat-file-container {
+			max-width: 65%;
+			padding: 10px;
+			border: 2px solid #587ff0;
+			display: flex;
+			background: #eeeC;
+			border-radius: 10px;
 
-			.chat-file-container {
-				max-width: 65%;
-				padding: 10px;
-				border: 2px solid #587ff0;
+			.file-position-left {
 				display: flex;
-				background: #eeeC;
-				border-radius: 10px;
-
-				.file-position-left {
-					display: flex;
-					width: 80px;
-					justify-content: center;
-					align-items: center;
-
-					.el-icon-document {
-						font-size: 40px;
-						text-align: center;
-						color: #d42e07;
-					}
+				width: 80px;
+				justify-content: center;
+				align-items: center;
+
+				.el-icon-document {
+					font-size: 40px;
+					text-align: center;
+					color: #d42e07;
 				}
+			}
 
-				.file-position-right {
-					flex: 1;
-
-					.file-name {
-						font-size: 16px;
-						font-weight: 600;
-						color: #66b1ff;
-					}
+			.file-position-right {
+				flex: 1;
 
-					.file-size {
-						font-size: 14px;
-						font-weight: 600;
-						color: black;
-					}
+				.file-name {
+					font-size: 16px;
+					font-weight: 600;
+					color: #66b1ff;
 				}
-			}
 
-			.chat-at-user {
-				color: #00f;
-				font-weight: 600;
-
-				border-radius: 3px;
+				.file-size {
+					font-size: 14px;
+					font-weight: 600;
+				}
 			}
 		}
 
-		.edit-chat-container>div:nth-of-type(1):after {
-			content: '请输入消息（按Ctrl+Enter键换行）';
-			color: gray;
+		.chat-at-user {
+			color: #00f;
+			border-radius: 3px;
 		}
+	}
 
-		.edit-chat-container.not-empty>div:nth-of-type(1):after {
-			content: none;
-		}
+	.edit-chat-container>div:nth-of-type(1):after {
+		content: '请输入消息（按Ctrl+Enter键换行）';
+		color: gray;
+	}
 
+	.edit-chat-container.not-empty>div:nth-of-type(1):after {
+		content: none;
 	}
-</style>
\ No newline at end of file
+
+}
+</style>
diff --git a/im-web/src/components/chat/ChatItem.vue b/im-web/src/components/chat/ChatItem.vue
index 9c11a1b..b3287e0 100644
--- a/im-web/src/components/chat/ChatItem.vue
+++ b/im-web/src/components/chat/ChatItem.vue
@@ -1,231 +1,229 @@
 <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="45"
-				:id="chat.type=='PRIVATE'?chat.targetId:0"></head-image>
-			<div v-show="chat.unreadCount>0" class="unread-text">{{chat.unreadCount}}</div>
+			<head-image :url="chat.headImage" :name="chat.showName" :size="42"
+				:id="chat.type == 'PRIVATE' ? chat.targetId : 0" :isShowUserInfo="false"></head-image>
+			<div v-show="chat.unreadCount > 0" class="unread-text">{{ chat.unreadCount }}</div>
 		</div>
 		<div class="chat-right">
 			<div class="chat-name">
 				<div class="chat-name-text">
-					<div>{{chat.showName}}</div>
-					<el-tag v-if="chat.type=='GROUP'" size="mini" effect="dark">群</el-tag>
+					<div>{{ chat.showName }}</div>
+					<el-tag v-if="chat.type == 'GROUP'" size="mini" effect="dark">群</el-tag>
 				</div>
-
-				<div class="chat-time-text">{{showTime}}</div>
-
+				<div class="chat-time-text">{{ showTime }}</div>
 			</div>
 			<div class="chat-content">
-				<div class="chat-at-text">{{atText}}</div>
-				<div class="chat-send-name" v-show="isShowSendName">{{chat.sendNickName+':&nbsp;'}}</div>
+				<div class="chat-at-text">{{ atText }}</div>
+				<div class="chat-send-name" v-show="isShowSendName">{{ chat.sendNickName + ':&nbsp;' }}</div>
 				<div class="chat-content-text" v-html="$emo.transform(chat.lastContent)"></div>
 			</div>
 		</div>
-		<right-menu v-show="rightMenu.show" :pos="rightMenu.pos" :items="rightMenu.items" @close="rightMenu.show=false"
-			@select="onSelectMenu"></right-menu>
+		<right-menu v-show="rightMenu.show" :pos="rightMenu.pos" :items="rightMenu.items"
+			@close="rightMenu.show = false" @select="onSelectMenu"></right-menu>
 	</div>
 
 </template>
 
 <script>
-	import HeadImage from '../common/HeadImage.vue';
-	import RightMenu from '../common/RightMenu.vue';
-
-	export default {
-		name: "chatItem",
-		components: {
-			HeadImage,
-			RightMenu
-		},
-		data() {
-			return {
-				rightMenu: {
-					show: false,
-					pos: {
-						x: 0,
-						y: 0
-					},
-					items: [{
-						key: 'TOP',
-						name: '置顶',
-						icon: 'el-icon-top'
-					}, {
-						key: 'DELETE',
-						name: '删除',
-						icon: 'el-icon-delete'
-					}]
-				}
+import HeadImage from '../common/HeadImage.vue';
+import RightMenu from '../common/RightMenu.vue';
+
+export default {
+	name: "chatItem",
+	components: {
+		HeadImage,
+		RightMenu
+	},
+	data() {
+		return {
+			rightMenu: {
+				show: false,
+				pos: {
+					x: 0,
+					y: 0
+				},
+				items: [{
+					key: 'TOP',
+					name: '置顶',
+					icon: 'el-icon-top'
+				}, {
+					key: 'DELETE',
+					name: '删除',
+					icon: 'el-icon-delete'
+				}]
 			}
+		}
+	},
+	props: {
+		chat: {
+			type: Object
 		},
-		props: {
-			chat: {
-				type: Object
-			},
-			active: {
-				type: Boolean
-			},
-			index: {
-				type: Number
-			}
+		active: {
+			type: Boolean
 		},
-		methods: {
-			showRightMenu(e) {
-				this.rightMenu.pos = {
-					x: e.x,
-					y: e.y
-				};
-				this.rightMenu.show = "true";
-			},
-			onSelectMenu(item) {
-				this.$emit(item.key.toLowerCase(), this.msgInfo);
+		index: {
+			type: Number
+		}
+	},
+	methods: {
+		showRightMenu(e) {
+			this.rightMenu.pos = {
+				x: e.x,
+				y: e.y
+			};
+			this.rightMenu.show = "true";
+		},
+		onSelectMenu(item) {
+			this.$emit(item.key.toLowerCase(), this.msgInfo);
+		}
+	},
+	computed: {
+		isShowSendName() {
+			if (!this.chat.sendNickName) {
+				return false;
 			}
+			let size = this.chat.messages.length;
+			if (size == 0) {
+				return false;
+			}
+			// 只有群聊的普通消息需要显示名称
+			let lastMsg = this.chat.messages[size - 1];
+			return this.$msgType.isNormal(lastMsg.type)
 		},
-		computed: {
-			isShowSendName() {
-				if (!this.chat.sendNickName) {
-					return false;
-				}
-				let size = this.chat.messages.length;
-				if (size == 0) {
-					return false;
-				}
-				// 只有群聊的普通消息需要显示名称
-				let lastMsg = this.chat.messages[size - 1];
-				return this.$msgType.isNormal(lastMsg.type)
-			},
-			showTime() {
-				return this.$date.toTimeText(this.chat.lastSendTime, true)
-			},
-			atText() {
-				if (this.chat.atMe) {
-					return "[有人@我]"
-				} else if (this.chat.atAll) {
-					return "[@全体成员]"
-				}
-				return "";
+		showTime() {
+			return this.$date.toTimeText(this.chat.lastSendTime, true)
+		},
+		atText() {
+			if (this.chat.atMe) {
+				return "[有人@我]"
+			} else if (this.chat.atAll) {
+				return "[@全体成员]"
 			}
+			return "";
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	.chat-item {
-		height: 50px;
-		display: flex;
-		margin-bottom: 1px;
+.chat-item {
+	height: 50px;
+	display: flex;
+	position: relative;
+	padding: 5px 10px;
+	align-items: center;
+	background-color: var(--im-background);
+	white-space: nowrap;
+	cursor: pointer;
+
+	&:hover {
+		background-color: var(--im-background-active);
+	}
+
+	&.active {
+		background-color: var(--im-background-active-dark);
+	}
+
+	.chat-left {
 		position: relative;
-		padding: 5px 10px;
+		display: flex;
+		justify-content: center;
 		align-items: center;
-		background-color: white;
-		white-space: nowrap;
-		color: black;
-		cursor: pointer;
-
-		&:hover {
-			background-color: #F8FAFF;
-		}
 
-		&.active {
-			background-color: #F4F9FF;
+		.unread-text {
+			position: absolute;
+			background-color: #f56c6c;
+			right: -4px;
+			top: -8px;
+			color: white;
+			border-radius: 30px;
+			padding: 1px 5px;
+			font-size: 10px;
+			text-align: center;
+			white-space: nowrap;
+			border: 1px solid #f1e5e5;
 		}
+	}
 
-		.chat-left {
-			position: relative;
-			display: flex;
-			width: 45px;
-			height: 45x;
-
-			.unread-text {
-				position: absolute;
-				background-color: #f56c6c;
-				right: -5px;
-				top: -5px;
-				color: white;
-				border-radius: 30px;
-				padding: 1px 5px;
-				font-size: 10px;
-				text-align: center;
-				white-space: nowrap;
-				border: 1px solid #f1e5e5;
-			}
-		}
 
+	.chat-right {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		padding-left: 10px;
+		text-align: left;
+		overflow: hidden;
 
-		.chat-right {
-			flex: 1;
+		.chat-name {
 			display: flex;
-			flex-direction: column;
-			padding-left: 10px;
-			text-align: left;
-			overflow: hidden;
+			line-height: 20px;
+			height: 20px;
 
-			.chat-name {
+			.chat-name-text {
+				flex: 1;
 				display: flex;
-				line-height: 25px;
-				height: 25px;
-
-				.chat-name-text {
-					flex: 1;
-					display: flex;
-					align-items: center;
-					font-size: 15px;
-					font-weight: 600;
-					white-space: nowrap;
-					overflow: hidden;
-					
-					.el-tag {
-						background-color: #2830d3;
-						border-radius: 10px;
-						border: 0;
-						height: 16px;
-						line-height: 16px;
-						font-size: 10px;
-						margin-left: 2px;
-						opacity: 0.8;
-						
-					}
-				}
-
+				align-items: center;
+				font-size: var(--im-font-size);
+				white-space: nowrap;
+				overflow: hidden;
+
+				.el-tag {
+					min-width: 22px;
+					text-align: center;
+					background-color: #2830d3;
+					border-radius: 10px;
+					border: 0;
+					height: 16px;
+					line-height: 16px;
+					font-size: 10px;
+					margin-left: 2px;
+					opacity: 0.8;
 
-				.chat-time-text {
-					font-size: 13px;
-					text-align: right;
-					color: #888888;
-					white-space: nowrap;
-					overflow: hidden;
-					padding-left: 10px;
 				}
 			}
 
-			.chat-content {
-				display: flex;
-				line-height: 22px;
+			.chat-time-text {
+				font-size: var(--im-font-size-smaller);
+				text-align: right;
+				color: var(--im-text-color-light);
+				white-space: nowrap;
+				overflow: hidden;
+				padding-left: 10px;
+			}
+		}
 
-				.chat-at-text {
-					color: #c70b0b;
-					font-size: 12px;
-				}
+		.chat-content {
+			display: flex;
+			line-height: 22px;
 
-				.chat-send-name {
-					font-size: 13px;
-				}
+			.chat-at-text {
+				color: #c70b0b;
+				font-size: var(--im-font-size-smaller);
+			}
 
+			.chat-send-name {
+				font-size: var(--im-font-size-small);
+				color: var(--im-text-color-light);
+			}
 
-				.chat-content-text {
-					flex: 1;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					font-size: 13px;
 
-					img {
-						width: 20px !important;
-						height: 20px !important;
-						vertical-align: bottom;
-					}
+			.chat-content-text {
+				flex: 1;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				font-size: var(--im-font-size-small);
+				color: var(--im-text-color-light);
+
+				img {
+					width: 20px !important;
+					height: 20px !important;
+					vertical-align: bottom;
 				}
-
 			}
+
 		}
 	}
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/im-web/src/components/chat/ChatMessageItem.vue b/im-web/src/components/chat/ChatMessageItem.vue
index e64d645..8ec04e9 100644
--- a/im-web/src/components/chat/ChatMessageItem.vue
+++ b/im-web/src/components/chat/ChatMessageItem.vue
@@ -9,7 +9,7 @@
 		</div>
 		<div class="chat-msg-normal" v-if="isNormal" :class="{ 'chat-msg-mine': mine }">
 			<div class="head-image">
-				<head-image :name="showName" :size="40" :url="headImage" :id="msgInfo.sendId"></head-image>
+				<head-image :name="showName" :size="38" :url="headImage" :id="msgInfo.sendId"></head-image>
 			</div>
 			<div class="chat-msg-content">
 				<div v-show="mode == 1 && msgInfo.groupId && !msgInfo.selfSend" class="chat-msg-top">
@@ -51,21 +51,21 @@
 						<audio controls :src="JSON.parse(msgInfo.content).url"></audio>
 					</div>
 					<div class="chat-action chat-msg-text" v-if="isAction">
-						<span v-if="msgInfo.type==$enums.MESSAGE_TYPE.ACT_RT_VOICE" title="重新呼叫" @click="$emit('call')"
+						<span v-if="msgInfo.type == $enums.MESSAGE_TYPE.ACT_RT_VOICE" title="重新呼叫" @click="$emit('call')"
 							class="iconfont icon-chat-voice"></span>
-						<span v-if="msgInfo.type==$enums.MESSAGE_TYPE.ACT_RT_VIDEO" title="重新呼叫" @click="$emit('call')"
+						<span v-if="msgInfo.type == $enums.MESSAGE_TYPE.ACT_RT_VIDEO" title="重新呼叫" @click="$emit('call')"
 							class="iconfont icon-chat-video"></span>
-						<span>{{msgInfo.content}}</span>
+						<span>{{ msgInfo.content }}</span>
 					</div>
 					<div class="chat-msg-status" v-if="!isAction">
 						<span class="chat-readed" v-show="msgInfo.selfSend && !msgInfo.groupId
-						&& msgInfo.status == $enums.MESSAGE_STATUS.READED">已读</span>
+							&& msgInfo.status == $enums.MESSAGE_STATUS.READED">已读</span>
 						<span class="chat-unread" v-show="msgInfo.selfSend && !msgInfo.groupId
-						&& msgInfo.status != $enums.MESSAGE_STATUS.READED">未读</span>
+							&& msgInfo.status != $enums.MESSAGE_STATUS.READED">未读</span>
 					</div>
 					<div class="chat-receipt" v-show="msgInfo.receipt" @click="onShowReadedBox">
 						<span v-if="msgInfo.receiptOk" class="icon iconfont icon-ok" title="全体已读"></span>
-						<span v-else>{{msgInfo.readedCount}}人已读</span>
+						<span v-else>{{ msgInfo.readedCount }}人已读</span>
 					</div>
 				</div>
 			</div>
@@ -77,403 +77,399 @@
 </template>
 
 <script>
-	import HeadImage from "../common/HeadImage.vue";
-	import RightMenu from '../common/RightMenu.vue';
-	import ChatGroupReaded from './ChatGroupReaded.vue';
-	export default {
-		name: "messageItem",
-		components: {
-			HeadImage,
-			RightMenu,
-			ChatGroupReaded
+import HeadImage from "../common/HeadImage.vue";
+import RightMenu from '../common/RightMenu.vue';
+import ChatGroupReaded from './ChatGroupReaded.vue';
+export default {
+	name: "messageItem",
+	components: {
+		HeadImage,
+		RightMenu,
+		ChatGroupReaded
+	},
+	props: {
+		mode: {
+			type: Number,
+			default: 1
 		},
-		props: {
-			mode: {
-				type: Number,
-				default: 1
-			},
-			mine: {
-				type: Boolean,
-				required: true
-			},
-			headImage: {
-				type: String,
-				required: true
-			},
-			showName: {
-				type: String,
-				required: true
-			},
-			msgInfo: {
-				type: Object,
-				required: true
-			},
-			groupMembers: {
-				type: Array
-			},
-			menu: {
-				type: Boolean,
-				default: true
-			}
+		mine: {
+			type: Boolean,
+			required: true
 		},
-		data() {
-			return {
-				audioPlayState: 'STOP',
-				rightMenu: {
-					show: false,
-					pos: {
-						x: 0,
-						y: 0
-					}
+		headImage: {
+			type: String,
+			required: true
+		},
+		showName: {
+			type: String,
+			required: true
+		},
+		msgInfo: {
+			type: Object,
+			required: true
+		},
+		groupMembers: {
+			type: Array
+		},
+		menu: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			audioPlayState: 'STOP',
+			rightMenu: {
+				show: false,
+				pos: {
+					x: 0,
+					y: 0
 				}
 			}
+		}
+	},
+	methods: {
+		onSendFail() {
+			this.$message.error("该文件已发送失败，目前不支持自动重新发送，建议手动重新发送")
 		},
-		methods: {
-			onSendFail() {
-				this.$message.error("该文件已发送失败，目前不支持自动重新发送，建议手动重新发送")
-			},
-			showFullImageBox() {
-				let imageUrl = JSON.parse(this.msgInfo.content).originUrl;
-				if (imageUrl) {
-					this.$store.commit('showFullImageBox', imageUrl);
-				}
-			},
-			onPlayVoice() {
-				if (!this.audio) {
-					this.audio = new Audio();
-				}
-				this.audio.src = JSON.parse(this.msgInfo.content).url;
-				this.audio.play();
-				this.onPlayVoice = 'RUNNING';
-			},
-			showRightMenu(e) {
-				this.rightMenu.pos = {
-					x: e.x,
-					y: e.y
-				};
-				this.rightMenu.show = "true";
-			},
-			onSelectMenu(item) {
-				this.$emit(item.key.toLowerCase(), this.msgInfo);
-			},
-			onShowReadedBox() {
-				let rect = this.$refs.chatMsgBox.getBoundingClientRect();
-				this.$refs.chatGroupReadedBox.open(rect);
+		showFullImageBox() {
+			let imageUrl = JSON.parse(this.msgInfo.content).originUrl;
+			if (imageUrl) {
+				this.$store.commit('showFullImageBox', imageUrl);
 			}
 		},
-		computed: {
-			loading() {
-				return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "loading";
-			},
-			loadFail() {
-				return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "fail";
-			},
-			data() {
-				return JSON.parse(this.msgInfo.content)
-			},
-			fileSize() {
-				let size = this.data.size;
-				if (size > 1024 * 1024) {
-					return Math.round(size / 1024 / 1024) + "M";
-				}
-				if (size > 1024) {
-					return Math.round(size / 1024) + "KB";
-				}
-				return size + "B";
-			},
-			menuItems() {
-				let items = [];
+		onPlayVoice() {
+			if (!this.audio) {
+				this.audio = new Audio();
+			}
+			this.audio.src = JSON.parse(this.msgInfo.content).url;
+			this.audio.play();
+			this.onPlayVoice = 'RUNNING';
+		},
+		showRightMenu(e) {
+			this.rightMenu.pos = {
+				x: e.x,
+				y: e.y
+			};
+			this.rightMenu.show = "true";
+		},
+		onSelectMenu(item) {
+			this.$emit(item.key.toLowerCase(), this.msgInfo);
+		},
+		onShowReadedBox() {
+			let rect = this.$refs.chatMsgBox.getBoundingClientRect();
+			this.$refs.chatGroupReadedBox.open(rect);
+		}
+	},
+	computed: {
+		loading() {
+			return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "loading";
+		},
+		loadFail() {
+			return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "fail";
+		},
+		data() {
+			return JSON.parse(this.msgInfo.content)
+		},
+		fileSize() {
+			let size = this.data.size;
+			if (size > 1024 * 1024) {
+				return Math.round(size / 1024 / 1024) + "M";
+			}
+			if (size > 1024) {
+				return Math.round(size / 1024) + "KB";
+			}
+			return size + "B";
+		},
+		menuItems() {
+			let items = [];
+			items.push({
+				key: 'DELETE',
+				name: '删除',
+				icon: 'el-icon-delete'
+			});
+			if (this.msgInfo.selfSend && this.msgInfo.id > 0) {
 				items.push({
-					key: 'DELETE',
-					name: '删除',
-					icon: 'el-icon-delete'
+					key: 'RECALL',
+					name: '撤回',
+					icon: 'el-icon-refresh-left'
 				});
-				if (this.msgInfo.selfSend && this.msgInfo.id > 0) {
-					items.push({
-						key: 'RECALL',
-						name: '撤回',
-						icon: 'el-icon-refresh-left'
-					});
-				}
-				return items;
-			},
-			isAction() {
-				return this.$msgType.isAction(this.msgInfo.type);
-			},
-			isNormal() {
-				const type = this.msgInfo.type;
-				return this.$msgType.isNormal(type) || this.$msgType.isAction(type)
 			}
+			return items;
+		},
+		isAction() {
+			return this.$msgType.isAction(this.msgInfo.type);
+		},
+		isNormal() {
+			const type = this.msgInfo.type;
+			return this.$msgType.isNormal(type) || this.$msgType.isAction(type)
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	.chat-msg-item {
+.chat-msg-item {
 
-		.chat-msg-tip {
-			line-height: 50px;
-			font-size: 14px;
+	.chat-msg-tip {
+		line-height: 50px;
+		font-size: var(--im-font-size-small);
+		color: var(--im-text-color-light);
+	}
+
+	.chat-msg-normal {
+		position: relative;
+		font-size: 0;
+		padding-left: 48px;
+		min-height: 50px;
+		margin-top: 10px;
+
+		.head-image {
+			position: absolute;
+			width: 40px;
+			height: 40px;
+			top: 0;
+			left: 0;
 		}
 
-		.chat-msg-normal {
-			position: relative;
-			font-size: 0;
-			padding-left: 60px;
-			min-height: 50px;
-			margin-top: 10px;
+		.chat-msg-content {
+			text-align: left;
 
-			.head-image {
-				position: absolute;
-				width: 40px;
-				height: 40px;
-				top: 0;
-				left: 0;
+			.send-fail {
+				color: #e60c0c;
+				font-size: 30px;
+				cursor: pointer;
+				margin: 0 20px;
 			}
 
-			.chat-msg-content {
-				text-align: left;
+			.chat-msg-top {
+				display: flex;
+				flex-wrap: nowrap;
+				color: var(--im-text-color-light);
+				font-size: var(--im-font-size);
+				line-height: 20px;
 
-				.send-fail {
-					color: #e60c0c;
-					font-size: 30px;
-					cursor: pointer;
-					margin: 0 20px;
+				span {
+					margin-right: 12px;
 				}
+			}
 
-				.chat-msg-top {
-					display: flex;
-					flex-wrap: nowrap;
-					color: #333;
-					font-size: 14px;
-					line-height: 20px;
-
-					span {
-						margin-right: 12px;
+			.chat-msg-bottom {
+				display: inline-block;
+				padding-right: 300px;
+				padding-left: 5px;
+
+				.chat-msg-text {
+					display: block;
+					position: relative;
+					line-height: 26px;
+					//margin-top: 3px;
+					padding: 6px 10px;
+					background-color: var(--im-background);
+					border-radius: 10px;
+					font-size: var(--im-font-size);
+					text-align: left;
+					white-space: pre-wrap;
+					word-break: break-all;
+
+					&:after {
+						content: "";
+						position: absolute;
+						left: -10px;
+						top: 13px;
+						width: 0;
+						height: 0;
+						border-style: solid dashed dashed;
+						border-color: #eee transparent transparent;
+						overflow: hidden;
+						border-width: 10px;
 					}
 				}
 
-				.chat-msg-bottom {
-					display: inline-block;
-					padding-right: 300px;
-
-					.chat-msg-text {
-						display: block;
-						position: relative;
-						line-height: 26px;
-						margin-top: 3px;
-						padding: 7px;
-						background-color: #eee;
-						border-radius: 10px;
-						color: black;
-						display: block;
-						font-size: 14px;
-						text-align: left;
-						white-space: pre-wrap;
-						word-break: break-all;
-
-						&:after {
-							content: "";
-							position: absolute;
-							left: -10px;
-							top: 13px;
-							z-index: -1;
-							width: 0;
-							height: 0;
-							border-style: solid dashed dashed;
-							border-color: #eee transparent transparent;
-							overflow: hidden;
-							border-width: 10px;
-						}
+				.chat-msg-image {
+					display: flex;
+					flex-wrap: nowrap;
+					flex-direction: row;
+					align-items: center;
+
+					.send-image {
+						min-width: 200px;
+						min-height: 150px;
+						max-width: 400px;
+						max-height: 300px;
+						border-radius: 8px;
+						cursor: pointer;
 					}
 
-					.chat-msg-image {
-						display: flex;
-						flex-wrap: nowrap;
-						flex-direction: row;
-						align-items: center;
-
-						.send-image {
-							min-width: 200px;
-							min-height: 150px;
-							max-width: 400px;
-							max-height: 300px;
-							border: #dddddd solid 1px;
-							border: 5px solid #ccc;
-							border-radius: 6px;
-							cursor: pointer;
-						}
+				}
 
-					}
+				.chat-msg-file {
+					display: flex;
+					flex-wrap: nowrap;
+					flex-direction: row;
+					align-items: center;
+					cursor: pointer;
+					margin-bottom: 2px;
 
-					.chat-msg-file {
+					.chat-file-box {
 						display: flex;
 						flex-wrap: nowrap;
-						flex-direction: row;
 						align-items: center;
-						cursor: pointer;
-						padding-bottom: 5px;
-
-						.chat-file-box {
-							display: flex;
-							flex-wrap: nowrap;
-							align-items: center;
-							min-height: 80px;
-							box-shadow: 5px 5px 2px #c0c0c0;
-							border: #dddddd solid 1px;
-							border-radius: 6px;
-							background-color: #eeeeee;
-							padding: 10px 15px;
-
-							.chat-file-info {
-								flex: 1;
-								height: 100%;
-								text-align: left;
+						min-height: 60px;
+						box-shadow: var(--im-box-shadow-light);
+						border-radius: 4px;
+						padding: 10px 15px;
+
+						.chat-file-info {
+							flex: 1;
+							height: 100%;
+							text-align: left;
+							font-size: 14px;
+							margin-right: 10px;
+
+							.chat-file-name {
+								display: inline-block;
+								min-width: 160px;
+								max-width: 220px;
 								font-size: 14px;
-
-								.chat-file-name {
-									display: inline-block;
-									min-width: 150px;
-									max-width: 300px;
-									font-size: 16px;
-									font-weight: 600;
-									margin-bottom: 15px;
-									white-space: pre-wrap;
-									word-break: break-all;
-								}
+								margin-bottom: 4px;
+								white-space: pre-wrap;
+								word-break: break-all;
 							}
 
-							.chat-file-icon {
-								font-size: 50px;
-								color: #d42e07;
+							.chat-file-size {
+								font-size: var(--im-font-size-smaller);
+								color: var(--im-text-color-light);
 							}
 						}
 
-						.send-fail {
-							color: #e60c0c;
-							font-size: 30px;
-							cursor: pointer;
-							margin: 0 20px;
+						.chat-file-icon {
+							font-size: 44px;
+							color: #d42e07;
 						}
-
 					}
 
-					.chat-msg-voice {
-						font-size: 14px;
+					.send-fail {
+						color: #e60c0c;
+						font-size: 30px;
 						cursor: pointer;
+						margin: 0 20px;
+					}
 
-						audio {
-							height: 45px;
-							padding: 5px 0;
-						}
+				}
+
+				.chat-msg-voice {
+					font-size: 14px;
+					cursor: pointer;
+
+					audio {
+						height: 45px;
+						padding: 5px 0;
 					}
+				}
 
-					.chat-action {
-						display: flex;
-						align-items: center;
+				.chat-action {
+					display: flex;
+					align-items: center;
 
-						.iconfont {
-							cursor: pointer;
-							font-size: 22px;
-							padding-right: 8px;
-						}
+					.iconfont {
+						cursor: pointer;
+						font-size: 22px;
+						padding-right: 8px;
 					}
+				}
 
-					.chat-msg-status {
-						display: block;
+				.chat-msg-status {
+					display: block;
 
-						.chat-readed {
-							font-size: 12px;
-							color: #888;
-							font-weight: 600;
-						}
+					.chat-readed {
+						font-size: 12px;
+						color: var(--im-text-color-light);
+					}
 
-						.chat-unread {
-							font-size: 12px;
-							color: #f23c0f;
-							font-weight: 600;
-						}
+					.chat-unread {
+						font-size: var(--im-font-size-smaller);
+						color: var(--im-color-danger);
 					}
+				}
 
-					.chat-receipt {
-						font-size: 13px;
-						color: blue;
-						cursor: pointer;
+				.chat-receipt {
+					font-size: var(--im-font-size-smaller);
+					cursor: pointer;
+					color: var(--im-text-color-light);
 
-						.icon-ok {
-							font-size: 20px;
-							color: #329432;
-						}
+					.icon-ok {
+						font-size: 20px;
+						color: var(--im-color-sucess);
 					}
+				}
 
-					.chat-at-user {
-						padding: 2px 5px;
-						border-radius: 3px;
-						font-weight: 600;
-						cursor: pointer;
-					}
+				.chat-at-user {
+					padding: 2px 5px;
+					border-radius: 3px;
+					cursor: pointer;
 				}
 			}
+		}
 
 
-			&.chat-msg-mine {
-				text-align: right;
-				padding-left: 0;
-				padding-right: 60px;
+		&.chat-msg-mine {
+			text-align: right;
+			padding-left: 0;
+			padding-right: 48px;
 
-				.head-image {
-					left: auto;
-					right: 0;
-				}
+			.head-image {
+				left: auto;
+				right: 0;
+			}
 
-				.chat-msg-content {
-					text-align: right;
+			.chat-msg-content {
+				text-align: right;
 
-					.chat-msg-top {
-						flex-direction: row-reverse;
+				.chat-msg-top {
+					flex-direction: row-reverse;
 
-						span {
-							margin-left: 12px;
-							margin-right: 0;
-						}
+					span {
+						margin-left: 12px;
+						margin-right: 0;
 					}
+				}
 
-					.chat-msg-bottom {
-						padding-left: 180px;
-						padding-right: 0;
+				.chat-msg-bottom {
+					padding-left: 180px;
+					padding-right: 5px;
 
-						.chat-msg-text {
-							margin-left: 10px;
-							background-color: rgb(88, 127, 240);
-							color: #fff;
-							vertical-align: top;
+					.chat-msg-text {
+						margin-left: 10px;
+						background-color: var(--im-color-primary-light-2);
+						color: #fff;
 
-							&:after {
-								left: auto;
-								right: -10px;
-								border-top-color: rgb(88, 127, 240);
-							}
+						&:after {
+							left: auto;
+							right: -10px;
+							border-top-color: var(--im-color-primary-light-2);
 						}
+					}
 
-						.chat-msg-image {
-							flex-direction: row-reverse;
-						}
+					.chat-msg-image {
+						flex-direction: row-reverse;
+					}
 
-						.chat-msg-file {
-							flex-direction: row-reverse;
-						}
+					.chat-msg-file {
+						flex-direction: row-reverse;
+					}
 
-						.chat-action {
-							flex-direction: row-reverse;
+					.chat-action {
+						flex-direction: row-reverse;
 
-							.iconfont {
-								transform: rotateY(180deg);
-							}
+						.iconfont {
+							transform: rotateY(180deg);
 						}
 					}
 				}
 			}
-
 		}
+
 	}
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/im-web/src/components/chat/ChatRecord.vue b/im-web/src/components/chat/ChatRecord.vue
index 89fa3bb..c55719d 100644
--- a/im-web/src/components/chat/ChatRecord.vue
+++ b/im-web/src/components/chat/ChatRecord.vue
@@ -1,139 +1,138 @@
 <template>
 	<el-dialog class="chat-record" title="语音录制" :visible.sync="visible" width="600px" :before-close="onClose">
-		<div v-show="mode=='RECORD'">
-			<div class="tip">{{stateTip}}</div>
-			<div>时长: {{state=='STOP'?0:parseInt(rc.duration)}}s</div>
+		<div v-show="mode == 'RECORD'">
+			<div class="tip">{{ stateTip }}</div>
+			<div>时长: {{ state == 'STOP' ? 0 : parseInt(rc.duration) }}s</div>
 		</div>
-		<audio v-show="mode=='PLAY'" :src="url" controls ref="audio" @ended="onStopAudio()"></audio>
+		<audio v-show="mode == 'PLAY'" :src="url" controls ref="audio" @ended="onStopAudio()"></audio>
 		<el-divider content-position="center"></el-divider>
 		<el-row class="btn-group">
-			<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 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="onPlayAudio()">播放录音
+			<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="onStopAudio()">停止播放
+			<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="onRestartRecord()">重新录音</el-button>
-			<el-button round type="primary" v-show="state=='COMPLETE'" @click="onSendRecord()">立即发送</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>
-
 </template>
 
 <script>
-	import Recorder from 'js-audio-recorder';
+import Recorder from 'js-audio-recorder';
 
-	export default {
-		name: 'chatRecord',
-		props: {
-			visible: {
-				type: Boolean
-			}
-		},
-		data() {
-			return {
-				rc: new Recorder(),
-				audio: new Audio(),
-				state: 'STOP', // STOP、RUNNING、PAUSE、COMPLETE
-				stateTip: "未开始",
-				mode: 'RECORD', // RECORD 、PLAY
-				duration: 0,
-				url: ""
-			}
+export default {
+	name: 'chatRecord',
+	props: {
+		visible: {
+			type: Boolean
+		}
+	},
+	data() {
+		return {
+			rc: new Recorder(),
+			audio: new Audio(),
+			state: 'STOP', // STOP、RUNNING、PAUSE、COMPLETE
+			stateTip: "未开始",
+			mode: 'RECORD', // RECORD 、PLAY
+			duration: 0,
+			url: ""
+		}
+	},
+	methods: {
+		onClose() {
+			// 关闭前清除数据
+			this.rc.destroy();
+			this.rc = new Recorder();
+			this.audio.pause();
+			this.mode = 'RECORD';
+			this.state = 'STOP';
+			this.stateTip = '未开始';
+			this.$emit("close");
 		},
-		methods: {
-			onClose() {
-				// 关闭前清除数据
-				this.rc.destroy();
-				this.rc = new Recorder();
-				this.audio.pause();
-				this.mode = 'RECORD';
-				this.state = 'STOP';
-				this.stateTip = '未开始';
-				this.$emit("close");
-			},
-			onStartRecord() {
-				this.rc.start().then((stream) => {
-					this.state = 'RUNNING';
-					this.stateTip = "正在录音...";
-				}).catch(error => {
-					this.$message.error(error);
-				});
-
-
-			},
-			onPauseRecord() {
-				this.rc.pause();
-				this.state = 'PAUSE';
-				this.stateTip = "已暂停录音";
-			},
-			onResumeRecord() {
-				this.rc.resume();
+		onStartRecord() {
+			this.rc.start().then((stream) => {
 				this.state = 'RUNNING';
 				this.stateTip = "正在录音...";
-			},
-			onCompleteRecord() {
-				this.rc.pause();
-				this.state = 'COMPLETE';
-				this.stateTip = "已结束录音";
-			},
-			onPlayAudio() {
-				let wav = this.rc.getWAVBlob();
-				let url = URL.createObjectURL(wav);
-				this.$refs.audio.src = url;
-				this.$refs.audio.play();
-				this.mode = 'PLAY';
-			},
-			onStopAudio() {
-				this.$refs.audio.pause();
-				this.mode = 'RECORD';
-			},
-			onRestartRecord() {
-				this.rc.destroy();
-				this.rc = new Recorder()
-				this.rc.start();
-				this.state = 'RUNNING';
-				this.mode = 'RECORD';
-				this.stateTip = "正在录音...";
-			},
-			onSendRecord() {
-				let wav = this.rc.getWAVBlob();
-				let name = new Date().getDate() + '.wav';
-				var formData = new window.FormData()
-				formData.append('file', wav, name);
-				this.$http({
-					url: '/file/upload',
-					data: formData,
-					method: 'post',
-					headers: {
-						'Content-Type': 'multipart/form-data'
-					}
-				}).then((url) => {
-					let data = {
-						duration: parseInt(this.rc.duration),
-						url: url
-					}
-					this.$emit("send", data);
-					this.onClose();
-				})
-			}
-		}
+			}).catch(error => {
+				this.$message.error(error);
+			});
 
+
+		},
+		onPauseRecord() {
+			this.rc.pause();
+			this.state = 'PAUSE';
+			this.stateTip = "已暂停录音";
+		},
+		onResumeRecord() {
+			this.rc.resume();
+			this.state = 'RUNNING';
+			this.stateTip = "正在录音...";
+		},
+		onCompleteRecord() {
+			this.rc.pause();
+			this.state = 'COMPLETE';
+			this.stateTip = "已结束录音";
+		},
+		onPlayAudio() {
+			let wav = this.rc.getWAVBlob();
+			let url = URL.createObjectURL(wav);
+			this.$refs.audio.src = url;
+			this.$refs.audio.play();
+			this.mode = 'PLAY';
+		},
+		onStopAudio() {
+			this.$refs.audio.pause();
+			this.mode = 'RECORD';
+		},
+		onRestartRecord() {
+			this.rc.destroy();
+			this.rc = new Recorder()
+			this.rc.start();
+			this.state = 'RUNNING';
+			this.mode = 'RECORD';
+			this.stateTip = "正在录音...";
+		},
+		onSendRecord() {
+			let wav = this.rc.getWAVBlob();
+			let name = new Date().getDate() + '.wav';
+			var formData = new window.FormData()
+			formData.append('file', wav, name);
+			this.$http({
+				url: '/file/upload',
+				data: formData,
+				method: 'post',
+				headers: {
+					'Content-Type': 'multipart/form-data'
+				}
+			}).then((url) => {
+				let data = {
+					duration: parseInt(this.rc.duration),
+					url: url
+				}
+				this.$emit("send", data);
+				this.onClose();
+			})
+		}
 	}
+
+}
 </script>
 
 <style lang="scss">
-	.chat-record {
+.chat-record {
 
-		.tip {
-			font-size: 18px;
-		}
+	.tip {
+		font-size: 18px;
+	}
 
-		.btn-group {
-			margin-bottom: 20px;
-		}
+	.btn-group {
+		margin-bottom: 20px;
 	}
+}
 </style>
diff --git a/im-web/src/components/common/Emotion.vue b/im-web/src/components/common/Emotion.vue
index 8414e24..39b0efe 100644
--- a/im-web/src/components/common/Emotion.vue
+++ b/im-web/src/components/common/Emotion.vue
@@ -1,7 +1,7 @@
 <template>
-	<div  v-show="show" @click="close()">
-		<div class="emotion-box" :style="{'left':x+'px','top':y+'px'}">
-			<el-scrollbar style="height:250px">
+	<div v-show="show" @click="close()">
+		<div class="emotion-box" :style="{ 'left': x + 'px', 'top': y + 'px' }">
+			<el-scrollbar style="height: 220px">
 				<div class="emotion-item-list">
 					<div class="emotion-item" v-for="(emoText, i) in $emo.emoTextList" :key="i"
 						@click="onClickEmo(emoText)" v-html="$emo.textToImg(emoText)">
@@ -13,76 +13,73 @@
 </template>
 
 <script>
-	export default {
-		name: "emotion",
-		data() {
-			return {
-				show: false,
-				pos: {
-					x: 0,
-					y: 0
-				}
+export default {
+	name: "emotion",
+	data() {
+		return {
+			show: false,
+			pos: {
+				x: 0,
+				y: 0
 			}
+		}
+	},
+	methods: {
+		onClickEmo(emoText) {
+			let emotion = `#${emoText};`
+			this.$emit('emotion', emotion)
 		},
-		methods: {
-			onClickEmo(emoText) {
-				let emotion = `#${emoText};`
-				this.$emit('emotion', emotion)
-			},
-			open(pos) {
-				this.pos = pos;
-				this.show = true;
-			},
-			close() {
-				this.show = false;
-			}
+		open(pos) {
+			this.pos = pos;
+			this.show = true;
 		},
-		computed: {
-			x() {
-				return this.pos.x - 200;
-			},
-			y() {
-				return this.pos.y - 280;
-			}
+		close() {
+			this.show = false;
+		}
+	},
+	computed: {
+		x() {
+			return this.pos.x - 22;
+		},
+		y() {
+			return this.pos.y - 234;
 		}
 	}
+}
 </script>
 <style scoped lang="scss">
-	
+.emotion-box {
+	position: fixed;
+	width: 372px;
+	box-sizing: border-box;
+	padding: 5px;
+	//border-radius: 5px;
+	background-color: #fff;
+	box-shadow: var(--im-box-shadow);
 
-	.emotion-box {
-		position: fixed;
-		width: 500px;
-		box-sizing: border-box;
-		padding: 5px;
-		border: 1px solid #53a0e79c;
-		border-radius: 5px;
-		background-color: #f5f5f5;
-		box-shadow: 0px 0px 10px #ccc;
+	.emotion-item-list {
+		display: flex;
+		flex-wrap: wrap;
 
-		.emotion-item-list {
-			display: flex;
-			flex-wrap: wrap;
+		.emotion-item {
+			text-align: center;
+			cursor: pointer;
+			padding: 2px;
 
-			.emotion-item {
-				text-align: center;
-				cursor: pointer;
-				padding: 5px;
-
-			}
-		}
-
-		&:after {
-			content: "";
-			position: absolute;
-			left: 185px;
-			bottom: -30px;
-			width: 0;
-			height: 0;
-			border-style: solid dashed dashed;
-			border-color: #f5f5f5 transparent transparent;
-			overflow: hidden;
-			border-width: 15px;
 		}
 	}
-</style>
\ No newline at end of file
+
+	//&:after {
+	//	content: "";
+	//	position: absolute;
+	//	left: 185px;
+	//	bottom: -30px;
+	//	width: 0;
+	//	height: 0;
+	//	border-style: solid dashed dashed;
+	//	border-color: #f5f5f5 transparent transparent;
+	//	overflow: hidden;
+	//	border-width: 15px;
+	//}
+}
+</style>
diff --git a/im-web/src/components/common/FileUpload.vue b/im-web/src/components/common/FileUpload.vue
index 5284adf..1193ac2 100644
--- a/im-web/src/components/common/FileUpload.vue
+++ b/im-web/src/components/common/FileUpload.vue
@@ -1,103 +1,102 @@
 <template>
-	<el-upload :action="'#'" :http-request="onFileUpload" :accept="fileTypes==null?'':fileTypes.join(',')" :show-file-list="false"
-		:disabled="disabled" :before-upload="beforeUpload" :multiple="true">
+	<el-upload :action="'#'" :http-request="onFileUpload" :accept="fileTypes == null ? '' : fileTypes.join(',')"
+		:show-file-list="false" :disabled="disabled" :before-upload="beforeUpload" :multiple="true">
 		<slot></slot>
 	</el-upload>
 </template>
 
 <script>
-	export default {
-		name: "fileUpload",
-		data() {
-			return {
-				loading: null,
-				uploadHeaders: {
-					"accessToken": sessionStorage.getItem('accessToken')
-				}
+export default {
+	name: "fileUpload",
+	data() {
+		return {
+			loading: null,
+			uploadHeaders: {
+				"accessToken": sessionStorage.getItem('accessToken')
 			}
+		}
+	},
+	props: {
+		action: {
+			type: String,
+			required: false
 		},
-		props: {
-			action: {
-				type: String,
-				required: false
-			},
-			fileTypes: {
-				type: Array,
-				default: null
-			},
-			maxSize: {
-				type: Number,
-				default: null
-			},
-			showLoading: {
-				type: Boolean,
-				default: false
-			},
-			disabled: {
-				type: Boolean,
-				default: false
-			}
+		fileTypes: {
+			type: Array,
+			default: null
 		},
-		methods: {
-			onFileUpload(file) {
-				// 展示加载条
-				if (this.showLoading) {
-					this.loading = this.$loading({
-						lock: true,
-						text: '正在上传...',
-						spinner: 'el-icon-loading',
-						background: 'rgba(0, 0, 0, 0.7)'
-					});
-				}
-				let formData = new FormData()
-				formData.append('file', file.file)
-				this.$http({
-					url: this.action,
-					data: formData,
-					method: 'post',
-					headers: {
-						'Content-Type': 'multipart/form-data'
-					}
-				}).then((data) => {
-					this.$emit("success", data, file.file);
-				}).catch((e) => {
-					this.$emit("fail", e, file.file);
-				}).finally(() => {
-					this.loading && this.loading.close();
-				})
-			},
-			beforeUpload(file) {
-				// 校验文件类型
-				if (this.fileTypes && this.fileTypes.length > 0) {
-					let fileType = file.type;
-					let t = this.fileTypes.find((t) => t.toLowerCase() === fileType);
-					if (t === undefined) {
-						this.$message.error(`文件格式错误，请上传以下格式的文件：${this.fileTypes.join("、")}`);
-						return false;
-					}
+		maxSize: {
+			type: Number,
+			default: null
+		},
+		showLoading: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	methods: {
+		onFileUpload(file) {
+			// 展示加载条
+			if (this.showLoading) {
+				this.loading = this.$loading({
+					lock: true,
+					text: '正在上传...',
+					spinner: 'el-icon-loading',
+					background: 'rgba(0, 0, 0, 0.7)'
+				});
+			}
+			let formData = new FormData()
+			formData.append('file', file.file)
+			this.$http({
+				url: this.action,
+				data: formData,
+				method: 'post',
+				headers: {
+					'Content-Type': 'multipart/form-data'
 				}
-				// 校验大小
-				if (this.maxSize && file.size > this.maxSize) {
-					this.$message.error(`文件大小不能超过 ${this.fileSizeStr}!`);
+			}).then((data) => {
+				this.$emit("success", data, file.file);
+			}).catch((e) => {
+				this.$emit("fail", e, file.file);
+			}).finally(() => {
+				this.loading && this.loading.close();
+			})
+		},
+		beforeUpload(file) {
+			// 校验文件类型
+			if (this.fileTypes && this.fileTypes.length > 0) {
+				let fileType = file.type;
+				let t = this.fileTypes.find((t) => t.toLowerCase() === fileType);
+				if (t === undefined) {
+					this.$message.error(`文件格式错误，请上传以下格式的文件：${this.fileTypes.join("、")}`);
 					return false;
 				}
-				this.$emit("before", file);
-				return true;
 			}
-		},
-		computed: {
-			fileSizeStr() {
-				if (this.maxSize > 1024 * 1024) {
-					return Math.round(this.maxSize / 1024 / 1024) + "M";
-				}
-				if (this.maxSize > 1024) {
-					return Math.round(this.maxSize / 1024) + "KB";
-				}
-				return this.maxSize + "B";
+			// 校验大小
+			if (this.maxSize && file.size > this.maxSize) {
+				this.$message.error(`文件大小不能超过 ${this.fileSizeStr}!`);
+				return false;
+			}
+			this.$emit("before", file);
+			return true;
+		}
+	},
+	computed: {
+		fileSizeStr() {
+			if (this.maxSize > 1024 * 1024) {
+				return Math.round(this.maxSize / 1024 / 1024) + "M";
+			}
+			if (this.maxSize > 1024) {
+				return Math.round(this.maxSize / 1024) + "KB";
 			}
+			return this.maxSize + "B";
 		}
 	}
+}
 </script>
 
-<style>
-</style>
\ No newline at end of file
+<style></style>
\ No newline at end of file
diff --git a/im-web/src/components/common/FullImage.vue b/im-web/src/components/common/FullImage.vue
index 444833e..f766309 100644
--- a/im-web/src/components/common/FullImage.vue
+++ b/im-web/src/components/common/FullImage.vue
@@ -2,77 +2,77 @@
 	<div class="full-image" v-show="visible" :before-close="onClose" :modal="true">
 		<div class="mask"></div>
 		<div class="image-box">
-			<img  :src="url"/>
+			<img :src="url" />
 		</div>
-		<div class="close" @click="onClose">x</div>
+		<div class="close" @click="onClose"><i class="el-icon-close"></i></div>
 	</div>
 </template>
 
 <script>
-	export default {
-		name: "fullImage",
-		data() {
-			return {
-				fit: 'contain'
-			}
-		},
-		methods: {
-			onClose() {
-				this.$emit("close");
-			}
+export default {
+	name: "fullImage",
+	data() {
+		return {
+			fit: 'contain'
+		}
+	},
+	methods: {
+		onClose() {
+			this.$emit("close");
+		}
+	},
+	props: {
+		visible: {
+			type: Boolean
 		},
-		props: {
-			visible: {
-				type: Boolean
-			},
-			url: {
-				type: String
-			}
+		url: {
+			type: String
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	.full-image{
+.full-image {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	right: 0;
+
+	.mask {
 		position: fixed;
 		width: 100%;
 		height: 100%;
-	
-		
-		.mask{
-			position: fixed;
-			width: 100%;
-			height: 100%;
-			background: black;
-			opacity: 0.9;
-		}
-		
-		.image-box {
-			position: relative;
-			width: 100%;
-			height: 100%;
-			
-			img{
-				position: absolute;
-				    left: 50%;
-				    top: 50%;
-				    transform: translate(-50%, -50%);
-				    max-height: 100%;
-				    max-width: 100%;
-			}
-		}
-		
-		.close{
-			position: fixed;
-			top: 10px;
-			right: 10px;
-			color: white;
-			font-size: 25px;
-			cursor: pointer;
-			
-		
+		background: black;
+		opacity: 0.5;
+
+	}
+
+	.image-box {
+		position: relative;
+		width: 100%;
+		height: 100%;
+
+		img {
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			max-height: 100%;
+			max-width: 100%;
 		}
 	}
-	
-	
+
+	.close {
+		position: fixed;
+		top: 10px;
+		right: 10px;
+		color: white;
+		font-size: 25px;
+		cursor: pointer;
+	}
+}
 </style>
\ No newline at end of file
diff --git a/im-web/src/components/common/HeadImage.vue b/im-web/src/components/common/HeadImage.vue
index 521e5ac..f9803f9 100644
--- a/im-web/src/components/common/HeadImage.vue
+++ b/im-web/src/components/common/HeadImage.vue
@@ -1,121 +1,129 @@
 <template>
-	<div class="head-image" @click="showUserInfo($event)">
-		<img class="avatar-image" v-show="url" :src="url" 
-			:style="avatarImageStyle" loading="lazy" />
+	<div class="head-image" @click="showUserInfo($event)" :style="{ cursor: isShowUserInfo ? 'pointer' : null }">
+		<img class="avatar-image" v-show="url" :src="url" :style="avatarImageStyle" loading="lazy" />
 		<div class="avatar-text" v-show="!url" :style="avatarTextStyle">
-			{{name.substring(0,2).toUpperCase()}}</div>
+			{{ name?.substring(0, 2).toUpperCase() }}
+		</div>
 		<div v-show="online" class="online" title="用户当前在线"></div>
 		<slot></slot>
 	</div>
 </template>
 
 <script>
-
-	export default {
-		name: "headImage",
-		data() {
-			return {
-				colors: ["#5daa31", "#c7515a", "#e03697",  "#85029b",
-					"#c9b455",  "#326eb6"]
-
-			}
+export default {
+	name: "headImage",
+	data() {
+		return {
+			colors: ["#5daa31", "#c7515a", "#e03697", "#85029b",
+				"#c9b455", "#326eb6"
+			]
+		}
+	},
+	props: {
+		id: {
+			type: Number
 		},
-		props: {
-			id:{
-				type: Number
-			},
-			size: {
-				type: Number,
-				default: 50
-			},
-			width: {
-				type: Number
-			},
-			height: {
-				type: Number
-			},
-			radius:{
-				type: String,
-				default: "50%"
-			},
-			url: {
-				type: String
-			},
-			name:{
-				type: String,
-				default: "?"
-			},
-			online:{
-				type: Boolean,
-				default:false
-			}
+		size: {
+			type: Number,
+			default: 42
 		},
-		methods:{
-			showUserInfo(e){
-				if(this.id && this.id>0){
-					this.$http({
-						url: `/user/find/${this.id}`,
-						method: 'get'
-					}).then((user) => {
-						this.$store.commit("setUserInfoBoxPos",e);
-						this.$store.commit("showUserInfoBox",user);
-					})
-				}
-			}
+		width: {
+			type: Number
 		},
-		computed:{
-			avatarImageStyle() {
-				let w = this.width ? this.width : this.size;
-				let h = this.height ? this.height : this.size;
-				return `width:${w}px; height:${h}px;
-					border-radius: ${this.radius};`
-			},
-			avatarTextStyle() {
-				let w = this.width ? this.width : this.size;
-				let h = this.height ? this.height : this.size;
-				return `width: ${w}px;height:${h}px;
-					background-color:${this.textColor};
-					font-size:${w*0.35}px;
+		height: {
+			type: Number
+		},
+		radius: {
+			type: String,
+			default: "50%"
+		},
+		url: {
+			type: String
+		},
+		name: {
+			type: String,
+			default: null
+		},
+		online: {
+			type: Boolean,
+			default: false
+		},
+		isShowUserInfo: {
+			type: Boolean,
+			default: true
+		}
+	},
+	methods: {
+		showUserInfo(e) {
+			if (!this.isShowUserInfo) return;
+			if (this.id && this.id > 0) {
+				this.$http({
+					url: `/user/find/${this.id}`,
+					method: 'get'
+				}).then((user) => {
+					this.$store.commit("setUserInfoBoxPos", e);
+					this.$store.commit("showUserInfoBox", user);
+				})
+			}
+		}
+	},
+	computed: {
+		avatarImageStyle() {
+			let w = this.width ? this.width : this.size;
+			let h = this.height ? this.height : this.size;
+			return `width:${w}px; height:${h}px;
 					border-radius: ${this.radius};`
-			},
-			textColor(){
-				let hash = 0;
-				for (var i = 0; i< this.name.length; i++) {
-					hash += this.name.charCodeAt(i);
-				}
-				return this.colors[hash%this.colors.length];
+		},
+		avatarTextStyle() {
+			let w = this.width ? this.width : this.size;
+			let h = this.height ? this.height : this.size;
+			return `
+				  width: ${w}px;height:${h}px;
+					background-color: ${this.name ? this.textColor : '#fff'};
+					font-size:${w * 0.35}px;
+					border-radius: ${this.radius};
+					`
+		},
+		textColor() {
+			let hash = 0;
+			for (var i = 0; i < this.name.length; i++) {
+				hash += this.name.charCodeAt(i);
 			}
-		}	
+			return this.colors[hash % this.colors.length];
+		}
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	.head-image {
+.head-image {
+	position: relative;
+	//cursor: pointer;
+
+	.avatar-image {
 		position: relative;
-		cursor: pointer;
-		.avatar-image {
-			position: relative;
-			overflow: hidden;
-			display: block;
-		}
-		
-		.avatar-text{
-			color: white;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			border: 1px solid #ccc;
-		} 
-		
-		.online{
-			position: absolute;
-			right: -5px;
-			bottom: 0;
-			width: 12px;
-			height: 12px;
-			background: limegreen;
-			border-radius: 50%;
-			border: 3px solid white;
-		}
+		overflow: hidden;
+		display: block;
+	}
+
+	.avatar-text {
+		color: white;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		//border: 1px solid #ccc;
+		//box-shadow: var(--im-box-shadow);
+	}
+
+	.online {
+		position: absolute;
+		right: -5px;
+		bottom: 0;
+		width: 12px;
+		height: 12px;
+		background: limegreen;
+		border-radius: 50%;
+		border: 2px solid white;
 	}
-</style>
+}
+</style>
\ No newline at end of file
diff --git a/im-web/src/components/common/Icp.vue b/im-web/src/components/common/Icp.vue
index 88d118e..5a8cdd5 100644
--- a/im-web/src/components/common/Icp.vue
+++ b/im-web/src/components/common/Icp.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="icp">
 		<img class="icp-icon" src="../../assets/image/icp_logo.png">
-		<a target="_blank"  href="https://beian.miit.gov.cn/">粤ICP备xxxx号-1</a>
+		<a target="_blank" href="https://beian.miit.gov.cn/">粤ICP备xxxx号-1</a>
 	</div>
 </template>
 
@@ -9,18 +9,18 @@
 </script>
 
 <style lang="scss">
-	.icp {
-		position: fixed;
-		text-align: center;
-		bottom: 20px;
-		margin: 0 auto;
-		width: 100%;
-		color: #5c6b77;
-		
-		.icp-icon {
-			width: 20px;
-			height: 20px;
-			vertical-align: bottom;
-		}
+.icp {
+	position: fixed;
+	text-align: center;
+	bottom: 20px;
+	margin: 0 auto;
+	width: 100%;
+	color: #5c6b77;
+
+	.icp-icon {
+		width: 20px;
+		height: 20px;
+		vertical-align: bottom;
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-web/src/components/common/RightMenu.vue b/im-web/src/components/common/RightMenu.vue
index bc5f6eb..c0b1610 100644
--- a/im-web/src/components/common/RightMenu.vue
+++ b/im-web/src/components/common/RightMenu.vue
@@ -1,12 +1,11 @@
 <template>
 	<div class="right-menu-mask" @click="close()" @contextmenu.prevent="close()">
-		<div class="right-menu" :style="{'left':pos.x+'px','top':pos.y+'px'}">
+		<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.native.stop="onSelectMenu(item)">
-					<span :class="item.icon"></span>
-					<span>{{item.name}}</span>
-					
+					<!--					<span :class="item.icon"></span>-->
+					<span>{{ item.name }}</span>
 				</el-menu-item>
 			</el-menu>
 		</div>
@@ -14,61 +13,64 @@
 </template>
 
 <script>
-	export default {
-		name: "rightMenu",
-		data() {
-			return {}
+export default {
+	name: "rightMenu",
+	data() {
+		return {}
+	},
+	props: {
+		pos: {
+			type: Object
 		},
-		props: {
-			pos: {
-				type: Object
-			},
-			items: {
-				type: Array
-			}
+		items: {
+			type: Array
+		}
+	},
+	methods: {
+		close() {
+			this.$emit("close");
 		},
-		methods: {
-			close() {
-				this.$emit("close");
-			},
-			onSelectMenu(item) {
-				this.$emit("select", item);
-				this.close();
-			}
+		onSelectMenu(item) {
+			this.$emit("select", item);
+			this.close();
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	.right-menu-mask {
-		position: fixed;
-		left: 0;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 9999;
-	}
+.right-menu-mask {
+	position: fixed;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 9999;
+}
+
+.right-menu {
+	position: fixed;
+	border-radius: 8px;
+	overflow: hidden;
+	box-shadow: var(--im-box-shadow-light);
 
-	.right-menu {
-		position: fixed;
-		box-shadow: 0px 0px 10px #ccc;
+	.el-menu {
+		border-radius: 4px;
+		overflow: hidden;
 
-		.el-menu {
-			border: 1px solid #b4b4b4;
-			border-radius: 7px;
-			overflow: hidden;
-		
-			.el-menu-item {
-				height: 40px;
-				line-height: 40px;
-				border-bottom: 1px solid #d0d0d0;
+		.el-menu-item {
+			height: 36px;
+			line-height: 36px;
+			min-width: 100px;
+			text-align: left;
+			padding: 0 0 0 20px;
 
-				span {
-					font-weight: 600;
-				}
+			&:hover {
+				background-color: var(--im-background-active);
 			}
 		}
 	}
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/im-web/src/components/common/UserInfo.vue b/im-web/src/components/common/UserInfo.vue
index e0b4628..16d5eb5 100644
--- a/im-web/src/components/common/UserInfo.vue
+++ b/im-web/src/components/common/UserInfo.vue
@@ -1,11 +1,10 @@
 <template>
 	<div class="user-info-mask" @click="$emit('close')">
-		<div class="user-info" :style="{left: pos.x+'px',top: pos.y+'px'}" @click.stop>
+		<div class="user-info" :style="{ left: pos.x + 'px', top: pos.y + 'px' }" @click.stop>
 			<div class="user-info-box">
 				<div class="avatar">
-					<head-image :name="user.nickName" :url="user.headImageThumb" :size="70" 
-						:online="user.online" radius="10%"
-						@click.native="showFullImage()"> </head-image>
+					<head-image :name="user.nickName" :url="user.headImageThumb" :size="70" :online="user.online"
+						radius="10%" @click.native="showFullImage()"> </head-image>
 				</div>
 				<div>
 					<el-descriptions :column="1" :title="user.userName" class="user-info-items">
@@ -15,7 +14,6 @@
 						</el-descriptions-item>
 					</el-descriptions>
 				</div>
-
 			</div>
 			<el-divider content-position="center"></el-divider>
 			<div class="user-btn-group">
@@ -27,117 +25,123 @@
 </template>
 
 <script>
-	import HeadImage from './HeadImage.vue'
+import HeadImage from './HeadImage.vue'
 
-	export default {
-		name: "userInfo",
-		components: {
-			HeadImage
-		},
-		data() {
-			return {
+export default {
+	name: "userInfo",
+	components: {
+		HeadImage
+	},
+	data() {
+		return {
 
-			}
+		}
+	},
+	props: {
+		user: {
+			type: Object
 		},
-		props: {
-			user: {
-				type: Object
-			},
-			pos: {
-				type: Object
+		pos: {
+			type: Object
+		}
+	},
+	methods: {
+		onSendMessage() {
+			let user = this.user;
+			let chat = {
+				type: 'PRIVATE',
+				targetId: user.id,
+				showName: user.nickName,
+				headImage: user.headImage,
+			};
+			this.$store.commit("openChat", chat);
+			this.$store.commit("activeChat", 0);
+			if (this.$route.path != "/home/chat") {
+				this.$router.push("/home/chat");
 			}
+			this.$emit("close");
 		},
-		methods: {
-			onSendMessage() {
-				let user = this.user;
-				let chat = {
-					type: 'PRIVATE',
-					targetId: user.id,
-					showName: user.nickName,
-					headImage: user.headImage,
-				};
-				this.$store.commit("openChat", chat);
-				this.$store.commit("activeChat", 0);
-				if (this.$route.path != "/home/chat") {
-					this.$router.push("/home/chat");
+		onAddFriend() {
+			this.$http({
+				url: "/friend/add",
+				method: "post",
+				params: {
+					friendId: this.user.id
 				}
-				this.$emit("close");
-			},
-			onAddFriend() {
-				this.$http({
-					url: "/friend/add",
-					method: "post",
-					params: {
-						friendId: this.user.id
-					}
-				}).then((data) => {
-					this.$message.success("添加成功，对方已成为您的好友");
-					let friend = {
-						id: this.user.id,
-						nickName: this.user.nickName,
-						headImage: this.user.headImageThumb,
-						online: this.user.online
-					}
-					this.$store.commit("addFriend", friend);
-				})
-			},
-			showFullImage() {
-				if (this.user.headImage) {
-					this.$store.commit("showFullImageBox", this.user.headImage);
+			}).then((data) => {
+				this.$message.success("添加成功，对方已成为您的好友");
+				let friend = {
+					id: this.user.id,
+					nickName: this.user.nickName,
+					headImage: this.user.headImageThumb,
+					online: this.user.online
 				}
-			}
+				this.$store.commit("addFriend", friend);
+			})
 		},
-		computed: {
-			isFriend() {
-				let friends = this.$store.state.friendStore.friends;
-				let friend = friends.find((f) => f.id == this.user.id);
-				return friend != undefined;
+		showFullImage() {
+			if (this.user.headImage) {
+				this.$store.commit("showFullImageBox", this.user.headImage);
 			}
 		}
+	},
+	computed: {
+		isFriend() {
+			let friends = this.$store.state.friendStore.friends;
+			let friend = friends.find((f) => f.id == this.user.id);
+			return friend != undefined;
+		}
 	}
+}
 </script>
 
 <style lang="scss">
-	.user-info-mask {
-		background-color: rgba($color: #000000, $alpha: 0);
-		position: absolute;
-		width: 100%;
-		height: 100%;
-	}
+.user-info-mask {
+	background-color: rgba($color: #000000, $alpha: 0);
+	position: fixed;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+}
 
-	.user-info {
-		position: absolute;
-		width: 300px;
-		background-color: white;
-		border: #dddddd solid 1px;
-		border-radius: 5px;
-		padding: 15px;
+.user-info {
+	position: absolute;
+	width: 300px;
+	background-color: white;
+	box-shadow: var(--im-box-shadow);
+	border-radius: 4px;
+	padding: 15px;
 
-		.user-info-box {
-			display: flex;
-			align-items: center;
-			
-			.user-info-items {
-				margin-left: 10px;
-				white-space: nowrap;
-				overflow: hidden;
+	.user-info-box {
+		display: flex;
+		align-items: center;
 
-				.el-descriptions__header {
-					margin-bottom: 5px;
-				}
+		.user-info-items {
+			margin-left: 10px;
+			white-space: nowrap;
+			overflow: hidden;
 
-				.el-descriptions__title {
-					font-size: 18px;
-				}
+			.el-descriptions__header {
+				margin-bottom: 5px;
+			}
 
-				.el-descriptions-item__cell {
-					padding-bottom: 1px;
-				}
+			.el-descriptions__title {
+				font-size: 18px;
 			}
-		}
 
-		.user-btn-group {
-			text-align: center;
+			.el-descriptions-item__cell {
+				padding-bottom: 1px;
+			}
 		}
 	}
-</style>
\ No newline at end of file
+
+	.el-divider--horizontal {
+		margin: 18px 0;
+	}
+
+	.user-btn-group {
+		text-align: center;
+	}
+}
+</style>
diff --git a/im-web/src/components/friend/AddFriend.vue b/im-web/src/components/friend/AddFriend.vue
index 77e1e2f..34f5c35 100644
--- a/im-web/src/components/friend/AddFriend.vue
+++ b/im-web/src/components/friend/AddFriend.vue
@@ -1,29 +1,29 @@
 <template>
-	<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()">
-			 <i class="el-icon-search el-input__icon" slot="suffix"
-				@click="onSearch()"> </i>
+	<el-dialog title="添加好友" :visible.sync="dialogVisible" width="400px" :before-close="onClose"
+		custom-class="add-friend-dialog">
+		<el-input placeholder="输入用户名或昵称按下enter搜索，最多展示20条" class="input-with-select" v-model="searchText" size="small"
+			@keyup.enter.native="onSearch()">
+			<i class="el-icon-search el-input__icon" slot="suffix" @click="onSearch()"> </i>
 		</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">
 				<div class="item">
 					<div class="avatar">
-						<head-image :name="user.nickName" 
-						:url="user.headImage"
-						:online="user.online"
-						></head-image>
+						<head-image :name="user.nickName" :url="user.headImage" :online="user.online"></head-image>
 					</div>
 					<div class="add-friend-text">
 						<div class="text-user-name">
-							<div>{{user.userName}}</div>
-							<div :class="user.online ? 'online-status  online':'online-status'">{{ user.online?"[在线]":"[离线]"}}</div>
+							<div>{{ user.userName }}</div>
+							<div :class="user.online ? 'online-status  online' : 'online-status'">{{
+								user.online ? "[在线]" :"[离线]"}}</div>
 						</div>
 						<div class="text-nick-name">
-							<div>昵称:{{user.nickName}}</div>
+							<div>昵称:{{ user.nickName }}</div>
 						</div>
 					</div>
-					 <el-button type="success" size="mini" v-show="!isFriend(user.id)"  @click="onAddFriend(user)">添加</el-button>
-					 <el-button type="info" size="mini" v-show="isFriend(user.id)" plain disabled>已添加</el-button>
+					<el-button type="success" size="mini" v-show="!isFriend(user.id)"
+						@click="onAddFriend(user)">添加</el-button>
+					<el-button type="info" size="mini" v-show="isFriend(user.id)" plain disabled>已添加</el-button>
 				</div>
 			</div>
 		</el-scrollbar>
@@ -31,69 +31,71 @@
 </template>
 
 <script>
-	import HeadImage from '../common/HeadImage.vue'
-	
-	
-	export default {
-		name: "addFriend",
-		components:{HeadImage},
-		data() {
-			return {
-				users: [],
-				searchText: ""
-			}
+import HeadImage from '../common/HeadImage.vue'
+
+
+export default {
+	name: "addFriend",
+	components: { HeadImage },
+	data() {
+		return {
+			users: [],
+			searchText: ""
+		}
+	},
+	props: {
+		dialogVisible: {
+			type: Boolean
+		}
+	},
+	methods: {
+		onClose() {
+			this.$emit("close");
 		},
-		props: {
-			dialogVisible: {
-				type: Boolean
+		onSearch() {
+			if (!this.searchText) {
+				this.users = [];
+				return;
 			}
+			this.$http({
+				url: "/user/findByName",
+				method: "get",
+				params: {
+					name: this.searchText
+				}
+			}).then((data) => {
+				this.users = data;
+			})
 		},
-		methods: {
-			onClose() {
-				this.$emit("close");
-			},
-			onSearch() {
-				this.$http({
-					url: "/user/findByName",
-					method: "get",
-					params: {
-						name: this.searchText
-					}
-				}).then((data) => {
-					this.users = data;
-				})
-			},
-			onAddFriend(user){
-				this.$http({
-					url: "/friend/add",
-					method: "post",
-					params: {
-						friendId: user.id
-					}
-				}).then((data) => {
-					this.$message.success("添加成功，对方已成为您的好友");
-					let friend = {
-						id:user.id,
-						nickName: user.nickName,
-						headImage: user.headImage,
-						online: user.online
-					}
-					this.$store.commit("addFriend",friend);
-				})
-			},
-			isFriend(userId){
-				let friends = this.$store.state.friendStore.friends;
-				let friend = friends.find((f)=> f.id==userId);			
-				return friend != undefined;
-			}
+		onAddFriend(user) {
+			this.$http({
+				url: "/friend/add",
+				method: "post",
+				params: {
+					friendId: user.id
+				}
+			}).then((data) => {
+				this.$message.success("添加成功，对方已成为您的好友");
+				let friend = {
+					id: user.id,
+					nickName: user.nickName,
+					headImage: user.headImage,
+					online: user.online
+				}
+				this.$store.commit("addFriend", friend);
+			})
+		},
+		isFriend(userId) {
+			let friends = this.$store.state.friendStore.friends;
+			let friend = friends.find((f) => f.id == userId);
+			return friend != undefined;
 		}
 	}
+}
 </script>
 
-<style  lang="scss">
-	.el-dialog {
-		min-width: 400px;
-	}
+<style lang="scss">
+.add-friend-dialog {
 	.item {
 		height: 65px;
 		display: flex;
@@ -101,7 +103,7 @@
 		padding-left: 15px;
 		align-items: center;
 		padding-right: 25px;
-		
+
 		.add-friend-text {
 			margin-left: 15px;
 			flex: 3;
@@ -109,30 +111,32 @@
 			flex-direction: column;
 			flex-shrink: 0;
 			overflow: hidden;
-		
-			.text-user-name{
+
+			.text-user-name {
 				display: flex;
 				flex-direction: row;
 				font-weight: 600;
 				font-size: 16px;
 				line-height: 25px;
-		
-				.online-status{
+
+				.online-status {
 					font-size: 12px;
 					font-weight: 600;
-					&.online{
+
+					&.online {
 						color: #5fb878;
 					}
 				}
 			}
-			
-			.text-nick-name{
+
+			.text-nick-name {
 				display: flex;
 				flex-direction: row;
 				font-size: 12px;
 				line-height: 20px;
 			}
-			
+
 		}
 	}
+}
 </style>
diff --git a/im-web/src/components/friend/FriendItem.vue b/im-web/src/components/friend/FriendItem.vue
index aa65316..f77ef3f 100644
--- a/im-web/src/components/friend/FriendItem.vue
+++ b/im-web/src/components/friend/FriendItem.vue
@@ -1,138 +1,145 @@
 <template>
 	<div class="friend-item" :class="active ? 'active' : ''" @contextmenu.prevent="showRightMenu($event)">
 		<div class="friend-avatar">
-			<head-image :size="45" :name="friend.nickName" :url="friend.headImage" :online="friend.online">
+			<head-image :size="42" :name="friend.nickName" :url="friend.headImage" :online="friend.online">
 			</head-image>
 		</div>
 		<div class="friend-info">
-			<div class="friend-name">{{ friend.nickName}}</div>
+			<div class="friend-name">{{ friend.nickName }}</div>
 			<div class="friend-online">
-				<el-image v-show="friend.onlineWeb" class="online" :src="require('@/assets/image/online_web.png')"
-					title="电脑设备在线" />
-				<el-image v-show="friend.onlineApp" class="online" :src="require('@/assets/image/online_app.png')"
-					title="移动设备在线" />
+				<i class="el-icon-monitor online" v-show="friend.onlineWeb" title="电脑设备在线">
+					<span class="online-icon"></span>
+				</i>
+				<i class="el-icon-mobile-phone online" v-show="friend.onlineApp" title="移动设备在线">
+					<span class="online-icon"></span>
+				</i>
 			</div>
 		</div>
 		<right-menu v-show="menu && rightMenu.show" :pos="rightMenu.pos" :items="rightMenu.items"
-			@close="rightMenu.show=false" @select="onSelectMenu"></right-menu>
+			@close="rightMenu.show = false" @select="onSelectMenu"></right-menu>
 		<slot></slot>
 	</div>
 </template>
 
 <script>
-	import HeadImage from '../common/HeadImage.vue';
-	import RightMenu from "../common/RightMenu.vue";
+import HeadImage from '../common/HeadImage.vue';
+import RightMenu from "../common/RightMenu.vue";
 
-	export default {
-		name: "frinedItem",
-		components: {
-			HeadImage,
-			RightMenu
-		},
-		data() {
-			return {
-				rightMenu: {
-					show: false,
-					pos: {
-						x: 0,
-						y: 0
-					},
-					items: [{
-						key: 'CHAT',
-						name: '发送消息',
-						icon: 'el-icon-chat-dot-round'
-					}, {
-						key: 'DELETE',
-						name: '删除好友',
-						icon: 'el-icon-delete'
-					}]
-				}
+export default {
+	name: "frinedItem",
+	components: {
+		HeadImage,
+		RightMenu
+	},
+	data() {
+		return {
+			rightMenu: {
+				show: false,
+				pos: {
+					x: 0,
+					y: 0
+				},
+				items: [{
+					key: 'CHAT',
+					name: '发送消息',
+					icon: 'el-icon-chat-dot-round'
+				}, {
+					key: 'DELETE',
+					name: '删除好友',
+					icon: 'el-icon-delete'
+				}]
 			}
+		}
+	},
+	methods: {
+		showRightMenu(e) {
+			this.rightMenu.pos = {
+				x: e.x,
+				y: e.y
+			};
+			this.rightMenu.show = "true";
 		},
-		methods: {
-			showRightMenu(e) {
-				this.rightMenu.pos = {
-					x: e.x,
-					y: e.y
-				};
-				this.rightMenu.show = "true";
-			},
-			onSelectMenu(item) {
-				this.$emit(item.key.toLowerCase(), this.msgInfo);
-			} 
+		onSelectMenu(item) {
+			this.$emit(item.key.toLowerCase(), this.msgInfo);
+		}
+	},
+	computed: {
+		friend() {
+			return this.$store.state.friendStore.friends[this.index];
+		}
+	},
+	props: {
+		active: {
+			type: Boolean
 		},
-		computed:{
-			friend(){
-				return this.$store.state.friendStore.friends[this.index];
-			}
+		index: {
+			type: Number
 		},
-		props: {
-			active: {
-				type: Boolean
-			},
-			index: {
-				type: Number
-			},
-			menu: {
-				type: Boolean,
-				default: true
-			}
+		menu: {
+			type: Boolean,
+			default: true
 		}
-	
 	}
+
+}
 </script>
 
 <style scope lang="scss">
-	.friend-item {
-		height: 50px;
+.friend-item {
+	height: 50px;
+	display: flex;
+	position: relative;
+	padding: 5px 10px;
+	align-items: center;
+	white-space: nowrap;
+	cursor: pointer;
+
+	&:hover {
+		background-color: var(--im-background-active);
+	}
+
+	&.active {
+		background-color: var(--im-background-active-dark);
+	}
+
+	.friend-avatar {
 		display: flex;
-		margin-bottom: 1px;
-		position: relative;
-		padding: 5px 10px;
+		justify-content: center;
 		align-items: center;
-		background-color: #fafafa;
-		white-space: nowrap;
-		cursor: pointer;
+	}
 
-		&:hover {
-			background-color: #F8FAFF;
-		}
-			
-		&.active {
-			background-color: #F4F9FF;
-		}
-			
-		.friend-avatar {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			width: 45px;
-			height: 45px;
-		}
+	.friend-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		padding-left: 10px;
+		text-align: left;
 
-		.friend-info {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			padding-left: 10px;
-			text-align: left;
+		.friend-name {
+			font-size: var(--im-font-size);
+			white-space: nowrap;
+			overflow: hidden;
+		}
 
-			.friend-name {
-				font-size: 15px;
-				font-weight: 600;
-				line-height: 30px;
-				white-space: nowrap;
-				overflow: hidden;
+		.friend-online {
+			.online {
+				font-weight: bold;
+				padding-right: 2px;
+				font-size: 16px;
+				position: relative;
 			}
 
-			.friend-online {
-				.online {
-					padding-right: 2px;
-					width: 15px;
-					height: 15px;
-				
-				}
+			.online-icon {
+				position: absolute;
+				right: 0;
+				bottom: 0;
+				width: 6px;
+				height: 6px;
+				background: limegreen;
+				border-radius: 50%;
+				border: 1px solid white;
 			}
 		}
 	}
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/im-web/src/components/group/AddGroupMember.vue b/im-web/src/components/group/AddGroupMember.vue
index ada2f7b..068fbb0 100644
--- a/im-web/src/components/group/AddGroupMember.vue
+++ b/im-web/src/components/group/AddGroupMember.vue
@@ -1,166 +1,178 @@
 <template>
-	<el-dialog title="邀请好友" :visible.sync="visible" width="50%" :before-close="onClose">
-		<div class="agm-container">
-			<div class="agm-l-box">
-				<el-input placeholder="搜索好友" v-model="searchText">
-					<i class="el-icon-search el-input__icon" slot="suffix"> </i>
-				</el-input>
-				<el-scrollbar style="height:400px;">
-					<div v-for="(friend,index) in friends" :key="friend.id">
-						<friend-item v-show="friend.nickName.includes(searchText)" :showDelete="false"
-							@click.native="onSwitchCheck(friend)" :menu="false" :friend="friend" :index="index"
-							:active="false">
-							<el-checkbox :disabled="friend.disabled" @click.native.stop="" class="agm-friend-checkbox"
-								v-model="friend.isCheck" size="medium"></el-checkbox>
-						</friend-item>
-					</div>
-				</el-scrollbar>
-			</div>
-			<div class="agm-arrow el-icon-d-arrow-right"></div>
-			<div class="agm-r-box">
-				<div class="agm-select-tip"> 已勾选{{checkCount}}位好友</div>
-				<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="onRemoveFriend(friend,index)" :menu="false">
-						</friend-item>
-					</div>
-				</el-scrollbar>
-			</div>
-		</div>
-		<span slot="footer" class="dialog-footer">
-			<el-button @click="onClose()">取 消</el-button>
-			<el-button type="primary" @click="onOk()">确 定</el-button>
-		</span>
-	</el-dialog>
+  <el-dialog title="邀请好友" :visible.sync="visible" width="620px" :before-close="onClose">
+    <div class="agm-container">
+      <div class="agm-l-box">
+        <div class="search">
+          <el-input placeholder="搜索好友" v-model="searchText" size="small">
+            <i class="el-icon-search el-input__icon" slot="suffix"> </i>
+          </el-input>
+        </div>
+        <el-scrollbar style="height:400px;">
+          <div v-for="(friend, index) in friends" :key="friend.id">
+            <friend-item v-show="friend.nickName.includes(searchText)" :showDelete="false"
+              @click.native="onSwitchCheck(friend)" :menu="false" :friend="friend" :index="index" :active="false">
+              <el-checkbox :disabled="friend.disabled" @click.native.stop="" class="agm-friend-checkbox"
+                v-model="friend.isCheck" size="medium"></el-checkbox>
+            </friend-item>
+          </div>
+        </el-scrollbar>
+      </div>
+      <div class="agm-arrow el-icon-d-arrow-right"></div>
+      <div class="agm-r-box">
+        <div class="agm-select-tip"> 已勾选{{ checkCount }}位好友</div>
+        <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="onRemoveFriend(friend, index)" :menu="false">
+            </friend-item>
+          </div>
+        </el-scrollbar>
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="onClose()">取 消</el-button>
+      <el-button type="primary" @click="onOk()">确 定</el-button>
+    </span>
+  </el-dialog>
 </template>
 
 <script>
-	import FriendItem from '../friend/FriendItem.vue';
+import FriendItem from '../friend/FriendItem.vue';
 
-	export default {
-		name: "addGroupMember",
-		components: {
-			FriendItem
-		},
-		data() {
-			return {
-				searchText: "",
-				friends: []
-			}
-		},
-		methods: {
-			onClose() {
-				this.$emit("close");
-			},
-			onOk() {
+export default {
+  name: "addGroupMember",
+  components: {
+    FriendItem
+  },
+  data() {
+    return {
+      searchText: "",
+      friends: []
+    }
+  },
+  methods: {
+    onClose() {
+      this.$emit("close");
+    },
+    onOk() {
 
-				let inviteVO = {
-					groupId: this.groupId,
-					friendIds: []
-				}
-				this.friends.forEach((f) => {
-					if (f.isCheck && !f.disabled) {
-						inviteVO.friendIds.push(f.id);
-					}
-				})
-				if (inviteVO.friendIds.length > 0) {
-					this.$http({
-						url: "/group/invite",
-						method: 'post',
-						data: inviteVO
-					}).then(() => {
-						this.$message.success("邀请成功");
-						this.$emit("reload");
-						this.$emit("close");
-					})
-				}
-			},
-			onRemoveFriend(friend, index) {
-				friend.isCheck = false;
-			},
-			onSwitchCheck(friend) {
-				if (!friend.disabled) {
-					friend.isCheck = !friend.isCheck
-				}
-			}
-		},
-		props: {
-			visible: {
-				type: Boolean
-			},
-			groupId: {
-				type: Number
-			},
-			members: {
-				type: Array
-			}
-		},
-		computed: {
-			checkCount() {
-				return this.friends.filter((f) => f.isCheck && !f.disabled).length;
-			}
-		},
-		watch: {
-			visible: function(newData, oldData) {
-				if (newData) {
-					this.friends = [];
-					this.$store.state.friendStore.friends.forEach((f) => {
-						let friend = JSON.parse(JSON.stringify(f))
-						let m = this.members.filter((m) => !m.quit)
-							.find((m) => m.userId == f.id);
-						if (m) {
-							// 好友已经在群里
-							friend.disabled = true;
-							friend.isCheck = true
-						} else {
-							friend.disabled = false;
-							friend.isCheck = false;
-						}
-						this.friends.push(friend);
-					})
-				}
-			}
-		}
+      let inviteVO = {
+        groupId: this.groupId,
+        friendIds: []
+      }
+      this.friends.forEach((f) => {
+        if (f.isCheck && !f.disabled) {
+          inviteVO.friendIds.push(f.id);
+        }
+      })
+      if (inviteVO.friendIds.length > 0) {
+        this.$http({
+          url: "/group/invite",
+          method: 'post',
+          data: inviteVO
+        }).then(() => {
+          this.$message.success("邀请成功");
+          this.$emit("reload");
+          this.$emit("close");
+        })
+      }
+    },
+    onRemoveFriend(friend, index) {
+      friend.isCheck = false;
+    },
+    onSwitchCheck(friend) {
+      if (!friend.disabled) {
+        friend.isCheck = !friend.isCheck
+      }
+    }
+  },
+  props: {
+    visible: {
+      type: Boolean
+    },
+    groupId: {
+      type: Number
+    },
+    members: {
+      type: Array
+    }
+  },
+  computed: {
+    checkCount() {
+      return this.friends.filter((f) => f.isCheck && !f.disabled).length;
+    }
+  },
+  watch: {
+    visible: function (newData, oldData) {
+      if (newData) {
+        this.friends = [];
+        this.$store.state.friendStore.friends.forEach((f) => {
+          let friend = JSON.parse(JSON.stringify(f))
+          let m = this.members.filter((m) => !m.quit)
+            .find((m) => m.userId == f.id);
+          if (m) {
+            // 好友已经在群里
+            friend.disabled = true;
+            friend.isCheck = true
+          } else {
+            friend.disabled = false;
+            friend.isCheck = false;
+          }
+          this.friends.push(friend);
+        })
+      }
+    }
+  }
 
-	}
+}
 </script>
 
 <style lang="scss">
-	.agm-container {
-		display: flex;
-		.agm-l-box {
-			flex: 1;
-			border: #587FF0 solid 1px;
-			border-radius: 5px;
-			overflow: hidden;
-			
-		
-			.agm-friend-checkbox {
-				margin-right: 20px;
-			}
-		}
+.agm-container {
+  display: flex;
 
-		.agm-arrow {
-			display: flex;
-			align-items: center;
-			font-size: 20px;
-			padding: 10px;
-			font-weight: 600;
-			color: #687Ff0;
-		}
+  .agm-l-box {
+    flex: 1;
+    overflow: hidden;
+    border: var(--im-border);
 
-		.agm-r-box {
-			flex: 1;
-			border: #587FF0 solid 1px;
-			border-radius: 5px;
+    .search {
+      height: 40px;
+      display: flex;
+      align-items: center;
 
-			.agm-select-tip {
-				text-align: left;
-				height: 40px;
-				line-height: 40px;
-				text-indent: 5px;
-			}
-		}
-	}
-</style>
\ No newline at end of file
+      .el-input__inner {
+        border: unset;
+        border-bottom: var(--im-border);
+      }
+
+    }
+
+    .agm-friend-checkbox {
+      margin-right: 20px;
+    }
+  }
+
+  .agm-arrow {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    padding: 10px;
+    font-weight: 600;
+    color: var(--im-color-primary);
+  }
+
+  .agm-r-box {
+    flex: 1;
+    border: var(--im-border);
+
+    .agm-select-tip {
+      text-align: left;
+      height: 40px;
+      line-height: 40px;
+      text-indent: 6px;
+      color: var(--im-text-color-light)
+    }
+  }
+}
+</style>
diff --git a/im-web/src/components/group/GroupItem.vue b/im-web/src/components/group/GroupItem.vue
index fd2b811..b98d80e 100644
--- a/im-web/src/components/group/GroupItem.vue
+++ b/im-web/src/components/group/GroupItem.vue
@@ -1,71 +1,62 @@
 <template>
 	<div class="group-item" :class="active ? 'active' : ''">
 		<div class="group-avatar">
-			<head-image :size="45" :name="group.showGroupName" :url="group.headImage"> </head-image>
+			<head-image :size="42" :name="group.showGroupName" :url="group.headImage"> </head-image>
 		</div>
 		<div class="group-name">
-			<div>{{group.showGroupName}}</div>
+			<div>{{ group.showGroupName }}</div>
 		</div>
 	</div>
 </template>
 
 <script>
-	import HeadImage from '../common/HeadImage.vue';
+import HeadImage from '../common/HeadImage.vue';
 
-	export default {
-		name: "groupItem",
-		components: {
-			HeadImage
+export default {
+	name: "groupItem",
+	components: {
+		HeadImage
+	},
+	data() {
+		return {}
+	},
+	props: {
+		group: {
+			type: Object
 		},
-		data() {
-			return {}
-		},
-		props: {
-			group: {
-				type: Object
-			},
-			active: {
-				type: Boolean
-			}
+		active: {
+			type: Boolean
 		}
-
 	}
+}
 </script>
 
-<style lang="scss" >
-	.group-item {
-		height: 50px;
-		display: flex;
-		margin-bottom: 1px;
-		position: relative;
-		padding: 5px 10px;
-		align-items: center;
-		background-color: white;
+<style lang="scss">
+.group-item {
+	height: 50px;
+	display: flex;
+	position: relative;
+	padding: 5px 10px;
+	align-items: center;
+	white-space: nowrap;
+	cursor: pointer;
+
+	&:hover {
+		background-color: var(--im-background-active);
+	}
+
+	&.active {
+		background-color: var(--im-background-active-dark);
+	}
+
+	.group-name {
+		padding-left: 10px;
+		height: 100%;
+		text-align: left;
+		line-height: 50px;
 		white-space: nowrap;
-		cursor: pointer;
-		
-		&:hover {
-			background-color: #F8FAFF;
-		}
-	
-		&.active {
-			background-color: #F4F9FF;
-		}
-	
-		.group-avatar {
-			width: 45px;
-			height: 45px;
-		}
-	
-		.group-name {
-			padding-left: 10px;
-			height: 100%;
-			text-align: left;
-			line-height: 50px;
-			white-space: nowrap;
-			overflow: hidden;
-			font-size: 15px;
-			font-weight: 600;
-		}
+		overflow: hidden;
+		font-size: var(--im-font-size);
 	}
+}
 </style>
diff --git a/im-web/src/components/group/GroupMember.vue b/im-web/src/components/group/GroupMember.vue
index 21dfac8..5ce63f8 100644
--- a/im-web/src/components/group/GroupMember.vue
+++ b/im-web/src/components/group/GroupMember.vue
@@ -1,71 +1,70 @@
 <template>
 	<div class="group-member">
-		<head-image :id="member.userId" :name="member.showNickName" 
-			:url="member.headImage" :size="50" 
-			:online="member.online" >
-			<div  v-if="showDel" @click.stop="onDelete()" class="btn-kick el-icon-error"></div>
+		<head-image :id="member.userId" :name="member.showNickName" :url="member.headImage" :size="38"
+			:online="member.online">
+			<div v-if="showDel" @click.stop="onDelete()" class="btn-kick el-icon-error"></div>
 		</head-image>
-		<div class="member-name">{{member.showNickName}}</div>
-
+		<div class="member-name">{{ member.showNickName }}</div>
 	</div>
 </template>
 
 <script>
-	import HeadImage from "../common/HeadImage.vue";
-	export default{
-		name: "groupMember",
-		components:{HeadImage},
-		data(){
-			return {};
-		},
-		props:{
-			member:{
-				type: Object,
-				required: true
-			},
-			showDel:{
-				type: Boolean,
-				default: false
-			}
+import HeadImage from "../common/HeadImage.vue";
+export default {
+	name: "groupMember",
+	components: { HeadImage },
+	data() {
+		return {};
+	},
+	props: {
+		member: {
+			type: Object,
+			required: true
 		},
-		methods:{
-			onDelete(){
-				this.$emit("del",this.member);
-			}
+		showDel: {
+			type: Boolean,
+			default: false
+		}
+	},
+	methods: {
+		onDelete() {
+			this.$emit("del", this.member);
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	.group-member{
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		width: 50px;
-		.member-name {
-			font-size: 12px;
-			text-align: center;
-			width: 100%;
-			height: 30px;
-			line-height: 30px;
-			white-space: nowrap;
-			text-overflow:ellipsis; 
-			overflow:hidden
-		}
-		
-		.btn-kick {
-			display: none;
-			position: absolute;
-			right: -8px;
-			top: -8px;
-			color: darkred;
-			font-size: 20px;
-			cursor: pointer;
-		}
-		
-		&:hover .btn-kick{
-			display: block;
-			color: #ce1818;
-		}
+.group-member {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 50px;
+
+	.member-name {
+		font-size: 12px;
+		text-align: center;
+		width: 100%;
+		height: 30px;
+		line-height: 30px;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden
+	}
+
+	.btn-kick {
+		display: none;
+		position: absolute;
+		right: -8px;
+		top: -8px;
+		color: darkred;
+		font-size: 20px;
+		cursor: pointer;
+	}
+
+	&:hover .btn-kick {
+		display: block;
+		color: #ce1818;
 	}
+}
 </style>
diff --git a/im-web/src/components/group/GroupMemberItem.vue b/im-web/src/components/group/GroupMemberItem.vue
index 20e13bd..0137b9c 100644
--- a/im-web/src/components/group/GroupMemberItem.vue
+++ b/im-web/src/components/group/GroupMemberItem.vue
@@ -1,13 +1,13 @@
 <template>
-    <div class="group-member-item" :style="{'height':height+'px'}">
+    <div class="group-member-item" :style="{ 'height': height + 'px' }">
         <div class="member-avatar">
-            <head-image :size="headImageSize" :name="member.showNickName" 
-				:url="member.headImage" :online="member.online"> </head-image>
+            <head-image :size="headImageSize" :name="member.showNickName" :url="member.headImage"
+                :online="member.online"> </head-image>
         </div>
-        <div class="member-name" :style="{'line-height':height+'px'}">
+        <div class="member-name" :style="{ 'line-height': height + 'px' }">
             <div>{{ member.showNickName }}</div>
         </div>
-		<slot></slot>
+        <slot></slot>
     </div>
 </template>
 
@@ -24,13 +24,13 @@ export default {
             type: Object,
             required: true
         },
-        height:{
+        height: {
             type: Number,
             default: 50
         }
     },
-    computed:{
-        headImageSize(){
+    computed: {
+        headImageSize() {
             return Math.ceil(this.height * 0.75)
         }
     }
@@ -40,16 +40,14 @@ export default {
 <style lang="scss">
 .group-member-item {
     display: flex;
-    margin-bottom: 1px;
     position: relative;
     padding: 0 15px;
     align-items: center;
-    background-color: #fafafa;
     white-space: nowrap;
     box-sizing: border-box;
 
     &:hover {
-        background-color: #eeeeee;
+        background-color: var(--im-background-active);
     }
 
     &.active {
@@ -57,14 +55,13 @@ export default {
     }
 
     .member-name {
-		flex:1;
+        flex: 1;
         padding-left: 10px;
         height: 100%;
         text-align: left;
         white-space: nowrap;
         overflow: hidden;
-        font-size: 14px;
-        font-weight: 600;
+        font-size: var(--im-font-size);
     }
 }
 </style>
diff --git a/im-web/src/components/group/GroupMemberSelector.vue b/im-web/src/components/group/GroupMemberSelector.vue
index 133b774..a31571a 100644
--- a/im-web/src/components/group/GroupMemberSelector.vue
+++ b/im-web/src/components/group/GroupMemberSelector.vue
@@ -1,5 +1,5 @@
 <template>
-	<el-dialog title="选择成员" :visible.sync="isShow" width="50%">
+	<el-dialog title="选择成员" :visible.sync="isShow" width="700px">
 		<div class="group-member-selector">
 			<div class="left-box">
 				<el-input placeholder="搜索" v-model="searchText">
@@ -7,8 +7,8 @@
 				</el-input>
 				<el-scrollbar style="height:400px;">
 					<div v-for="m in members" :key="m.userId">
-						<group-member-item v-show="!m.quit&&m.showNickName.includes(searchText)"
-							:member="m" @click.native="onClickMember(m)">
+						<group-member-item v-show="!m.quit && m.showNickName.includes(searchText)" :member="m"
+							@click.native="onClickMember(m)">
 							<el-checkbox :disabled="m.locked" v-model="m.checked" @change="onChange(m)"
 								@click.native.stop=""></el-checkbox>
 						</group-member-item>
@@ -17,7 +17,7 @@
 			</div>
 			<div class="arrow el-icon-d-arrow-right"></div>
 			<div class="right-box">
-				<div class="select-tip"> 已勾选{{checkedMembers.length}}位成员</div>
+				<div class="select-tip"> 已勾选{{ checkedMembers.length }}位成员</div>
 				<div class="checked-member-list">
 					<div v-for="m in members" :key="m.userId">
 						<group-member class="member-item" v-if="m.checked" :member="m"></group-member>
@@ -33,129 +33,132 @@
 </template>
 
 <script>
-	import GroupMemberItem from './GroupMemberItem.vue';
-	import GroupMember from './GroupMember.vue';
+import GroupMemberItem from './GroupMemberItem.vue';
+import GroupMember from './GroupMember.vue';
 
-	export default {
-		name: "addGroupMember",
-		components: {
-			GroupMemberItem,
-			GroupMember
-		},
-		data() {
-			return {
-				isShow: false,
-				searchText: "",
-				maxSize: -1,
-				members: []
-			}
-		},
-		props: {
-			groupId: {
-				type: Number
-			}	
+export default {
+	name: "addGroupMember",
+	components: {
+		GroupMemberItem,
+		GroupMember
+	},
+	data() {
+		return {
+			isShow: false,
+			searchText: "",
+			maxSize: -1,
+			members: []
+		}
+	},
+	props: {
+		groupId: {
+			type: Number
+		}
+	},
+	methods: {
+		open(maxSize, checkedIds, lockedIds) {
+			this.maxSize = maxSize;
+			this.isShow = true;
+			this.loadGroupMembers(checkedIds, lockedIds);
 		},
-		methods: {
-			open(maxSize, checkedIds, lockedIds) {
-				this.maxSize = maxSize;
-				this.isShow = true;
-				this.loadGroupMembers(checkedIds, lockedIds);
-			},
-			loadGroupMembers(checkedIds, lockedIds) {
-				this.$http({
-					url: `/group/members/${this.groupId}`,
-					method: 'get'
-				}).then((members) => {
-					members.forEach((m) => {
-						// 默认选择和锁定的用户
-						m.checked = checkedIds.indexOf(m.userId) >= 0;
-						m.locked = lockedIds.indexOf(m.userId) >= 0;
-					});
-					this.members = members;
+		loadGroupMembers(checkedIds, lockedIds) {
+			this.$http({
+				url: `/group/members/${this.groupId}`,
+				method: 'get'
+			}).then((members) => {
+				members.forEach((m) => {
+					// 默认选择和锁定的用户
+					m.checked = checkedIds.indexOf(m.userId) >= 0;
+					m.locked = lockedIds.indexOf(m.userId) >= 0;
 				});
-			},
-			onClickMember(m) {
-				if (!m.locked) {
-					m.checked = !m.checked;
-				}
-				if (this.checkedMembers.length > this.maxSize) {
-					this.$message.error(`最多选择${this.maxSize}位成员`)
-					m.checked = false;
-				}
-			},
-			onChange(m) {
-				if (this.checkedMembers.length > this.maxSize) {
-					this.$message.error(`最多选择${this.maxSize}位成员`)
-					m.checked = false;
-				}
-			},
-			ok() {
-				this.$emit("complete", this.checkedMembers);
-				this.isShow = false;
-			},
-			close() {
-				this.isShow = false;
+				this.members = members;
+			});
+		},
+		onClickMember(m) {
+			if (!m.locked) {
+				m.checked = !m.checked;
+			}
+			if (this.checkedMembers.length > this.maxSize) {
+				this.$message.error(`最多选择${this.maxSize}位成员`)
+				m.checked = false;
 			}
 		},
-		computed: {
-			checkedMembers() {
-				let ids = [];
-				this.members.forEach((m) => {
-					if (m.checked) {
-						ids.push(m);
-					}
-				})
-				return ids;
+		onChange(m) {
+			if (this.checkedMembers.length > this.maxSize) {
+				this.$message.error(`最多选择${this.maxSize}位成员`)
+				m.checked = false;
 			}
+		},
+		ok() {
+			this.$emit("complete", this.checkedMembers);
+			this.isShow = false;
+		},
+		close() {
+			this.isShow = false;
+		}
+	},
+	computed: {
+		checkedMembers() {
+			let ids = [];
+			this.members.forEach((m) => {
+				if (m.checked) {
+					ids.push(m);
+				}
+			})
+			return ids;
 		}
-
 	}
+
+}
 </script>
 
 <style lang="scss">
-	.group-member-selector {
-		display: flex;
-
-		.left-box {
-			width: 48%;
-			border: #587FF0 solid 1px;
-			border-radius: 5px;
-			overflow: hidden;
-		}
+.group-member-selector {
+	display: flex;
 
+	.left-box {
+		width: 48%;
+		overflow: hidden;
+		border: var(--im-border);
 
-		.arrow {
-			display: flex;
-			align-items: center;
-			font-size: 20px;
-			padding: 10px;
-			font-weight: 600;
-			color: #687Ff0;
+		.el-input__inner {
+			border: none;
+			border-bottom: var(--im-border);
 		}
+	}
 
-		.right-box {
 
-			width: 48%;
-			border: #587FF0 solid 1px;
-			border-radius: 5px;
+	.arrow {
+		display: flex;
+		align-items: center;
+		font-size: 20px;
+		padding: 10px;
+		font-weight: 600;
+		color: var(--im-color-primary);
+	}
 
-			.select-tip {
-				text-align: left;
-				height: 40px;
-				line-height: 40px;
-				text-indent: 5px;
-			}
+	.right-box {
+		width: 48%;
+		border: var(--im-border);
 
-			.checked-member-list {
-				padding: 10px;
-				display: flex;
-				flex-direction: row;
-				flex-wrap: wrap;
+		.select-tip {
+			text-align: left;
+			height: 40px;
+			line-height: 40px;
+			text-indent: 5px;
+			color: var(--im-text-color-light)
+		}
 
-				.member-item {
-					padding: 2px;
-				}
+		.checked-member-list {
+			padding: 10px;
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+
+			.member-item {
+				padding: 2px;
 			}
 		}
 	}
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/im-web/src/components/rtc/RtcGroupJoin.vue b/im-web/src/components/rtc/RtcGroupJoin.vue
index 7d09b10..ad158b0 100644
--- a/im-web/src/components/rtc/RtcGroupJoin.vue
+++ b/im-web/src/components/rtc/RtcGroupJoin.vue
@@ -1,116 +1,118 @@
 <template>
-	<el-dialog title="是否加入通话?" :visible.sync="isShow"  width="400px">
-	  <div class="rtc-group-join">
-	  	<div class="host-info">
-	  		<head-image :name="rtcInfo.host.nickName" :url="rtcInfo.host.headImage" :size="80"></head-image>
-			<div class="host-text">{{'发起人:'+rtcInfo.host.nickName}}</div>
+	<el-dialog title="是否加入通话?" :visible.sync="isShow" width="400px">
+		<div class="rtc-group-join">
+			<div class="host-info">
+				<head-image :name="rtcInfo.host.nickName" :url="rtcInfo.host.headImage" :size="80"></head-image>
+				<div class="host-text">{{ '发起人:' + rtcInfo.host.nickName }}</div>
+			</div>
+			<div class="users-info">
+				<div>{{ rtcInfo.userInfos.length + '人正在通话中' }}</div>
+				<div class="user-list">
+					<div class="user-item" v-for="user in rtcInfo.userInfos" :key="user.id">
+						<head-image :url="user.headImage" :name="user.nickName" :size="40">
+						</head-image>
+					</div>
+				</div>
+			</div>
 		</div>
-	  	<div class="users-info">
-	  		<div>{{rtcInfo.userInfos.length+'人正在通话中'}}</div>
-	  		<div class="user-list">
-	  			<div class="user-item" v-for="user in rtcInfo.userInfos" :key="user.id">
-	  				<head-image :url="user.headImage" :name="user.nickName" :size="40">	
-					</head-image>
-	  			</div>
-	  		</div>
-	  	</div>
-	  </div>
-	  <span slot="footer" class="dialog-footer">
-	    <el-button @click="onCancel()">取 消</el-button>
-	    <el-button type="primary" @click="onOk()">确 定</el-button>
-	  </span>
+		<span slot="footer" class="dialog-footer">
+			<el-button @click="onCancel()">取 消</el-button>
+			<el-button type="primary" @click="onOk()">确 定</el-button>
+		</span>
 	</el-dialog>
 </template>
 
 <script>
-	import HeadImage from '@/components/common/HeadImage'
-	
-	export default{
-		name: "rtcGroupJoin",
-		components:{
-			HeadImage
-		},
-		data() {
-			return {
-				isShow: false,
-				rtcInfo: {
-					host:{},
-					userInfos:[]
-				}
+import HeadImage from '@/components/common/HeadImage'
+
+export default {
+	name: "rtcGroupJoin",
+	components: {
+		HeadImage
+	},
+	data() {
+		return {
+			isShow: false,
+			rtcInfo: {
+				host: {},
+				userInfos: []
 			}
+		}
+	},
+	props: {
+		groupId: {
+			type: Number
+		}
+	},
+	methods: {
+		open(rtcInfo) {
+			this.rtcInfo = rtcInfo;
+			this.isShow = true;
 		},
-		props: {
-			groupId: {
-				type: Number
+		onOk() {
+			this.isShow = false;
+			let userInfos = this.rtcInfo.userInfos;
+			let mine = this.$store.state.userStore.userInfo;
+			if (!userInfos.find((user) => user.id == mine.id)) {
+				// 加入自己的信息
+				userInfos.push({
+					id: mine.id,
+					nickName: mine.nickName,
+					headImage: mine.headImageThumb,
+					isCamera: false,
+					isMicroPhone: true
+				})
 			}
-		},
-		methods: {
-			open(rtcInfo) {
-				this.rtcInfo = rtcInfo;
-				this.isShow = true;
-			},
-			onOk() {
-				this.isShow = false;
-				let userInfos = this.rtcInfo.userInfos;
-				let mine = this.$store.state.userStore.userInfo;
-				if(!userInfos.find((user)=>user.id==mine.id)){
-					// 加入自己的信息
-					userInfos.push({
-						id: mine.id,
-						nickName: mine.nickName,
-						headImage: mine.headImageThumb,
-						isCamera: false,
-						isMicroPhone: true
-					})
-				}
-				let rtcInfo = {
-					isHost: false,
-					groupId: this.groupId,
-					inviterId: mine.id,
-					userInfos: userInfos
-				}
-				// 通过home.vue打开多人视频窗口
-				this.$eventBus.$emit("openGroupVideo", rtcInfo);
-				
-			},
-			onCancel(){
-				this.isShow = false;
+			let rtcInfo = {
+				isHost: false,
+				groupId: this.groupId,
+				inviterId: mine.id,
+				userInfos: userInfos
 			}
+			// 通过home.vue打开多人视频窗口
+			this.$eventBus.$emit("openGroupVideo", rtcInfo);
+
+		},
+		onCancel() {
+			this.isShow = false;
 		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.rtc-group-join {
-		height: 260px;
+.rtc-group-join {
+	height: 260px;
+	padding: 10px;
+
+	.host-info {
+		display: flex;
+		flex-direction: column;
+		font-size: 16px;
 		padding: 10px;
-		.host-info {
-			display: flex;
-			flex-direction: column;
-			font-size: 16px;
-			padding: 10px;
-			height: 100px;
-			align-items: center;
-			
-			.host-text{
-				margin-top: 5px;
-			}
+		height: 100px;
+		align-items: center;
+
+		.host-text {
+			margin-top: 5px;
 		}
-		
-		.users-info {
-			font-size: 16px;
-			margin-top: 20px;
-			.user-list {
-				display: flex;
-				padding: 5px 5px;
-				height: 90px;
-				flex-wrap: wrap;
-				justify-content: center;
-				
-				.user-item{
-					padding: 2px;
-				}
+	}
+
+	.users-info {
+		font-size: 16px;
+		margin-top: 20px;
+
+		.user-list {
+			display: flex;
+			padding: 5px 5px;
+			height: 90px;
+			flex-wrap: wrap;
+			justify-content: center;
+
+			.user-item {
+				padding: 2px;
 			}
 		}
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-web/src/components/rtc/RtcGroupVideo.vue b/im-web/src/components/rtc/RtcGroupVideo.vue
index 62e5aa4..11fd07a 100644
--- a/im-web/src/components/rtc/RtcGroupVideo.vue
+++ b/im-web/src/components/rtc/RtcGroupVideo.vue
@@ -1,6 +1,6 @@
 <template>
 	<el-dialog v-dialogDrag top="5vh" title="语音通话" :close-on-click-modal="false" :close-on-press-escape="false"
-			   :visible.sync="isShow" width="50%">
+		:visible.sync="isShow" width="50%">
 		<div class='rtc-group-video'>
 			<div style="padding-top:30px;font-weight: 600; text-align: center;font-size: 16px;">
 				多人音视频通话属于付费功能，如有需要请联系作者购买商业版源码...
@@ -19,27 +19,27 @@
 </template>
 
 <script>
-	export default {
-		name: "rtcGroupVideo",
-		data() {
-			return {
-				isShow: false
-			}
+export default {
+	name: "rtcGroupVideo",
+	data() {
+		return {
+			isShow: false
+		}
+	},
+	methods: {
+		open() {
+			this.isShow = true;
 		},
-		methods: {
-			open() {
-				this.isShow = true;
-			},
-			onRTCMessage(){
-				//this.isShow = true;
-			}
+		onRTCMessage() {
+			//this.isShow = true;
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	.rtc-group-video {
-		height: 300px;
-		background-color: #E8F2FF;
-	}
+.rtc-group-video {
+	height: 300px;
+	background-color: #E8F2FF;
+}
 </style>
\ No newline at end of file
diff --git a/im-web/src/components/rtc/RtcPrivateAcceptor.vue b/im-web/src/components/rtc/RtcPrivateAcceptor.vue
index 6ffae6b..2673632 100644
--- a/im-web/src/components/rtc/RtcPrivateAcceptor.vue
+++ b/im-web/src/components/rtc/RtcPrivateAcceptor.vue
@@ -1,8 +1,9 @@
 <template>
-	<div  class="rtc-private-acceptor">
-		<head-image :id="friend.id" :name="friend.nickName" :url="friend.headImage" :size="100"></head-image>
+	<div class="rtc-private-acceptor">
+		<head-image :id="friend.id" :name="friend.nickName" :url="friend.headImage" :size="100"
+			:isShowUserInfo="false"></head-image>
 		<div class="acceptor-text">
-			{{tip}}
+			{{ tip }}
 		</div>
 		<div class="acceptor-btn-group">
 			<div class="icon iconfont icon-phone-accept accept" @click="$emit('accept')" title="接受"></div>
@@ -12,115 +13,115 @@
 </template>
 
 <script>
-	import HeadImage from '../common/HeadImage.vue';
-
-	export default {
-		name: "rtcPrivateAcceptor",
-		components: {
-			HeadImage
-		},
-		data() {
-			return {}
-		},
-		props: {
-			mode:{
-			   type: String
-			},
-			friend:{
-				type: Object
-			}
+import HeadImage from '../common/HeadImage.vue';
+
+export default {
+	name: "rtcPrivateAcceptor",
+	components: {
+		HeadImage
+	},
+	data() {
+		return {}
+	},
+	props: {
+		mode: {
+			type: String
 		},
-		computed: {
-			tip() {
-				let modeText = this.mode == "video" ? "视频" : "语音"
-				return `${this.friend.nickName} 请求和您进行${modeText}通话...`
-			}
+		friend: {
+			type: Object
+		}
+	},
+	computed: {
+		tip() {
+			let modeText = this.mode == "video" ? "视频" : "语音"
+			return `${this.friend.nickName} 请求和您进行${modeText}通话...`
 		}
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	.rtc-private-acceptor {
-		position: absolute;
+.rtc-private-acceptor {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	right: 5px;
+	bottom: 5px;
+	width: 250px;
+	height: 250px;
+	padding: 20px;
+	background-color: #fff;
+	box-shadow: var(--im-box-shadow-dark);
+	border-radius: 4px;
+
+	.acceptor-text {
+		padding: 10px;
+		text-align: center;
+		font-size: 16px;
+	}
+
+	.acceptor-btn-group {
 		display: flex;
-		flex-direction: column;
-		align-items: center;
-		right: 5px;
-		bottom: 5px;
-		width: 250px;
-		height: 250px;
-		padding: 20px;
-		background-color: #eeeeee;
-		border: #dddddd solid 5px;
-		border-radius: 3%;
-
-		.acceptor-text {
-			padding: 10px;
-			text-align: center;
-			font-size: 16px;
-		}
+		justify-content: space-around;
+		margin-top: 20px;
+		width: 100%;
+
+		.icon {
+			font-size: 60px;
+			cursor: pointer;
+			border-radius: 50%;
+
+			&.accept {
+				color: green;
+				animation: anim 2s ease-in infinite, vibration 2s ease-in infinite;
+
+				@keyframes anim {
+					0% {
+						box-shadow: 0 1px 0 4px #ffffff;
+					}
 
-		.acceptor-btn-group {
-			display: flex;
-			justify-content: space-around;
-			margin-top: 20px;
-			width: 100%;
-
-			.icon {
-				font-size: 60px;
-				cursor: pointer;
-				border-radius: 50%;
-
-				&.accept {
-					color: green;
-					animation: anim 2s ease-in infinite, vibration 2s ease-in infinite;
-
-					@keyframes anim {
-						0% {
-							box-shadow: 0 1px 0 4px #ffffff;
-						}
-
-						10% {
-							box-shadow: 0 1px 0 8px rgba(255, 165, 0, 1);
-						}
-
-						25% {
-							box-shadow: 0 1px 0 12px rgba(255, 210, 128, 1), 0 1px 0 16px rgba(255, 201, 102, 1);
-						}
-
-						50% {
-							box-shadow: 0 2px 5px 10px rgba(255, 184, 51, 1), 0 2px 5px 23px rgba(248, 248, 255, 1);
-						}
+					10% {
+						box-shadow: 0 1px 0 8px rgba(255, 165, 0, 1);
 					}
 
-					@keyframes vibration {
-						0% {
-							transform: rotate(0deg);
-						}
+					25% {
+						box-shadow: 0 1px 0 12px rgba(255, 210, 128, 1), 0 1px 0 16px rgba(255, 201, 102, 1);
+					}
 
-						25% {
-							transform: rotate(20deg);
-						}
+					50% {
+						box-shadow: 0 2px 5px 10px rgba(255, 184, 51, 1), 0 2px 5px 23px rgba(248, 248, 255, 1);
+					}
+				}
 
-						50% {
-							transform: rotate(0deg);
-						}
+				@keyframes vibration {
+					0% {
+						transform: rotate(0deg);
+					}
 
-						75% {
-							transform: rotate(-15deg);
-						}
+					25% {
+						transform: rotate(20deg);
+					}
 
-						100% {
-							transform: rotate(0deg);
-						}
+					50% {
+						transform: rotate(0deg);
 					}
 
-				}
+					75% {
+						transform: rotate(-15deg);
+					}
 
-				&.reject {
-					color: red;
+					100% {
+						transform: rotate(0deg);
+					}
 				}
+
+			}
+
+			&.reject {
+				color: red;
 			}
 		}
 	}
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/im-web/src/components/rtc/RtcPrivateVideo.vue b/im-web/src/components/rtc/RtcPrivateVideo.vue
index f7d790d..71af27b 100644
--- a/im-web/src/components/rtc/RtcPrivateVideo.vue
+++ b/im-web/src/components/rtc/RtcPrivateVideo.vue
@@ -1,500 +1,498 @@
 <template>
-	<div>
-		<el-dialog v-dialogDrag :title="title" top="5vh" :close-on-click-modal="false" :close-on-press-escape="false"
-			:visible.sync="showRoom" width="50%" height="70%" :before-close="onQuit">
-			<div class="rtc-private-video">
-				<div v-show="isVideo" class="rtc-video-box">
-					<div class="rtc-video-friend" v-loading="!isChating"  element-loading-text="等待对方接听..."
-						element-loading-background="rgba(0, 0, 0, 0.3)" >
-						<head-image class="friend-head-image" :id="friend.id" :size="80" :name="friend.nickName"
-							:url="friend.headImage">
-						</head-image>
-						<video ref="remoteVideo" autoplay=""></video>
-					</div>
-					<div class="rtc-video-mine">
-						<video ref="localVideo" autoplay=""></video>
-					</div>
-				</div>
-				<div v-show="!isVideo" class="rtc-voice-box" v-loading="!isChating" element-loading-text="等待对方接听..."
-					element-loading-background="rgba(0, 0, 0, 0.3)">
-					<head-image class="friend-head-image" :id="friend.id" :size="200" :name="friend.nickName"
-						:url="friend.headImage">
-						<div class="rtc-voice-name">{{friend.nickName}}</div>
-					</head-image>
-				</div>
-				<div class="rtc-control-bar">
-					<div title="取消" class="icon iconfont icon-phone-reject reject"
-						style="color: red;" @click="onQuit()"></div>
-				</div>
-			</div>
-		</el-dialog>
-		<rtc-private-acceptor v-if="!isHost&&isWaiting" ref="acceptor" :friend="friend" :mode="mode" @accept="onAccept"
-			@reject="onReject"></rtc-private-acceptor>
-	</div>
+  <div>
+    <el-dialog v-dialogDrag top="5vh" custom-class="rtc-private-video-dialog" :title="title" :width="width"
+      :visible.sync="showRoom" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="onQuit">
+      <div class="rtc-private-video">
+        <div v-show="isVideo" class="rtc-video-box">
+          <div class="rtc-video-friend" v-loading="!isChating" element-loading-text="等待对方接听..."
+            element-loading-background="rgba(0, 0, 0, 0.1)">
+            <head-image class="friend-head-image" :id="friend.id" :size="80" :name="friend.nickName"
+              :url="friend.headImage" :isShowUserInfo="false" radius="0">
+            </head-image>
+            <video ref="remoteVideo" autoplay=""></video>
+          </div>
+          <div class="rtc-video-mine">
+            <video ref="localVideo" autoplay=""></video>
+          </div>
+        </div>
+        <div v-show="!isVideo" class="rtc-voice-box" v-loading="!isChating" element-loading-text="等待对方接听..."
+          element-loading-background="rgba(0, 0, 0, 0.1)">
+          <head-image class="friend-head-image" :id="friend.id" :size="200" :name="friend.nickName"
+            :url="friend.headImage" :isShowUserInfo="false">
+            <div class="rtc-voice-name">{{ friend.nickName }}</div>
+          </head-image>
+        </div>
+        <div class="rtc-control-bar">
+          <div title="取消" class="icon iconfont icon-phone-reject reject" style="color: red;" @click="onQuit()"></div>
+        </div>
+      </div>
+    </el-dialog>
+    <rtc-private-acceptor v-if="!isHost && isWaiting" ref="acceptor" :friend="friend" :mode="mode" @accept="onAccept"
+      @reject="onReject"></rtc-private-acceptor>
+  </div>
 </template>
 
 <script>
-	import HeadImage from '../common/HeadImage.vue';
-	import RtcPrivateAcceptor from './RtcPrivateAcceptor.vue';
-	import ImWebRtc from '@/api/webrtc';
-	import ImCamera from '@/api/camera';
-	import RtcPrivateApi from '@/api/rtcPrivateApi'
+import HeadImage from '../common/HeadImage.vue';
+import RtcPrivateAcceptor from './RtcPrivateAcceptor.vue';
+import ImWebRtc from '@/api/webrtc';
+import ImCamera from '@/api/camera';
+import RtcPrivateApi from '@/api/rtcPrivateApi'
 
-	export default {
-		name: 'rtcPrivateVideo',
-		components: {
-			HeadImage,
-			RtcPrivateAcceptor
-		},
-		data() {
-			return {
-				camera: new ImCamera(), // 摄像头和麦克风
-				webrtc: new ImWebRtc(), // webrtc相关
-				API: new RtcPrivateApi(), // API
-				audio: new Audio(), // 呼叫音频
-				showRoom: false,
-				friend: {},
-				isHost: false, // 是否发起人
-				state: "CLOSE", // CLOSE:关闭  WAITING:等待呼叫或接听 CHATING:聊天中  ERROR:出现异常
-				mode: 'video', // 模式 video:视频聊 voice:语音聊天
-				localStream: null, // 本地视频流
-				remoteStream: null, // 对方视频流
-				videoTime: 0,
-				videoTimer: null,
-				heartbeatTimer: null,
-				candidates: [],
-			}
-		},
-		methods: {
-			open(rtcInfo) {
-				this.showRoom = true;
-				this.mode = rtcInfo.mode;
-				this.isHost = rtcInfo.isHost;
-				this.friend = rtcInfo.friend;
-				if (this.isHost) {
-					this.onCall();
-				}
-			},
-			initAudio() {
-				let url = require(`@/assets/audio/call.wav`);
-				this.audio.src = url;
-				this.audio.loop = true;
-			},
-			initRtc() {
-				this.webrtc.init(this.configuration)
-				this.webrtc.setupPeerConnection((stream) => {
-					this.$refs.remoteVideo.srcObject = stream;
-					this.remoteStream = stream;
-				})
-				// 监听候选信息
-				this.webrtc.onIcecandidate((candidate) => {
-					if (this.state == "CHATING") {
-						// 连接已就绪,直接发送
-						this.API.sendCandidate(this.friend.id, candidate);
-					} else {
-						// 连接未就绪,缓存起来，连接后再发送
-						this.candidates.push(candidate)
-					}
-				})
-				// 监听连接成功状态
-				this.webrtc.onStateChange((state) => {
-					if (state == "connected") {
-						console.log("webrtc连接成功")
-					} else if (state == "disconnected") {
-						console.log("webrtc连接断开")
-					}
-				})
-			},
-			onCall() {
-				if (!this.checkDevEnable()) {
-					this.close();
-				}
-				// 初始化webrtc
-				this.initRtc();
-				// 启动心跳
-				this.startHeartBeat();
-				// 打开摄像头
-				this.openStream().then(() => {
-					this.webrtc.setStream(this.localStream);
-					this.webrtc.createOffer().then((offer) => {
-						// 发起呼叫
-						this.API.call(this.friend.id, this.mode, offer).then(() => {
-							// 直接进入聊天状态
-							this.state = "WAITING";
-							// 播放呼叫铃声
-							this.audio.play();
-						}).catch(()=>{
-							this.close();
-						})
-					})
-				}).catch(()=>{
-					// 呼叫方必须能打开摄像头，否则无法正常建立连接
-					this.close();
-				})
-			},
-			onAccept() {
-				if (!this.checkDevEnable()) {
-					this.API.failed(this.friend.id, "对方设备不支持通话")
-					this.close();
-					return;
-				}
-				// 进入房间
-				this.showRoom = true;
-				this.state = "CHATING";
-				// 停止呼叫铃声
-				this.audio.pause();
-				// 初始化webrtc
-				this.initRtc();
-				// 打开摄像头
-				this.openStream().finally(() => {
-					this.webrtc.setStream(this.localStream);
-					this.webrtc.createAnswer(this.offer).then((answer) => {
-						this.API.accept(this.friend.id, answer);
-						// 记录时长
-						this.startChatTime();
-						// 清理定时器
-						this.waitTimer && clearTimeout(this.waitTimer);
-					})
-				})
-			},
-			onReject() {
-				console.log("onReject")
-				// 退出通话
-				this.API.reject(this.friend.id);
-				// 退出
-				this.close();
-			},
-			onHandup() {
-				this.API.handup(this.friend.id)
-				this.$message.success("您已挂断,通话结束")
-				this.close();
-			},
-			onCancel() {
-				this.API.cancel(this.friend.id)
-				this.$message.success("已取消呼叫,通话结束")
-				this.close();
-			},
-			onRTCMessage(msg) {
-				// 除了发起通话，如果在关闭状态就无需处理
-				if (msg.type != this.$enums.MESSAGE_TYPE.RTC_CALL_VOICE &&
-					msg.type != this.$enums.MESSAGE_TYPE.RTC_CALL_VIDEO &&
-					this.isClose) {
-					return;
-				}
-				// RTC信令处理
-				switch (msg.type) {
-					case this.$enums.MESSAGE_TYPE.RTC_CALL_VOICE:
-						this.onRTCCall(msg, 'voice')
-						break;
-					case this.$enums.MESSAGE_TYPE.RTC_CALL_VIDEO:
-						this.onRTCCall(msg, 'video')
-						break;
-					case this.$enums.MESSAGE_TYPE.RTC_ACCEPT:
-						this.onRTCAccept(msg)
-						break;
-					case this.$enums.MESSAGE_TYPE.RTC_REJECT:
-						this.onRTCReject(msg)
-						break;
-					case this.$enums.MESSAGE_TYPE.RTC_CANCEL:
-						this.onRTCCancel(msg)
-						break;
-					case this.$enums.MESSAGE_TYPE.RTC_FAILED:
-						this.onRTCFailed(msg)
-						break;
-					case this.$enums.MESSAGE_TYPE.RTC_HANDUP:
-						this.onRTCHandup(msg)
-						break;
-					case this.$enums.MESSAGE_TYPE.RTC_CANDIDATE:
-						this.onRTCCandidate(msg)
-						break;
-				}
-			},
-			onRTCCall(msg, mode) {
-				this.offer = JSON.parse(msg.content);
-				this.isHost = false;
-				this.mode = mode;
-				this.$http({
-					url: `/friend/find/${msg.sendId}`,
-					method: 'get'
-				}).then((friend) => {
-					this.friend = friend;
-					this.state = "WAITING";
-					this.audio.play();
-					this.startHeartBeat();
-					// 30s未接听自动挂掉
-					this.waitTimer = setTimeout(() => {
-						this.API.failed(this.friend.id,"对方无应答");
-						this.$message.error("您未接听");
-						this.close();
-					}, 30000)
-				})
-			},
-			onRTCAccept(msg) {
-				if (msg.selfSend) {
-					// 在其他设备接听
-					this.$message.success("已在其他设备接听");
-					this.close();
-				} else {
-					// 对方接受了的通话
-					let offer = JSON.parse(msg.content);
-					this.webrtc.setRemoteDescription(offer);
-					// 状态为聊天中
-					this.state = 'CHATING'
-					// 停止播放语音
-					this.audio.pause();
-					// 发送candidate
-					this.candidates.forEach((candidate) => {
-						this.API.sendCandidate(this.friend.id, candidate);
-					})
-					// 开始计时
-					this.startChatTime();
-				}
-			},
-			onRTCReject(msg) {
-				if (msg.selfSend) {
-					this.$message.success("已在其他设备拒绝");
-					this.close();
-				} else {
-					this.$message.error("对方拒绝了您的通话请求");
-					this.close();
-				}
-			},
-			onRTCFailed(msg) {
-				// 呼叫失败
-				this.$message.error(msg.content)
-				this.close();
-			},
-			onRTCCancel() {
-				// 对方取消通话
-				this.$message.success("对方取消了呼叫");
-				this.close();
-			},
-			onRTCHandup() {
-				// 对方挂断
-				this.$message.success("对方已挂断");
-				this.close();
-			},
-			onRTCCandidate(msg) {
-				let candidate = JSON.parse(msg.content);
-				this.webrtc.addIceCandidate(candidate);
-			},
+export default {
+  name: 'rtcPrivateVideo',
+  components: {
+    HeadImage,
+    RtcPrivateAcceptor
+  },
+  data() {
+    return {
+      camera: new ImCamera(), // 摄像头和麦克风
+      webrtc: new ImWebRtc(), // webrtc相关
+      API: new RtcPrivateApi(), // API
+      audio: new Audio(), // 呼叫音频
+      showRoom: false,
+      friend: {},
+      isHost: false, // 是否发起人
+      state: "CLOSE", // CLOSE:关闭  WAITING:等待呼叫或接听 CHATING:聊天中  ERROR:出现异常
+      mode: 'video', // 模式 video:视频聊 voice:语音聊天
+      localStream: null, // 本地视频流
+      remoteStream: null, // 对方视频流
+      videoTime: 0,
+      videoTimer: null,
+      heartbeatTimer: null,
+      candidates: [],
+    }
+  },
+  methods: {
+    open(rtcInfo) {
+      this.showRoom = true;
+      this.mode = rtcInfo.mode;
+      this.isHost = rtcInfo.isHost;
+      this.friend = rtcInfo.friend;
+      if (this.isHost) {
+        this.onCall();
+      }
+    },
+    initAudio() {
+      let url = require(`@/assets/audio/call.wav`);
+      this.audio.src = url;
+      this.audio.loop = true;
+    },
+    initRtc() {
+      this.webrtc.init(this.configuration)
+      this.webrtc.setupPeerConnection((stream) => {
+        this.$refs.remoteVideo.srcObject = stream;
+        this.remoteStream = stream;
+      })
+      // 监听候选信息
+      this.webrtc.onIcecandidate((candidate) => {
+        if (this.state == "CHATING") {
+          // 连接已就绪,直接发送
+          this.API.sendCandidate(this.friend.id, candidate);
+        } else {
+          // 连接未就绪,缓存起来，连接后再发送
+          this.candidates.push(candidate)
+        }
+      })
+      // 监听连接成功状态
+      this.webrtc.onStateChange((state) => {
+        if (state == "connected") {
+          console.log("webrtc连接成功")
+        } else if (state == "disconnected") {
+          console.log("webrtc连接断开")
+        }
+      })
+    },
+    onCall() {
+      if (!this.checkDevEnable()) {
+        this.close();
+      }
+      // 初始化webrtc
+      this.initRtc();
+      // 启动心跳
+      this.startHeartBeat();
+      // 打开摄像头
+      this.openStream().then(() => {
+        this.webrtc.setStream(this.localStream);
+        this.webrtc.createOffer().then((offer) => {
+          // 发起呼叫
+          this.API.call(this.friend.id, this.mode, offer).then(() => {
+            // 直接进入聊天状态
+            this.state = "WAITING";
+            // 播放呼叫铃声
+            this.audio.play();
+          }).catch(() => {
+            this.close();
+          })
+        })
+      }).catch(() => {
+        // 呼叫方必须能打开摄像头，否则无法正常建立连接
+        this.close();
+      })
+    },
+    onAccept() {
+      if (!this.checkDevEnable()) {
+        this.API.failed(this.friend.id, "对方设备不支持通话")
+        this.close();
+        return;
+      }
+      // 进入房间
+      this.showRoom = true;
+      this.state = "CHATING";
+      // 停止呼叫铃声
+      this.audio.pause();
+      // 初始化webrtc
+      this.initRtc();
+      // 打开摄像头
+      this.openStream().finally(() => {
+        this.webrtc.setStream(this.localStream);
+        this.webrtc.createAnswer(this.offer).then((answer) => {
+          this.API.accept(this.friend.id, answer);
+          // 记录时长
+          this.startChatTime();
+          // 清理定时器
+          this.waitTimer && clearTimeout(this.waitTimer);
+        })
+      })
+    },
+    onReject() {
+      console.log("onReject")
+      // 退出通话
+      this.API.reject(this.friend.id);
+      // 退出
+      this.close();
+    },
+    onHandup() {
+      this.API.handup(this.friend.id)
+      this.$message.success("您已挂断,通话结束")
+      this.close();
+    },
+    onCancel() {
+      this.API.cancel(this.friend.id)
+      this.$message.success("已取消呼叫,通话结束")
+      this.close();
+    },
+    onRTCMessage(msg) {
+      // 除了发起通话，如果在关闭状态就无需处理
+      if (msg.type != this.$enums.MESSAGE_TYPE.RTC_CALL_VOICE &&
+        msg.type != this.$enums.MESSAGE_TYPE.RTC_CALL_VIDEO &&
+        this.isClose) {
+        return;
+      }
+      // RTC信令处理
+      switch (msg.type) {
+        case this.$enums.MESSAGE_TYPE.RTC_CALL_VOICE:
+          this.onRTCCall(msg, 'voice')
+          break;
+        case this.$enums.MESSAGE_TYPE.RTC_CALL_VIDEO:
+          this.onRTCCall(msg, 'video')
+          break;
+        case this.$enums.MESSAGE_TYPE.RTC_ACCEPT:
+          this.onRTCAccept(msg)
+          break;
+        case this.$enums.MESSAGE_TYPE.RTC_REJECT:
+          this.onRTCReject(msg)
+          break;
+        case this.$enums.MESSAGE_TYPE.RTC_CANCEL:
+          this.onRTCCancel(msg)
+          break;
+        case this.$enums.MESSAGE_TYPE.RTC_FAILED:
+          this.onRTCFailed(msg)
+          break;
+        case this.$enums.MESSAGE_TYPE.RTC_HANDUP:
+          this.onRTCHandup(msg)
+          break;
+        case this.$enums.MESSAGE_TYPE.RTC_CANDIDATE:
+          this.onRTCCandidate(msg)
+          break;
+      }
+    },
+    onRTCCall(msg, mode) {
+      this.offer = JSON.parse(msg.content);
+      this.isHost = false;
+      this.mode = mode;
+      this.$http({
+        url: `/friend/find/${msg.sendId}`,
+        method: 'get'
+      }).then((friend) => {
+        this.friend = friend;
+        this.state = "WAITING";
+        this.audio.play();
+        this.startHeartBeat();
+        // 30s未接听自动挂掉
+        this.waitTimer = setTimeout(() => {
+          this.API.failed(this.friend.id, "对方无应答");
+          this.$message.error("您未接听");
+          this.close();
+        }, 30000)
+      })
+    },
+    onRTCAccept(msg) {
+      if (msg.selfSend) {
+        // 在其他设备接听
+        this.$message.success("已在其他设备接听");
+        this.close();
+      } else {
+        // 对方接受了的通话
+        let offer = JSON.parse(msg.content);
+        this.webrtc.setRemoteDescription(offer);
+        // 状态为聊天中
+        this.state = 'CHATING'
+        // 停止播放语音
+        this.audio.pause();
+        // 发送candidate
+        this.candidates.forEach((candidate) => {
+          this.API.sendCandidate(this.friend.id, candidate);
+        })
+        // 开始计时
+        this.startChatTime()
+      }
+    },
+    onRTCReject(msg) {
+      if (msg.selfSend) {
+        this.$message.success("已在其他设备拒绝");
+        this.close();
+      } else {
+        this.$message.error("对方拒绝了您的通话请求");
+        this.close();
+      }
+    },
+    onRTCFailed(msg) {
+      // 呼叫失败
+      this.$message.error(msg.content)
+      this.close();
+    },
+    onRTCCancel() {
+      // 对方取消通话
+      this.$message.success("对方取消了呼叫");
+      this.close();
+    },
+    onRTCHandup() {
+      // 对方挂断
+      this.$message.success("对方已挂断");
+      this.close();
+    },
+    onRTCCandidate(msg) {
+      let candidate = JSON.parse(msg.content);
+      this.webrtc.addIceCandidate(candidate);
+    },
 
-			openStream() {
-				return new Promise((resolve, reject) => {
-					if (this.isVideo) {
-						// 打开摄像头+麦克风
-						this.camera.openVideo().then((stream) => {
-							this.localStream = stream;
-							this.$nextTick(() => {
-								this.$refs.localVideo.srcObject = stream;
-								this.$refs.localVideo.muted = true;
-							})
-							resolve(stream);
-						}).catch((e) => {
-							this.$message.error("打开摄像头失败")
-							console.log("本摄像头打开失败:" + e.message)
-							reject(e);
-						})
-					} else {
-						// 打开麦克风
-						this.camera.openAudio().then((stream) => {
-							this.localStream = stream;
-							this.$refs.localVideo.srcObject = stream;
-							resolve(stream);
-						}).catch((e) => {
-							this.$message.error("打开麦克风失败")
-							console.log("打开麦克风失败:" + e.message)
-							reject(e);
-						})
-					}
-				})
-			},
-			startChatTime() {
-				this.videoTime = 0;
-				this.videoTimer && clearInterval(this.videoTimer);
-				this.videoTimer = setInterval(() => {
-					this.videoTime++;
-				}, 1000)
-			},
-			checkDevEnable() {
-				// 检测摄像头
-				if (!this.camera.isEnable()) {
-					this.message.error("访问摄像头失败");
-					return false;
-				}
-				// 检测webrtc
-				if (!this.webrtc.isEnable()) {
-					this.message.error("初始化RTC失败，原因可能是: 1.服务器缺少ssl证书 2.您的设备不支持WebRTC");
-					return false;
-				}
-				return true;
-			},
-			startHeartBeat() {
-				// 每15s推送一次心跳
-				this.heartbeatTimer && clearInterval(this.heartbeatTimer);
-				this.heartbeatTimer = setInterval(() => {
-					this.API.heartbeat(this.friend.id);
-				}, 15000)
-			},
-			close() {
-				this.showRoom = false;
-				this.camera.close();
-				this.webrtc.close();
-				this.audio.pause();
-				this.videoTime = 0;
-				this.videoTimer && clearInterval(this.videoTimer);
-				this.heartbeatTimer && clearInterval(this.heartbeatTimer);
-				this.waitTimer && clearTimeout(this.waitTimer);
-				this.videoTimer = null;
-				this.heartbeatTimer = null;
-				this.waitTimer = null;
-				this.state = 'CLOSE';
-				this.candidates = [];
-			},
-			onQuit() {
-				if (this.isChating) {
-					this.onHandup()
-				} else if (this.isWaiting) {
-					this.onCancel();
-				} else {
-					this.close();
-				}
-			}
-		},
-		computed: {
-			title() {
-				let strTitle = `${this.modeText}通话-${this.friend.nickName}`;
-				if (this.isChating) {
-					strTitle += `(${this.currentTime})`;
-				} else if (this.isWaiting) {
-					strTitle += `(呼叫中)`;
-				}
-				return strTitle;
-			},
-			currentTime() {
-				let min = Math.floor(this.videoTime / 60);
-				let sec = this.videoTime % 60;
-				let strTime = min < 10 ? "0" : "";
-				strTime += min;
-				strTime += ":"
-				strTime += sec < 10 ? "0" : "";
-				strTime += sec;
-				return strTime;
-			},
-			configuration() {
-				const iceServers = this.$store.state.configStore.webrtc.iceServers;
-				return {
-					iceServers: iceServers
-				}
-			},
-			isVideo() {
-				return this.mode == "video"
-			},
-			modeText() {
-				return this.isVideo ? "视频" : "语音";
-			},
-			isChating() {
-				return this.state == "CHATING";
-			},
-			isWaiting() {
-				return this.state == "WAITING";
-			},
-			isClose() {
-				return this.state == "CLOSE";
-			}
-		},
-		mounted() {
-			// 初始化音频文件
-			this.initAudio();
-		},
-		created() {
-			// 监听页面刷新事件
-			window.addEventListener('beforeunload', () => {
-				this.onQuit();
-			});
-		},
-		beforeUnmount() {
-			this.onQuit();
-		}
-	}
+    openStream() {
+      return new Promise((resolve, reject) => {
+        if (this.isVideo) {
+          // 打开摄像头+麦克风
+          this.camera.openVideo().then((stream) => {
+            this.localStream = stream;
+            this.$nextTick(() => {
+              this.$refs.localVideo.srcObject = stream;
+              this.$refs.localVideo.muted = true;
+            })
+            resolve(stream);
+          }).catch((e) => {
+            this.$message.error("打开摄像头失败")
+            console.log("本摄像头打开失败:" + e.message)
+            reject(e);
+          })
+        } else {
+          // 打开麦克风
+          this.camera.openAudio().then((stream) => {
+            this.localStream = stream;
+            this.$refs.localVideo.srcObject = stream;
+            resolve(stream);
+          }).catch((e) => {
+            this.$message.error("打开麦克风失败")
+            console.log("打开麦克风失败:" + e.message)
+            reject(e);
+          })
+        }
+      })
+    },
+    startChatTime() {
+      this.videoTime = 0;
+      this.videoTimer && clearInterval(this.videoTimer);
+      this.videoTimer = setInterval(() => {
+        this.videoTime++;
+      }, 1000)
+    },
+    checkDevEnable() {
+      // 检测摄像头
+      if (!this.camera.isEnable()) {
+        this.message.error("访问摄像头失败");
+        return false;
+      }
+      // 检测webrtc
+      if (!this.webrtc.isEnable()) {
+        this.message.error("初始化RTC失败，原因可能是: 1.服务器缺少ssl证书 2.您的设备不支持WebRTC");
+        return false;
+      }
+      return true;
+    },
+    startHeartBeat() {
+      // 每15s推送一次心跳
+      this.heartbeatTimer && clearInterval(this.heartbeatTimer);
+      this.heartbeatTimer = setInterval(() => {
+        this.API.heartbeat(this.friend.id);
+      }, 15000)
+    },
+    close() {
+      this.showRoom = false;
+      this.camera.close();
+      this.webrtc.close();
+      this.audio.pause();
+      this.videoTime = 0;
+      this.videoTimer && clearInterval(this.videoTimer);
+      this.heartbeatTimer && clearInterval(this.heartbeatTimer);
+      this.waitTimer && clearTimeout(this.waitTimer);
+      this.videoTimer = null;
+      this.heartbeatTimer = null;
+      this.waitTimer = null;
+      this.state = 'CLOSE';
+      this.candidates = [];
+    },
+    onQuit() {
+      if (this.isChating) {
+        this.onHandup()
+      } else if (this.isWaiting) {
+        this.onCancel();
+      } else {
+        this.close();
+      }
+    }
+  },
+  computed: {
+    width() {
+      return this.isVideo ? '960px' : '360px'
+    },
+    title() {
+      let strTitle = `${this.modeText}通话-${this.friend.nickName}`;
+      if (this.isChating) {
+        strTitle += `(${this.currentTime})`;
+      } else if (this.isWaiting) {
+        strTitle += `(呼叫中)`;
+      }
+      return strTitle;
+    },
+    currentTime() {
+      let min = Math.floor(this.videoTime / 60);
+      let sec = this.videoTime % 60;
+      let strTime = min < 10 ? "0" : "";
+      strTime += min;
+      strTime += ":"
+      strTime += sec < 10 ? "0" : "";
+      strTime += sec;
+      return strTime;
+    },
+    configuration() {
+      const iceServers = this.$store.state.configStore.webrtc.iceServers;
+      return {
+        iceServers: iceServers
+      }
+    },
+    isVideo() {
+      return this.mode == "video"
+    },
+    modeText() {
+      return this.isVideo ? "视频" : "语音";
+    },
+    isChating() {
+      return this.state == "CHATING";
+    },
+    isWaiting() {
+      return this.state == "WAITING";
+    },
+    isClose() {
+      return this.state == "CLOSE";
+    }
+  },
+  mounted() {
+    // 初始化音频文件
+    this.initAudio();
+  },
+  created() {
+    // 监听页面刷新事件
+    window.addEventListener('beforeunload', () => {
+      this.onQuit();
+    });
+  },
+  beforeUnmount() {
+    this.onQuit();
+  }
+}
 </script>
 
 <style lang="scss">
-	.rtc-private-video {
-		position: relative;
+.rtc-private-video {
+  position: relative;
 
-		.el-loading-text {
-			color: white !important;
-			font-size: 16px !important;
-		}
+  .el-loading-text {
+    color: white !important;
+    font-size: 16px !important;
+  }
 
-		.path {
-			stroke: white !important;
-		}
+  .path {
+    stroke: white !important;
+  }
 
-		.rtc-video-box {
-			position: relative;
-			border: #4880b9 solid 1px;
-			background-color: #eeeeee;
+  .rtc-video-box {
+    position: relative;
+    background-color: #eeeeee;
 
-			.rtc-video-friend {
-				height: 70vh;
+    .rtc-video-friend {
+      height: 70vh;
 
-				.friend-head-image {
-					position: absolute;
-				}
+      .friend-head-image {
+        position: absolute;
+      }
 
-				video {
-					width: 100%;
-					height: 100%;
-					object-fit: cover;
-					transform: rotateY(180deg);
-				}
-			}
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transform: rotateY(180deg);
+      }
+    }
 
-			.rtc-video-mine {
-				position: absolute;
-				z-index: 99999;
-				width: 25vh;
-				right: 0;
-				bottom: 0;
-				box-shadow: 0px 0px 5px #ccc;
-				background-color: #cccccc;
+    .rtc-video-mine {
+      position: absolute;
+      z-index: 99999;
+      width: 25vh;
+      right: 0;
+      bottom: -1px;
 
-				video {
-					width: 100%;
-					object-fit: cover;
-					transform: rotateY(180deg);
-				}
-			}
-		}
+      video {
+        width: 100%;
+        object-fit: cover;
+        transform: rotateY(180deg);
+      }
+    }
+  }
 
-		.rtc-voice-box {
-			position: relative;
-			display: flex;
-			justify-content: center;
-			border: #4880b9 solid 1px;
-			width: 100%;
-			height: 50vh;
-			padding-top: 10vh;
-			background-color: aliceblue;
+  .rtc-voice-box {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 300px;
+    background-color: var(--im-color-primary-light-9);
 
-			.rtc-voice-name {
-				text-align: center;
-				font-size: 22px;
-				font-weight: 600;
-			}
-		}
+    .rtc-voice-name {
+      text-align: center;
+      font-size: 20px;
+      font-weight: 600;
+    }
+  }
 
-		.rtc-control-bar {
-			display: flex;
-			justify-content: space-around;
-			padding: 10px;
+  .rtc-control-bar {
+    display: flex;
+    justify-content: space-around;
+    padding: 10px;
 
-			.icon {
-				font-size: 50px;
-				cursor: pointer;
-			}
-		}
-	}
-</style>
\ No newline at end of file
+    .icon {
+      font-size: 50px;
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/im-web/src/components/setting/Setting.vue b/im-web/src/components/setting/Setting.vue
index 326874f..8445969 100644
--- a/im-web/src/components/setting/Setting.vue
+++ b/im-web/src/components/setting/Setting.vue
@@ -1,144 +1,140 @@
 <template>
-	<el-dialog class="setting" title="设置" :visible.sync="visible"  width="500px" :before-close="onClose">
-		<el-form :model="userInfo" label-width="70px" :rules="rules" ref="settingForm">
-			<el-form-item label="头像">
-				<file-upload  class="avatar-uploader"
-				:action="imageAction" 
-				:showLoading="true"
-				:maxSize="maxSize"  
-				@success="onUploadSuccess"
-				:fileTypes="['image/jpeg', 'image/png', 'image/jpg','image/webp']">
-					<img v-if="userInfo.headImage" :src="userInfo.headImage" class="avatar">
-					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
-				</file-upload>
-			</el-form-item>
-			<el-form-item label="用户名">
-				<el-input disabled v-model="userInfo.userName" autocomplete="off"></el-input>
-			</el-form-item>
-			<el-form-item prop="nickName" label="昵称">
-				<el-input v-model="userInfo.nickName" autocomplete="off"></el-input>
-			</el-form-item>
-			<el-form-item label="性别">
-				<el-radio-group v-model="userInfo.sex">
-					<el-radio :label="0">男</el-radio>
-					<el-radio :label="1">女</el-radio>
-				</el-radio-group>
-			</el-form-item>
-			<el-form-item label="个性签名">
-				<el-input type="textarea" v-model="userInfo.signature"></el-input>
-			</el-form-item>
-		</el-form>
+  <el-dialog class="setting" title="设置" :visible.sync="visible" width="420px" :before-close="onClose">
+    <el-form :model="userInfo" label-width="80px" :rules="rules" ref="settingForm" size="small">
+      <el-form-item label="头像" style="margin-bottom: 0 !important;">
+        <file-upload class="avatar-uploader" :action="imageAction" :showLoading="true" :maxSize="maxSize"
+          @success="onUploadSuccess" :fileTypes="['image/jpeg', 'image/png', 'image/jpg', 'image/webp']">
+          <img v-if="userInfo.headImage" :src="userInfo.headImage" class="avatar">
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </file-upload>
+      </el-form-item>
+      <el-form-item label="用户名">
+        <el-input disabled v-model="userInfo.userName" autocomplete="off" size="small"></el-input>
+      </el-form-item>
+      <el-form-item prop="nickName" label="昵称">
+        <el-input v-model="userInfo.nickName" autocomplete="off" size="small"></el-input>
+      </el-form-item>
+      <el-form-item label="性别">
+        <el-radio-group v-model="userInfo.sex">
+          <el-radio :label="0">男</el-radio>
+          <el-radio :label="1">女</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="个性签名">
+        <el-input type="textarea" v-model="userInfo.signature" :rows="3"></el-input>
+      </el-form-item>
+    </el-form>
 
-		<span slot="footer" class="dialog-footer">
-			<el-button @click="onClose()">取 消</el-button>
-			<el-button type="primary" @click="onSubmit()">确 定</el-button>
-		</span>
-	</el-dialog>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="onClose()">取 消</el-button>
+      <el-button type="primary" @click="onSubmit()">确 定</el-button>
+    </span>
+  </el-dialog>
 </template>
 
 <script>
-	import FileUpload from "../common/FileUpload.vue";
-	
-	export default {
-		name: "setting",
-		components: {
-			FileUpload
-		},
-		data() {
-			return {
-				userInfo: {
+import FileUpload from "../common/FileUpload.vue";
 
-				},
-				maxSize: 5*1024*1024,
-				action: "/image/upload",
-				rules: {
-					nickName: [{
-						required: true,
-						message: '请输入昵称',
-						trigger: 'blur'
-					}]
-				}
-			}
-		},
-		methods: {
+export default {
+  name: "setting",
+  components: {
+    FileUpload
+  },
+  data() {
+    return {
+      userInfo: {},
+      maxSize: 5 * 1024 * 1024,
+      action: "/image/upload",
+      rules: {
+        nickName: [{
+          required: true,
+          message: '请输入昵称',
+          trigger: 'blur'
+        }]
+      }
+    }
+  },
+  methods: {
 
-			onClose() {
-				this.$emit("close");
-			},
-			onSubmit() {
-				this.$refs['settingForm'].validate((valid) => {
-					if (!valid) {
-						return false;
-					}
-					this.$http({
-						url: "/user/update",
-						method: "put",
-						data: this.userInfo
-					}).then(()=>{
-						this.$store.commit("setUserInfo",this.userInfo);
-						this.$emit("close");
-						this.$message.success("修改成功");
-					})	
-				});
-			},
-			onUploadSuccess(data, file) {
-				this.userInfo.headImage = data.originUrl;
-				this.userInfo.headImageThumb = data.thumbUrl;
-			}
-		},
-		props: {
-			visible: {
-				type: Boolean
-			}
-		},
-		computed:{
-			imageAction(){
-				return `/image/upload`;
-			}
-		},
-		watch: {
-			visible: function(newData, oldData) {
-				// 深拷贝
-				let mine = this.$store.state.userStore.userInfo;
-				this.userInfo = JSON.parse(JSON.stringify(mine));
-			}
-		}
-	}
+    onClose() {
+      this.$emit("close");
+    },
+    onSubmit() {
+      this.$refs['settingForm'].validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        this.$http({
+          url: "/user/update",
+          method: "put",
+          data: this.userInfo
+        }).then(() => {
+          this.$store.commit("setUserInfo", this.userInfo);
+          this.$emit("close");
+          this.$message.success("修改成功");
+        })
+      });
+    },
+    onUploadSuccess(data, file) {
+      this.userInfo.headImage = data.originUrl;
+      this.userInfo.headImageThumb = data.thumbUrl;
+    }
+  },
+  props: {
+    visible: {
+      type: Boolean
+    }
+  },
+  computed: {
+    imageAction() {
+      return `/image/upload`;
+    }
+  },
+  watch: {
+    visible: function (newData, oldData) {
+      // 深拷贝
+      let mine = this.$store.state.userStore.userInfo;
+      this.userInfo = JSON.parse(JSON.stringify(mine));
+    }
+  }
+}
 </script>
 
-<style lang="scss" >
-	.setting {
-		.el-form {
-			padding: 30px;
-		}
-		.avatar-uploader {
-			
-			.el-upload {
-				border: 1px dashed #d9d9d9 !important;
-				border-radius: 6px;
-				cursor: pointer;
-				position: relative;
-				overflow: hidden;
-			}
+<style lang="scss">
+.setting {
+  .el-form {
+    padding: 10px 0 0 10px;
+  }
 
-			.el-upload:hover {
-				border-color: #409EFF;
-			}
+  .avatar-uploader {
+    --width: 112px;
 
-			.avatar-uploader-icon {
-				font-size: 28px;
-				color: #8c939d;
-				width: 178px;
-				height: 178px;
-				line-height: 178px;
-				text-align: center;
-			}
+    .el-upload {
+      border: 1px dashed #d9d9d9 !important;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
 
-			.avatar {
-				width: 178px;
-				height: 178px;
-				display: block;
-			}
-		}
-	}
+    .el-upload:hover {
+      border-color: #409EFF;
+    }
+
+    .avatar-uploader-icon {
+      font-size: 24px;
+      color: #8c939d;
+      width: var(--width);
+      height: var(--width);
+      line-height: var(--width);
+      text-align: center;
+    }
+
+    .avatar {
+      width: var(--width);
+      height: var(--width);
+      display: block;
+    }
+  }
+}
 </style>
diff --git a/im-web/src/main.js b/im-web/src/main.js
index f10f109..3039ea5 100644
--- a/im-web/src/main.js
+++ b/im-web/src/main.js
@@ -2,8 +2,9 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
+import './assets/style/im.scss';
 import './assets/iconfont/iconfont.css';
+
 import httpRequest from './api/httpRequest';
 import * as socketApi from './api/wssocket';
 import * as messageType from './api/messageType';
@@ -31,5 +32,6 @@ new Vue({
   // 配置路由
   router,
   store,
-  render: h=>h(App)
+  render: h => h(App)
 })
+
diff --git a/im-web/src/router/index.js b/im-web/src/router/index.js
index 8a2f5df..a447c80 100644
--- a/im-web/src/router/index.js
+++ b/im-web/src/router/index.js
@@ -9,41 +9,41 @@ Vue.use(VueRouter);
 // 配置导出路由
 export default new VueRouter({
   routes: [{
-      path: "/", 
-      redirect: "/login" 
-    },
-    {
-      name: "Login",
-      path: '/login',
-      component: Login
-    },
-    {
-      name: "Register",
-      path: '/register',
-      component: Register
-    },
-    {
-      name: "Home",
-      path: '/home',
-      component: Home,
-	  children:[
-		  {
-		    name: "Chat",
-		    path: "/home/chat",
-		    component: () => import("../view/Chat"),
-		  },
-		{
-		  name: "Friend",
-		  path: "/home/friend",
-		  component: () => import("../view/Friend"),
-		},
-		{
-		  name: "GROUP",
-		  path: "/home/group",
-		  component: () => import("../view/Group"),
-		}
-	  ]
-    }
+    path: "/",
+    redirect: "/login"
+  },
+  {
+    name: "Login",
+    path: '/login',
+    component: Login
+  },
+  {
+    name: "Register",
+    path: '/register',
+    component: Register
+  },
+  {
+    name: "Home",
+    path: '/home',
+    component: Home,
+    children: [
+      {
+        name: "Chat",
+        path: "/home/chat",
+        component: () => import("../view/Chat"),
+      },
+      {
+        name: "Friend",
+        path: "/home/friend",
+        component: () => import("../view/Friend"),
+      },
+      {
+        name: "GROUP",
+        path: "/home/group",
+        component: () => import("../view/Group"),
+      }
+    ]
+  }
   ]
 
 });
diff --git a/im-web/src/store/chatStore.js b/im-web/src/store/chatStore.js
index bb46aaf..ea1759e 100644
--- a/im-web/src/store/chatStore.js
+++ b/im-web/src/store/chatStore.js
@@ -249,7 +249,7 @@ export default {
 			let chat = this.getters.findChatByFriend(friend.id);
 			// 更新会话中的群名和头像
 			if (chat && (chat.headImage != friend.headImageThumb ||
-					chat.showName != friend.nickName)) {
+				chat.showName != friend.nickName)) {
 				chat.headImage = friend.headImageThumb;
 				chat.showName = friend.nickName;
 				chat.stored = false;
@@ -259,7 +259,7 @@ export default {
 		updateChatFromGroup(state, group) {
 			let chat = this.getters.findChatByGroup(group.id);
 			if (chat && (chat.headImage != group.headImageThumb ||
-					chat.showName != group.showGroupName)) {
+				chat.showName != group.showGroupName)) {
 				// 更新会话中的群名称和头像
 				chat.headImage = group.headImageThumb;
 				chat.showName = group.showGroupName;
@@ -280,7 +280,7 @@ export default {
 			}
 		},
 		refreshChats(state) {
-			if(!cacheChats){
+			if (!cacheChats) {
 				return;
 			}
 			// 排序
@@ -369,7 +369,7 @@ export default {
 			return state.loadingPrivateMsg || state.loadingGroupMsg
 		},
 		findChats: (state, getters) => () => {
-			if(cacheChats && getters.isLoading()){
+			if (cacheChats && getters.isLoading()) {
 				return cacheChats;
 			}
 			return state.chats;
diff --git a/im-web/src/store/configStore.js b/im-web/src/store/configStore.js
index 6debf5a..baf49a9 100644
--- a/im-web/src/store/configStore.js
+++ b/im-web/src/store/configStore.js
@@ -6,27 +6,27 @@ export default {
 	},
 	mutations: {
 		setConfig(state, config) {
-			state.webrtc = config.webrtc; 
+			state.webrtc = config.webrtc;
 		},
-		clear(state){
+		clear(state) {
 			state.webrtc = {};
 		}
 	},
-	actions:{
-		loadConfig(context){
+	actions: {
+		loadConfig(context) {
 			return new Promise((resolve, reject) => {
 				http({
 					url: '/system/config',
 					method: 'GET'
 				}).then((config) => {
-					console.log("系统配置",config)
-					context.commit("setConfig",config);
+					console.log("系统配置", config)
+					context.commit("setConfig", config);
 					resolve();
-				}).catch((res)=>{
+				}).catch((res) => {
 					reject(res);
 				});
 			})
 		}
 	}
-	
+
 }
\ No newline at end of file
diff --git a/im-web/src/store/friendStore.js b/im-web/src/store/friendStore.js
index 8773804..dee3ae4 100644
--- a/im-web/src/store/friendStore.js
+++ b/im-web/src/store/friendStore.js
@@ -1,5 +1,5 @@
 import http from '../api/httpRequest.js'
-import {TERMINAL_TYPE} from "../api/enums.js"
+import { TERMINAL_TYPE } from "../api/enums.js"
 
 export default {
 
@@ -10,20 +10,20 @@ export default {
 	},
 	mutations: {
 		setFriends(state, friends) {
-			friends.forEach((f)=>{
+			friends.forEach((f) => {
 				f.online = false;
 				f.onlineWeb = false;
 				f.onlineApp = false;
 			})
 			state.friends = friends;
 		},
-		updateFriend(state,friend){
-			state.friends.forEach((f,index)=>{
-				if(f.id==friend.id){
+		updateFriend(state, friend) {
+			state.friends.forEach((f, index) => {
+				if (f.id == friend.id) {
 					// 拷贝属性
 					let online = state.friends[index].online;
 					Object.assign(state.friends[index], friend);
-					state.friends[index].online =online;
+					state.friends[index].online = online;
 				}
 			})
 		},
@@ -39,45 +39,45 @@ export default {
 		addFriend(state, friend) {
 			state.friends.push(friend);
 		},
-		refreshOnlineStatus(state){
+		refreshOnlineStatus(state) {
 			let userIds = [];
-			if(state.friends.length ==0){
-				return; 
+			if (state.friends.length == 0) {
+				return;
 			}
-			state.friends.forEach((f)=>{userIds.push(f.id)});
+			state.friends.forEach((f) => { userIds.push(f.id) });
 			http({
 				url: '/user/terminal/online',
 				method: 'get',
-				params: {userIds: userIds.join(',')}
+				params: { userIds: userIds.join(',') }
 			}).then((onlineTerminals) => {
-				this.commit("setOnlineStatus",onlineTerminals);
+				this.commit("setOnlineStatus", onlineTerminals);
 			})
-			
+
 			// 30s后重新拉取
 			state.timer && clearTimeout(state.timer);
-			state.timer = setTimeout(()=>{
+			state.timer = setTimeout(() => {
 				this.commit("refreshOnlineStatus");
-			},30000)
+			}, 30000)
 		},
-		setOnlineStatus(state,onlineTerminals){
-			state.friends.forEach((f)=>{
-				let userTerminal = onlineTerminals.find((o)=> f.id==o.userId);
-				if(userTerminal){
+		setOnlineStatus(state, onlineTerminals) {
+			state.friends.forEach((f) => {
+				let userTerminal = onlineTerminals.find((o) => f.id == o.userId);
+				if (userTerminal) {
 					f.online = true;
-					f.onlineWeb = userTerminal.terminals.indexOf(TERMINAL_TYPE.WEB)>=0
-					f.onlineApp = userTerminal.terminals.indexOf(TERMINAL_TYPE.APP)>=0
-				}else{
+					f.onlineWeb = userTerminal.terminals.indexOf(TERMINAL_TYPE.WEB) >= 0
+					f.onlineApp = userTerminal.terminals.indexOf(TERMINAL_TYPE.APP) >= 0
+				} else {
 					f.online = false;
 					f.onlineWeb = false;
 					f.onlineApp = false;
 				}
 			});
 			// 在线的在前面
-			state.friends.sort((f1,f2)=>{
-				if(f1.online&&!f2.online){
+			state.friends.sort((f1, f2) => {
+				if (f1.online && !f2.online) {
 					return -1;
 				}
-				if(f2.online&&!f1.online){
+				if (f2.online && !f1.online) {
 					return 1;
 				}
 				return 0;
diff --git a/im-web/src/store/index.js b/im-web/src/store/index.js
index 346aa86..04254c8 100644
--- a/im-web/src/store/index.js
+++ b/im-web/src/store/index.js
@@ -10,7 +10,7 @@ import uiStore from './uiStore.js';
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-	modules: {chatStore,friendStore,userStore,groupStore,configStore,uiStore},
+	modules: { chatStore, friendStore, userStore, groupStore, configStore, uiStore },
 	state: {},
 	mutations: {
 	},
@@ -25,7 +25,7 @@ export default new Vuex.Store({
 				return Promise.all(promises);
 			})
 		},
-		unload(context){
+		unload(context) {
 			context.commit("clear");
 		}
 	},
diff --git a/im-web/src/store/uiStore.js b/im-web/src/store/uiStore.js
index 64a9a61..a29a029 100644
--- a/im-web/src/store/uiStore.js
+++ b/im-web/src/store/uiStore.js
@@ -3,9 +3,9 @@ export default {
 		userInfo: { // 用户信息窗口
 			show: false,
 			user: {},
-			pos:{
-				x:0,
-				y:0
+			pos: {
+				x: 0,
+				y: 0
 			}
 		},
 		fullImage: { // 全屏大图
@@ -14,25 +14,25 @@ export default {
 		}
 	},
 	mutations: {
-		showUserInfoBox(state,user){
+		showUserInfoBox(state, user) {
 			state.userInfo.show = true;
 			state.userInfo.user = user;
-			
+
 		},
-		setUserInfoBoxPos(state,pos){
-			let w =  document.documentElement.clientWidth;
-			let h =  document.documentElement.clientHeight;
-			state.userInfo.pos.x = Math.min(pos.x,w-350);
-			state.userInfo.pos.y = Math.min(pos.y,h-200); 
+		setUserInfoBoxPos(state, pos) {
+			let w = document.documentElement.clientWidth;
+			let h = document.documentElement.clientHeight;
+			state.userInfo.pos.x = Math.min(pos.x, w - 350);
+			state.userInfo.pos.y = Math.min(pos.y, h - 200);
 		},
-		closeUserInfoBox(state){
+		closeUserInfoBox(state) {
 			state.userInfo.show = false;
 		},
-		showFullImageBox(state,url){
+		showFullImageBox(state, url) {
 			state.fullImage.show = true;
 			state.fullImage.url = url;
 		},
-		closeFullImageBox(state){
+		closeFullImageBox(state) {
 			state.fullImage.show = false;
 		}
 	}
diff --git a/im-web/src/store/userStore.js b/im-web/src/store/userStore.js
index 0973989..494db35 100644
--- a/im-web/src/store/userStore.js
+++ b/im-web/src/store/userStore.js
@@ -1,15 +1,15 @@
 import http from '../api/httpRequest.js'
-import {RTC_STATE} from "../api/enums.js"
+import { RTC_STATE } from "../api/enums.js"
 export default {
-	
+
 	state: {
 		userInfo: {
-			
+
 		},
 		rtcInfo: {
 			friend: {},  // 好友信息
 			mode: "video", // 模式 video:视频 voice:语音
-			state: 	RTC_STATE.FREE // FREE:空闲  WAIT_CALL:呼叫方等待 WAIT_ACCEPT: 被呼叫方等待接听  CHATING:聊天中 
+			state: RTC_STATE.FREE // FREE:空闲  WAIT_CALL:呼叫方等待 WAIT_ACCEPT: 被呼叫方等待接听  CHATING:聊天中 
 		}
 	},
 
@@ -17,13 +17,13 @@ export default {
 		setUserInfo(state, userInfo) {
 			state.userInfo = userInfo
 		},
-		setRtcInfo(state, rtcInfo ){
-		    state.rtcInfo = rtcInfo;
+		setRtcInfo(state, rtcInfo) {
+			state.rtcInfo = rtcInfo;
 		},
-		setRtcState(state,rtcState){
+		setRtcState(state, rtcState) {
 			state.rtcInfo.state = rtcState;
 		},
-		clear(state){
+		clear(state) {
 			state.userInfo = {};
 			state.rtcInfo = {
 				friend: {},
@@ -32,16 +32,16 @@ export default {
 			};
 		}
 	},
-	actions:{
-		loadUser(context){
+	actions: {
+		loadUser(context) {
 			return new Promise((resolve, reject) => {
 				http({
 					url: '/user/self',
 					method: 'GET'
 				}).then((userInfo) => {
-					context.commit("setUserInfo",userInfo);
+					context.commit("setUserInfo", userInfo);
 					resolve();
-				}).catch((res)=>{
+				}).catch((res) => {
 					reject(res);
 				});
 			})
diff --git a/im-web/src/utils/directive/dialogDrag.js b/im-web/src/utils/directive/dialogDrag.js
index 5a35d2c..8ea6d05 100644
--- a/im-web/src/utils/directive/dialogDrag.js
+++ b/im-web/src/utils/directive/dialogDrag.js
@@ -1,72 +1,72 @@
 import Vue from 'vue'
- 
+
 // v-dialogDrag: 弹窗拖拽
 Vue.directive('dialogDrag', {
-  bind (el, binding, vnode, oldVnode) {
-    const dialogHeaderEl = el.querySelector('.el-dialog__header')
-    const dragDom = el.querySelector('.el-dialog')
-    dialogHeaderEl.style.cursor = 'move'
- 
-    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
-    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
- 
-    dialogHeaderEl.onmousedown = (e) => {
-      // 鼠标按下，计算当前元素距离可视区的距离
-      const disX = e.clientX - dialogHeaderEl.offsetLeft
-      const disY = e.clientY - dialogHeaderEl.offsetTop
-      const screenWidth = document.body.clientWidth; // body当前宽度
-      const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)
-      const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
-      const dragDomheight = dragDom.offsetHeight; // 对话框高度
-      const minDragDomLeft = dragDom.offsetLeft;
-      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
-      const minDragDomTop = dragDom.offsetTop;
-      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
- 
-      // 获取到的值带px 正则匹配替换
-      let styL, styT
- 
-      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
-      if (sty.left.includes('%')) {
-        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
-        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
-      } else {
-        styL = +sty.left.replace(/\px/g, '')
-        styT = +sty.top.replace(/\px/g, '')
-      }
- 
-      document.onmousemove = function (e) {
-        // 获取body的页面可视宽高
-        // var clientHeight = document.documentElement.clientHeight || document.body.clientHeight
-        // var clientWidth = document.documentElement.clientWidth || document.body.clientWidth
- 
-        // 通过事件委托，计算移动的距离
-        var l = e.clientX - disX
-        var t = e.clientY - disY
- 
-        // 边界处理
-        if (-l > minDragDomLeft) {
-          l = -minDragDomLeft;
-        } else if (l > maxDragDomLeft) {
-          l = maxDragDomLeft;
-        }
-        if (-t > minDragDomTop) {
-          t = -minDragDomTop;
-        } else if (t > maxDragDomTop) {
-          t = maxDragDomTop;
-        }
-        // 移动当前元素
-        dragDom.style.left = `${l + styL}px`
-        dragDom.style.top = `${t + styT}px`
- 
-        // 将此时的位置传出去
-        // binding.value({x:e.pageX,y:e.pageY})
-      }
- 
-      document.onmouseup = function (e) {
-        document.onmousemove = null
-        document.onmouseup = null
-      }
-    }
-  }
+    bind(el, binding, vnode, oldVnode) {
+        const dialogHeaderEl = el.querySelector('.el-dialog__header')
+        const dragDom = el.querySelector('.el-dialog')
+        dialogHeaderEl.style.cursor = 'move'
+
+        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+        const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+
+        dialogHeaderEl.onmousedown = (e) => {
+            // 鼠标按下，计算当前元素距离可视区的距离
+            const disX = e.clientX - dialogHeaderEl.offsetLeft
+            const disY = e.clientY - dialogHeaderEl.offsetTop
+            const screenWidth = document.body.clientWidth; // body当前宽度
+            const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)
+            const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
+            const dragDomheight = dragDom.offsetHeight; // 对话框高度
+            const minDragDomLeft = dragDom.offsetLeft;
+            const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
+            const minDragDomTop = dragDom.offsetTop;
+            const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
+
+            // 获取到的值带px 正则匹配替换
+            let styL, styT
+
+            // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+            if (sty.left.includes('%')) {
+                styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
+                styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
+            } else {
+                styL = +sty.left.replace(/\px/g, '')
+                styT = +sty.top.replace(/\px/g, '')
+            }
+
+            document.onmousemove = function (e) {
+                // 获取body的页面可视宽高
+                // var clientHeight = document.documentElement.clientHeight || document.body.clientHeight
+                // var clientWidth = document.documentElement.clientWidth || document.body.clientWidth
+
+                // 通过事件委托，计算移动的距离
+                var l = e.clientX - disX
+                var t = e.clientY - disY
+
+                // 边界处理
+                if (-l > minDragDomLeft) {
+                    l = -minDragDomLeft;
+                } else if (l > maxDragDomLeft) {
+                    l = maxDragDomLeft;
+                }
+                if (-t > minDragDomTop) {
+                    t = -minDragDomTop;
+                } else if (t > maxDragDomTop) {
+                    t = maxDragDomTop;
+                }
+                // 移动当前元素
+                dragDom.style.left = `${l + styL}px`
+                dragDom.style.top = `${t + styT}px`
+
+                // 将此时的位置传出去
+                // binding.value({x:e.pageX,y:e.pageY})
+            }
+
+            document.onmouseup = function (e) {
+                document.onmousemove = null
+                document.onmouseup = null
+            }
+        }
+    }
 })
diff --git a/im-web/src/view/Chat.vue b/im-web/src/view/Chat.vue
index be1be02..133b10c 100644
--- a/im-web/src/view/Chat.vue
+++ b/im-web/src/view/Chat.vue
@@ -1,104 +1,103 @@
 <template>
-	<el-container class="chat-page">
-		<el-aside width="280px" class="chat-list-box">
-			<div class="chat-list-header">
-				<el-input class="search-text" placeholder="搜索" v-model="searchText">
-					<i class="el-icon-search el-input__icon" slot="prefix"> </i>
-				</el-input>
-			</div>
-			<div class="chat-list-loading"  v-if="loading" v-loading="true" element-loading-text="消息接收中..."
-				element-loading-spinner="el-icon-loading" element-loading-background="#eee">
-				<div class="chat-loading-box"></div>
-			</div>
-			<el-scrollbar class="chat-list-items">
-				<div v-for="(chat,index) in chatStore.chats" :key="index">
-					<chat-item v-show="!chat.delete&&chat.showName.includes(searchText)" :chat="chat" :index="index"
-						@click.native="onActiveItem(index)" @delete="onDelItem(index)" @top="onTop(index)"
-						:active="chat === chatStore.activeChat"></chat-item>
-				</div>
-			</el-scrollbar>
-		</el-aside>
-		<el-container class="chat-box">
-			<chat-box v-if="chatStore.activeChat" :chat="chatStore.activeChat"></chat-box>
-		</el-container>
-	</el-container>
+  <el-container class="chat-page">
+    <el-aside width="260px" class="chat-list-box">
+      <div class="chat-list-header">
+        <el-input class="search-text" size="small" placeholder="搜索" v-model="searchText">
+          <i class="el-icon-search el-input__icon" slot="prefix"> </i>
+        </el-input>
+      </div>
+      <div class="chat-list-loading" v-if="loading" v-loading="true" element-loading-text="消息接收中..."
+        element-loading-spinner="el-icon-loading" element-loading-background="#F9F9F9" element-loading-size="24">
+      </div>
+      <el-scrollbar class="chat-list-items" v-else>
+        <div v-for="(chat, index) in chatStore.chats" :key="index">
+          <chat-item v-show="!chat.delete && chat.showName.includes(searchText)" :chat="chat" :index="index"
+            @click.native="onActiveItem(index)" @delete="onDelItem(index)" @top="onTop(index)"
+            :active="chat === chatStore.activeChat"></chat-item>
+        </div>
+      </el-scrollbar>
+    </el-aside>
+    <el-container class="chat-box">
+      <chat-box v-if="chatStore.activeChat" :chat="chatStore.activeChat"></chat-box>
+    </el-container>
+  </el-container>
 </template>
 
 <script>
-	import ChatItem from "../components/chat/ChatItem.vue";
-	import ChatBox from "../components/chat/ChatBox.vue";
+import ChatItem from "../components/chat/ChatItem.vue";
+import ChatBox from "../components/chat/ChatBox.vue";
 
-	export default {
-		name: "chat",
-		components: {
-			ChatItem,
-			ChatBox
-		},
-		data() {
-			return {
-				searchText: "",
-				messageContent: "",
-				group: {},
-				groupMembers: []
-			}
-		},
-		methods: {
-			onActiveItem(index) {
-				this.$store.commit("activeChat", index);
-			},
-			onDelItem(index) {
-				this.$store.commit("removeChat", index);
-			},
-			onTop(chatIdx) {
-				this.$store.commit("moveTop", chatIdx);
-			},
-		},
-		computed: {
-			chatStore() {
-				return this.$store.state.chatStore;
-			},
-			loading(){
-				return this.chatStore.loadingGroupMsg || this.chatStore.loadingPrivateMsg
-			}
-		}
-	}
+export default {
+  name: "chat",
+  components: {
+    ChatItem,
+    ChatBox
+  },
+  data() {
+    return {
+      searchText: "",
+      messageContent: "",
+      group: {},
+      groupMembers: []
+    }
+  },
+  methods: {
+    onActiveItem(index) {
+      this.$store.commit("activeChat", index);
+    },
+    onDelItem(index) {
+      this.$store.commit("removeChat", index);
+    },
+    onTop(chatIdx) {
+      this.$store.commit("moveTop", chatIdx);
+    },
+  },
+  computed: {
+    chatStore() {
+      return this.$store.state.chatStore;
+    },
+    loading() {
+      return this.chatStore.loadingGroupMsg || this.chatStore.loadingPrivateMsg
+    }
+  }
+}
 </script>
 
 <style lang="scss">
-	.chat-page {
-		.chat-list-box {
-			display: flex;
-			flex-direction: column;
-			border-right: #53a0e79c solid 1px;	
-			background: white;
-			width: 3rem;
+.chat-page {
+  .chat-list-box {
+    display: flex;
+    flex-direction: column;
+    background: var(--im-background);
 
-			.chat-list-header {
-				padding: 3px 8px;
-				line-height: 50px;
-				border-bottom: 1px #ddd solid;
-				
-				.el-input__inner {
-					border-radius: 10px !important;
-					background-color: #F8F8F8;
-				}
-				
-			}
-			
-			.chat-list-loading{
-				height: 50px;
-				background-color: #eee;
-				
-				.chat-loading-box{
-					height: 100%;
-				}
-			}
-			
-			.chat-list-items {
-				flex: 1;
-				background: #F8F8F8;
-				margin: 0 3px;
-			}
-		}
-	}
-</style>
\ No newline at end of file
+    .chat-list-header {
+      height: 50px;
+      display: flex;
+      align-items: center;
+      padding: 0 8px;
+    }
+
+    .chat-list-loading {
+      height: 50px;
+      background-color: #eee;
+
+      .el-icon-loading {
+        font-size: 24px;
+        color: var(--im-text-color-light);
+      }
+
+      .el-loading-text {
+        color: var(--im-text-color-light);
+      }
+
+      .chat-loading-box {
+        height: 100%;
+      }
+    }
+
+    .chat-list-items {
+      flex: 1;
+    }
+  }
+}
+</style>
diff --git a/im-web/src/view/Friend.vue b/im-web/src/view/Friend.vue
index 9775edb..6d35f38 100644
--- a/im-web/src/view/Friend.vue
+++ b/im-web/src/view/Friend.vue
@@ -1,8 +1,8 @@
 <template>
 	<el-container class="friend-page">
-		<el-aside width="280px" class="friend-list-box">
+		<el-aside width="260px" class="friend-list-box">
 			<div class="friend-list-header">
-				<el-input class="search-text" placeholder="搜索" v-model="searchText">
+				<el-input class="search-text" size="small" placeholder="搜索" v-model="searchText">
 					<i class="el-icon-search el-input__icon" slot="prefix"> </i>
 				</el-input>
 				<el-button plain class="add-btn" icon="el-icon-plus" title="添加好友"
@@ -10,22 +10,22 @@
 				<add-friend :dialogVisible="showAddFriend" @close="onCloseAddFriend"></add-friend>
 			</div>
 			<el-scrollbar class="friend-list-items">
-				<div v-for="(friend,index) in $store.state.friendStore.friends" :key="index">
+				<div v-for="(friend, index) in $store.state.friendStore.friends" :key="index">
 					<friend-item v-show="friend.nickName.includes(searchText)" :index="index"
 						:active="friend === $store.state.friendStore.activeFriend" @chat="onSendMessage(friend)"
-						@delete="onDelItem(friend,index)" @click.native="onActiveItem(friend,index)">
+						@delete="onDelItem(friend, index)" @click.native="onActiveItem(friend, index)">
 					</friend-item>
 				</div>
 			</el-scrollbar>
 		</el-aside>
 		<el-container class="friend-box">
 			<div class="friend-header" v-show="userInfo.id">
-				{{userInfo.nickName}}
+				{{ userInfo.nickName }}
 			</div>
 			<div v-show="userInfo.id">
 				<div class="friend-detail">
-					<head-image :size="200" :name="userInfo.nickName" :url="userInfo.headImage"
-						@click.native="showFullImage()" radius="10%"></head-image>
+					<head-image :size="160" :name="userInfo.nickName" :url="userInfo.headImage" radius="10%"
+						@click.native="showFullImage()"></head-image>
 					<div>
 						<div class="info-item">
 							<el-descriptions title="好友信息" class="description" :column="1">
@@ -33,10 +33,9 @@
 								</el-descriptions-item>
 								<el-descriptions-item label="昵称">{{ userInfo.nickName }}
 								</el-descriptions-item>
-								<el-descriptions-item label="性别">{{ userInfo.sex==0?"男":"女" }}</el-descriptions-item>
+								<el-descriptions-item label="性别">{{ userInfo.sex == 0 ? "男" : "女" }}</el-descriptions-item>
 								<el-descriptions-item label="签名">{{ userInfo.signature }}</el-descriptions-item>
 							</el-descriptions>
-
 						</div>
 						<div class="frient-btn-group">
 							<el-button v-show="isFriend" icon="el-icon-position" type="primary"
@@ -44,11 +43,11 @@
 							<el-button v-show="!isFriend" icon="el-icon-plus" type="primary"
 								@click="onAddFriend(userInfo)">加为好友</el-button>
 							<el-button v-show="isFriend" icon="el-icon-delete" type="danger"
-								@click="onDelItem(userInfo,activeIdx)">删除好友</el-button>
+								@click="onDelItem(userInfo, activeIdx)">删除好友</el-button>
 						</div>
 					</div>
 				</div>
-				<el-divider content-position="center"></el-divider>
+				<!--				<el-divider content-position="center"></el-divider>-->
 
 			</div>
 		</el-container>
@@ -56,202 +55,188 @@
 </template>
 
 <script>
-	import FriendItem from "../components/friend/FriendItem.vue";
-	import AddFriend from "../components/friend/AddFriend.vue";
-	import HeadImage from "../components/common/HeadImage.vue";
+import FriendItem from "../components/friend/FriendItem.vue";
+import AddFriend from "../components/friend/AddFriend.vue";
+import HeadImage from "../components/common/HeadImage.vue";
 
-	export default {
-		name: "friend",
-		components: {
-			FriendItem,
-			AddFriend,
-			HeadImage
+export default {
+	name: "friend",
+	components: {
+		FriendItem,
+		AddFriend,
+		HeadImage
 
+	},
+	data() {
+		return {
+			searchText: "",
+			showAddFriend: false,
+			activeIdx: -1,
+			userInfo: {}
+		}
+	},
+	methods: {
+		onShowAddFriend() {
+			this.showAddFriend = true;
 		},
-		data() {
-			return {
-				searchText: "",
-				showAddFriend: false,
-				activeIdx: -1,
-				userInfo: {}
-			}
+		onCloseAddFriend() {
+			this.showAddFriend = false;
 		},
-		methods: {
-			onShowAddFriend() {
-				this.showAddFriend = true;
-			},
-			onCloseAddFriend() {
-				this.showAddFriend = false;
-			},
-			onActiveItem(friend, idx) {
-				this.$store.commit("activeFriend", idx);
-				this.activeIdx = idx
-				this.loadUserInfo(friend, idx);
-			},
-			onDelItem(friend, idx) {
-				this.$confirm(`确认删除'${friend.nickName}',并清空聊天记录吗?`, '确认解除?', {
-					confirmButtonText: '确定',
-					cancelButtonText: '取消',
-					type: 'warning'
-				}).then(() => {
-					this.$http({
-						url: `/friend/delete/${friend.id}`,
-						method: 'delete'
-					}).then((data) => {
-						this.$message.success("删除好友成功");
-						this.$store.commit("removeFriend", idx);
-						this.$store.commit("removePrivateChat", friend.id);
-					})
-				})
-			},
-			onAddFriend(user) {
+		onActiveItem(friend, idx) {
+			this.$store.commit("activeFriend", idx);
+			this.activeIdx = idx
+			this.loadUserInfo(friend, idx);
+		},
+		onDelItem(friend, idx) {
+			this.$confirm(`确认删除'${friend.nickName}',并清空聊天记录吗?`, '确认解除?', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			}).then(() => {
 				this.$http({
-					url: "/friend/add",
-					method: "post",
-					params: {
-						friendId: user.id
-					}
+					url: `/friend/delete/${friend.id}`,
+					method: 'delete'
 				}).then((data) => {
-					this.$message.success("添加成功，对方已成为您的好友");
-					let friend = {
-						id: user.id,
-						nickName: user.nickName,
-						headImage: user.headImage,
-						online: user.online
-					}
-					this.$store.commit("addFriend", friend);
+					this.$message.success("删除好友成功");
+					this.$store.commit("removeFriend", idx);
+					this.$store.commit("removePrivateChat", friend.id);
 				})
-			},
-			onSendMessage(user) {
-				let chat = {
-					type: 'PRIVATE',
-					targetId: user.id,
-					showName: user.nickName,
-					headImage: user.headImageThumb,
-				};
-				this.$store.commit("openChat", chat);
-				this.$store.commit("activeChat", 0);
-				this.$router.push("/home/chat");
-			},
-			showFullImage() {
-				if (this.userInfo.headImage) {
-					this.$store.commit('showFullImageBox', this.userInfo.headImage);
+			})
+		},
+		onAddFriend(user) {
+			this.$http({
+				url: "/friend/add",
+				method: "post",
+				params: {
+					friendId: user.id
 				}
-			},
-			updateFriendInfo(friend, user, index) {
-				// store的数据不能直接修改，深拷贝一份store的数据
-				friend = JSON.parse(JSON.stringify(friend));
-				friend.headImage = user.headImageThumb;
-				friend.nickName = user.nickName;
-				this.$http({
-					url: "/friend/update",
-					method: "put",
-					data: friend
-				}).then(() => {
-					this.$store.commit("updateFriend", friend);
-					this.$store.commit("updateChatFromFriend", user);
-				})
-			},
-			loadUserInfo(friend, index) {
-				this.$http({
-					url: `/user/find/${friend.id}`,
-					method: 'get'
-				}).then((user) => {
-					this.userInfo = user;
-					// 如果发现好友的头像和昵称改了，进行更新
-					if (user.headImageThumb != friend.headImage ||
-						user.nickName != friend.nickName) {
-						this.updateFriendInfo(friend, user, index)
-					}
-				})
-			}
+			}).then((data) => {
+				this.$message.success("添加成功，对方已成为您的好友");
+				let friend = {
+					id: user.id,
+					nickName: user.nickName,
+					headImage: user.headImage,
+					online: user.online
+				}
+				this.$store.commit("addFriend", friend);
+			})
+		},
+		onSendMessage(user) {
+			let chat = {
+				type: 'PRIVATE',
+				targetId: user.id,
+				showName: user.nickName,
+				headImage: user.headImageThumb,
+			};
+			this.$store.commit("openChat", chat);
+			this.$store.commit("activeChat", 0);
+			this.$router.push("/home/chat");
 		},
-		computed: {
-			friendStore() {
-				return this.$store.state.friendStore;
-			},
-			isFriend() {
-				return this.friendStore.friends.find((f) => f.id == this.userInfo.id);
+		showFullImage() {
+			if (this.userInfo.headImage) {
+				this.$store.commit('showFullImageBox', this.userInfo.headImage);
 			}
+		},
+		updateFriendInfo(friend, user, index) {
+			// store的数据不能直接修改，深拷贝一份store的数据
+			friend = JSON.parse(JSON.stringify(friend));
+			friend.headImage = user.headImageThumb;
+			friend.nickName = user.nickName;
+			this.$http({
+				url: "/friend/update",
+				method: "put",
+				data: friend
+			}).then(() => {
+				this.$store.commit("updateFriend", friend);
+				this.$store.commit("updateChatFromFriend", user);
+			})
+		},
+		loadUserInfo(friend, index) {
+			this.$http({
+				url: `/user/find/${friend.id}`,
+				method: 'get'
+			}).then((user) => {
+				this.userInfo = user;
+				// 如果发现好友的头像和昵称改了，进行更新
+				if (user.headImageThumb != friend.headImage ||
+					user.nickName != friend.nickName) {
+					this.updateFriendInfo(friend, user, index)
+				}
+			})
+		}
+	},
+	computed: {
+		friendStore() {
+			return this.$store.state.friendStore;
+		},
+		isFriend() {
+			return this.friendStore.friends.find((f) => f.id == this.userInfo.id);
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	.friend-page {
-		.friend-list-box {
+.friend-page {
+	.friend-list-box {
+		display: flex;
+		flex-direction: column;
+		background: var(--im-background);
+
+		.friend-list-header {
+			height: 50px;
 			display: flex;
-			flex-direction: column;
-			border-right: #53a0e79c solid 1px;
-			background: white;
+			align-items: center;
+			padding: 0 8px;
 
-			.friend-list-header {
-				height: 50px;
-				display: flex;
-				align-items: center;
-				padding: 3px 8px;
-				border-bottom: 1px #ddd solid;
-				
-				.el-input__inner {
-					border-radius: 10px !important;
-					background-color: #F8F8F8;
-				}
-				
-				.add-btn {
-					padding: 5px !important;
-					margin: 5px;
-					font-size: 20px;
-					color: #587FF0;
-					border: #587FF0 1px solid;
-					background-color: #F0F8FF;
-					border-radius: 50%;
-				}
+			.add-btn {
+				padding: 5px !important;
+				margin: 5px;
+				font-size: 16px;
+				border-radius: 50%;
 			}
+		}
 
-			.friend-list-items {
-				flex: 1;
-				margin: 0 3px;
-				background: #F8F8F8;
-			}
+		.friend-list-items {
+			flex: 1;
 		}
+	}
 
-		.friend-box {
-			display: flex;
-			flex-direction: column;	
+	.friend-box {
+		display: flex;
+		flex-direction: column;
 
-			.friend-header {
-				padding: 3px;	
-				height: 50px;
-				line-height: 50px;
-				font-size: 20px;
-				font-weight: 600;
-				text-align: center;
-				background-color: white;
-				border-bottom: 1px #ddd solid;
-			}
+		.friend-header {
+			height: 50px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 0 12px;
+			font-size: var(--im-font-size-larger);
+			border-bottom: var(--im-border);
+			box-sizing: border-box;
+		}
 
-			.friend-detail {
-				display: flex;
-				padding: 50px 80px 20px 80px;
-				text-align: center;
-				
-				
-				.info-item {
-					margin-left: 20px;
-					background-color: #ffffff;
-					border-radius: 10px ;
-					border: 1px #ddd solid;
-				}
+		.friend-detail {
+			display: flex;
+			padding: 50px 80px 20px 80px;
+			text-align: center;
 
-				.description {
-					padding: 20px 20px 0px 20px;
-				}
+			.info-item {
+				margin-left: 20px;
+				background-color: #ffffff;
+				border: 1px #ddd solid;
 			}
 
-			.frient-btn-group {
-				text-align: left !important;
-				padding: 20px;
+			.description {
+				padding: 20px 20px 0 20px;
 			}
 		}
+
+		.frient-btn-group {
+			text-align: left !important;
+			padding: 20px;
+		}
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-web/src/view/Group.vue b/im-web/src/view/Group.vue
index 6dcf5f3..683d1c2 100644
--- a/im-web/src/view/Group.vue
+++ b/im-web/src/view/Group.vue
@@ -1,422 +1,414 @@
 <template>
-	<el-container class="group-page">
-		<el-aside width="280px" class="group-list-box">
-			<div class="group-list-header">
-				<el-input class="search-text" placeholder="搜索" v-model="searchText">
-					<i class="el-icon-search el-input__icon" slot="prefix"> </i>
-				</el-input>
-				<el-button plain class="add-btn" icon="el-icon-plus" title="创建群聊" @click="onCreateGroup()"></el-button>
-			</div>
-			<el-scrollbar class="group-list-items">
-				<div v-for="(group,index) in groupStore.groups" :key="index">
-					<group-item v-show="!group.quit&&group.showGroupName.includes(searchText)" :group="group"
-						:active="group === groupStore.activeGroup" @click.native="onActiveItem(group,index)">
-					</group-item>
-				</div>
-			</el-scrollbar>
-		</el-aside>
-		<el-container class="group-box">
-			<div class="group-header" v-show="activeGroup.id">
-				{{activeGroup.showGroupName}}({{groupMembers.length}})
-			</div>
-			<el-scrollbar class="group-container">
-				<div v-show="activeGroup.id">
-					<div class="group-info">
-						<div>
-							<file-upload v-show="isOwner" class="avatar-uploader" :action="imageAction"
-								:showLoading="true" :maxSize="maxSize" @success="onUploadSuccess"
-								:fileTypes="['image/jpeg', 'image/png', 'image/jpg','image/webp']">
-								<img v-if="activeGroup.headImage" :src="activeGroup.headImage" class="avatar">
-								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
-							</file-upload>
-							<head-image v-show="!isOwner" class="avatar" :size="200" :url="activeGroup.headImage"
-								radius="10%" :name="activeGroup.showGroupName">
-							</head-image>
-							<el-button class="send-btn" icon="el-icon-position" type="primary"
-								@click="onSendMessage()">发消息</el-button>
-						</div>
-						<el-form class="group-form" label-width="130px" :model="activeGroup" :rules="rules"
-							ref="groupForm">
-							<el-form-item label="群聊名称" prop="name">
-								<el-input v-model="activeGroup.name" :disabled="!isOwner" maxlength="20"></el-input>
-							</el-form-item>
-							<el-form-item label="群主">
-								<el-input :value="ownerName" disabled></el-input>
-							</el-form-item>
-							<el-form-item label="群名备注">
-								<el-input v-model="activeGroup.remarkGroupName" :placeholder="activeGroup.name"
-									maxlength="20"></el-input>
-							</el-form-item>
-							<el-form-item label="我在本群的昵称">
-								<el-input v-model="activeGroup.remarkNickName" maxlength="20"
-									:placeholder="$store.state.userStore.userInfo.nickName"></el-input>
-							</el-form-item>
-							<el-form-item label="群公告">
-								<el-input v-model="activeGroup.notice" :disabled="!isOwner" type="textarea"
-									maxlength="1024" placeholder="群主未设置"></el-input>
-							</el-form-item>
-							<div>
-								<el-button type="success" @click="onSaveGroup()">保存</el-button>
-								<el-button type="danger" v-show="!isOwner" @click="onQuit()">退出群聊</el-button>
-								<el-button type="danger" v-show="isOwner" @click="onDissolve()">解散群聊</el-button>
-							</div>
-						</el-form>
-					</div>
-					<el-divider content-position="center"></el-divider>
-					<el-scrollbar style="height:200px;">
-						<div class="group-member-list">
-							<div v-for="(member) in groupMembers" :key="member.id">
-								<group-member v-show="!member.quit" class="group-member" :member="member"
-									:showDel="isOwner&&member.userId!=activeGroup.ownerId" @del="onKick"></group-member>
-							</div>
-							<div class="group-invite">
-								<div class="invite-member-btn" title="邀请好友进群聊" @click="onInviteMember()">
-									<i class="el-icon-plus"></i>
-								</div>
-								<div class="invite-member-text">邀请</div>
-								<add-group-member :visible="showAddGroupMember" :groupId="activeGroup.id"
-									:members="groupMembers" @reload="loadGroupMembers"
-									@close="onCloseAddGroupMember"></add-group-member>
-							</div>
-						</div>
-					</el-scrollbar>
-				</div>
-			</el-scrollbar>
-		</el-container>
-	</el-container>
+  <el-container class="group-page">
+    <el-aside width="260px" class="group-list-box">
+      <div class="group-list-header">
+        <el-input class="search-text" size="small" placeholder="搜索" v-model="searchText">
+          <i class="el-icon-search el-input__icon" slot="prefix"> </i>
+        </el-input>
+        <el-button plain class="add-btn" icon="el-icon-plus" title="创建群聊" @click="onCreateGroup()"></el-button>
+      </div>
+      <el-scrollbar class="group-list-items">
+        <div v-for="(group, index) in groupStore.groups" :key="index">
+          <group-item v-show="!group.quit && group.showGroupName.includes(searchText)" :group="group"
+            :active="group === groupStore.activeGroup" @click.native="onActiveItem(group, index)">
+          </group-item>
+        </div>
+      </el-scrollbar>
+    </el-aside>
+    <el-container class="group-box">
+      <div class="group-header" v-show="activeGroup.id">
+        {{ activeGroup.showGroupName }}({{ groupMembers.length }})
+      </div>
+      <div class="group-container">
+        <div v-show="activeGroup.id">
+          <div class="group-info">
+            <div>
+              <file-upload v-show="isOwner" class="avatar-uploader" :action="imageAction" :showLoading="true"
+                :maxSize="maxSize" @success="onUploadSuccess"
+                :fileTypes="['image/jpeg', 'image/png', 'image/jpg', 'image/webp']">
+                <img v-if="activeGroup.headImage" :src="activeGroup.headImage" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </file-upload>
+              <head-image v-show="!isOwner" class="avatar" :size="160" :url="activeGroup.headImage"
+                :name="activeGroup.showGroupName" radius="10%">
+              </head-image>
+              <el-button class="send-btn" icon="el-icon-position" type="primary" @click="onSendMessage()">发消息
+              </el-button>
+            </div>
+            <el-form class="group-form" label-width="130px" :model="activeGroup" :rules="rules" size="small"
+              ref="groupForm">
+              <el-form-item label="群聊名称" prop="name">
+                <el-input v-model="activeGroup.name" :disabled="!isOwner" maxlength="20"></el-input>
+              </el-form-item>
+              <el-form-item label="群主">
+                <el-input :value="ownerName" disabled></el-input>
+              </el-form-item>
+              <el-form-item label="群名备注">
+                <el-input v-model="activeGroup.remarkGroupName" :placeholder="activeGroup.name"
+                  maxlength="20"></el-input>
+              </el-form-item>
+              <el-form-item label="我在本群的昵称">
+                <el-input v-model="activeGroup.remarkNickName" maxlength="20"
+                  :placeholder="$store.state.userStore.userInfo.nickName"></el-input>
+              </el-form-item>
+              <el-form-item label="群公告">
+                <el-input v-model="activeGroup.notice" :disabled="!isOwner" type="textarea" :rows="3" maxlength="1024"
+                  placeholder="群主未设置"></el-input>
+              </el-form-item>
+              <div>
+                <el-button type="warning" v-show="isOwner" @click="onInviteMember()">邀请</el-button>
+                <el-button type="success" @click="onSaveGroup()">保存</el-button>
+                <el-button type="danger" v-show="!isOwner" @click="onQuit()">退出</el-button>
+                <el-button type="danger" v-show="isOwner" @click="onDissolve()">解散</el-button>
+              </div>
+            </el-form>
+          </div>
+          <el-divider content-position="center"></el-divider>
+          <div class="group-member-list">
+            <div v-for="(member) in groupMembers" :key="member.id">
+              <group-member v-show="!member.quit" class="group-member" :member="member"
+                :showDel="isOwner && member.userId != activeGroup.ownerId" @del="onKick"></group-member>
+            </div>
+            <div class="group-invite">
+              <div class="invite-member-btn" title="邀请好友进群聊" @click="onInviteMember()">
+                <i class="el-icon-plus"></i>
+              </div>
+              <div class="invite-member-text">邀请</div>
+              <add-group-member :visible="showAddGroupMember" :groupId="activeGroup.id" :members="groupMembers"
+                @reload="loadGroupMembers" @close="onCloseAddGroupMember"></add-group-member>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-container>
+  </el-container>
 </template>
 
 
 <script>
-	import GroupItem from '../components/group/GroupItem';
-	import FileUpload from '../components/common/FileUpload';
-	import GroupMember from '../components/group/GroupMember.vue';
-	import AddGroupMember from '../components/group/AddGroupMember.vue';
-	import HeadImage from '../components/common/HeadImage.vue';
-	export default {
-		name: "group",
-		components: {
-			GroupItem,
-			GroupMember,
-			FileUpload,
-			AddGroupMember,
-			HeadImage
-		},
-		data() {
-			return {
-				searchText: "",
-				maxSize: 5 * 1024 * 1024,
-				activeGroup: {},
-				groupMembers: [],
-				showAddGroupMember: false,
-				rules: {
-					name: [{
-						required: true,
-						message: '请输入群聊名称',
-						trigger: 'blur'
-					}]
-				}
-			};
-		},
-		methods: {
-			onCreateGroup() {
-				this.$prompt('请输入群聊名称', '创建群聊', {
-					confirmButtonText: '确定',
-					cancelButtonText: '取消',
-					inputPattern: /\S/,
-					inputErrorMessage: '请输入群聊名称'
-				}).then((o) => {
-					let userInfo = this.$store.state.userStore.userInfo;
-					let data = {
-						name: o.value
-					}
-					this.$http({
-						url: `/group/create?groupName=${o.value}`,
-						method: 'post',
-						data: data
-					}).then((group) => {
-						this.$store.commit("addGroup", group);
-					})
-				})
-			},
-			onActiveItem(group, index) {
-				this.$store.commit("activeGroup", index);
-				// store数据不能直接修改，所以深拷贝一份内存
-				this.activeGroup = JSON.parse(JSON.stringify(group));
-				// 重新加载群成员
-				this.loadGroupMembers();
-			},
-			onInviteMember() {
-				this.showAddGroupMember = true;
-			},
-			onCloseAddGroupMember() {
-				this.showAddGroupMember = false;
-			},
-			onUploadSuccess(data) {
-				this.activeGroup.headImage = data.originUrl;
-				this.activeGroup.headImageThumb = data.thumbUrl;
-			},
-			onSaveGroup() {
-				this.$refs['groupForm'].validate((valid) => {
-					if (valid) {
-						let vo = this.activeGroup;
-						this.$http({
-							url: "/group/modify",
-							method: "put",
-							data: vo
-						}).then((group) => {
-							this.$store.commit("updateGroup", group);
-							this.$message.success("修改成功");
-						})
-					}
-				});
-			},
-			onDissolve() {
-				this.$confirm(`确认要解散'${this.activeGroup.name}'吗?`, '确认解散?', {
-					confirmButtonText: '确定',
-					cancelButtonText: '取消',
-					type: 'warning'
-				}).then(() => {
-					this.$http({
-						url: `/group/delete/${this.activeGroup.id}`,
-						method: 'delete'
-					}).then(() => {
-						this.$message.success(`群聊'${this.activeGroup.name}'已解散`);
-						this.$store.commit("removeGroup", this.activeGroup.id);
-						this.$store.commit("removeGroupChat", this.activeGroup.id);
-						this.reset();
-					});
-				})
+import GroupItem from '../components/group/GroupItem';
+import FileUpload from '../components/common/FileUpload';
+import GroupMember from '../components/group/GroupMember.vue';
+import AddGroupMember from '../components/group/AddGroupMember.vue';
+import HeadImage from '../components/common/HeadImage.vue';
 
-			},
-			onKick(member) {
-				this.$confirm(`确定将成员'${member.showNickName}'移出群聊吗？`, '确认移出?', {
-					confirmButtonText: '确定',
-					cancelButtonText: '取消',
-					type: 'warning'
-				}).then(() => {
-					this.$http({
-						url: `/group/kick/${this.activeGroup.id}`,
-						method: 'delete',
-						params: {
-							userId: member.userId
-						}
-					}).then(() => {
-						this.$message.success(`已将${member.showNickName}移出群聊`);
-						member.quit = true;
-					});
-				})
+export default {
+  name: "group",
+  components: {
+    GroupItem,
+    GroupMember,
+    FileUpload,
+    AddGroupMember,
+    HeadImage
+  },
+  data() {
+    return {
+      searchText: "",
+      maxSize: 5 * 1024 * 1024,
+      activeGroup: {},
+      groupMembers: [],
+      showAddGroupMember: false,
+      rules: {
+        name: [{
+          required: true,
+          message: '请输入群聊名称',
+          trigger: 'blur'
+        }]
+      }
+    };
+  },
+  methods: {
+    onCreateGroup() {
+      this.$prompt('请输入群聊名称', '创建群聊', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputPattern: /\S/,
+        inputErrorMessage: '请输入群聊名称'
+      }).then((o) => {
+        let userInfo = this.$store.state.userStore.userInfo;
+        let data = {
+          name: o.value
+        }
+        this.$http({
+          url: `/group/create?groupName=${o.value}`,
+          method: 'post',
+          data: data
+        }).then((group) => {
+          this.$store.commit("addGroup", group);
+        })
+      })
+    },
+    onActiveItem(group, index) {
+      this.$store.commit("activeGroup", index);
+      // store数据不能直接修改，所以深拷贝一份内存
+      this.activeGroup = JSON.parse(JSON.stringify(group));
+      // 重新加载群成员
+      this.loadGroupMembers();
+    },
+    onInviteMember() {
+      this.showAddGroupMember = true;
+    },
+    onCloseAddGroupMember() {
+      this.showAddGroupMember = false;
+    },
+    onUploadSuccess(data) {
+      this.activeGroup.headImage = data.originUrl;
+      this.activeGroup.headImageThumb = data.thumbUrl;
+    },
+    onSaveGroup() {
+      this.$refs['groupForm'].validate((valid) => {
+        if (valid) {
+          let vo = this.activeGroup;
+          this.$http({
+            url: "/group/modify",
+            method: "put",
+            data: vo
+          }).then((group) => {
+            this.$store.commit("updateGroup", group);
+            this.$message.success("修改成功");
+          })
+        }
+      });
+    },
+    onDissolve() {
+      this.$confirm(`确认要解散'${this.activeGroup.name}'吗?`, '确认解散?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: `/group/delete/${this.activeGroup.id}`,
+          method: 'delete'
+        }).then(() => {
+          this.$message.success(`群聊'${this.activeGroup.name}'已解散`);
+          this.$store.commit("removeGroup", this.activeGroup.id);
+          this.$store.commit("removeGroupChat", this.activeGroup.id);
+          this.reset();
+        });
+      })
 
-			},
-			onQuit() {
-				this.$confirm(`确认退出'${this.activeGroup.showGroupName}',并清空聊天记录吗？`, '确认退出?', {
-					confirmButtonText: '确定',
-					cancelButtonText: '取消',
-					type: 'warning'
-				}).then(() => {
-					this.$http({
-						url: `/group/quit/${this.activeGroup.id}`,
-						method: 'delete'
-					}).then(() => {
-						this.$message.success(`您已退出'${this.activeGroup.name}'`);
-						this.$store.commit("removeGroup", this.activeGroup.id);
-						this.$store.commit("removeGroupChat", this.activeGroup.id);
-						this.reset();
-					});
-				})
+    },
+    onKick(member) {
+      this.$confirm(`确定将成员'${member.showNickName}'移出群聊吗？`, '确认移出?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: `/group/kick/${this.activeGroup.id}`,
+          method: 'delete',
+          params: {
+            userId: member.userId
+          }
+        }).then(() => {
+          this.$message.success(`已将${member.showNickName}移出群聊`);
+          member.quit = true;
+        });
+      })
 
-			},
-			onSendMessage() {
-				let chat = {
-					type: 'GROUP',
-					targetId: this.activeGroup.id,
-					showName: this.activeGroup.showGroupName,
-					headImage: this.activeGroup.headImage,
-				};
-				this.$store.commit("openChat", chat);
-				this.$store.commit("activeChat", 0);
-				this.$router.push("/home/chat");
-			},
-			loadGroupMembers() {
-				this.$http({
-					url: `/group/members/${this.activeGroup.id}`,
-					method: "get"
-				}).then((members) => {
-					this.groupMembers = members;
-				})
-			},
-			reset() {
-				this.activeGroup = {};
-				this.groupMembers = [];
-			}
-		},
-		computed: {
-			groupStore() {
-				return this.$store.state.groupStore;
-			},
-			ownerName() {
-				let member = this.groupMembers.find((m) => m.userId == this.activeGroup.ownerId);
-				return member && member.showNickName;
-			},
-			isOwner() {
-				return this.activeGroup.ownerId == this.$store.state.userStore.userInfo.id;
-			},
-			imageAction() {
-				return `/image/upload`;
-			}
-		}
-	}
+    },
+    onQuit() {
+      this.$confirm(`确认退出'${this.activeGroup.showGroupName}',并清空聊天记录吗？`, '确认退出?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: `/group/quit/${this.activeGroup.id}`,
+          method: 'delete'
+        }).then(() => {
+          this.$message.success(`您已退出'${this.activeGroup.name}'`);
+          this.$store.commit("removeGroup", this.activeGroup.id);
+          this.$store.commit("removeGroupChat", this.activeGroup.id);
+          this.reset();
+        });
+      })
+
+    },
+    onSendMessage() {
+      let chat = {
+        type: 'GROUP',
+        targetId: this.activeGroup.id,
+        showName: this.activeGroup.showGroupName,
+        headImage: this.activeGroup.headImage,
+      };
+      this.$store.commit("openChat", chat);
+      this.$store.commit("activeChat", 0);
+      this.$router.push("/home/chat");
+    },
+    loadGroupMembers() {
+      this.$http({
+        url: `/group/members/${this.activeGroup.id}`,
+        method: "get"
+      }).then((members) => {
+        this.groupMembers = members;
+      })
+    },
+    reset() {
+      this.activeGroup = {};
+      this.groupMembers = [];
+    }
+  },
+  computed: {
+    groupStore() {
+      return this.$store.state.groupStore;
+    },
+    ownerName() {
+      let member = this.groupMembers.find((m) => m.userId == this.activeGroup.ownerId);
+      return member && member.showNickName;
+    },
+    isOwner() {
+      return this.activeGroup.ownerId == this.$store.state.userStore.userInfo.id;
+    },
+    imageAction() {
+      return `/image/upload`;
+    }
+  }
+}
 </script>
 
 <style lang="scss">
-	.group-page {
-		.group-list-box {
-			display: flex;
-			flex-direction: column;
-			border-right: #53a0e79c solid 1px;
-			background: #F8F8F8;
+.group-page {
+  .group-list-box {
+    display: flex;
+    flex-direction: column;
+    background: var(--im-background);
+
+    .group-list-header {
+      height: 50px;
+      display: flex;
+      align-items: center;
+      padding: 0 8px;
+
+      .add-btn {
+        padding: 5px !important;
+        margin: 5px;
+        font-size: 16px;
+        border-radius: 50%;
+      }
+    }
+
+    .group-list-items {
+      flex: 1;
+    }
+  }
 
-			.group-list-header {
-				height: 50px;
-				display: flex;
-				align-items: center;
-				padding: 3px 8px;
-				background-color: white;
-				border-bottom: 1px #ddd solid;
+  .group-box {
+    display: flex;
+    flex-direction: column;
 
-				.el-input__inner {
-					border-radius: 10px !important;
-				}
+    .group-header {
+      display: flex;
+      justify-content: space-between;
+      padding: 0 12px;
+      line-height: 50px;
+      font-size: var(--im-font-size-larger);
+      border-bottom: var(--im-border);
+    }
 
-				.add-btn {
-					padding: 5px !important;
-					margin: 5px;
-					font-size: 20px;
-					color: #587FF0;
-					border: #587FF0 1px solid;
-					background-color: #F0F8FF;
-					border-radius: 50%;
-				}
-			}
+    .el-divider--horizontal {
+      margin: 16px 0;
+    }
 
-			.group-list-items {
-				flex: 1;
-				margin: 0 3px;
-				background: #F8F8F8;
-			}
-		}
+    .group-container {
+      overflow: auto;
+      padding: 20px;
+      flex: 1;
 
-		.group-box {
-			display: flex;
-			flex-direction: column;
-			
-			.group-header {
-				padding: 3px;
-				height: 50px;
-				line-height: 50px;
-				font-size: 20px;
-				font-weight: 600;
-				text-align: center;
-				background-color: white;
-				border-bottom: 1px #ddd solid;
-			}
+      .group-info {
+        display: flex;
+        padding: 5px 20px;
 
-			.group-container {
-				padding: 20px;
-				flex: 1;
+        .group-form {
+          flex: 1;
+          padding-left: 40px;
+          max-width: 700px;
+        }
 
-				.group-info {
-					display: flex;
-					padding: 5px 20px;
+        .avatar-uploader {
+          --width: 160px;
+          text-align: left;
 
-					.group-form {
-						flex: 1;
-						padding-left: 40px;
-						max-width: 700px;
-					}
+          .el-upload {
+            border: 1px dashed #d9d9d9 !important;
+            border-radius: 6px;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+          }
 
-					.avatar-uploader {
-						text-align: left;
+          .el-upload:hover {
+            border-color: #409EFF;
+          }
 
-						.el-upload {
-							border: 1px dashed #d9d9d9 !important;
-							border-radius: 6px;
-							cursor: pointer;
-							position: relative;
-							overflow: hidden;
-						}
+          .avatar-uploader-icon {
+            font-size: 28px;
+            color: #8c939d;
+            width: var(--width);
+            height: var(--width);
+            line-height: var(--width);
+            text-align: center;
+          }
 
-						.el-upload:hover {
-							border-color: #409EFF;
-						}
+          .avatar {
+            width: var(--width);
+            height: var(--width);
+            display: block;
+          }
+        }
 
-						.avatar-uploader-icon {
-							font-size: 28px;
-							color: #8c939d;
-							width: 200px;
-							height: 200px;
-							line-height: 200px;
-							text-align: center;
-						}
+        .send-btn {
+          margin-top: 12px;
+        }
+      }
 
-						.avatar {
-							width: 200px;
-							height: 200px;
-							display: block;
-						}
-					}
+      .group-member-list {
+        padding: 0 12px;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        text-align: center;
 
-					.send-btn {
-						margin-top: 20px;
-					}
-				}
+        .group-member {
+          margin-right: 5px;
+        }
 
-				.group-member-list {
-					padding: 5px 20px;
-					display: flex;
-					align-items: center;
-					flex-wrap: wrap;
-					font-size: 16px;
-					text-align: center;
+        .group-invite {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          width: 60px;
 
-					.group-member {
-						margin-right: 15px;
-					}
+          .invite-member-btn {
+            width: 38px;
+            height: 38px;
+            line-height: 38px;
+            border: var(--im-border);
+            font-size: 14px;
+            cursor: pointer;
+            box-sizing: border-box;
 
-					.group-invite {
-						display: flex;
-						flex-direction: column;
-						align-items: center;
-						width: 60px;
+            &:hover {
+              border: #aaaaaa solid 1px;
+            }
+          }
 
-						.invite-member-btn {
-							width: 100%;
-							height: 60px;
-							line-height: 60px;
-							border: #cccccc solid 1px;
-							font-size: 25px;
-							cursor: pointer;
-							box-sizing: border-box;
+          .invite-member-text {
+            font-size: var(--im-font-size-smaller);
+            text-align: center;
+            width: 100%;
+            height: 30px;
+            line-height: 30px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden
+          }
+        }
 
-							&:hover {
-								border: #aaaaaa solid 1px;
-							}
-						}
+      }
+    }
 
-						.invite-member-text {
-							font-size: 16px;
-							text-align: center;
-							width: 100%;
-							height: 30px;
-							line-height: 30px;
-							white-space: nowrap;
-							text-overflow: ellipsis;
-							overflow: hidden
-						}
-					}
 
-				}
-			}
-		}
-	}
-</style>
\ No newline at end of file
+  }
+}
+</style>
diff --git a/im-web/src/view/Home.vue b/im-web/src/view/Home.vue
index 8900315..050e2d8 100644
--- a/im-web/src/view/Home.vue
+++ b/im-web/src/view/Home.vue
@@ -1,431 +1,510 @@
 <template>
-	<el-container class="home-page">
-		<el-aside width="80px" class="navi-bar">
-			<div class="user-head-image">
-				<head-image :name="$store.state.userStore.userInfo.nickName"
-					:url="$store.state.userStore.userInfo.headImageThumb" :size="60"
-					@click.native="showSettingDialog = true">
-				</head-image>
-			</div>
-			<el-menu background-color="#E8F2FF" style="margin-top: 25px;">
-				<el-menu-item title="聊天">
-					<router-link class="link" v-bind:to="'/home/chat'">
-						<span class="icon iconfont icon-chat"></span>
-						<div v-show="unreadCount > 0" class="unread-text">{{ unreadCount }}</div>
-					</router-link>
-				</el-menu-item>
-				<el-menu-item title="好友">
-					<router-link class="link" v-bind:to="'/home/friend'">
-						<span class="icon iconfont icon-friend"></span>
-					</router-link>
-				</el-menu-item>
-				<el-menu-item title="群聊">
-					<router-link class="link" v-bind:to="'/home/group'">
-						<span class="icon iconfont icon-group"></span>
-					</router-link>
-				</el-menu-item>
-				<el-menu-item title="设置" @click="showSetting()">
-					<span class="icon iconfont icon-setting"></span>
-				</el-menu-item>
-			</el-menu>
-			<div class="exit-box" @click="onExit()" title="退出">
-				<span class="icon iconfont icon-exit"></span>
-			</div>
-		</el-aside>
-		<el-main class="content-box">
-			<router-view></router-view>
-		</el-main>
-		<setting :visible="showSettingDialog" @close="closeSetting()"></setting>
-		<user-info v-show="uiStore.userInfo.show" :pos="uiStore.userInfo.pos" :user="uiStore.userInfo.user"
-			@close="$store.commit('closeUserInfoBox')"></user-info>
-		<full-image :visible="uiStore.fullImage.show" :url="uiStore.fullImage.url"
-			@close="$store.commit('closeFullImageBox')"></full-image>
-		<rtc-private-video ref="rtcPrivateVideo"></rtc-private-video>
-		<rtc-group-video ref="rtcGroupVideo"></rtc-group-video>
-	</el-container>
+  <div class="home-page">
+    <div class="app-container" :class="{ fullscreen: isFullscreen }">
+      <div class="navi-bar">
+        <div class="navi-bar-box">
+          <div class="top">
+            <div class="user-head-image">
+              <head-image :name="$store.state.userStore.userInfo.nickName" :size="38"
+                :url="$store.state.userStore.userInfo.headImageThumb" @click.native="showSettingDialog = true">
+              </head-image>
+            </div>
+
+            <div class="menu">
+              <router-link class="link" v-bind:to="'/home/chat'">
+                <div class="menu-item">
+                  <span class="icon iconfont icon-chat"></span>
+                  <div v-show="unreadCount > 0" class="unread-text">{{ unreadCount }}</div>
+                </div>
+              </router-link>
+              <router-link class="link" v-bind:to="'/home/friend'">
+                <div class="menu-item">
+                  <span class="icon iconfont icon-friend"></span>
+                </div>
+              </router-link>
+              <router-link class="link" v-bind:to="'/home/group'">
+                <div class="menu-item">
+                  <span class="icon iconfont icon-group" style="font-size: 28px"></span>
+                </div>
+              </router-link>
+            </div>
+          </div>
+
+          <div class="botoom">
+            <div class="botoom-item" @click="isFullscreen = !isFullscreen">
+              <i class="el-icon-full-screen"></i>
+            </div>
+            <div class="botoom-item" @click="showSetting">
+              <span class="icon iconfont icon-setting" style="font-size: 20px"></span>
+            </div>
+            <div class="botoom-item" @click="onExit()" title="退出">
+              <span class="icon iconfont icon-exit"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content-box">
+        <router-view></router-view>
+      </div>
+      <setting :visible="showSettingDialog" @close="closeSetting()"></setting>
+      <user-info v-show="uiStore.userInfo.show" :pos="uiStore.userInfo.pos" :user="uiStore.userInfo.user"
+        @close="$store.commit('closeUserInfoBox')"></user-info>
+      <full-image :visible="uiStore.fullImage.show" :url="uiStore.fullImage.url"
+        @close="$store.commit('closeFullImageBox')"></full-image>
+      <rtc-private-video ref="rtcPrivateVideo"></rtc-private-video>
+      <rtc-group-video ref="rtcGroupVideo"></rtc-group-video>
+    </div>
+  </div>
 </template>
 
 <script>
-	import HeadImage from '../components/common/HeadImage.vue';
-	import Setting from '../components/setting/Setting.vue';
-	import UserInfo from '../components/common/UserInfo.vue';
-	import FullImage from '../components/common/FullImage.vue';
-	import RtcPrivateVideo from '../components/rtc/RtcPrivateVideo.vue';
-	import RtcPrivateAcceptor from '../components/rtc/RtcPrivateAcceptor.vue';
-	import RtcGroupVideo from '../components/rtc/RtcGroupVideo.vue';
+import HeadImage from '../components/common/HeadImage.vue';
+import Setting from '../components/setting/Setting.vue';
+import UserInfo from '../components/common/UserInfo.vue';
+import FullImage from '../components/common/FullImage.vue';
+import RtcPrivateVideo from '../components/rtc/RtcPrivateVideo.vue';
+import RtcPrivateAcceptor from '../components/rtc/RtcPrivateAcceptor.vue';
+import RtcGroupVideo from '../components/rtc/RtcGroupVideo.vue';
+
+export default {
+  components: {
+    HeadImage,
+    Setting,
+    UserInfo,
+    FullImage,
+    RtcPrivateVideo,
+    RtcPrivateAcceptor,
+    RtcGroupVideo
+  },
+  data() {
+    return {
+      showSettingDialog: false,
+      lastPlayAudioTime: new Date().getTime() - 1000,
+      isFullscreen: true
+    }
+  },
+  methods: {
+    init() {
+      this.$eventBus.$on('openPrivateVideo', (rctInfo) => {
+        // 进入单人视频通话
+        this.$refs.rtcPrivateVideo.open(rctInfo);
+      });
+      this.$eventBus.$on('openGroupVideo', (rctInfo) => {
+        // 进入多人视频通话
+        this.$refs.rtcGroupVideo.open(rctInfo);
+      });
+
+      this.$store.dispatch("load").then(() => {
+        // ws初始化
+        this.$wsApi.connect(process.env.VUE_APP_WS_URL, sessionStorage.getItem("accessToken"));
+        this.$wsApi.onConnect(() => {
+          // 加载离线消息
+          this.pullPrivateOfflineMessage(this.$store.state.chatStore.privateMsgMaxId);
+          this.pullGroupOfflineMessage(this.$store.state.chatStore.groupMsgMaxId);
+        });
+        this.$wsApi.onMessage((cmd, msgInfo) => {
+          if (cmd == 2) {
+            // 关闭ws
+            this.$wsApi.close(3000)
+            // 异地登录，强制下线
+            this.$alert("您已在其他地方登陆，将被强制下线", "强制下线通知", {
+              confirmButtonText: '确定',
+              callback: action => {
+                location.href = "/";
+              }
+            });
 
-	export default {
-		components: {
-			HeadImage,
-			Setting,
-			UserInfo,
-			FullImage,
-			RtcPrivateVideo,
-			RtcPrivateAcceptor,
-			RtcGroupVideo
-		},
-		data() {
-			return {
-				showSettingDialog: false,
-				lastPlayAudioTime: new Date().getTime() - 1000
-			}
-		},
-		methods: {
-			init() {
-				this.$eventBus.$on('openPrivateVideo', (rctInfo) => {
-					// 进入单人视频通话
-					this.$refs.rtcPrivateVideo.open(rctInfo);
-				});
-				this.$eventBus.$on('openGroupVideo', (rctInfo) => {
-					// 进入多人视频通话
-					this.$refs.rtcGroupVideo.open(rctInfo);
-				});
+          } else if (cmd == 3) {
+            // 插入私聊消息
+            this.handlePrivateMessage(msgInfo);
+          } else if (cmd == 4) {
+            // 插入群聊消息
+            this.handleGroupMessage(msgInfo);
+          } else if (cmd == 5) {
+            // 处理系统消息
+            this.handleSystemMessage(msgInfo);
+          }
+        });
+        this.$wsApi.onClose((e) => {
+          console.log(e);
+          if (e.code != 3000) {
+            // 断线重连
+            this.$message.error("连接断开，正在尝试重新连接...");
+            this.$wsApi.reconnect(process.env.VUE_APP_WS_URL, sessionStorage.getItem(
+              "accessToken"));
+          }
+        });
+      }).catch((e) => {
+        console.log("初始化失败", e);
+      })
+    },
+    pullPrivateOfflineMessage(minId) {
+      this.$store.commit("loadingPrivateMsg", true)
+      this.$http({
+        url: "/message/private/pullOfflineMessage?minId=" + minId,
+        method: 'GET'
+      }).catch(() => {
+        this.$store.commit("loadingPrivateMsg", false)
+      })
+    },
+    pullGroupOfflineMessage(minId) {
+      this.$store.commit("loadingGroupMsg", true)
+      this.$http({
+        url: "/message/group/pullOfflineMessage?minId=" + minId,
+        method: 'GET'
+      }).catch(() => {
+        this.$store.commit("loadingGroupMsg", false)
+      })
+    },
+    handlePrivateMessage(msg) {
+      // 消息加载标志
+      if (msg.type == this.$enums.MESSAGE_TYPE.LOADING) {
+        this.$store.commit("loadingPrivateMsg", JSON.parse(msg.content))
+        return;
+      }
+      // 消息已读处理，清空已读数量
+      if (msg.type == this.$enums.MESSAGE_TYPE.READED) {
+        this.$store.commit("resetUnreadCount", {
+          type: 'PRIVATE',
+          targetId: msg.recvId
+        })
+        return;
+      }
+      // 消息回执处理,改消息状态为已读
+      if (msg.type == this.$enums.MESSAGE_TYPE.RECEIPT) {
+        this.$store.commit("readedMessage", {
+          friendId: msg.sendId
+        })
+        return;
+      }
+      // 标记这条消息是不是自己发的
+      msg.selfSend = msg.sendId == this.$store.state.userStore.userInfo.id;
+      // 单人webrtc 信令
+      if (this.$msgType.isRtcPrivate(msg.type)) {
+        this.$refs.rtcPrivateVideo.onRTCMessage(msg)
+        return;
+      }
+      // 好友id
+      let friendId = msg.selfSend ? msg.recvId : msg.sendId;
+      this.loadFriendInfo(friendId).then((friend) => {
+        this.insertPrivateMessage(friend, msg);
+      })
+    },
+    insertPrivateMessage(friend, msg) {
 
-				this.$store.dispatch("load").then(() => {
-					// ws初始化
-					this.$wsApi.connect(process.env.VUE_APP_WS_URL, sessionStorage.getItem("accessToken"));
-					this.$wsApi.onConnect(() => {
-						// 加载离线消息
-						this.pullPrivateOfflineMessage(this.$store.state.chatStore.privateMsgMaxId);
-						this.pullGroupOfflineMessage(this.$store.state.chatStore.groupMsgMaxId);
-					});
-					this.$wsApi.onMessage((cmd, msgInfo) => {
-						if (cmd == 2) {
-							// 关闭ws
-							this.$wsApi.close(3000)
-							// 异地登录，强制下线
-							this.$alert("您已在其他地方登陆，将被强制下线", "强制下线通知", {
-								confirmButtonText: '确定',
-								callback: action => {
-									location.href = "/";
-								}
-							});
+      let chatInfo = {
+        type: 'PRIVATE',
+        targetId: friend.id,
+        showName: friend.nickName,
+        headImage: friend.headImage
+      };
+      // 打开会话
+      this.$store.commit("openChat", chatInfo);
+      // 插入消息
+      this.$store.commit("insertMessage", msg);
+      // 播放提示音
+      if (!msg.selfSend && this.$msgType.isNormal(msg.type) &&
+        msg.status != this.$enums.MESSAGE_STATUS.READED) {
+        this.playAudioTip();
+      }
+    },
+    handleGroupMessage(msg) {
+      // 消息加载标志
+      if (msg.type == this.$enums.MESSAGE_TYPE.LOADING) {
+        this.$store.commit("loadingGroupMsg", JSON.parse(msg.content))
+        return;
+      }
+      // 消息已读处理
+      if (msg.type == this.$enums.MESSAGE_TYPE.READED) {
+        // 我已读对方的消息，清空已读数量
+        let chatInfo = {
+          type: 'GROUP',
+          targetId: msg.groupId
+        }
+        this.$store.commit("resetUnreadCount", chatInfo)
+        return;
+      }
+      // 消息回执处理
+      if (msg.type == this.$enums.MESSAGE_TYPE.RECEIPT) {
+        // 更新消息已读人数
+        let msgInfo = {
+          id: msg.id,
+          groupId: msg.groupId,
+          readedCount: msg.readedCount,
+          receiptOk: msg.receiptOk
+        };
+        this.$store.commit("updateMessage", msgInfo)
+        return;
+      }
+      // 标记这条消息是不是自己发的
+      msg.selfSend = msg.sendId == this.$store.state.userStore.userInfo.id;
+      // 群视频信令
+      if (this.$msgType.isRtcGroup(msg.type)) {
+        this.$nextTick(() => {
+          this.$refs.rtcGroupVideo.onRTCMessage(msg);
+        })
+        return;
+      }
+      this.loadGroupInfo(msg.groupId).then((group) => {
+        // 插入群聊消息
+        this.insertGroupMessage(group, msg);
+      })
+    },
+    insertGroupMessage(group, msg) {
 
-						} else if (cmd == 3) {
-							// 插入私聊消息
-							this.handlePrivateMessage(msgInfo);
-						} else if (cmd == 4) {
-							// 插入群聊消息
-							this.handleGroupMessage(msgInfo);
-						} else if (cmd == 5){
-							// 处理系统消息
-							this.handleSystemMessage(msgInfo);
-						}
-					});
-					this.$wsApi.onClose((e) => {
-						console.log(e);
-						if (e.code != 3000) {
-							// 断线重连
-							this.$message.error("连接断开，正在尝试重新连接...");
-							this.$wsApi.reconnect(process.env.VUE_APP_WS_URL, sessionStorage.getItem(
-								"accessToken"));
-						}
-					});
-				}).catch((e) => {
-					console.log("初始化失败", e);
-				})
-			},
-			pullPrivateOfflineMessage(minId) {
-				this.$store.commit("loadingPrivateMsg", true)
-				this.$http({
-					url: "/message/private/pullOfflineMessage?minId=" + minId,
-					method: 'GET'
-				}).catch(() => {
-					this.$store.commit("loadingPrivateMsg", false)
-				})
-			},
-			pullGroupOfflineMessage(minId) {
-				this.$store.commit("loadingGroupMsg", true)
-				this.$http({
-					url: "/message/group/pullOfflineMessage?minId=" + minId,
-					method: 'GET'
-				}).catch(() => {
-					this.$store.commit("loadingGroupMsg", false)
-				})
-			},
-			handlePrivateMessage(msg) {
-				// 消息加载标志
-				if (msg.type == this.$enums.MESSAGE_TYPE.LOADING) {
-					this.$store.commit("loadingPrivateMsg", JSON.parse(msg.content))
-					return;
-				}
-				// 消息已读处理，清空已读数量
-				if (msg.type == this.$enums.MESSAGE_TYPE.READED) {
-					this.$store.commit("resetUnreadCount", {
-						type: 'PRIVATE',
-						targetId: msg.recvId
-					})
-					return;
-				}
-				// 消息回执处理,改消息状态为已读
-				if (msg.type == this.$enums.MESSAGE_TYPE.RECEIPT) {
-					this.$store.commit("readedMessage", {
-						friendId: msg.sendId
-					})
-					return;
-				}
-				// 标记这条消息是不是自己发的
-				msg.selfSend = msg.sendId == this.$store.state.userStore.userInfo.id;
-				// 单人webrtc 信令
-				if (this.$msgType.isRtcPrivate(msg.type)) {
-					this.$refs.rtcPrivateVideo.onRTCMessage(msg)
-					return;
-				}
-				// 好友id
-				let friendId = msg.selfSend ? msg.recvId : msg.sendId;
-				this.loadFriendInfo(friendId).then((friend) => {
-					this.insertPrivateMessage(friend, msg);
-				})
-			},
-			insertPrivateMessage(friend, msg) {
-				let chatInfo = {
-					type: 'PRIVATE',
-					targetId: friend.id,
-					showName: friend.nickName,
-					headImage: friend.headImage
-				};
-				// 打开会话
-				this.$store.commit("openChat", chatInfo);
-				// 插入消息
-				this.$store.commit("insertMessage", msg);
-				// 播放提示音
-				if (!msg.selfSend && this.$msgType.isNormal(msg.type) &&
-					msg.status != this.$enums.MESSAGE_STATUS.READED) {
-					this.playAudioTip();
-				}
-			},
-			handleGroupMessage(msg) {
-				// 消息加载标志
-				if (msg.type == this.$enums.MESSAGE_TYPE.LOADING) {
-					this.$store.commit("loadingGroupMsg", JSON.parse(msg.content))
-					return;
-				}
-				// 消息已读处理
-				if (msg.type == this.$enums.MESSAGE_TYPE.READED) {
-					// 我已读对方的消息，清空已读数量
-					let chatInfo = {
-						type: 'GROUP',
-						targetId: msg.groupId
-					}
-					this.$store.commit("resetUnreadCount", chatInfo)
-					return;
-				}
-				// 消息回执处理
-				if (msg.type == this.$enums.MESSAGE_TYPE.RECEIPT) {
-					// 更新消息已读人数
-					let msgInfo = {
-						id: msg.id,
-						groupId: msg.groupId,
-						readedCount: msg.readedCount,
-						receiptOk: msg.receiptOk
-					};
-					this.$store.commit("updateMessage", msgInfo)
-					return;
-				}
-				// 标记这条消息是不是自己发的
-				msg.selfSend = msg.sendId == this.$store.state.userStore.userInfo.id;
-				// 群视频信令
-				if (this.$msgType.isRtcGroup(msg.type)) {
-					this.$nextTick(() => {
-						this.$refs.rtcGroupVideo.onRTCMessage(msg);
-					})
-					return;
-				}
-				this.loadGroupInfo(msg.groupId).then((group) => {
-					// 插入群聊消息
-					this.insertGroupMessage(group, msg);
-				})
-			},
-			insertGroupMessage(group, msg) {
-				let chatInfo = {
-					type: 'GROUP',
-					targetId: group.id,
-					showName: group.showGroupName,
-					headImage: group.headImageThumb
-				};
-				// 打开会话
-				this.$store.commit("openChat", chatInfo);
-				// 插入消息
-				this.$store.commit("insertMessage", msg);
-				// 播放提示音
-				if (!msg.selfSend && msg.type <= this.$enums.MESSAGE_TYPE.VIDEO &&
-					msg.status != this.$enums.MESSAGE_STATUS.READED) {
-					this.playAudioTip();
-				}
-			},
-			handleSystemMessage(msg){
-				// 用户被封禁
-				if (msg.type == this.$enums.MESSAGE_TYPE.USER_BANNED) {
-					this.$wsApi.close(3000);
-					this.$alert("您的账号已被管理员封禁,原因:"+ msg.content, "账号被封禁", {
-						confirmButtonText: '确定',
-						callback: action => {
-							this.onExit();
-						}
-					});
-					return;
-				}
-			},
-			onExit() {
-				this.$wsApi.close(3000);
-				sessionStorage.removeItem("accessToken");
-				location.href = "/";
-			},
-			playAudioTip() {
-				// 离线消息不播放铃声
-				if(this.$store.getters.isLoading()){
-					return;
-				}
-				// 防止过于密集播放
-				if (new Date().getTime() - this.lastPlayAudioTime > 1000) {
-					this.lastPlayAudioTime = new Date().getTime();
-					let audio = new Audio();
-					let url = require(`@/assets/audio/tip.wav`);
-					audio.src = url;
-					audio.play();
-				}
-			},
-			showSetting() {
-				this.showSettingDialog = true;
-			},
-			closeSetting() {
-				this.showSettingDialog = false;
-			},
-			loadFriendInfo(id) {
-				return new Promise((resolve, reject) => {
-					let friend = this.$store.state.friendStore.friends.find((f) => f.id == id);
-					if (friend) {
-						resolve(friend);
-					} else {
-						this.$http({
-							url: `/friend/find/${id}`,
-							method: 'get'
-						}).then((friend) => {
-							this.$store.commit("addFriend", friend);
-							resolve(friend)
-						})
-					}
-				});
-			},
-			loadGroupInfo(id) {
-				return new Promise((resolve, reject) => {
-					let group = this.$store.state.groupStore.groups.find((g) => g.id == id);
-					if (group) {
-						resolve(group);
-					} else {
-						this.$http({
-							url: `/group/find/${id}`,
-							method: 'get'
-						}).then((group) => {
-							resolve(group)
-							this.$store.commit("addGroup", group);
-						})
-					}
-				});
-			}
-		},
-		computed: {
-			uiStore() {
-				return this.$store.state.uiStore;
-			},
-			unreadCount() {
-				let unreadCount = 0;
-				let chats = this.$store.state.chatStore.chats;
-				chats.forEach((chat) => {
-					if(!chat.delete){
-						unreadCount += chat.unreadCount
-					}
-				});
-				return unreadCount;
-			}
-		},
-		watch: {
-			unreadCount: {
-				handler(newCount, oldCount) {
-					let tip = newCount > 0 ? `${newCount}条未读` : "";
-					this.$elm.setTitleTip(tip);
-				},
-				immediate: true
-			}
-		},
-		mounted() {
-			this.init();
-		},
-		unmounted() {
-			this.$wsApi.close();
-		}
-	}
+      let chatInfo = {
+        type: 'GROUP',
+        targetId: group.id,
+        showName: group.showGroupName,
+        headImage: group.headImageThumb
+      };
+      // 打开会话
+      this.$store.commit("openChat", chatInfo);
+      // 插入消息
+      this.$store.commit("insertMessage", msg);
+      // 播放提示音
+      if (!msg.selfSend && msg.type <= this.$enums.MESSAGE_TYPE.VIDEO &&
+        msg.status != this.$enums.MESSAGE_STATUS.READED) {
+        this.playAudioTip();
+      }
+    },
+    handleSystemMessage(msg) {
+      // 用户被封禁
+
+      if (msg.type == this.$enums.MESSAGE_TYPE.USER_BANNED) {
+        this.$wsApi.close(3000);
+        this.$alert("您的账号已被管理员封禁,原因:" + msg.content, "账号被封禁", {
+          confirmButtonText: '确定',
+          callback: action => {
+            this.onExit();
+          }
+        });
+        return;
+      }
+    },
+    onExit() {
+      this.$wsApi.close(3000);
+      sessionStorage.removeItem("accessToken");
+      location.href = "/";
+    },
+    playAudioTip() {
+      // 离线消息不播放铃声
+      if (this.$store.getters.isLoading()) {
+        return;
+      }
+      // 防止过于密集播放
+      if (new Date().getTime() - this.lastPlayAudioTime > 1000) {
+        this.lastPlayAudioTime = new Date().getTime();
+        let audio = new Audio();
+        let url = require(`@/assets/audio/tip.wav`);
+        audio.src = url;
+        audio.play();
+      }
+
+    },
+    showSetting() {
+      this.showSettingDialog = true;
+    },
+    closeSetting() {
+      this.showSettingDialog = false;
+    },
+    loadFriendInfo(id) {
+      return new Promise((resolve, reject) => {
+        let friend = this.$store.state.friendStore.friends.find((f) => f.id == id);
+        if (friend) {
+          resolve(friend);
+        } else {
+          this.$http({
+            url: `/friend/find/${id}`,
+            method: 'get'
+          }).then((friend) => {
+            this.$store.commit("addFriend", friend);
+            resolve(friend)
+          })
+        }
+      });
+    },
+    loadGroupInfo(id) {
+      return new Promise((resolve, reject) => {
+        let group = this.$store.state.groupStore.groups.find((g) => g.id == id);
+        if (group) {
+          resolve(group);
+        } else {
+          this.$http({
+            url: `/group/find/${id}`,
+            method: 'get'
+          }).then((group) => {
+            resolve(group)
+            this.$store.commit("addGroup", group);
+          })
+        }
+      });
+    }
+  },
+  computed: {
+    uiStore() {
+      return this.$store.state.uiStore;
+    },
+    unreadCount() {
+      let unreadCount = 0;
+      let chats = this.$store.state.chatStore.chats;
+      chats.forEach((chat) => {
+        if (!chat.delete) {
+          unreadCount += chat.unreadCount
+        }
+      });
+      return unreadCount;
+    }
+  },
+  watch: {
+    unreadCount: {
+      handler(newCount, oldCount) {
+        let tip = newCount > 0 ? `${newCount}条未读` : "";
+        this.$elm.setTitleTip(tip);
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  unmounted() {
+    this.$wsApi.close();
+  }
+}
 </script>
 
 <style scoped lang="scss">
-	.navi-bar {
-		background: #E8F2FF;
-		padding: 10px;
-		padding-top: 20px;
-		border-right: #53a0e79c solid 1px;
-		
-		.el-menu {
-			border: none;
-			flex: 1;
+.home-page {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--im-color-primary-light-9);
+  //background-image: url('../assets/image/background.jpg');
+
+  .app-container {
+    width: 62vw;
+    height: 80vh;
+    display: flex;
+    min-height: 600px;
+    min-width: 970px;
+    position: absolute;
+    border-radius: 4px;
+    overflow: hidden;
+    box-shadow: var(--im-box-shadow-dark);
+    transition: 0.2s;
+
+    &.fullscreen {
+      transition: 0.2s;
+      width: 100vw;
+      height: 100vh;
+    }
+  }
+
+  .navi-bar {
+    --icon-font-size: 22px;
+    --width: 60px;
+    width: var(--width);
+    background: var(--im-color-primary-light-1);
+    padding-top: 20px;
+
+    .navi-bar-box {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .botoom {
+        margin-bottom: 30px;
+      }
+    }
+
+    .user-head-image {
+      display: flex;
+      justify-content: center;
+    }
+
+    .menu {
+      height: 200px;
+      //margin-top: 10px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-content: center;
+
+      .link {
+        text-decoration: none;
+      }
+
+      .router-link-active .menu-item {
+        color: #fff;
+        background: var(--im-color-primary-light-2);
+      }
 
-			.el-menu-item {
-				margin: 25px 0;
-				background-color: #E8F2FF !important;
-				padding: 0 !important;
-				text-align: center;
+      .link:not(.router-link-active) .menu-item:hover {
+        color: var(--im-color-primary-light-7);
+      }
 
-				.link {
-					text-decoration: none;
-						
-					&.router-link-active .icon {
-						color: #195ee2;
-						font-size: 28px;
-					}
-				}
+      .menu-item {
+        position: relative;
+        color: var(--im-color-primary-light-4);
+        width: var(--width);
+        height: 46px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 12px;
 
-				.icon {
-					font-size: 26px;
-					color: #666;
-				}
+        .icon {
+          font-size: var(--icon-font-size)
+        }
 
-				.unread-text {
-					position: absolute;
-					line-height: 20px;
-					background-color: #f56c6c;
-					left: 36px;
-					top: 7px;
-					color: white;
-					border-radius: 30px;
-					padding: 0 5px;
-					font-size: 10px;
-					text-align: center;
-					white-space: nowrap;
-					border: 1px solid #f1e5e5;
-				}
-			}
-		}
+        .unread-text {
+          position: absolute;
+          background-color: var(--im-color-danger);
+          left: 28px;
+          top: 8px;
+          color: white;
+          border-radius: 30px;
+          padding: 0 5px;
+          font-size: var(--im-font-size-smaller);
+          text-align: center;
+          white-space: nowrap;
+          border: 1px solid #f1e5e5;
+        }
+      }
+    }
 
-		.exit-box {
-			position: absolute;
-			width: 60px;
-			bottom: 40px;
-			text-align: center;
-			cursor: pointer;
+    .botoom-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 50px;
+      width: 100%;
+      cursor: pointer;
+      color: var(--im-color-primary-light-4);
+      font-size: var(--icon-font-size);
 
-			.icon {
-				font-size: 28px;
-			}
+      .icon {
+        font-size: var(--icon-font-size)
+      }
 
-			&:hover {
-				font-weight: 600;
-			}
-		}
-	}
+      &:hover {
+        font-weight: 600;
+        color: var(--im-color-primary-light-7);
+      }
+    }
+  }
 
-	.content-box {
-		padding: 0;
-		background-color: #f8f8f8;
-		color: black;
-		text-align: center;
-	}
-</style>
\ No newline at end of file
+  .content-box {
+    flex: 1;
+    padding: 0;
+    background-color: #fff;
+    text-align: center;
+  }
+}
+</style>
diff --git a/im-web/src/view/Login.vue b/im-web/src/view/Login.vue
index 6809a5a..b44c354 100644
--- a/im-web/src/view/Login.vue
+++ b/im-web/src/view/Login.vue
@@ -3,14 +3,16 @@
 		<div class="login-content">
 			<el-form class="login-form" :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="60px"
 				@keyup.enter.native="submitForm('loginForm')">
-				<div class="login-brand">登陆盒子IM</div>
+				<div class="login-brand">
+					<img class="logo" src="../../public/logo.png" />
+					<div>登陆盒子IM</div>
+				</div>
 				<el-form-item label="终端" prop="userName" v-show="false">
 					<el-input type="terminal" v-model="loginForm.terminal" autocomplete="off"></el-input>
 				</el-form-item>
 				<el-form-item label="用户名" prop="userName">
 					<el-input type="userName" v-model="loginForm.userName" autocomplete="off"
 						placeholder="用户名"></el-input>
-
 				</el-form-item>
 				<el-form-item label="密码" prop="password">
 					<el-input type="password" v-model="loginForm.password" autocomplete="off"
@@ -27,140 +29,148 @@
 		</div>
 		<icp></icp>
 	</div>
-
 </template>
 
 <script>
-	import Icp from '../components/common/Icp.vue'
-	export default {
-		name: "login",
-		components: {
-			Icp
-		},
-		data() {
-			var checkUsername = (rule, value, callback) => {
-				if (!value) {
-					return callback(new Error('请输入用户名'));
-				}
-				callback();
-			};
-			var checkPassword = (rule, value, callback) => {
-				if (value === '') {
-					callback(new Error('请输入密码'));
-				}
-				callback();
-
-			};
-			return {
-				loginForm: {
-					terminal: this.$enums.TERMINAL_TYPE.WEB,
-					userName: '',
-					password: ''
-				},
-				rules: {
-					userName: [{
-						validator: checkUsername,
-						trigger: 'blur'
-					}],
-					password: [{
-						validator: checkPassword,
-						trigger: 'blur'
-					}]
-				}
-			};
-		},
-		methods: {
-			submitForm(formName) {
-				this.$refs[formName].validate((valid) => {
-					if (valid) {
-						this.$http({
-								url: "/login",
-								method: 'post',
-								data: this.loginForm
-							})
-							.then((data) => {
-								// 保存密码到cookie(不安全)
-								this.setCookie('username', this.loginForm.userName);
-								this.setCookie('password', this.loginForm.password);
-								// 保存token
-								sessionStorage.setItem("accessToken", data.accessToken);
-								sessionStorage.setItem("refreshToken", data.refreshToken);
-								this.$message.success("登陆成功");
-								this.$router.push("/home/chat");
-							})
+import Icp from '../components/common/Icp.vue'
+export default {
+	name: "login",
+	components: {
+		Icp
+	},
+	data() {
+		var checkUsername = (rule, value, callback) => {
+			if (!value) {
+				return callback(new Error('请输入用户名'));
+			}
+			callback();
+		};
+		var checkPassword = (rule, value, callback) => {
+			if (value === '') {
+				callback(new Error('请输入密码'));
+			}
+			callback();
 
-					}
-				});
+		};
+		return {
+			loginForm: {
+				terminal: this.$enums.TERMINAL_TYPE.WEB,
+				userName: '',
+				password: ''
 			},
-			resetForm(formName) {
-				this.$refs[formName].resetFields();
-			},
-			getCookie(name) {
-				let reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
-				let arr = document.cookie.match(reg)
-				if (arr) {
-					return unescape(arr[2]);
-				}
-				return '';
-			},
-			setCookie(name, value) {
-				document.cookie = name + "=" + escape(value);
+			rules: {
+				userName: [{
+					validator: checkUsername,
+					trigger: 'blur'
+				}],
+				password: [{
+					validator: checkPassword,
+					trigger: 'blur'
+				}]
 			}
+		};
+	},
+	methods: {
+		submitForm(formName) {
+			this.$refs[formName].validate((valid) => {
+				if (valid) {
+					this.$http({
+						url: "/login",
+						method: 'post',
+						data: this.loginForm
+					})
+						.then((data) => {
+							// 保存密码到cookie(不安全)
+							this.setCookie('username', this.loginForm.userName);
+							this.setCookie('password', this.loginForm.password);
+							// 保存token
+							sessionStorage.setItem("accessToken", data.accessToken);
+							sessionStorage.setItem("refreshToken", data.refreshToken);
+							this.$message.success("登陆成功");
+							this.$router.push("/home/chat");
+						})
 
+				}
+			});
+		},
+		resetForm(formName) {
+			this.$refs[formName].resetFields();
 		},
-		mounted() {
-			this.loginForm.userName = this.getCookie("username");
-			// cookie存密码并不安全，暂时是为了方便
-			this.loginForm.password = this.getCookie("password");
+		getCookie(name) {
+			let reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
+			let arr = document.cookie.match(reg)
+			if (arr) {
+				return unescape(arr[2]);
+			}
+			return '';
+		},
+		setCookie(name, value) {
+			document.cookie = name + "=" + escape(value);
 		}
+
+	},
+	mounted() {
+		this.loginForm.userName = this.getCookie("username");
+		// cookie存密码并不安全，暂时是为了方便
+		this.loginForm.password = this.getCookie("password");
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	.login-view {
-		width: 100%;
-		height: 100%;
-		background: #E8F2FF;
-		background-size: cover;
-		box-sizing: border-box;
+.login-view {
+	width: 100%;
+	height: 100%;
+	background: #E8F2FF;
+	background-size: cover;
+	box-sizing: border-box;
 
 
-		.login-content {
-			position: relative;
-			display: flex;
-			justify-content: space-around;
-			align-items: center;
-			padding: 10%;
+	.login-content {
+		position: relative;
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		padding: 10%;
 
-			.login-form {
-				height: 340px;
-				width: 400px;
-				padding: 30px;
-				background: white;
-				opacity: 0.9;
-				box-shadow: 0px 0px 1px #ccc;
-				border-radius: 3%;
-				overflow: hidden;
-				border: 1px solid #ccc;
+		.login-form {
+			height: 340px;
+			width: 400px;
+			padding: 30px;
+			background: white;
+			opacity: 0.9;
+			box-shadow: 0px 0px 1px #ccc;
+			border-radius: 3%;
+			overflow: hidden;
+			border: 1px solid #ccc;
 
-				.login-brand {
-					line-height: 50px;
-					margin: 30px 0 40px 0;
-					font-size: 22px;
-					font-weight: 600;
-					letter-spacing: 2px;
-					text-transform: uppercase;
-					text-align: center;
-				}
+			.login-brand {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				line-height: 50px;
+				margin: 30px 0 40px 0;
+				font-size: 22px;
+				font-weight: 600;
+				letter-spacing: 2px;
+				text-transform: uppercase;
+				text-align: center;
 
-				.register {
-					display: flex;
-					flex-direction: row-reverse;
-					line-height: 40px;
-					text-align: left;
-					padding-left: 20px;
+				.logo {
+					width: 30px;
+					height: 30px;
+					margin-right: 10px;
 				}
 			}
+
+			.register {
+				display: flex;
+				flex-direction: row-reverse;
+				line-height: 40px;
+				text-align: left;
+				padding-left: 20px;
+			}
 		}
 	}
+}
 </style>
\ No newline at end of file
diff --git a/im-web/src/view/Register.vue b/im-web/src/view/Register.vue
index c35c4d2..4476ce9 100644
--- a/im-web/src/view/Register.vue
+++ b/im-web/src/view/Register.vue
@@ -1,19 +1,27 @@
 <template>
 	<el-container class="register-view">
 		<div>
-			<el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="80px" class="web-ruleForm">
-				<div class="register-brand">欢迎成为盒子IM的用户</div>
+			<el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="80px"
+				class="web-ruleForm">
+				<div class="register-brand">
+					<img class="logo" src="../../public/logo.png" />
+					<div>欢迎成为盒子IM的用户</div>
+				</div>
 				<el-form-item label="用户名" prop="userName">
-					<el-input type="userName" v-model="registerForm.userName" autocomplete="off" placeholder="用户名(登录使用)"></el-input>
+					<el-input type="userName" v-model="registerForm.userName" autocomplete="off"
+						placeholder="用户名(登录使用)"></el-input>
 				</el-form-item>
 				<el-form-item label="昵称" prop="nickName">
-					<el-input type="nickName" v-model="registerForm.nickName" autocomplete="off" placeholder="昵称"></el-input>
+					<el-input type="nickName" v-model="registerForm.nickName" autocomplete="off"
+						placeholder="昵称"></el-input>
 				</el-form-item>
 				<el-form-item label="密码" prop="password">
-					<el-input type="password" v-model="registerForm.password" autocomplete="off" placeholder="密码"></el-input>
+					<el-input type="password" v-model="registerForm.password" autocomplete="off"
+						placeholder="密码"></el-input>
 				</el-form-item>
 				<el-form-item label="确认密码" prop="confirmPassword">
-					<el-input type="password" v-model="registerForm.confirmPassword" autocomplete="off" placeholder="确认密码"></el-input>
+					<el-input type="password" v-model="registerForm.confirmPassword" autocomplete="off"
+						placeholder="确认密码"></el-input>
 				</el-form-item>
 				<el-form-item>
 					<el-button type="primary" @click="submitForm('registerForm')">注册</el-button>
@@ -29,134 +37,139 @@
 </template>
 
 <script>
-	import Icp from '../components/common/Icp.vue'
-	export default {
-		name: "login",
-		components: {
-			Icp
-		},
-		data() {
-			var checkUserName = (rule, value, callback) => {
-				if (!value) {
-					return callback(new Error('请输入用户名'));
-				}
-				callback();
-			};
-			var checkNickName = (rule, value, callback) => {
-				if (!value) {
-					return callback(new Error('请输入昵称'));
-				}
-				callback();
-			};
-			var checkPassword = (rule, value, callback) => {
-				if (value === '') {
-					return callback(new Error('请输入密码'));
-				}
-				callback();
-			};
+import Icp from '../components/common/Icp.vue'
+export default {
+	name: "login",
+	components: {
+		Icp
+	},
+	data() {
+		var checkUserName = (rule, value, callback) => {
+			if (!value) {
+				return callback(new Error('请输入用户名'));
+			}
+			callback();
+		};
+		var checkNickName = (rule, value, callback) => {
+			if (!value) {
+				return callback(new Error('请输入昵称'));
+			}
+			callback();
+		};
+		var checkPassword = (rule, value, callback) => {
+			if (value === '') {
+				return callback(new Error('请输入密码'));
+			}
+			callback();
+		};
 
-			var checkConfirmPassword = (rule, value, callback) => {
-				if (value === '') {
-					return callback(new Error('请输入密码'));
-				}
-				if (value != this.registerForm.password) {
-					return callback(new Error('两次密码输入不一致'));
-				}
-				callback();
-			};
+		var checkConfirmPassword = (rule, value, callback) => {
+			if (value === '') {
+				return callback(new Error('请输入密码'));
+			}
+			if (value != this.registerForm.password) {
+				return callback(new Error('两次密码输入不一致'));
+			}
+			callback();
+		};
 
 
-			return {
-				registerForm: {
-					userName: '',
-					nickName: '',
-					password: '',
-					confirmPassword: ''
-				},
-				rules: {
-					userName: [{
-						validator: checkUserName,
-						trigger: 'blur'
-					}],
-					nickName: [{
-						validator: checkNickName,
-						trigger: 'blur'
-					}],
-					password: [{
-						validator: checkPassword,
-						trigger: 'blur'
-					}],
-					confirmPassword: [{
-						validator: checkConfirmPassword,
-						trigger: 'blur'
-					}]
-				}
-			};
-		},
-		methods: {
-			submitForm(formName) {
-				this.$refs[formName].validate((valid) => {
-					if (valid) {
-						this.$http({
-								url: "/register",
-								method: 'post',
-								data: this.registerForm
-							})
-							.then((data) => {
-								this.$message.success("注册成功!");
-							})
-					}
-				});
+		return {
+			registerForm: {
+				userName: '',
+				nickName: '',
+				password: '',
+				confirmPassword: ''
 			},
-			resetForm(formName) {
-				this.$refs[formName].resetFields();
+			rules: {
+				userName: [{
+					validator: checkUserName,
+					trigger: 'blur'
+				}],
+				nickName: [{
+					validator: checkNickName,
+					trigger: 'blur'
+				}],
+				password: [{
+					validator: checkPassword,
+					trigger: 'blur'
+				}],
+				confirmPassword: [{
+					validator: checkConfirmPassword,
+					trigger: 'blur'
+				}]
 			}
+		};
+	},
+	methods: {
+		submitForm(formName) {
+			this.$refs[formName].validate((valid) => {
+				if (valid) {
+					this.$http({
+						url: "/register",
+						method: 'post',
+						data: this.registerForm
+					})
+						.then((data) => {
+							this.$message.success("注册成功!");
+						})
+				}
+			});
+		},
+		resetForm(formName) {
+			this.$refs[formName].resetFields();
 		}
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	.register-view {
-		position: fixed;
-		display: flex;
-		justify-content: space-around;
-		align-items: center;
-		width: 100%;
-		height: 100%;
-		background: rgb(232, 242, 255);
-		
-		.web-ruleForm {
-			width: 500px;
-			height: 450px;
-			padding: 20px;
-			background: white;
-			opacity: 0.9;
-			box-shadow: 0px 0px  1px #ccc;
-			border-radius: 3px;
-			overflow: hidden;
-			border-radius: 3%;
-			
-			.register-brand {
-				line-height: 50px;
-				margin: 20px 0 30px 0;
-				font-size: 22px;
-				font-weight: 600;
-				letter-spacing: 2px;
-				text-align: center;
-				text-transform: uppercase;
-			}
-			
-			.to-login {
-				display: flex;
-				flex-direction: row-reverse;
-				line-height: 40px;
-				text-align: left;
-				padding-left: 20px;
+.register-view {
+	position: fixed;
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	background: rgb(232, 242, 255);
+
+	.web-ruleForm {
+		width: 500px;
+		height: 450px;
+		padding: 20px;
+		background: white;
+		opacity: 0.9;
+		box-shadow: 0px 0px 1px #ccc;
+		border-radius: 3px;
+		overflow: hidden;
+		border-radius: 3%;
+
+		.register-brand {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			line-height: 50px;
+			margin: 20px 0 30px 0;
+			font-size: 22px;
+			font-weight: 600;
+			letter-spacing: 2px;
+			text-align: center;
+			text-transform: uppercase;
+
+			.logo {
+				width: 30px;
+				height: 30px;
+				margin-right: 10px;
 			}
 		}
-	}
 
-	
-
-	
+		.to-login {
+			display: flex;
+			flex-direction: row-reverse;
+			line-height: 40px;
+			text-align: left;
+			padding-left: 20px;
+		}
+	}
+}
 </style>
diff --git a/截图/交流群2.png b/截图/交流群2.png
deleted file mode 100644
index 45896ee..0000000
Binary files a/截图/交流群2.png and /dev/null differ