From e63ee1d62fbd4e77336f2d5e3eabc36a4e588e3c Mon Sep 17 00:00:00 2001
From: bob <312777916@qq.com>
Date: Mon, 21 Oct 2024 16:30:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=94=A8=E6=88=B7=E5=9C=A8?=
 =?UTF-8?q?=E7=BA=BF=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/message/AvatarIcon.vue         | 32 ++++++++++++++++++-
 src/components/message/SessionBox.vue         | 14 ++------
 .../search/ResultItem/ContactItem.vue         |  1 +
 src/views/layout/LayoutContainer.vue          |  1 +
 src/views/message/MessageLayout.vue           |  1 +
 5 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/src/components/message/AvatarIcon.vue b/src/components/message/AvatarIcon.vue
index 735df76..791f0d5 100644
--- a/src/components/message/AvatarIcon.vue
+++ b/src/components/message/AvatarIcon.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { getRandomColor, getFontColor } from '@/utils/common'
 
-const props = defineProps(['showName', 'showId', 'showAvatarThumb', 'size'])
+const props = defineProps(['showName', 'showId', 'showAvatarThumb', 'userStatus', 'size'])
 
 const avatarSize = props.size || 40
 
@@ -16,6 +16,20 @@ const firstChar = computed(() => {
 
 const randomColor = getRandomColor(props.showName || props.showId)
 const fontColor = getFontColor(randomColor)
+
+const statusCircleColor = computed(() => {
+  switch (props.userStatus) {
+    case 1:
+      return 'yellow'
+    case 2:
+      return '#95d475'
+    case 3:
+      return 'red'
+    case 0:
+    default:
+      return 'gray'
+  }
+})
 </script>
 
 <template>
@@ -24,6 +38,11 @@ const fontColor = getFontColor(randomColor)
     <span class="first-char-box" v-else :style="{ backgroundColor: randomColor, color: fontColor }">
       {{ firstChar }}
     </span>
+    <div
+      v-if="props.userStatus != null"
+      class="status-circle"
+      :style="{ backgroundColor: statusCircleColor }"
+    ></div>
   </div>
 </template>
 
@@ -32,6 +51,7 @@ const fontColor = getFontColor(randomColor)
   flex-shrink: 0;
   cursor: pointer;
   overflow: hidden;
+  position: relative;
 
   .first-char-box {
     font-size: 18px;
@@ -42,5 +62,15 @@ const fontColor = getFontColor(randomColor)
     justify-content: center;
     align-items: center;
   }
+
+  .status-circle {
+    width: 12px;
+    height: 12px;
+    border: 1px solid #fff;
+    border-radius: 50%;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
 }
 </style>
diff --git a/src/components/message/SessionBox.vue b/src/components/message/SessionBox.vue
index c03e054..fd997a4 100644
--- a/src/components/message/SessionBox.vue
+++ b/src/components/message/SessionBox.vue
@@ -176,9 +176,9 @@ const onContextmenu = () => {
         :showName="showName"
         :showId="showId"
         :showAvatarThumb="showAvatarThumb"
+        :userStatus="sessionInfo.objectInfo.status"
         @click="onShowCard"
       ></AvatarIcon>
-      <div v-if="isShowUnreadCount" class="unread-tips"></div>
       <div class="content-box" @click="emit('isSelected', props.sessionId)">
         <div class="header">
           <div class="title">
@@ -253,16 +253,6 @@ const onContextmenu = () => {
     background-color: #c6e2ff;
   }
 
-  .unread-tips {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background-color: red;
-    position: absolute;
-    top: 5px;
-    left: 40px;
-  }
-
   .content-box {
     width: 100%;
     height: 100%;
@@ -326,7 +316,7 @@ const onContextmenu = () => {
         overflow: hidden;
 
         .unread-count {
-          color: gray;
+          color: red;
           flex-shrink: 0;
         }
 
diff --git a/src/components/search/ResultItem/ContactItem.vue b/src/components/search/ResultItem/ContactItem.vue
index 6e6f8b5..29a9a37 100644
--- a/src/components/search/ResultItem/ContactItem.vue
+++ b/src/components/search/ResultItem/ContactItem.vue
@@ -21,6 +21,7 @@ const onOpenSession = () => {
       :showName="props.contactInfo.nickName"
       :showId="props.contactInfo.account"
       :showAvatarThumb="props.contactInfo.avatarThumb"
+      :userStatus="props.contactInfo.status"
       @click="onShowCard"
     ></AvatarIcon>
     <div class="body" @click="onOpenSession">
diff --git a/src/views/layout/LayoutContainer.vue b/src/views/layout/LayoutContainer.vue
index 919f906..054dc6d 100644
--- a/src/views/layout/LayoutContainer.vue
+++ b/src/views/layout/LayoutContainer.vue
@@ -86,6 +86,7 @@ const onExit = async () => {
           :showName="userData.user.nickName"
           :showId="userData.user.account"
           :showAvatarThumb="userData.user.avatarThumb"
+          :userStatus="userData.user.status"
           @click="openMyCardDialog"
         >
         </AvatarIcon>
diff --git a/src/views/message/MessageLayout.vue b/src/views/message/MessageLayout.vue
index 3ae791e..e3f759c 100644
--- a/src/views/message/MessageLayout.vue
+++ b/src/views/message/MessageLayout.vue
@@ -191,6 +191,7 @@ const sessionListSorted = computed(() => {
             // 排序第四优先级：昵称字典序
             return a.objectInfo.nickName > b.objectInfo.nickName ? 1 : -1
           }
+          // TODO 还有一个优先级，是在线和不在线的状态
         }
       }
     })