feat: migrate the message and chat page

Author: KunMoe

components/kun/avatar/Avatar.vue

@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<KunAvatarProps>(), {
 const handleClickAvatar = async (event: MouseEvent) => {
   event.preventDefault()
   if (props.isNavigation) {
-    await navigateTo(`/user/${props.user.uid}/info`)
+    await navigateTo(`/user/${props.user.id}/info`)
   }
 }
 

components/message/aside/Item.vue

@@ -15,7 +15,7 @@ defineProps<{
   >
     <KunAvatar
       :user="{
-        uid: parseInt(room.route),
+        id: parseInt(room.route),
         name: room.title,
         avatar: room.avatar
       }"
@@ -24,8 +24,8 @@ defineProps<{
     <div class="justify-space flex w-full flex-col">
       <div class="flex items-center justify-between">
         <span class="font-bold">{{ room.title }}</span>
-        <span class="text-default-500 text-sm" v-if="room.time">
-          {{ formatTimeDifference(room.time) }}
+        <span class="text-default-500 text-sm" v-if="room.lastMessageTime">
+          {{ formatTimeDifference(room.lastMessageTime) }}
         </span>
       </div>
 

components/message/aside/Notice.vue

@@ -49,7 +49,7 @@ const handleDeleteMessage = async (mid: number) => {
       </div>
 
       <div>
-        <KunLink :to="`/user/${message.sender.uid}/info`">
+        <KunLink :to="`/user/${message.sender.id}/info`">
           {{ message.sender.name }}
         </KunLink>
         <span>{{ getMessageI18n(message) }}</span>
@@ -63,7 +63,7 @@ const handleDeleteMessage = async (mid: number) => {
         color="default"
         underline="none"
         class="hover:text-primary cursor-pointer transition-colors"
-        :to="message.tid ? `/topic/${message.tid}` : `/galgame/${message.gid}`"
+        :to="message.link"
       >
         <pre
           class="break-word text-sm leading-8 whitespace-pre-line text-inherit"
@@ -76,7 +76,7 @@ const handleDeleteMessage = async (mid: number) => {
     <div class="flex justify-between">
       <span class="text-default-500 text-sm">
         {{
-          formatDate(message.time, {
+          formatDate(message.created, {
             isShowYear: true,
             isPrecise: true
           })
@@ -88,7 +88,7 @@ const handleDeleteMessage = async (mid: number) => {
         variant="light"
         color="danger"
         size="sm"
-        @click="handleDeleteMessage(message.mid)"
+        @click="handleDeleteMessage(message.id)"
       >
         <KunIcon name="lucide:trash-2" />
       </KunButton>

components/message/aside/System.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { MessageAdmin } from '~/types/api/message-admin'
+import type { SystemMessage } from '~/types/api/message'
 
 defineProps<{
-  message: MessageAdmin
+  message: SystemMessage
 }>()
 </script>
 
@@ -26,7 +26,7 @@ defineProps<{
       </div>
       <KunAvatar :user="message.admin" />
       <span class="text-default-500 text-sm">
-        {{ formatTimeDifference(message.time) }}
+        {{ formatTimeDifference(message.created) }}
       </span>
     </div>
 

components/message/aside/SystemItem.vue

@@ -18,8 +18,8 @@ defineProps<{
     <div class="justify-space flex w-full flex-col">
       <div class="flex items-center justify-between">
         <span class="font-bold">{{ title }}</span>
-        <span class="text-default-500 text-sm" v-if="data.time">
-          {{ formatTimeDifference(data.time) }}
+        <span class="text-default-500 text-sm" v-if="data.lastMessageTime">
+          {{ formatTimeDifference(data.lastMessageTime) }}
         </span>
       </div>
 

components/message/aside/asideItemStore.ts

@@ -1,17 +1,21 @@
-import type { AsideItem, Message } from '~/types/api/chat-message'
+import type { AsideItem, ChatMessage } from '~/types/api/chat-message'
 
 export const asideItems = ref<AsideItem[]>([])
 
-export const replaceAsideItem = (message: Message) => {
+export const replaceAsideItem = (message: ChatMessage) => {
   const targetIndex = asideItems.value.findIndex(
     (item) => item.chatroomName === message.chatroomName
   )
 
   if (targetIndex !== -1) {
     asideItems.value[targetIndex].content = message.content
-    asideItems.value[targetIndex].time = message.time
+    asideItems.value[targetIndex].lastMessageTime = message.created
     asideItems.value[targetIndex].count++
   }
 
-  asideItems.value.sort((a, b) => b.time - a.time)
+  asideItems.value.sort((a, b) => {
+    const timeA = new Date(a.lastMessageTime).getTime()
+    const timeB = new Date(b.lastMessageTime).getTime()
+    return timeB - timeA
+  })
 }

components/message/pm/Container.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { replaceAsideItem } from '../aside/asideItemStore'
-import type { Message } from '~/types/api/chat-message'
+import type { ChatMessage } from '~/types/api/chat-message'
 
 const props = defineProps<{
-  uid: number
+  userId: number
 }>()
 
 const socket = useSocketIO()
 useSocketIOErrorHandler()
 
 const historyContainer = ref<HTMLDivElement | null>(null)
 const messageInput = ref('')
-const messages = ref<Message[]>([])
+const messages = ref<ChatMessage[]>([])
 const isLoadHistoryMessageComplete = ref(false)
 const isShowLoader = computed(() => {
   if (isLoadHistoryMessageComplete.value) {
@@ -22,8 +22,8 @@ const isShowLoader = computed(() => {
   }
   return true
 })
-const currentUserUid = usePersistUserStore().uid
-const uid = props.uid
+const currentUserUid = usePersistUserStore().id
+const uid = props.userId
 const pageData = reactive({
   page: 1,
   limit: 30
@@ -69,15 +69,15 @@ watch(
 onMounted(async () => {
   socket.emit('private:join', uid)
 
-  socket.on('message:sent', (newMessage: Message) => {
+  socket.on('message:sent', (newMessage: ChatMessage) => {
     messages.value.push(newMessage)
     replaceAsideItem(newMessage)
     messageInput.value = ''
     nextTick(() => scrollToBottom())
   })
 
-  socket.on('message:received', (msg: Message) => {
-    if (msg.receiverUid === currentUserUid && msg.sender.uid === uid) {
+  socket.on('message:received', (msg: ChatMessage) => {
+    if (msg.receiverUid === currentUserUid && msg.sender.id === uid) {
       messages.value.push(msg)
       replaceAsideItem(msg)
       nextTick(() => {
@@ -97,7 +97,7 @@ onMounted(async () => {
 const onKeydown = async (event: KeyboardEvent) => {
   if (event.key === 'Enter') {
     event.preventDefault()
-    await sendMessage()
+    sendMessage()
   }
 }
 
@@ -156,7 +156,7 @@ const handleLoadHistoryMessages = async () => {
         v-for="(message, index) in messages"
         :key="index"
         :message="message"
-        :is-sent="uid !== message.sender.uid"
+        :is-sent="uid !== message.sender.id"
       />
     </div>
 

components/message/pm/Header.vue

@@ -1,22 +1,23 @@
 <script setup lang="ts">
 const props = defineProps<{
-  uid: number
+  id: number
 }>()
 
-const socket = useSocketIO()
+// const socket = useSocketIO()
 
-const res = await $fetch(`/api/user/${props.uid}`, {
+const res = await $fetch(`/api/user/${props.id}`, {
   method: 'GET',
+  query: { userId: props.id },
   ...kungalgameResponseHandler
 })
 
 const user = {
-  uid: props.uid,
+  id: props.id,
   name: typeof res !== 'string' ? res.name : '',
   avatar: typeof res !== 'string' ? res.avatar : ''
 }
 
-const handleReload = () => location.reload()
+// const handleReload = () => location.reload()
 </script>
 
 <template>
@@ -29,7 +30,7 @@ const handleReload = () => location.reload()
 
     <h2 class="relative flex items-center gap-2">
       <span>{{ user.name }}</span>
-      <span
+      <!-- <span
         class="absolute -right-6 h-4 w-4 rounded-full"
         :class="socket.connected ? 'bg-success' : 'bg-default'"
       />
@@ -40,7 +41,7 @@ const handleReload = () => location.reload()
       >
         <span>您已离线</span>
         <KunIcon name="lucide:refresh-ccw" />
-      </span>
+      </span> -->
     </h2>
   </header>
 </template>

components/message/pm/Item.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { Message } from '~/types/api/chat-message'
+import type { ChatMessage } from '~/types/api/chat-message'
 
 defineProps<{
-  message: Message
+  message: ChatMessage
   isSent: boolean
 }>()
 </script>
@@ -34,7 +34,7 @@ defineProps<{
       <div class="mt-1 text-sm leading-relaxed">
         <span>{{ message.content }}</span>
         <span class="text-default-500 ml-2 text-xs">
-          {{ formatTimeDifference(message.time) }}
+          {{ formatTimeDifference(message.created) }}
         </span>
       </div>
     </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kun-galgame-nuxt3",
-  "version": "4.0.9",
+  "version": "4.0.10",
   "packageManager": "pnpm@10.4.1",
   "private": true,
   "scripts": {