From 855b7a7057f33a726466830bf63a11c35a25fa66 Mon Sep 17 00:00:00 2001
From: bob <312777916@qq.com>
Date: Thu, 5 Sep 2024 17:50:19 +0800
Subject: [PATCH] =?UTF-8?q?UserCard=20=E6=94=B9=E6=88=90=20SessionCard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/message/AvatarIcon.vue            |  4 ++--
 src/components/message/SessionBox.vue            | 16 ++++++++++------
 .../UserCard.vue => message/SessionCard.vue}     |  4 ++--
 src/views/message/MessageLayout.vue              | 11 ++++++-----
 4 files changed, 20 insertions(+), 15 deletions(-)
 rename src/components/{user/UserCard.vue => message/SessionCard.vue} (99%)

diff --git a/src/components/message/AvatarIcon.vue b/src/components/message/AvatarIcon.vue
index 9e07d21..d153b8b 100644
--- a/src/components/message/AvatarIcon.vue
+++ b/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>
diff --git a/src/components/message/SessionBox.vue b/src/components/message/SessionBox.vue
index ded0163..b95ba4c 100644
--- a/src/components/message/SessionBox.vue
+++ b/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>
diff --git a/src/components/user/UserCard.vue b/src/components/message/SessionCard.vue
similarity index 99%
rename from src/components/user/UserCard.vue
rename to src/components/message/SessionCard.vue
index 4edb829..25fd94a 100644
--- a/src/components/user/UserCard.vue
+++ b/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>
diff --git a/src/views/message/MessageLayout.vue b/src/views/message/MessageLayout.vue
index bc7c0f4..c8116d1 100644
--- a/src/views/message/MessageLayout.vue
+++ b/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"