修改用户卡片和大图组件的打开方式

im-web/src/components/chat/ChatMessageItem.vue

@@ -126,7 +126,7 @@ export default {
 		showFullImageBox() {
 			let imageUrl = JSON.parse(this.msgInfo.content).originUrl;
 			if (imageUrl) {
-				this.$store.commit('showFullImageBox', imageUrl);
+				this.$eventBus.$emit("openFullImage", imageUrl);
 			}
 		},
 		onPlayVoice() {

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

@@ -1,10 +1,10 @@
 <template>
-	<div class="full-image" v-show="visible" :before-close="onClose" :modal="true">
+	<div class="full-image" v-if="show" :before-close="close" :modal="true">
 		<div class="mask"></div>
 		<div class="image-box">
 			<img :src="url" />
 		</div>
-		<div class="close" @click="onClose"><i class="el-icon-close"></i></div>
+		<div class="close" @click="close"><i class="el-icon-close"></i></div>
 	</div>
 </template>
 
@@ -13,20 +13,17 @@ export default {
 	name: "fullImage",
 	data() {
 		return {
-			fit: 'contain'
+			show: false,
+			url: ''
 		}
 	},
 	methods: {
-		onClose() {
-			this.$emit("close");
-		}
-	},
-	props: {
-		visible: {
-			type: Boolean
+		open(url) {
+			this.show = true;
+			this.url = url;
 		},
-		url: {
-			type: String
+		close() {
+			this.show = false;
 		}
 	}
 }

im-web/src/components/common/HeadImage.vue

@@ -63,8 +63,7 @@ export default {
 						x: e.x + 30,
 						y: e.y
 					}
-					this.$store.commit("setUserInfoBoxPos", pos);
-					this.$store.commit("showUserInfoBox", user);
+					this.$eventBus.$emit("openUserInfo", user, pos);
 				})
 			}
 		}

im-web/src/components/common/UserInfo.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="user-info" :style="{ left: pos.x + 'px', top: pos.y + 'px' }" @click.stop>
+	<div v-if="show" 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="60" :online="user.online"
@@ -39,18 +39,26 @@ export default {
 	},
 	data() {
 		return {
-
-		}
-	},
-	props: {
-		user: {
-			type: Object
-		},
-		pos: {
-			type: Object
+			show: false,
+			user: {},
+			pos: {
+				x: 0,
+				y: 0
+			}
 		}
 	},
 	methods: {
+		open(user, pos) {
+			this.show = true;
+			this.user = user;
+			let w = document.documentElement.clientWidth;
+			let h = document.documentElement.clientHeight;
+			this.pos.x = Math.min(pos.x, w - 350);
+			this.pos.y = Math.min(pos.y, h - 200);
+		},
+		close() {
+			this.show = false;
+		},
 		onSendMessage() {
 			let user = this.user;
 			let chat = {
@@ -64,7 +72,7 @@ export default {
 			if (this.$route.path != "/home/chat") {
 				this.$router.push("/home/chat");
 			}
-			this.$emit("close");
+			this.show = false;
 		},
 		onAddFriend() {
 			this.$http({
@@ -87,7 +95,7 @@ export default {
 		},
 		showFullImage() {
 			if (this.user.headImage) {
-				this.$store.commit("showFullImageBox", this.user.headImage);
+				this.$eventBus.$emit("openFullImage", this.user.headImage);
 			}
 		}
 	},

im-web/src/main.js

@@ -19,7 +19,6 @@ import useFriendStore from './store/friendStore.js'
 import useGroupStore from './store/groupStore.js'
 import useUserStore from './store/userStore.js'
 import useConfigStore from './store/configStore.js'
-import useUiStore from './store/uiStore.js'
 
 
 Vue.use(PiniaVuePlugin)
@@ -51,4 +50,3 @@ Vue.prototype.friendStore = useFriendStore();
 Vue.prototype.groupStore = useGroupStore();
 Vue.prototype.userStore = useUserStore();
 Vue.prototype.configStore = useConfigStore();
-Vue.prototype.uiStore = useUiStore();

im-web/src/store/index.js

@@ -1,33 +0,0 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import chatStore from './chatStore.js';
-import friendStore from './friendStore.js';
-import userStore from './userStore.js';
-import groupStore from './groupStore.js';
-import configStore from './configStore.js';
-import uiStore from './uiStore.js';
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-	modules: { chatStore, friendStore, userStore, groupStore, configStore, uiStore },
-	state: {},
-	mutations: {
-	},
-	actions: {
-		load(context) {
-			return this.dispatch("loadUser").then(() => {
-				const promises = [];
-				promises.push(this.dispatch("loadFriend"));
-				promises.push(this.dispatch("loadGroup"));
-				promises.push(this.dispatch("loadChat"));
-				promises.push(this.dispatch("loadConfig"));
-				return Promise.all(promises);
-			})
-		},
-		unload(context) {
-			context.commit("clear");
-		}
-	},
-	strict: process.env.NODE_ENV !== 'production'
-})

im-web/src/store/uiStore.js

@@ -1,42 +0,0 @@
-import { defineStore } from 'pinia';
-export default defineStore('groupStore', {
-	state: () => {
-		return {
-			userInfo: { // 用户信息窗口
-				show: false,
-				user: {},
-				pos: {
-					x: 0,
-					y: 0
-				}
-			},
-			fullImage: { // 全屏大图
-				show: false,
-				url: ""
-			}
-		}
-	},
-	actions: {
-		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;
-		}
-	}
-})

im-web/src/view/Friend.vue

@@ -137,7 +137,7 @@ export default {
 		},
 		showFullImage() {
 			if (this.userInfo.headImage) {
-				this.$store.commit('showFullImageBox', this.userInfo.headImage);
+				this.$eventBus.$emit("openFullImage", this.userInfo.headImage);
 			}
 		},
 		updateFriendInfo() {

im-web/src/view/Group.vue

@@ -31,7 +31,7 @@
 							<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%">
+							:name="activeGroup.showGroupName" radius="10%" @click.native="showFullImage()">
 						</head-image>
 						<el-button class="send-btn" icon="el-icon-position" type="primary" @click="onSendMessage()">发消息
 						</el-button>
@@ -255,6 +255,11 @@ export default {
 				}
 			}
 		},
+		showFullImage() {
+			if (this.activeGroup.headImage) {
+				this.$eventBus.$emit("openFullImage", this.activeGroup.headImage);
+			}
+		},
 		loadGroupMembers() {
 			this.$http({
 				url: `/group/members/${this.activeGroup.id}`,

im-web/src/view/Home.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="home-page" @click="uiStore.closeUserInfoBox()">
+	<div class="home-page" @click="closeUserInfo">
 		<div class="app-container" :class="{ fullscreen: isFullscreen }">
 			<div class="navi-bar">
 				<div class="navi-bar-box">
@@ -46,10 +46,8 @@
 				<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="uiStore.closeUserInfoBox()"></user-info> -->
-			<!-- <full-image :visible="uiStore.fullImage.show" :url="uiStore.fullImage.url"
-				@close="uiStore.closeFullImageBox()"></full-image> -->
+			<user-info ref="userInfo"></user-info>
+			<full-image ref="fullImage"></full-image>
 			<rtc-private-video ref="rtcPrivateVideo"></rtc-private-video>
 			<rtc-group-video ref="rtcGroupVideo"></rtc-group-video>
 		</div>
@@ -64,7 +62,6 @@ 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 uiStore from '../store/uiStore';
 
 export default {
 	components: {
@@ -94,7 +91,14 @@ export default {
 				// 进入多人视频通话
 				this.$refs.rtcGroupVideo.open(rctInfo);
 			});
-
+			this.$eventBus.$on('openUserInfo', (user, pos) => {
+				// 打开用户卡片
+				this.$refs.userInfo.open(user, pos);
+			});
+			this.$eventBus.$on('openFullImage', url => {
+				// 图片全屏
+				this.$refs.fullImage.open(url);
+			});
 			this.loadStore().then(() => {
 				// ws初始化
 				this.$wsApi.connect(process.env.VUE_APP_WS_URL, sessionStorage.getItem("accessToken"));
@@ -312,7 +316,7 @@ export default {
 			}
 			// 新增群
 			if (msg.type == this.$enums.MESSAGE_TYPE.GROUP_NEW) {
-				this.chatStore.addGroup(JSON.parse(msg.content));
+				this.groupStore.addGroup(JSON.parse(msg.content));
 				return;
 			}
 			// 删除群
@@ -363,6 +367,9 @@ export default {
 				return;
 			}
 		},
+		closeUserInfo() {
+			this.$refs.userInfo.close();
+		},
 		onExit() {
 			this.unloadStore();
 			this.$wsApi.close(3000);