1.优化：表情点击空白处退回

2.优化：cookie存储用户的用户名和密码（不安全？？）
3.聊天窗口点击图片，展示高清图片

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

@@ -1,5 +1,5 @@
 <template>
-	<el-container class="r-chat-box">
+	<el-container class="chat-box">
 		<el-header height="60px">
 			<span>{{title}}</span>
 			<span title="群聊信息" v-show="this.chat.type=='GROUP'" class="btn-side el-icon-more" @click="showSide=!showSide"></span>
@@ -336,7 +336,7 @@
 		watch: {
 			chat: {
 				handler(newChat, oldChat) {
-					if(newChat.type != oldChat.type || newChat.targetId != oldChat.targetId){
+					if(newChat.targetId > 0 && (newChat.type != oldChat.type || newChat.targetId != oldChat.targetId)){
 						if (this.chat.type == "GROUP") {
 							this.loadGroup(this.chat.targetId);
 						} else {
@@ -348,14 +348,14 @@
 						this.$refs.sendBox.focus();
 					}		
 				},
-				deep: true // 深度监听
+				deep: true
 			}
 		}
 	}
 </script>
 
 <style lang="scss">
-	.r-chat-box {
+	.chat-box {
 		background: white;
 		border: #dddddd solid 1px;
 
@@ -440,7 +440,6 @@
 			}
 		}
 
-
 		.chat-group-side-box {
 			border: #dddddd solid 1px;
 			animation: rtl-drawer-in .3s 1ms;

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

@@ -14,7 +14,9 @@
 					<div class="img-load-box" v-loading="loading"  
 					element-loading-text="上传中.."
 					element-loading-background="rgba(0, 0, 0, 0.4)">
-						<img class="send-image" :src="JSON.parse(msgInfo.content).thumbUrl"/>	
+						<img class="send-image" 
+						:src="JSON.parse(msgInfo.content).thumbUrl"
+						@click="showFullImageBox()"/>	
 					</div>
 					<span title="发送失败" v-show="loadFail" @click="handleSendFail" class="send-fail el-icon-warning"></span>
 				</div>
@@ -66,7 +68,13 @@
 		methods:{
 			handleSendFail(){
 				this.$message.error("该文件已发送失败，目前不支持自动重新发送，建议手动重新发送")
-			}
+			},
+			showFullImageBox(){
+				let imageUrl = JSON.parse(this.msgInfo.content).originUrl;
+				if(imageUrl){
+					this.$store.commit('showFullImageBox',imageUrl);
+				}
+			}	
 		},
 		computed:{
 			loading(){
@@ -160,6 +168,7 @@
 					flex-wrap: nowrap;
 					flex-direction: row;
 					align-items: center;
+					
 					.send-image{
 						min-width: 300px;
 						min-height: 200px;

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

@@ -1,11 +1,13 @@
 <template>
-	<div class="emotion-box" :style="{'left':x+'px','top':y+'px'}">
-		<el-scrollbar style="height:200px">
-			<div class="emotion-item-list">
-				<div class="emotion-item" v-for="(emoText, i) in $emo.emoTextList" :key="i" @click="clickHandler(emoText)" v-html="$emo.textToImg(emoText)">
+	<div class="emotion-mask" @click="$emit('emotion','')">
+		<div class="emotion-box" :style="{'left':x+'px','top':y+'px'}">
+			<el-scrollbar style="height:200px">
+				<div class="emotion-item-list">
+					<div class="emotion-item" v-for="(emoText, i) in $emo.emoTextList" :key="i" @click="clickHandler(emoText)" v-html="$emo.textToImg(emoText)">
+					</div>
 				</div>
-			</div>
-		</el-scrollbar>
+			</el-scrollbar>
+		</div>
 	</div>
 </template>
 
@@ -37,6 +39,16 @@
 	}
 </script>
 <style scoped lang="scss">
+	.emotion-mask {
+		position: fixed;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		width: 100%;
+		height: 100%;
+	}
+	
 	.emotion-box {
 		position: fixed;
 		width: 400px;

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

@@ -1,5 +1,5 @@
 <template>
-	<el-dialog width="30%" :visible.sync="visible"   :before-close="handleClose">
+	<el-dialog width="40%" :visible.sync="visible"   :before-close="handleClose">
 		<img class="full-img" :src="url" />
 	</el-dialog>
 </template>

im-ui/src/view/Chat.vue

@@ -14,7 +14,7 @@
 			</el-scrollbar>
 		</el-aside>
 		<el-container class="r-chat-box">
-			<chat-box :chat="activeChat"></chat-box>
+			<chat-box v-show="activeChat.targetId>0" :chat="activeChat"></chat-box>
 		</el-container>
 	</el-container>
 </template>

im-ui/src/view/Login.vue

@@ -68,6 +68,8 @@
 								params: this.loginForm
 							})
 							.then((data) => {
+								this.setCookie('username',this.loginForm.username);
+								this.setCookie('password',this.loginForm.password);
 								this.$message.success("登陆成功");
 								this.$router.push("/home/chat");
 							})
@@ -77,9 +79,37 @@
 			},
 			resetForm(formName) {
 				this.$refs[formName].resetFields();
-			}
+			},
+			// 获取cookie、
+			getCookie(name) {
+				let reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
+				let arr = document.cookie.match(reg)
+			    if (arr){
+					 return (arr[2]);
+				}
+			    return '';
+			 },
+			  // 设置cookie,增加到vue实例方便全局调用
+			 setCookie (name, value, expiredays) {
+			    var exdate = new Date();
+			    exdate.setDate(exdate.getDate() + expiredays);
+			    document.cookie = name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
+			  },
+			  // 删除cookie
+			  delCookie (name) {
+			    var exp = new Date();
+			    exp.setTime(exp.getTime() - 1);
+			    var cval = this.getCookie(name);
+			    if (cval != null){
+					document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
+				}
+			  }
+		},
+		mounted() {
+			this.loginForm.username = this.getCookie("username");
+			// cookie存密码并不安全，暂时是为了方便
+			this.loginForm.password = this.getCookie("password");
 		}
-	
 	}
 </script>