Merge branch 'v3' of ssh://94.191.59.107:10222/houwenfeng/cloudfile-ui into v3

src/store/modules/user.js

@@ -1,70 +1,80 @@
-import { login, logout, getInfo } from '@/api/login'
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import {
+	login,
+	logout,
+	getInfo
+} from '@/api/login'
+import {
+	getToken,
+	setToken,
+	removeToken
+} from '@/utils/auth'
 import defAva from '@/assets/images/profile.jpg'
 
 const useUserStore = defineStore(
-  'user',
-  {
-    state: () => ({
-      token: getToken(),
-      name: '',
-      avatar: '',
-      roles: [],
-      permissions: []
-    }),
-    actions: {
-      // 登录
-      login(userInfo) {
-        const username = userInfo.username.trim()
-        const password = userInfo.password
-        const code = userInfo.code
-        const uuid = userInfo.uuid
-        return new Promise((resolve, reject) => {
-          login(username, password, code, uuid).then(res => {
-            setToken(res.token)
-            this.token = res.token
-            resolve()
-          }).catch(error => {
-            reject(error)
-          })
-        })
-      },
-      // 获取用户信息
-      getInfo() {
-        return new Promise((resolve, reject) => {
-          getInfo().then(res => {
-            const user = res.user
-            const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;
+	'user', {
+		state: () => ({
+			token: getToken(),
+			uid: '',
+			name: '',
+			avatar: '',
+			roles: [],
+			permissions: []
+		}),
+		actions: {
+			// 登录
+			login(userInfo) {
+				const username = userInfo.username.trim()
+				const password = userInfo.password
+				const code = userInfo.code
+				const uuid = userInfo.uuid
+				return new Promise((resolve, reject) => {
+					login(username, password, code, uuid).then(res => {
+						setToken(res.token)
+						this.token = res.token
+						resolve()
+					}).catch(error => {
+						reject(error)
+					})
+				})
+			},
+			// 获取用户信息
+			getInfo() {
+				return new Promise((resolve, reject) => {
+					getInfo().then(res => {
+						const user = res.user
+						const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import
+							.meta.env.VITE_APP_BASE_API + user.avatar;
 
-            if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
-              this.roles = res.roles
-              this.permissions = res.permissions
-            } else {
-              this.roles = ['ROLE_DEFAULT']
-            }
-            this.name = user.userName
-            this.avatar = avatar;
-            resolve(res)
-          }).catch(error => {
-            reject(error)
-          })
-        })
-      },
-      // 退出系统
-      logOut() {
-        return new Promise((resolve, reject) => {
-          logout(this.token).then(() => {
-            this.token = ''
-            this.roles = []
-            this.permissions = []
-            removeToken()
-            resolve()
-          }).catch(error => {
-            reject(error)
-          })
-        })
-      }
-    }
-  })
+						if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
+							this.roles = res.roles
+							this.permissions = res.permissions
+						} else {
+							this.roles = ['ROLE_DEFAULT']
+						}
+						this.uid = user.userId;
+						this.name = user.userName;
+						this.avatar = avatar;
+						resolve(res)
+					}).catch(error => {
+						reject(error)
+					})
+				})
+			},
+			// 退出系统
+			logOut() {
+				return new Promise((resolve, reject) => {
+					logout(this.token).then(() => {
+						this.token = ''
+						this.roles = []
+						this.permissions = []
+						removeToken()
+						resolve()
+					}).catch(error => {
+						reject(error)
+					})
+				})
+			}
+		}
+	})
 
-export default useUserStore
+export default useUserStore

src/views/biz/test/index.vue

@@ -0,0 +1,176 @@
+<template>
+	<div class="main_part">
+		<div class="left_part">
+			<el-input class="submit_window" v-model="msg" :rows="5" resize="none" type="textarea"
+				placeholder="在这里输入消息" />
+			<el-input class="submit_window" v-model="submitText" :rows="5" resize="none" type="textarea"
+				placeholder="在这里输入消息" />
+			<el-button class="btn" type="primary" @click="submit">
+				发送
+			</el-button>
+		</div>
+		<div class="right_part">
+			<div class="person_list_part">
+				<el-scrollbar height="493px">
+					<div v-for="person in personList" :key="person" class="scrollbar-demo-item"
+						@click="chatWith(person)">
+						<div style="float: left">{{ person.username }}</div>
+						<div style="float: right">{{ person.status }}</div>
+					</div>
+				</el-scrollbar>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import useUserStore from '@/store/modules/user'
+	import store from '@/store'
+	export default {
+		name: "ChatRoom",
+		mounted() {
+			this.initWebSocket();
+		},
+		data() {
+			return {
+				userId: useUserStore().uid,
+				username: useUserStore().name,
+				submitText: '',
+				selectedPerson: '',
+				personList: [],
+				onlinePeople: [],
+				messages: [],
+				msg:'',
+				ws: '',
+			}
+		},
+		methods: {
+			initWebSocket() {
+				var vue = this;
+				//创建websocket
+				if (window.WebSocket) {
+					vue.ws = new WebSocket("ws://localhost:8080/websocket/message/" + useUserStore().uid);
+				}
+				//绑定建立连接事件
+				vue.ws.onopen = function(evt) {
+
+				}
+				//evt事件对象
+				vue.ws.onmessage = function(evt) {
+					console.log(evt.data)
+					vue.msg=evt.data;
+					//接收服务器推送的消息
+					// var res = JSON.parse(evt.data);
+				}
+				vue.ws.onclose = function(evt) {
+
+				}
+			},
+			chatWith(person) {
+				// TODO 查询与该用户的聊天记录
+				getRecord(person.id)
+					.then(res => {
+						console.log(res.data)
+						this.messages = res.data;
+					})
+
+				// 滚动到最底端
+				this.scrollToBottom();
+				this.selectedPerson = person;
+			},
+			scrollToBottom() {
+				this.$refs.chatWindow.setScrollTop(this.$refs.chatWindow.wrapRef.scrollHeight)
+			},
+			submit() {
+				this.messages.push({
+					id: '',
+					from: this.userId,
+					to: this.selectedPerson.id,
+					content: this.submitText
+				})
+				this.$nextTick(() => {
+					this.scrollToBottom()
+				})
+				//定义服务端需要的数据格式
+				var message = {
+					toId: this.selectedPerson.id,
+					message: this.submitText
+				};
+				//将输入的数据发送给服务器
+				this.ws.send(JSON.stringify(message));
+				this.submitText = '';
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.main_part {
+		width: 1000px;
+		height: 500px;
+		background-color: white;
+		border-radius: 8px;
+		margin: 30px auto;
+		padding: 5px;
+	}
+
+	.left_part {
+		float: left;
+		display: inline-block;
+		width: 693px;
+		height: 498px;
+	}
+
+	.chat_window {
+		box-sizing: border-box;
+		width: 100%;
+		height: 330px;
+		border: 1px solid #dcdfe6;
+		border-radius: 4px;
+	}
+
+	.submit_window {
+		font-size: 15px;
+		margin-top: 3px;
+	}
+
+	.el-textarea {
+		--el-input-focus-border-color: darkgray;
+	}
+
+	.main_part .btn {
+		float: right;
+		width: 80px;
+		height: 30px;
+		margin-top: 7px;
+	}
+
+	.right_part {
+		float: right;
+		display: inline-block;
+		width: 298px;
+		height: 498px;
+	}
+
+	.person_list_part {
+		border: 1px solid #dcdfe6;
+		border-radius: 4px;
+	}
+
+	.scrollbar-demo-item {
+		cursor: pointer;
+		align-items: center;
+		justify-content: center;
+		height: 40px;
+		margin: 3px;
+		text-align: center;
+		border-radius: 4px;
+		background: var(--el-color-primary-light-9);
+		color: var(--el-color-primary);
+	}
+
+	.scrollbar-demo-item div {
+		line-height: 40px;
+		margin: 0 40px 0 40px;
+	}
+</style>