【代码评审】IM：会话、消息相关的接口

src/views/chat/ChatPage/Index.vue

@@ -20,7 +20,7 @@
 import ToolSection from '../components/ToolSection/Index.vue'
 import Session from '../components/Session/Index.vue'
 import Friends from '../components/Friends/Index.vue'
-import ChatHeader from '../components/ChatHeader/Index.vue'
+import ChatHeader from '../components/ChatHeader/Index.vue' // TODO @dylan：为啥这个 index.vue 是大写哈？可以搞成小写哇？
 import ChatMessage from '../components/ChatMessage/Index.vue'
 import InputSection from '../components/InputSection/Index.vue'
 import FriendDetail from '../components/FriendDetail/Index.vue'

src/views/chat/components/ChatMessage/Index.vue

@@ -1,12 +1,21 @@
 <template>
   <view
     class="flex flex-col items-start w-full border-b-1 border-b-gray border-b-solid flex-1 border-b-1 border-b-gray border-b-solid py-2 overflow-scroll"
-    ref="listBoxRef">
+    ref="listBoxRef"
+  >
     <template v-for="item in chatStore.currentSession?.msgList">
-      <TextMsg v-if="item.contentType === ContentType.TEXT" :key="item.clientMessageId" :message="item" class="py-1" />
+      <TextMsg
+        v-if="item.contentType === ContentType.TEXT"
+        :key="item.clientMessageId"
+        :message="item"
+        class="py-1"
+      />
       <ImageMsg
-v-if="item.contentType === ContentType.IMAGE" :key="item.clientMessageId" :message="item"
+        v-if="item.contentType === ContentType.IMAGE"
-        class="py-1" />
+        :key="item.clientMessageId"
+        :message="item"
+        class="py-1"
+      />
     </template>
   </view>
 </template>
@@ -22,6 +31,7 @@ defineOptions({ name: 'ChatMessage' })
 const chatStore = useChatStore()
 const listBoxRef = ref<HTMLElement | null>(null)
 
+// TODO @dylan：msg 尽量使用 message 哈。非必要不缩写
 const msgListLength = computed(() => {
   return chatStore.currentSession ? chatStore.currentSession.msgList.length : 0
 })
@@ -29,12 +39,11 @@ const msgListLength = computed(() => {
 const scrollToBottom = () => {
   nextTick(() => {
     if (listBoxRef.value) {
-      console.log("scrollToBottom");
+      console.log('scrollToBottom')
-      listBoxRef.value.scrollTop = listBoxRef.value.scrollHeight;
+      listBoxRef.value.scrollTop = listBoxRef.value.scrollHeight
     }
-  });
+  })
-};
+}
-
 
 watch(msgListLength, (newLength, oldLength) => {
   if (newLength > oldLength) {
@@ -42,9 +51,10 @@ watch(msgListLength, (newLength, oldLength) => {
   }
 })
 
-
+watch(
-watch(() => chatStore.currentSessionIndex, () => {
+  () => chatStore.currentSessionIndex,
-  scrollToBottom()
+  () => {
-})
+    scrollToBottom()
-
+  }
+)
 </script>

src/views/chat/model/ChatConversation.ts

@@ -1,6 +1,8 @@
 import BaseConversation from './BaseConversation'
 import BaseMessage from './BaseMessage'
 
+// TODO @dylan：这些 ts 类，是不是可以搞个 types.ts，然后放到 api/im 目录下？放在一个文件里
+
 export class ChatConversation extends BaseConversation {
   constructor(
     id: string,

src/views/chat/store/chatstore.ts

@@ -7,11 +7,12 @@ import SessionApi from '../api/sessionApi'
 import MessageApi, { SendMsg } from '../api/messageApi'
 import { useUserStoreWithOut } from '@/store/modules/user'
 
+// TODO @dylan：是不是 chat => im；session => conversation；这样统一一点哈。
 interface ChatStoreModel {
   sessionList: Array<ConversationModelType>
   currentSession: ConversationModelType | null
   currentSessionIndex: number
-  inputText: string,
+  inputText: string
 }
 
 export const useChatStore = defineStore('chatStore', {
@@ -145,7 +146,6 @@ export const useChatStore = defineStore('chatStore', {
           // sendTime: new Date().toISOString().slice(0, -1)
         })
 
-
         this.currentSession.msgList = res.map((item) => {
           return {
             ...item,
@@ -155,7 +155,7 @@ export const useChatStore = defineStore('chatStore', {
           }
         })
       } catch (error) {
-      return error  
+        return error
       }
     }
   }