UserCard 改成 SessionCard

src/components/message/AvatarIcon.vue

@@ -15,14 +15,14 @@ const firstChar = computed(() => {
 const randomColor = getRandomColor(props.user.account)
 const fontColor = getFontColor(randomColor)
 
-const openUserCardDialog = () => {
+const openSessionCardDialog = () => {
   // 打开用户头像卡片
 }
 </script>
 
 <template>
   <div class="avatar-box">
-    <el-avatar v-if="isShowImg" :src="props.user.avatarThumb" @click="openUserCardDialog" />
+    <el-avatar v-if="isShowImg" :src="props.user.avatarThumb" @click="openSessionCardDialog" />
     <span class="first-char-box" v-else :style="{ backgroundColor: randomColor, color: fontColor }">
       {{ firstChar }}
     </span>

src/components/message/SessionBox.vue

@@ -2,14 +2,14 @@
 import { ref, computed } from 'vue'
 import AvatarIcon from './AvatarIcon.vue'
 import SessionTag from './SessionTag.vue'
-import UserCard from '../user/UserCard.vue'
+import SessionCard from './SessionCard.vue'
 import { Top, Bottom, MuteNotification, Bell } from '@element-plus/icons-vue'
 
 const props = defineProps(['user', 'sessionId'])
 const emit = defineEmits(['exportData'])
 const isPinToTop = ref(false)
 const isMute = ref(false)
-const isShowUserCard = ref(false)
+const isShowSessionCard = ref(false)
 
 const sessionInfo = computed(() => {
   return {
@@ -18,14 +18,14 @@ const sessionInfo = computed(() => {
   }
 })
 
-const handleUserCard = (flag) => {
-  isShowUserCard.value = flag
+const handleSessionCard = (flag) => {
+  isShowSessionCard.value = flag
 }
 </script>
 
 <template>
   <div class="session-box">
-    <AvatarIcon :user="props.user" @click="isShowUserCard = true"></AvatarIcon>
+    <AvatarIcon :user="props.user" @click="isShowSessionCard = true"></AvatarIcon>
     <div class="content-box" @click="emit('exportData', sessionInfo)">
       <div class="header">
         <div class="title">
@@ -63,7 +63,11 @@ const handleUserCard = (flag) => {
       </div>
     </div>
   </div>
-  <UserCard :isShow="isShowUserCard" @update:isShow="handleUserCard" :user="props.user"></UserCard>
+  <SessionCard
+    :isShow="isShowSessionCard"
+    @update:isShow="handleSessionCard"
+    :user="props.user"
+  ></SessionCard>
 </template>
 
 <style lang="scss" scoped>

src/components/message/SessionCard.vue

@@ -7,7 +7,7 @@ const props = defineProps(['isShow', 'user'])
 const emit = defineEmits(['update:isShow'])
 
 // const isLoading = ref(false)
-const userCardRef = ref()
+const sessionCardRef = ref()
 
 const preventClose = (event) => {
   event.stopPropagation()
@@ -48,7 +48,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="userCardRef">
+  <div ref="sessionCardRef">
     <transition name="fade">
       <div v-if="isShow" class="overlay"></div>
     </transition>

src/views/message/MessageLayout.vue

@@ -37,7 +37,10 @@ const inputBoxHeightMax = 400
 
 const curSessionId = ref('')
 const curChatObject = ref({})
-const sessionArr = ref([])
+const sessions = ref({
+  chatSessions: [],
+  groupChatSessions: []
+})
 
 
 onMounted(async () => {
@@ -45,9 +48,7 @@ onMounted(async () => {
   curChatObject.value = messageData.lastChatObj
 
   const res = await msgChatSessionListService()
-  sessionArr.value = res.data.data
-  console.log(sessionArr);
-  
+  sessions.value.chatSessions = res.data.data
 })
 
 const onAsideDragUpdate = ({ width }) => {
@@ -79,7 +80,7 @@ const handleExportData = (data) => {
         </div>
         <div class="session-list">
           <SessionBox
-            v-for="item in sessionArr"
+            v-for="item in sessions.chatSessions"
             :key="item.session"
             :user="item.userInfo"
             :sessionId="item.session_id"