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' + } +}) @@ -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; + } } 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" > -
@@ -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" >
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" > 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 还有一个优先级,是在线和不在线的状态 } } })