UserCard组件放在MessageLayout页面上，保证弹出卡片时使用的是同一个组件实例

src/components/message/MessageItem.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 import { MsgType } from '@/proto/msg'
 import { userStore } from '@/stores'
 import { messageSysShowTime, messageBoxShowTime } from '@/utils/common'
@@ -17,10 +17,9 @@ const props = defineProps([
   'hasNoMoreMsg',
   'isLoadMoreLoading'
 ])
-const emit = defineEmits(['loadMore'])
+const emit = defineEmits(['loadMore', 'showUserCard'])
 
 const userData = userStore()
-const isShowUserCard = ref(false)
 const loadMoreTips = computed(() => {
   return props.isLoadMoreLoading ? '' : '查看更多消息'
 })
@@ -89,17 +88,13 @@ const msgTime = computed(() => {
   return messageBoxShowTime(props.msg.msgTime)
 })
 
-const handleUserCard = (flag) => {
-  isShowUserCard.value = flag
-}
-
 const onLoadMore = () => {
   loadMoreTips.value = ''
   emit('loadMore')
 }
 
 const onShowUserCard = () => {
-  isShowUserCard.value = true
+  emit('showUserCard', { sessionId: props.sessionId, account: account.value })
 }
 </script>
 
@@ -165,12 +160,6 @@ const onShowUserCard = () => {
       </el-container>
     </div>
   </div>
-  <UserCard
-    :isShow="isShowUserCard"
-    :sessionId="sessionId"
-    :account="account"
-    @update:isShow="handleUserCard"
-  ></UserCard>
 </template>
 
 <style lang="scss" scoped>

src/components/message/SessionBox.vue

@@ -2,15 +2,13 @@
 import { ref, computed } from 'vue'
 import AvatarIcon from './AvatarIcon.vue'
 import SessionTag from './SessionTag.vue'
-import UserCard from '../user/UserCard.vue'
-import GroupCard from '../group/GroupCard.vue'
 import { sessionShowTime } from '@/utils/common'
 import { Top, Bottom, MuteNotification, Bell } from '@element-plus/icons-vue'
 import { MsgType } from '@/proto/msg'
 import { messageStore } from '@/stores'
 
 const props = defineProps(['sessionId', 'choosedSessionId'])
-const emit = defineEmits(['isChoosed', 'switchTag'])
+const emit = defineEmits(['isChoosed', 'switchTag', 'showUserCard', 'showGroupCard'])
 const messageData = messageStore()
 const sessionInfo = computed(() => {
   return messageData.sessionList[props.sessionId]
@@ -18,8 +16,6 @@ const sessionInfo = computed(() => {
 
 const top = ref(sessionInfo.value.top)
 const muted = ref(sessionInfo.value.muted)
-const isShowUserCard = ref(false)
-const isShowGroupCard = ref(false)
 
 const exportSession = {
   sessionId: props.sessionId,
@@ -75,19 +71,13 @@ const isShowUnreadCount = computed(() => {
   return sessionInfo.value.unreadCount > 0
 })
 
-const handleUserCard = (flag) => {
-  isShowUserCard.value = flag
-}
-const handleGroupCard = (flag) => {
-  isShowGroupCard.value = flag
-}
-const onShowUserCard = () => {
+const onShowCard = () => {
   switch (sessionInfo.value.sessionType) {
     case MsgType.CHAT:
-      isShowUserCard.value = true
+      emit('showUserCard', { sessionId: props.sessionId, account: showId.value })
       break
     case MsgType.GROUP_CHAT:
-      isShowGroupCard.value = true
+      emit('showGroupCard', { sessionId: props.sessionId, groupId: showId.value })
       break
     default:
       break
@@ -114,7 +104,7 @@ const switchTag = (func) => {
       :showName="showName"
       :showId="showId"
       :showAvatarThumb="showAvatarThumb"
-      @click="onShowUserCard"
+      @click="onShowCard"
     ></AvatarIcon>
     <div v-if="isShowUnreadCount" class="unread-tips"></div>
     <div class="content-box" @click="emit('isChoosed', exportSession)">
@@ -167,17 +157,6 @@ const switchTag = (func) => {
       </div>
     </div>
   </div>
-  <UserCard
-    :isShow="isShowUserCard"
-    :sessionId="props.sessionId"
-    :account="sessionInfo.objectInfo.account"
-    @update:isShow="handleUserCard"
-  ></UserCard>
-  <GroupCard
-    :isShow="isShowGroupCard"
-    @update:isShow="handleGroupCard"
-    :group="sessionInfo.objectInfo"
-  ></GroupCard>
 </template>
 
 <style lang="scss" scoped>

src/components/user/UserCard.vue

@@ -8,7 +8,7 @@ import { userQueryService } from '@/api/user'
 import { userStore, messageStore } from '@/stores'
 
 const props = defineProps(['isShow', 'sessionId', 'account'])
-const emit = defineEmits(['update:isShow'])
+const emit = defineEmits(['close'])
 
 const userCardRef = ref()
 const userData = userStore()
@@ -33,13 +33,13 @@ const preventClose = (event) => {
 
 const closeCardIfOutside = (event) => {
   if (!event.target.closest('.user-card') && !event.target.closest('.avatar-box') && props.isShow) {
-    emit('update:isShow', false)
+    onClose()
   }
 }
 
 const handleEscEvent = (event) => {
   if (event.key === 'Escape') {
-    emit('update:isShow', false)
+    onClose()
   }
 }
 
@@ -51,7 +51,7 @@ const truncatedSignature = computed(() => {
 
 // 关闭的时候触发
 const onClose = () => {
-  emit('update:isShow', false)
+  emit('close')
 }
 
 onMounted(() => {
@@ -66,31 +66,27 @@ onUnmounted(() => {
 
 onUpdated(async () => {
   if (props.isShow) {
+    isLoading.value = true
+    const loadingInstance = ElLoading.service(el_loading_options)
     if (isSelf.value) {
       await userData.updateUser()
     } else {
-      isLoading.value = true
-      const loadingInstance = ElLoading.service(el_loading_options)
-      userQueryService({ account: props.account })
-        .then((res) => {
-          messageData.updateSession({
-            sessionId: props.sessionId,
-            objectInfo: {
-              ...userInfo.value,
-              nickName: res.data.data.nickName,
-              signature: res.data.data.signature,
-              avatarThumb: res.data.data.avatarThumb,
-              gender: res.data.data.gender,
-              phoneNum: res.data.data.phoneNum,
-              email: res.data.data.email
-            }
-          })
-        })
-        .finally(() => {
-          loadingInstance.close()
-          isLoading.value = false
-        })
+      const res = await userQueryService({ account: props.account })
+      messageData.updateSession({
+        sessionId: props.sessionId,
+        objectInfo: {
+          ...userInfo.value,
+          nickName: res.data.data.nickName,
+          signature: res.data.data.signature,
+          avatarThumb: res.data.data.avatarThumb,
+          gender: res.data.data.gender,
+          phoneNum: res.data.data.phoneNum,
+          email: res.data.data.email
+        }
+      })
     }
+    loadingInstance.close()
+    isLoading.value = false
   }
 })
 </script>

src/views/message/MessageLayout.vue

@@ -360,6 +360,28 @@ const onClickMsgContainer = () => {
   handleRead()
 }
 
+const isShowUserCard = ref(false)
+const showUserCardSessionId = ref('')
+const showUserCardAccount = ref('')
+
+const isShowGroupCard = ref(false)
+const showUserGroupSessionId = ref('')
+const showUserCardGroupId = ref('')
+
+const onShowUserCard = ({ sessionId, account }) => {
+  showUserCardSessionId.value = sessionId
+  showUserCardAccount.value = account
+  isShowGroupCard.value = false
+  isShowUserCard.value = true
+}
+
+const onShowGroupCard = ({ sessionId, groupId }) => {
+  showUserGroupSessionId.value = sessionId
+  showUserCardGroupId.value = groupId
+  isShowUserCard.value = false
+  isShowGroupCard.value = true
+}
+
 /**
  * 监视msgRecords的数据变化,给出新消息的tips提示
  */
@@ -405,6 +427,8 @@ watch(() => msgRecords.value, (oldValue) => {
             :choosedSessionId="sessionId"
             @isChoosed="handleIsChoosed"
             @switchTag="handleSwitchTag"
+            @showUserCard="onShowUserCard"
+            @showGroupCard="onShowGroupCard"
           ></SessionBox>
         </div>
       </div>
@@ -465,6 +489,7 @@ watch(() => msgRecords.value, (oldValue) => {
                 :hasNoMoreMsg="hasNoMoreMsg"
                 :isLoadMoreLoading="isLoadMoreLoading"
                 @loadMore="onLoadMore"
+                @showUserCard="onShowUserCard"
               ></MessageItem>
             </div>
             <el-button
@@ -556,6 +581,18 @@ watch(() => msgRecords.value, (oldValue) => {
       </el-container>
     </el-main>
   </el-container>
+  <UserCard
+    :isShow="isShowUserCard"
+    :sessionId="showUserCardSessionId"
+    :account="showUserCardAccount"
+    @close="isShowUserCard = false"
+  ></UserCard>
+  <GroupCard
+    :isShow="isShowGroupCard"
+    :sessionId="showUserGroupSessionId"
+    :groupId="showUserCardGroupId"
+    @close="isShowGroupCard = false"
+  ></GroupCard>
 </template>
 
 <style lang="scss" scoped>