refactor: 优化

src/renderer/components/chatroom.vue → src/renderer/components/Chatroom/index.vue

@@ -3,14 +3,14 @@ import { ElButton, ElMessage } from 'element-plus'
 import { type Ref, nextTick, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 
+import MessageComponent from './Message.vue'
 import type { Client } from '~/typings/app'
 import { useChatStore } from '~/stores/chat'
 import { useAccountStore } from '~/stores/account'
 import { useFriendStore } from '~/stores/friend'
 import { useNetworkStore } from '~/stores/network'
 import { postFileMsg, postImageMsg, postTextMsg } from '~/api/message'
 import { DISPLAY_MODE_ENABLE } from '~/config'
-import MessageComponent from '~/components/message.vue'
 
 const messageContainer = ref<HTMLDivElement>() as Ref<HTMLDivElement>
 const imageInput = ref<HTMLInputElement>() as Ref<HTMLInputElement>
@@ -36,6 +36,11 @@ watch(selectedFriend, (friend) => {
   text.value = textMap.get(friend.uid) || ''
 })
 
+chatStore.onAddNewMessage(async () => {
+  await nextTick()
+  messageContainer.value.scrollTo({ top: 1e9, behavior: 'smooth' })
+})
+
 function getHostAndPort(client: Client) {
   if (networkInfo.value.ipv6 && client.ipv6)
     return `[${client.ipv6}]:${client.port}`
@@ -92,8 +97,6 @@ async function sendText() {
     data: text.value,
   })
   text.value = ''
-  await nextTick()
-  messageContainer.value.scrollTo({ top: 1e9, behavior: 'smooth' })
 }
 
 async function sendImage(event: Event) {
@@ -135,8 +138,6 @@ async function sendImage(event: Event) {
     data: new Uint8Array(await image.arrayBuffer()),
   })
   imageInput.value.value = ''
-  await nextTick()
-  messageContainer.value.scrollTo({ top: 1e9, behavior: 'smooth' })
 }
 
 async function sendFile(event: Event) {
@@ -173,8 +174,6 @@ async function sendFile(event: Event) {
     size: file.size,
   })
   fileInput.value.value = ''
-  await nextTick()
-  messageContainer.value.scrollTo({ top: 1e9, behavior: 'smooth' })
 }
 </script>
 

src/renderer/pages/main/chat.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import FriendList from '~/components/friend_list.vue'
-import Chatroom from '~/components/chatroom.vue'
+import FriendList from '~/components/FriendList.vue'
+import Chatroom from '~/components/Chatroom/index.vue'
 </script>
 
 <template>

src/renderer/pages/main/friend_request.vue

@@ -2,7 +2,7 @@
 import { ElButton } from 'element-plus'
 import { useRouter } from 'vue-router'
 import { useFriendStore } from '~/stores/friend'
-import FriendRequestItem from '~/components/friend_request_item.vue'
+import FriendRequestItem from '~/components/FriendRequestItem.vue'
 
 const router = useRouter()
 

src/renderer/pages/main/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Sidebar from '~/components/sidebar.vue'
+import Sidebar from '~/components/Sidebar.vue'
 </script>
 
 <template>

src/renderer/stores/chat.ts

@@ -5,6 +5,8 @@ import { useAccountStore } from './account'
 import type { Friend, Message } from '~/typings/app'
 
 export const useChatStore = defineStore('chat', () => {
+  const onAddNewMessageCallbacks: ((message: Message) => void)[] = []
+
   const accountStore = useAccountStore()
   const messagesMap = new Map<number, Message[]>()
 
@@ -30,6 +32,12 @@ export const useChatStore = defineStore('chat', () => {
       messagesMap.set(friendUid, messages)
     }
     messages.push({ ...message })
+    for (const cb of onAddNewMessageCallbacks)
+      cb({ ...message })
+  }
+
+  function onAddNewMessage(cb: (message: Message) => void) {
+    onAddNewMessageCallbacks.push(cb)
   }
 
   window.electron.setNewTextMessageHandler((from, to, textMsg) => {
@@ -46,5 +54,6 @@ export const useChatStore = defineStore('chat', () => {
     selectedFriend,
     selectedMessages,
     addNewMessage,
+    onAddNewMessage,
   }
 })