增加用户在线状态

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>

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;
         }
 

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">

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>

src/views/message/MessageLayout.vue

@@ -191,6 +191,7 @@ const sessionListSorted = computed(() => {
             // 排序第四优先级：昵称字典序
             return a.objectInfo.nickName > b.objectInfo.nickName ? 1 : -1
           }
+          // TODO 还有一个优先级，是在线和不在线的状态
         }
       }
     })