From a77d8b1d0bb5c7f3c7a4e903a9eb2159c8623e9e Mon Sep 17 00:00:00 2001
From: "xie.bx" <Blue_Xie@epam.com>
Date: Fri, 4 Nov 2022 16:43:03 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BE=A4=E8=81=8A=E5=8A=9F=E8=83=BD=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91-=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 im-ui/src/components/chat/ChatGroup.vue    | 103 +++++++++++++--------
 im-ui/src/components/group/GroupMember.vue |   4 +-
 im-ui/src/store/groupStore.js              |  19 ++--
 im-ui/src/view/Chat.vue                    |   4 +-
 im-ui/src/view/Group.vue                   |   5 +-
 5 files changed, 83 insertions(+), 52 deletions(-)

diff --git a/im-ui/src/components/chat/ChatGroup.vue b/im-ui/src/components/chat/ChatGroup.vue
index 1cbeba7..ebbd8e3 100644
--- a/im-ui/src/components/chat/ChatGroup.vue
+++ b/im-ui/src/components/chat/ChatGroup.vue
@@ -1,45 +1,54 @@
 <template>
 	<el-container class="r-chat-box">
 		<el-header height="60px">
-			{{title}}
+			<span>{{title}}</span>
+			<span class="btn-side el-icon-more" @click="showSide=!showSide"></span>
 		</el-header>
-		<el-main class="im-chat-main" id="chatScrollBox">
-			<div class="im-chat-box">
-				<ul>
-					<li v-for="msgInfo in chat.messages" :key="msgInfo.id">
-						<message-item :mine="msgInfo.sendId == mine.id" :headImage="headImage(msgInfo)" :showName="showName(msgInfo)"
-						 :msgInfo="msgInfo">
-						</message-item>
-					</li>
-				</ul>
-			</div>
-		</el-main>
-		<el-footer height="25%" class="im-chat-footer">
-			<div class="chat-tool-bar">
-				<div class="el-icon-service"></div>
-				<div>
-					<file-upload action="/api/image/upload" :maxSize="5*1024*1024" :fileTypes="['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
-					 @before="handleImageBefore" @success="handleImageSuccess" @fail="handleImageFail">
-						<i class="el-icon-picture-outline"></i>
-					</file-upload>
-				</div>
-				<div>
-					<file-upload action="/api/file/upload" :maxSize="10*1024*1024" @before="handleFileBefore" @success="handleFileSuccess"
-					 @fail="handleFileFail">
-						<i class="el-icon-wallet"></i>
-					</file-upload>
-				</div>
-				<div class="el-icon-chat-dot-round"></div>
-			</div>
-			<textarea v-model="sendText" ref="sendBox" class="send-text-area" @keydown.enter="sendTextMessage()"></textarea>
-			<div class="im-chat-send">
-				<el-button type="primary" @click="sendTextMessage()">发送</el-button>
-			</div>
-		</el-footer>
+		<el-container>
+			<el-container class="content-box">
+				<el-main class="im-chat-main" id="chatScrollBox">
+					<div class="im-chat-box">
+						<ul>
+							<li v-for="msgInfo in chat.messages" :key="msgInfo.id">
+								<message-item :mine="msgInfo.sendId == mine.id" :headImage="headImage(msgInfo)" :showName="showName(msgInfo)"
+								 :msgInfo="msgInfo">
+								</message-item>
+							</li>
+						</ul>
+					</div>
+				</el-main>
+				<el-footer height="25%" class="im-chat-footer">
+					<div class="chat-tool-bar">
+						<div class="el-icon-service"></div>
+						<div>
+							<file-upload action="/api/image/upload" :maxSize="5*1024*1024" :fileTypes="['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
+							 @before="handleImageBefore" @success="handleImageSuccess" @fail="handleImageFail">
+								<i class="el-icon-picture-outline"></i>
+							</file-upload>
+						</div>
+						<div>
+							<file-upload action="/api/file/upload" :maxSize="10*1024*1024" @before="handleFileBefore" @success="handleFileSuccess"
+							 @fail="handleFileFail">
+								<i class="el-icon-wallet"></i>
+							</file-upload>
+						</div>
+						<div class="el-icon-chat-dot-round"></div>
+					</div>
+					<textarea v-model="sendText" ref="sendBox" class="send-text-area" @keydown.enter="sendTextMessage()"></textarea>
+					<div class="im-chat-send">
+						<el-button type="primary" @click="sendTextMessage()">发送</el-button>
+					</div>
+				</el-footer>
+			</el-container>
+			<el-aside class="chat-group-side-box" width="20%" v-show="showSide">
+				<chat-group-side :group="group" :groupMembers="groupMembers" @reload="loadGroup(group.id)"></chat-group-side>
+			</el-aside>	
+		</el-container>
 	</el-container>
 </template>
 
 <script>
+	import ChatGroupSide from "./ChatGroupSide.vue";
 	import MessageItem from "./MessageItem.vue";
 	import FileUpload from "../common/FileUpload.vue";
 
@@ -47,7 +56,8 @@
 		name: "chatPrivate",
 		components: {
 			MessageItem,
-			FileUpload
+			FileUpload,
+			ChatGroupSide
 		},
 		props: {
 			chat: {
@@ -57,6 +67,7 @@
 		data() {
 			return {
 				sendText: "",
+				showSide: false,
 				group: {},
 				groupMembers: []
 			}
@@ -174,8 +185,11 @@
 				// 借助file对象保存对方id
 				file.targetId = this.chat.targetId;
 			},
+			handleCloseSide() {
+				this.showSide = false;
+			},
 			sendTextMessage() {
-				
+
 				if (!this.sendText.trim()) {
 					this.$message.error("不能发送空白信息");
 					return
@@ -214,7 +228,7 @@
 					method: 'get'
 				}).then((group) => {
 					this.group = group;
-					this.$store.commit("updateChatFromGroup",group);
+					this.$store.commit("updateChatFromGroup", group);
 				});
 
 				this.$http({
@@ -244,8 +258,8 @@
 			mine() {
 				return this.$store.state.userStore.userInfo;
 			},
-			title(){
-				let size = this.groupMembers.filter(m=>!m.quit).length;
+			title() {
+				let size = this.groupMembers.filter(m => !m.quit).length;
 				return `${this.chat.showName}(${size})`;
 			}
 
@@ -259,4 +273,15 @@
 </script>
 
 <style>
+	.btn-side {
+		position: absolute;
+		right: 20px;
+		line-height: 60px;
+		font-size: 22px;
+		cursor: pointer;
+		
+		&:hover {
+			font-size: 30px;
+		}
+	}
 </style>
diff --git a/im-ui/src/components/group/GroupMember.vue b/im-ui/src/components/group/GroupMember.vue
index 7fa61c5..559bb70 100644
--- a/im-ui/src/components/group/GroupMember.vue
+++ b/im-ui/src/components/group/GroupMember.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="group-member">
-		<head-image :url="member.headImage" :size="60" class="">
+		<head-image :url="member.headImage" :size="50" class="">
 			<div  v-if="showDel" @click.stop="handleDelete()" class="btn-kick el-icon-error"></div>
 		</head-image>
 		<div class="member-name">{{member.aliasName}}</div>
@@ -39,7 +39,7 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		width: 60px;
+		width: 50px;
 		.member-name {
 			font-size: 12px;
 			text-align: center;
diff --git a/im-ui/src/store/groupStore.js b/im-ui/src/store/groupStore.js
index 735ea7b..91baacd 100644
--- a/im-ui/src/store/groupStore.js
+++ b/im-ui/src/store/groupStore.js
@@ -24,17 +24,22 @@ export default {
 		addGroup(state,group){
 			state.groups.unshift(group);
 		},
-		removeGroup(state,index){
-			state.groups.splice(index, 1);
-			if(state.activeIndex  >= state.groups.length){
-				state.activeIndex = state.groups.length-1;
-			}
+		removeGroup(state,groupId){
+			state.groups.forEach((g,index)=>{
+				if(g.id==groupId){
+					state.groups.splice(index, 1);
+					if(state.activeIndex  >= state.groups.length){
+						state.activeIndex = state.groups.length-1;
+					}
+				}
+			})
+			
 		},
 		updateGroup(state,group){
-			state.groups.forEach((g,index)=>{
+			state.groups.forEach((g,idx)=>{
 				if(g.id==group.id){
 					// 拷贝属性
-					state.groups[index] = Object.assign(state.groups[index], group);
+					state.groups[idx] = Object.assign(state.groups[idx], group);
 				}
 			})
 		}
diff --git a/im-ui/src/view/Chat.vue b/im-ui/src/view/Chat.vue
index b50a73f..0a90070 100644
--- a/im-ui/src/view/Chat.vue
+++ b/im-ui/src/view/Chat.vue
@@ -164,6 +164,7 @@
 				padding: 5px;
 				background-color: white;
 				line-height: 50px;
+				border: #dddddd solid 1px;
 			}
 
 			.im-chat-main {
@@ -185,7 +186,7 @@
 				display: flex;
 				flex-direction: column;
 				padding: 0;
-
+				border: #dddddd solid 1px;	
 				.chat-tool-bar {
 
 					display: flex;
@@ -193,6 +194,7 @@
 					width: 100%;
 					height: 40px;
 					text-align: left;
+					box-sizing: border-box;
 					border: #dddddd solid 1px;
 
 					>div {
diff --git a/im-ui/src/view/Group.vue b/im-ui/src/view/Group.vue
index 1020fdf..f453319 100644
--- a/im-ui/src/view/Group.vue
+++ b/im-ui/src/view/Group.vue
@@ -56,7 +56,6 @@
 							</div>
 						</el-form>
 					</div>
-
 					<el-divider content-position="center"></el-divider>
 					<el-scrollbar style="height:400px;">
 						<div class="r-group-member-list">
@@ -169,7 +168,7 @@
 						url: `/api/group/delete/${this.activeGroup.id}`,
 						method: 'delete'
 					}).then(() => {
-						this.$store.commit("removeGroup", this.groupStore.activeIndex);
+						this.$store.commit("removeGroup", this.activeGroup.id);
 						this.$store.commit("activeGroup", -1);
 						this.$store.commit("removeGroupChat", this.activeGroup.id);
 					});
@@ -205,7 +204,7 @@
 						url: `/api/group/quit/${this.activeGroup.id}`,
 						method: 'delete'
 					}).then(() => {
-						this.$store.commit("removeGroup", this.groupStore.activeIndex);
+						this.$store.commit("removeGroup", this.activeGroup.id);
 						this.$store.commit("activeGroup", -1);
 						this.$store.commit("removeGroupChat", this.activeGroup.id);
 					});