From c838a69bd02fa5374afd00702c43009b4bd7777c Mon Sep 17 00:00:00 2001
From: "xie.bx" <Blue_Xie@epam.com>
Date: Fri, 4 Nov 2022 23:25:30 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BE=A4=E5=8F=91=E5=8A=9F=E8=83=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 im-ui/src/components/chat/ChatGroup.vue     |   6 +
 im-ui/src/components/chat/ChatGroupSide.vue | 205 ++++++++++++++++++++
 im-ui/src/components/chat/ChatItem.vue      |   4 +-
 im-ui/src/components/common/FullImage.vue   |  35 ++++
 im-ui/src/components/common/HeadImage.vue   |  20 +-
 im-ui/src/components/common/UserInfo.vue    | 139 +++++++++++++
 im-ui/src/components/group/GroupMember.vue  |   4 +-
 im-ui/src/store/index.js                    |   7 +-
 im-ui/src/store/uiStore.js                  |  39 ++++
 im-ui/src/view/Friend.vue                   |   9 +-
 im-ui/src/view/Home.vue                     | 160 ++++++++-------
 11 files changed, 543 insertions(+), 85 deletions(-)
 create mode 100644 im-ui/src/components/chat/ChatGroupSide.vue
 create mode 100644 im-ui/src/components/common/FullImage.vue
 create mode 100644 im-ui/src/components/common/UserInfo.vue
 create mode 100644 im-ui/src/store/uiStore.js

diff --git a/im-ui/src/components/chat/ChatGroup.vue b/im-ui/src/components/chat/ChatGroup.vue
index ebbd8e3..8f28ad8 100644
--- a/im-ui/src/components/chat/ChatGroup.vue
+++ b/im-ui/src/components/chat/ChatGroup.vue
@@ -284,4 +284,10 @@
 			font-size: 30px;
 		}
 	}
+	
+
+	.chat-group-side-box{
+		border: #dddddd solid 1px;
+		animation: rtl-drawer-in .3s 1ms;
+	}
 </style>
diff --git a/im-ui/src/components/chat/ChatGroupSide.vue b/im-ui/src/components/chat/ChatGroupSide.vue
new file mode 100644
index 0000000..8859759
--- /dev/null
+++ b/im-ui/src/components/chat/ChatGroupSide.vue
@@ -0,0 +1,205 @@
+<template>
+	<div class="chat-group-side">
+		<div class="group-side-search">
+			<el-input placeholder="搜索群成员" v-model="searchText">
+				<el-button slot="append" icon="el-icon-search"></el-button>
+			</el-input>
+		</div>
+		<el-scrollbar class="group-side-scrollbar">
+			<div 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.aliasName.startsWith(searchText)" :member="member"
+					 :showDel="false"></group-member>
+				</div>
+			</div>
+			<el-divider 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.remark" :disabled="!editing" placeholder="群聊的备注仅自己可见" maxlength="20"></el-input>
+				</el-form-item>
+				<el-form-item label="我在本群的昵称">
+					<el-input v-model="group.aliasName" :disabled="!editing" placeholder="xx" maxlength="20"></el-input>
+				</el-form-item>
+
+				<div class="btn-group">
+					<el-button v-show="editing" type="success" @click="handleSaveGroup()">提交</el-button>
+					<el-button v-show="!editing" type="primary" @click="editing=!editing">编辑</el-button>
+					<el-button type="danger" v-show="!isOwner" @click="handleQuit()">退出群聊</el-button>
+				</div>
+			</el-form>
+		</el-scrollbar>
+
+	</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: {
+			handleClose() {
+				this.$emit('close');
+			},
+			loadGroupMembers() {
+				this.$http({
+					url: `/api/group/members/${this.group.id}`,
+					method: "get"
+				}).then((members) => {
+					this.groupMembers = members;
+				})
+			},
+			handleSaveGroup() {
+				let vo = this.group;
+				this.$http({
+					url: "/api/group/modify",
+					method: "put",
+					data: vo
+				}).then((group) => {
+					this.$store.commit("updateGroup", group);
+					this.$emit('reload');
+					this.$message.success("修改成功");
+				})
+			},
+			handleQuit() {
+				this.$confirm('退出群聊后将不再接受群里的消息，确认退出吗？', '确认退出?', {
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'warning'
+				}).then(() => {
+					this.$http({
+						url: `/api/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.aliasName;
+			},
+			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;
+			}
+		}
+
+	}
+</style>
diff --git a/im-ui/src/components/chat/ChatItem.vue b/im-ui/src/components/chat/ChatItem.vue
index 31b8628..867253f 100644
--- a/im-ui/src/components/chat/ChatItem.vue
+++ b/im-ui/src/components/chat/ChatItem.vue
@@ -2,9 +2,7 @@
 
 	<div class="chat-item" :class="active ? 'active' : ''">
 		<div class="left">
-			<head-image :url="chat.headImage" :size="40">
-				
-			</head-image>
+			<head-image :url="chat.headImage" :size="40" :id="chat.type=='PRIVATE'?chat.targetId:0"></head-image>
 			<div v-show="chat.unreadCount>0" class="unread-text">{{chat.unreadCount}}</div>
 		</div>
 		<div class="mid">
diff --git a/im-ui/src/components/common/FullImage.vue b/im-ui/src/components/common/FullImage.vue
new file mode 100644
index 0000000..aef32ba
--- /dev/null
+++ b/im-ui/src/components/common/FullImage.vue
@@ -0,0 +1,35 @@
+<template>
+	<el-dialog width="30%" :visible.sync="visible"   :before-close="handleClose">
+		<img class="full-img" :src="url" />
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		name: "fullImage",
+		data() {
+			return {
+			}
+		},
+		methods: {
+			handleClose() {
+				this.$emit("close");
+			}
+		},
+		props: {
+			visible: {
+				type: Boolean
+			},
+			url: {
+				type: String
+			}
+		}
+	}
+</script>
+
+<style>
+	.full-img {
+		width: 100%;
+		height: 100%;
+	}
+</style>
diff --git a/im-ui/src/components/common/HeadImage.vue b/im-ui/src/components/common/HeadImage.vue
index dcfd1a0..bd9d16a 100644
--- a/im-ui/src/components/common/HeadImage.vue
+++ b/im-ui/src/components/common/HeadImage.vue
@@ -1,18 +1,21 @@
 <template>
-	<div class="head-image">
+	<div class="head-image" @click="showUserInfo($event)">
 		<img :src="url" :style="{width: size+'px',height: size+'px',cursor: 'pointer'}" />
 		<slot></slot>
 	</div>
 </template>
 
 <script>
+
 	export default {
 		name: "headImage",
 		data() {
 			return {}
 		},
-		methods: {},
 		props: {
+			id:{
+				type: Number
+			},
 			size: {
 				type: Number,
 				default: 50
@@ -20,6 +23,19 @@
 			url: {
 				type: String
 			}
+		},
+		methods:{
+			showUserInfo(e){
+				if(this.id && this.id>0){
+					this.$http({
+						url: `/api/user/find/${this.id}`,
+						method: 'get'
+					}).then((user) => {
+						this.$store.commit("setUserInfoBoxPos",e);
+						this.$store.commit("showUserInfoBox",user);
+					})
+				}
+			}
 		}
 	}
 </script>
diff --git a/im-ui/src/components/common/UserInfo.vue b/im-ui/src/components/common/UserInfo.vue
new file mode 100644
index 0000000..f6c35a8
--- /dev/null
+++ b/im-ui/src/components/common/UserInfo.vue
@@ -0,0 +1,139 @@
+<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-box">
+				<div class="avatar">
+					<head-image :url="user.headImageThumb" :size="60" @click.native="showFullImage()"> </head-image>
+				</div>
+				<div>
+					<el-descriptions :column="1" :title="user.userName" class="user-info-items">
+						<el-descriptions-item label="昵称">{{ user.nickName }}
+						</el-descriptions-item>
+						<el-descriptions-item label="签名">{{ user.signature }}
+						</el-descriptions-item>
+					</el-descriptions>
+				</div>
+				
+			</div>
+			<el-divider content-position="center"></el-divider>
+			<div class="user-btn-group">
+				<el-button v-show="isFriend" type="primary" @click="handleSendMessage()">发消息</el-button>
+				<el-button v-show="!isFriend" type="primary" @click="handleAddFriend()">加为好友</el-button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import HeadImage from './HeadImage.vue'
+
+	export default {
+		name: "userInfo",
+		components: {
+			HeadImage
+		},
+		data() {
+			return {
+	
+			}
+		},
+		props: {
+			user: {
+				type: Object
+			},
+			pos: {
+				type: Object
+			}
+		},
+		methods: {
+			handleSendMessage() {
+				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");
+			},
+			handleAddFriend() {
+				this.$http({
+					url: "/api/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);
+				}
+			}
+		},
+		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 {
+		position: absolute;
+		width: 300px;
+		background-color: white;
+		border: #dddddd solid 1px;
+		border-radius: 5px;
+		padding: 15px;
+
+		.user-info-box {
+			display: flex;
+
+			.user-info-items {
+				margin-left: 10px;
+				white-space: nowrap;
+				overflow: hidden;
+				.el-descriptions__header { 
+					margin-bottom: 5px;
+				}
+				
+				.el-descriptions__title {
+					font-size: 20px;
+				}
+				
+				.el-descriptions-item__cell {
+					padding-bottom: 1px;
+				}
+			}
+		}
+
+		.user-btn-group {
+			text-align: center;
+		}
+	}
+</style>
diff --git a/im-ui/src/components/group/GroupMember.vue b/im-ui/src/components/group/GroupMember.vue
index 559bb70..3345994 100644
--- a/im-ui/src/components/group/GroupMember.vue
+++ b/im-ui/src/components/group/GroupMember.vue
@@ -1,15 +1,15 @@
 <template>
 	<div class="group-member">
-		<head-image :url="member.headImage" :size="50" class="">
+		<head-image :url="member.headImage" :size="50" :id="member.userId">
 			<div  v-if="showDel" @click.stop="handleDelete()" class="btn-kick el-icon-error"></div>
 		</head-image>
 		<div class="member-name">{{member.aliasName}}</div>
+		
 	</div>
 </template>
 
 <script>
 	import HeadImage from "../common/HeadImage.vue";
-	
 	export default{
 		name: "groupMember",
 		components:{HeadImage},
diff --git a/im-ui/src/store/index.js b/im-ui/src/store/index.js
index e4ded4b..997c3d0 100644
--- a/im-ui/src/store/index.js
+++ b/im-ui/src/store/index.js
@@ -4,6 +4,7 @@ import chatStore from './chatStore.js';
 import friendStore from './friendStore.js';
 import userStore from './userStore.js';
 import groupStore from './groupStore.js';
+import uiStore from './uiStore.js';
 import VuexPersistence from 'vuex-persist'
 
 
@@ -15,10 +16,8 @@ const vuexLocal = new VuexPersistence({
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-	modules: {chatStore,friendStore,userStore,groupStore},
-	state: {
-		userInfo: {}
-	},
+	modules: {chatStore,friendStore,userStore,groupStore,uiStore},
+	state: {},
 	plugins: [vuexLocal.plugin],
 	mutations: {
 		initStore(state){
diff --git a/im-ui/src/store/uiStore.js b/im-ui/src/store/uiStore.js
new file mode 100644
index 0000000..a6ce3d2
--- /dev/null
+++ b/im-ui/src/store/uiStore.js
@@ -0,0 +1,39 @@
+export default {
+	state: {
+		userInfo: { // 用户信息窗口
+			show: false,
+			user: {},
+			pos:{
+				x:0,
+				y:0
+			}
+		},
+		fullImage: { // 全屏大图
+			show: false,
+			url: ""
+		}
+	},
+	mutations: {
+		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); 
+		},
+		closeUserInfoBox(state){
+			state.userInfo.show = false;
+		},
+		showFullImageBox(state,url){
+			state.fullImage.show = true;
+			state.fullImage.url = url;
+		},
+		closeFullImageBox(state){
+			state.fullImage.show = false;
+		}
+	},
+}
\ No newline at end of file
diff --git a/im-ui/src/view/Friend.vue b/im-ui/src/view/Friend.vue
index d9ad1c9..72a6105 100644
--- a/im-ui/src/view/Friend.vue
+++ b/im-ui/src/view/Friend.vue
@@ -26,7 +26,8 @@
 			</div>
 			<div v-show="userInfo.id">
 				<div class="user-detail">
-					<head-image class="detail-head-image" :size="200" :url="userInfo.headImage"></head-image>
+					<head-image class="detail-head-image" :size="200" 
+					:url="userInfo.headImage" @click.native="showFullImage()"></head-image>
 					<div class="info-item">
 						<el-descriptions title="好友信息" class="description" :column="1">
 							<el-descriptions-item label="用户名">{{ userInfo.userName }}
@@ -104,6 +105,12 @@
 				this.$store.commit("activeChat", 0);
 				this.$router.push("/home/chat");
 			},
+			showFullImage(){
+				if(this.userInfo.headImage){
+					this.$store.commit('showFullImageBox',this.userInfo.headImage);
+				}
+				
+			},
 			updateFriendInfo(friend, user, index) {
 				// store的数据不能直接修改，深拷贝一份store的数据
 				friend = JSON.parse(JSON.stringify(friend));
diff --git a/im-ui/src/view/Home.vue b/im-ui/src/view/Home.vue
index 4acefe3..3b2b92f 100644
--- a/im-ui/src/view/Home.vue
+++ b/im-ui/src/view/Home.vue
@@ -1,29 +1,30 @@
 <template>
-	<el-container>
+	<el-container >
 		<el-aside width="80px" class="navi-bar">
-			<div class="user-head-image" @click="onClickHeadImage">
-				<head-image :url="$store.state.userStore.userInfo.headImageThumb" > </head-image>
+			<div class="user-head-image">
+				<head-image :url="$store.state.userStore.userInfo.headImageThumb" :size="60"
+				 @click.native="showSettingDialog=true"> </head-image>
 			</div>
-			
-			<el-menu background-color="#333333" text-color="#ddd" style="margin-top: 30px;" >
+
+			<el-menu background-color="#333333" text-color="#ddd" style="margin-top: 30px;">
 				<el-menu-item title="聊天">
 					<router-link v-bind:to="'/home/chat'">
 						<span class="el-icon-chat-dot-round"></span>
 					</router-link>
-				</el-menu-item >
-				<el-menu-item  title="好友" >
+				</el-menu-item>
+				<el-menu-item title="好友">
 					<router-link v-bind:to="'/home/friend'">
 						<span class="el-icon-user"></span>
 					</router-link>
 				</el-menu-item>
-				<el-menu-item  title="群聊" >
+				<el-menu-item title="群聊">
 					<router-link v-bind:to="'/home/group'">
 						<span class="el-icon-s-check"></span>
 					</router-link>
 				</el-menu-item>
-				
-				<el-menu-item title="设置" @click="onClickSetting()" >
-						<span class="el-icon-setting"></span>
+
+				<el-menu-item title="设置" @click="onClickSetting()">
+					<span class="el-icon-setting"></span>
 				</el-menu-item>
 			</el-menu>
 			<div class="exit-box" @click="handleExit()" title="退出">
@@ -34,50 +35,61 @@
 			<router-view></router-view>
 		</el-main>
 		<setting :visible="showSettingDialog" @close="onCloseSetting()"></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>
 	</el-container>
 </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';
 	
 	export default {
-		components:{HeadImage,Setting},
-		data(){
+		components: {
+			HeadImage,
+			Setting,
+			UserInfo,
+			FullImage
+		},
+		data() {
 			return {
 				showSettingDialog: false
 			}
 		},
 		methods: {
-			init(userInfo){
+			init(userInfo) {
 				this.$store.commit("setUserInfo", userInfo);
 				this.$store.commit("initStore");
-				console.log("socket");
-				this.$wsApi.createWebSocket("ws://localhost:8878/im",this.$store);
-				this.$wsApi.onopen(()=>{
-					console.log("pullUnreadMessage")
+				this.$wsApi.createWebSocket("ws://localhost:8878/im", this.$store);
+				this.$wsApi.onopen(() => {
 					this.pullUnreadMessage();
 				});
-				this.$wsApi.onmessage((e)=>{
-					console.log(e);
-					if(e.cmd == 2){
+				this.$wsApi.onmessage((e) => {
+					if (e.cmd == 2) {
 						// 异地登录，强制下线
 						this.$message.error("您已在其他地方登陆，将被强制下线");
-						setTimeout(()=>{
-							location.href="/";
-						},1000)
-						
-					}
-					else if(e.cmd==3){
+						setTimeout(() => {
+							location.href = "/";
+						}, 1000)
+
+					} else if (e.cmd == 3) {
 						// 插入私聊消息
 						this.handlePrivateMessage(e.data);
-					}else if(e.cmd == 4){
+					} else if (e.cmd == 4) {
 						// 插入群聊消息
 						this.handleGroupMessage(e.data);
 					}
 				})
 			},
-			pullUnreadMessage(){
+			pullUnreadMessage() {
 				// 拉取未读私聊消息
 				this.$http({
 					url: "/api/message/private/pullUnreadMessage",
@@ -89,25 +101,23 @@
 					method: 'post'
 				});
 			},
-			handlePrivateMessage(msg){
+			handlePrivateMessage(msg) {
 				// 好友列表存在好友信息，直接插入私聊消息
-				let friend = this.$store.state.friendStore.friends.find((f)=>f.id==msg.sendId);
-				if(friend){
-					this.insertPrivateMessage(friend,msg);
+				let friend = this.$store.state.friendStore.friends.find((f) => f.id == msg.sendId);
+				if (friend) {
+					this.insertPrivateMessage(friend, msg);
 					return;
 				}
 				// 好友列表不存在好友信息，则发请求获取好友信息
 				this.$http({
 					url: `/api/friend/find/${msg.sendId}`,
 					method: 'get'
-				}).then((friend)=>{
-					this.insertPrivateMessage(friend,msg);
-					this.$store.commit("addFriend",friend);
+				}).then((friend) => {
+					this.insertPrivateMessage(friend, msg);
+					this.$store.commit("addFriend", friend);
 				})
-				
-				
 			},
-			insertPrivateMessage(friend,msg){
+			insertPrivateMessage(friend, msg) {
 				let chatInfo = {
 					type: 'PRIVATE',
 					targetId: friend.id,
@@ -115,27 +125,27 @@
 					headImage: friend.headImage
 				};
 				// 打开会话
-				this.$store.commit("openChat",chatInfo);
+				this.$store.commit("openChat", chatInfo);
 				// 插入消息
-				this.$store.commit("insertMessage",msg);
+				this.$store.commit("insertMessage", msg);
 			},
-			handleGroupMessage(msg){
+			handleGroupMessage(msg) {
 				// 群聊缓存存在，直接插入群聊消息
-				let group = this.$store.state.groupStore.groups.find((g)=>g.id==msg.groupId);
-				if(group){
-					this.insertGroupMessage(group,msg);
+				let group = this.$store.state.groupStore.groups.find((g) => g.id == msg.groupId);
+				if (group) {
+					this.insertGroupMessage(group, msg);
 					return;
 				}
 				// 群聊缓存存在，直接插入群聊消息
 				this.$http({
 					url: `/api/group/find/${msg.groupId}`,
 					method: 'get'
-				}).then((group)=>{
-					this.insertGroupMessage(group,msg);
-					this.$store.commit("addGroup",group);
+				}).then((group) => {
+					this.insertGroupMessage(group, msg);
+					this.$store.commit("addGroup", group);
 				})
 			},
-			insertGroupMessage(group,msg){
+			insertGroupMessage(group, msg) {
 				let chatInfo = {
 					type: 'GROUP',
 					targetId: group.id,
@@ -143,29 +153,31 @@
 					headImage: group.headImageThumb
 				};
 				// 打开会话
-				this.$store.commit("openChat",chatInfo);
+				this.$store.commit("openChat", chatInfo);
 				// 插入消息
-				this.$store.commit("insertMessage",msg);
+				this.$store.commit("insertMessage", msg);
 			},
-			handleExit(){
+			handleExit() {
 				this.$http({
 					url: "/api/logout",
 					method: 'get'
-				}).then(()=>{
+				}).then(() => {
 					this.$wsApi.closeWebSocket();
-					location.href="/";
+					location.href = "/";
 				})
 			},
-			onClickHeadImage(){
-				this.$message.success(JSON.stringify(this.$store.state.userStore.userInfo));
-			},
-			onClickSetting(){
+			onClickSetting() {
 				this.showSettingDialog = true;
 			},
-			onCloseSetting(){
+			onCloseSetting() {
 				this.showSettingDialog = false;
 			}
 		},
+		computed:{
+			uiStore(){
+				return this.$store.state.uiStore;
+			}
+		},
 		mounted() {
 			this.$http({
 				url: "/api/user/self",
@@ -174,7 +186,7 @@
 				this.init(userInfo);
 			})
 		},
-		unmounted(){
+		unmounted() {
 			this.$wsApi.closeWebSocket();
 		}
 	}
@@ -185,42 +197,45 @@
 		background: #333333;
 		padding: 10px;
 		padding-top: 50px;
-		
-		.user-head-image{
+
+		.user-head-image {
 			position: relative;
 			width: 50px;
 			height: 50px;
 		}
-		
+
 		.el-menu {
 			border: none;
 			flex: 1;
+
 			.el-menu-item {
 				margin-top: 20px;
-				.router-link-exact-active span{
+
+				.router-link-exact-active span {
 					color: white !important;
 				}
-				
+
 				span {
 					font-size: 24px !important;
 					color: #aaaaaa;
-					
-					&:hover{
+
+					&:hover {
 						color: white !important;
 					}
 				}
 			}
 		}
-		
+
 		.exit-box {
 			position: absolute;
 			width: 60px;
-			bottom: 40px;	
+			bottom: 40px;
 			color: #aaaaaa;
 			font-size: 24px;
 			text-align: center;
 			cursor: pointer;
-			&:hover{
+
+			&:hover {
 				color: white !important;
 			}
 		}
@@ -231,7 +246,6 @@
 		background-color: #E9EEF3;
 		color: #333;
 		text-align: center;
-		
-	}
 
-</style>
+	}
+</style>