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' + } +}) @@ -24,6 +38,11 @@ const fontColor = getFontColor(randomColor) {{ firstChar }} + @@ -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" > -