diff --git a/src/views/chat/ChatPage/Index.vue b/src/views/chat/ChatPage/Index.vue
index f801ec19..3a1a604f 100644
--- a/src/views/chat/ChatPage/Index.vue
+++ b/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'
diff --git a/src/views/chat/components/ChatMessage/Index.vue b/src/views/chat/components/ChatMessage/Index.vue
index 345d4908..06027f83 100644
--- a/src/views/chat/components/ChatMessage/Index.vue
+++ b/src/views/chat/components/ChatMessage/Index.vue
@@ -1,12 +1,21 @@
+ ref="listBoxRef"
+ >
-
+
+ v-if="item.contentType === ContentType.IMAGE"
+ :key="item.clientMessageId"
+ :message="item"
+ class="py-1"
+ />
@@ -22,6 +31,7 @@ defineOptions({ name: 'ChatMessage' })
const chatStore = useChatStore()
const listBoxRef = ref(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");
- listBoxRef.value.scrollTop = listBoxRef.value.scrollHeight;
+ console.log('scrollToBottom')
+ listBoxRef.value.scrollTop = listBoxRef.value.scrollHeight
}
- });
-};
-
+ })
+}
watch(msgListLength, (newLength, oldLength) => {
if (newLength > oldLength) {
@@ -42,9 +51,10 @@ watch(msgListLength, (newLength, oldLength) => {
}
})
-
-watch(() => chatStore.currentSessionIndex, () => {
- scrollToBottom()
-})
-
+watch(
+ () => chatStore.currentSessionIndex,
+ () => {
+ scrollToBottom()
+ }
+)
diff --git a/src/views/chat/model/ChatConversation.ts b/src/views/chat/model/ChatConversation.ts
index f2115b30..c931bdbe 100644
--- a/src/views/chat/model/ChatConversation.ts
+++ b/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,
diff --git a/src/views/chat/store/chatstore.ts b/src/views/chat/store/chatstore.ts
index b6f6d4bc..c7f7f17b 100644
--- a/src/views/chat/store/chatstore.ts
+++ b/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
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
}
}
}