feat: unread

packages/badge/badge.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  count?: number
+  isDot?: boolean
+}>(), {
+})
+
+const showCount = computed(() => {
+  if (props.count && !props.isDot)
+    return true
+  return false
+})
+
+const badgeClass = computed(() => {
+  if (showCount.value)
+    return 'rounded-10px color-white px-5px top--5px right--4px h-18px'
+  return 'w-8px h-8px rounded top--2px right--4px'
+})
+</script>
+
+<template>
+  <div relative>
+    <slot />
+    <div
+      v-if="count"
+      absolute text-12px
+      bg="red"
+      :class="badgeClass"
+    >
+      {{ showCount ? count : '' }}
+    </div>
+  </div>
+</template>

packages/badge/index.ts

@@ -0,0 +1,10 @@
+import type { App, Plugin } from 'vue'
+import NcBadge from './badge.vue'
+
+export const NcBadgePlugin: Plugin = {
+  install(app: App) {
+    app.component(NcBadge.name, NcBadge)
+  },
+}
+
+export { NcBadge }

packages/contact/contact.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { NcAvatar } from '..'
 import { formatDate } from '../_utils'
+import NcBadge from '../badge/badge.vue'
 import type { Contact } from './types'
 
 defineProps<{
@@ -22,8 +23,15 @@ defineOptions({
       flex="~"
       justify-between
     >
-      <div flex="~ items-center" overflow-hidden>
+      <NcBadge v-if="lastMessage" :count="contact.unread" :is-dot="contact.quiet">
         <NcAvatar :url="contact.avatar" />
+      </NcBadge>
+      <NcAvatar v-else :url="contact.avatar" />
+      <div
+        flex="~ 1"
+        justify-between
+        overflow-hidden
+      >
         <div flex-1 truncate pl-10px text-left>
           <div text-14px font-400>
             {{ contact.nickname }}
@@ -37,17 +45,17 @@ defineOptions({
             {{ contact.lastMessage }}
           </div>
         </div>
-      </div>
-      <div
-        v-if="lastMessage"
-        flex="~ col items-center"
-        text="12px gray-500/50 right"
-        justify-top min-w-50px
-      >
-        <div w-full text-right>
-          {{ formatDate(contact.lastTime!) }}
+        <div
+          v-if="lastMessage"
+          flex="~ col items-center"
+          text="12px gray-500/50 right"
+          justify-top min-w-50px
+        >
+          <div w-full text-right>
+            {{ formatDate(contact.lastTime!) }}
+          </div>
+          <div v-if="contact.quiet" i-ri:notification-off-line />
         </div>
-        <div v-if="contact.quiet" i-ri:notification-off-line />
       </div>
     </div>
   </div>

packages/contact/types.ts

@@ -5,5 +5,6 @@ export interface Contact {
   lastTime?: number
   avatar: string
   quiet?: boolean
+  unread?: number
   index: string
 }

packages/index.ts

@@ -8,13 +8,15 @@ import { NcContact, NcContactPlugin } from './contact'
 import { NcMessage, NcMessagePlugin } from './message'
 import { NcAvatar, NcAvatarPlugin } from './avatar'
 import { NcEditor, NcEditorPlugin } from './editor'
+import { NcBadge, NcBadgePlugin } from './badge'
 
 export type NaiveChatType = InstanceType<typeof NaiveChat>
 export type NcMenuType = InstanceType<typeof NcMenu>
 export type NcContactType = InstanceType<typeof NcContact>
 export type NcAvatarType = InstanceType<typeof NcAvatar>
 export type NcMessageType = InstanceType<typeof NcMessage>
 export type NcEditorType = InstanceType<typeof NcEditor>
+export type NcBadgeType = InstanceType<typeof NcBadge>
 
 const components = [
   NaiveChatPlugin,
@@ -23,6 +25,7 @@ const components = [
   NcContactPlugin,
   NcAvatarPlugin,
   NcEditorPlugin,
+  NcBadgePlugin,
 ]
 const NaiveChatP: Plugin = {
   install(app: App) {
@@ -39,6 +42,7 @@ export {
   NcMenu,
   NcAvatar,
   NcEditor,
+  NcBadge,
 }
 export * from './types'
 export default NaiveChatP

packages/naive-chat/index.vue

@@ -73,9 +73,16 @@ watchEffect(() => {
   currentMessage.value = messageStore[currentContact.value?.id || NaN]
 })
 
+function getCurrentContact() {
+  return currentContact.value
+}
+
 function changeLastMessage(contact: Contact) {
   currentContact.value = contact
-
+  updateContact({
+    id: contact.id,
+    unread: 0,
+  } as Contact)
   if (!messageStore[contact.id]) {
     messageStore[contact.id] = {
       loading: true,
@@ -150,6 +157,14 @@ function appendMessage(message: Message) {
     } as Contact)
     scrollToBottom()
   }
+  else {
+    updateContact({
+      id: message.fromUser.id,
+      lastMessage: renderLastMessage(message),
+      lastTime: message.sendTime,
+      unread: 1,
+    } as Contact)
+  }
 }
 
 function renderLastMessage(message: Message) {
@@ -167,7 +182,13 @@ function updateContact(contact: Contact) {
   if (index === -1)
     return
   const oldContact = contacts.value[index]
-  contacts.value[index] = { ...oldContact, ...contact }
+  contacts.value[index] = {
+    ...oldContact,
+    ...contact,
+    unread: contact.id === currentContact.value?.id
+      ? 0
+      : (oldContact.unread || 0) + (contact.unread || 0),
+  }
 }
 
 function createMessage<T extends Message>(message: T): Message {
@@ -275,9 +296,27 @@ function toMessage(contact: Contact) {
   changeLastMessage(contact)
 }
 
-defineExpose<{
+function appendContact(contact: Contact) {
+  contacts.value.push(contact)
+}
 
-}>()
+function removeContact(id: number) {
+  contacts.value = contacts.value.filter(item => item.id !== id)
+}
+
+function clearMessage(id: number) {
+  messageStore[id].data = []
+}
+
+defineExpose({
+  appendMessage,
+  updateContact,
+  updateMessage,
+  getCurrentContact,
+  appendContact,
+  removeContact,
+  clearMessage,
+})
 </script>
 
 <template>

src/App.vue

@@ -12,13 +12,15 @@ const userInfo = {
 const contacts = ref<Contact[]>([])
 
 for (let i = 0; i < 20; i++) {
+  const id = i + 1
   contacts.value.push({
-    id: i + 1,
+    id,
     nickname: `好友${1 + i}`,
     avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/RMksZlPP4myx9pbGzt3PmV2FNIpia8hVHpUXbHM0RfbJtsSMEWCLicbvGuJRMpoAam3sZclNo0YtOnvJ0a8eMtyQ/132',
-    lastMessage: (i + 2) % 2 === 0 ? 'hello' : undefined,
+    lastMessage: (i + 2) % 2 === 0 ? 'helloooooooo00000000' : undefined,
     lastTime: i === 6 ? 1690639200000 : Date.now(),
     index: i <= 3 ? 'A' : i > 3 && i <= 7 ? 'C' : 'D',
+    unread: id === 1 ? 10 : id === 3 ? 2 : 0,
   })
 }
 // console.log('1')