会话和消息处理

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

@@ -1,18 +1,12 @@
 <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">
     <template v-for="item in chatStore.currentSession?.msgList">
-      <TextMsg
-        v-if="item.contentType === ContentType.TEXT"
-        :key="item.clientMessageId"
-        :message="item"
-      />
+      <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" :key="item.clientMessageId" :message="item"
+        class="py-1" />
     </template>
   </view>
 </template>
@@ -26,4 +20,31 @@ import { ContentType } from '../../types/index.d.ts'
 defineOptions({ name: 'ChatMessage' })
 
 const chatStore = useChatStore()
+const listBoxRef = ref<HTMLElement | null>(null)
+
+const msgListLength = computed(() => {
+  return chatStore.currentSession ? chatStore.currentSession.msgList.length : 0
+})
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (listBoxRef.value) {
+      console.log("scrollToBottom");
+      listBoxRef.value.scrollTop = listBoxRef.value.scrollHeight;
+    }
+  });
+};
+
+
+watch(msgListLength, (newLength, oldLength) => {
+  if (newLength > oldLength) {
+    scrollToBottom()
+  }
+})
+
+
+watch(() => chatStore.currentSessionIndex, () => {
+  scrollToBottom()
+})
+
 </script>

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

@@ -3,7 +3,7 @@
     class="flex flex-col items-center w-full border-b-1 border-b-gray border-b-solid"
     style="height: 248px; min-height: 248px"
   >
-    <view class="flex p-2 w-full" style="height: 20px">
+    <view class="flex p-2 w-full" style="height: 32px">
       <Icon icon="ep:apple" color="var(--top-header-text-color)" class="custom-hover" />
       <Icon icon="ep:folder" color="var(--top-header-text-color)" class="custom-hover" />
       <Icon icon="ep:chat-line-square" color="var(--top-header-text-color)" class="custom-hover" />
@@ -26,6 +26,7 @@ import TextMessage from '../../model/TextMessage'
 import { useChatStoreWithOut } from '../../store/chatstore'
 import { CONVERSATION_TYPE } from '../../types/index.d.ts'
 import { SendStatus, MessageRole, ContentType } from '../../types/index.d.ts'
+import { useUserStoreWithOut } from '../../../../store/modules/user';
 
 defineOptions({ name: 'InputSection' })
 
@@ -38,20 +39,23 @@ const onEnter = () => {
 }
 
 const createTextMessage = (content: string): TextMessage => {
-  console.log('====>>>>', content)
+
+  const userStore = useUserStoreWithOut()
+
   // 部分信息从account信息里面获取
   const msg = new TextMessage(
     '',
-    '',
-    '',
+    userStore.user.avatar,
+    userStore.user.nickname,
     new Date().getTime(),
     false,
     content,
     MessageRole.SELF,
     SendStatus.SENDING,
     chatStore.currentSession?.id || '',
-    chatStore.currentSession?.targetId,
-    chatStore.currentSession?.type || CONVERSATION_TYPE.SINGLE
+    chatStore.currentSession ? chatStore.currentSession.targetId : 0,
+    chatStore.currentSession?.type || CONVERSATION_TYPE.SINGLE,
+    chatStore.currentSession?.conversationNo || ''
   )
 
   return msg

src/views/chat/components/Message/BaseMsg.vue

@@ -4,7 +4,7 @@
     :class="props.message.role === MessageRole.SELF ? 'flex-row-reverse' : 'flex-row'"
   >
     <el-avatar shape="square" size="default" class="mx-2" :src="props.message.avatar" />
-    <view class="flex flex-col">
+    <view class="flex flex-col" :class="props.message.role === MessageRole.SELF ? 'items-end' : 'items-start'">
       <label class="text-xs text-gray-4 mb-1">{{ props.message.nickname }}</label>
       <view class="flex items-center">
         <el-icon v-if="props.message.sendStatus === SendStatus.SENDING" class="is-loading"

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="flex flex-col items-center h-full py-2 b-1 b-gray b-solid" style="width: 248px">
+  <view class="flex flex-col items-center h-full py-2 b-1 b-gray b-solid" style="width: 258px">
     <view class="flex flex-col w-full">
       <SessionItem
         v-for="(item, index) in chatStore.sessionList"

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

@@ -1,40 +1,34 @@
 <template>
   <view class="flex py-2 border-b-gray-3 border-b-solid items-center px-2" :class="bgColor()">
-    <el-avatar shape="square" size="default" class="mr-2">
-      {{ props.conversation.name || '' }}
-    </el-avatar>
+    <el-avatar shape="square" size="default" class="mr-2" :src="props.conversation.avatar" />
+
     <view class="flex flex-col flex-1 tems-end h-full">
-      <label
-        class="text-black-c text-size-sm font-medium text-ellipsis text-nowrap"
-        :class="namefontColor()"
-        >{{ props.conversation.name }}</label
-      >
-      <label
-        class="text-gray-f text-size-sm text-ellipsis text-nowrap mr-1"
-        :class="timefontColor()"
-        >{{ props.conversation.description }}</label
-      >
+      <label class="text-black-c text-size-sm font-medium text-ellipsis text-nowrap" :class="namefontColor()">{{
+        props.conversation.nickname || '' }}</label>
+      <label class="text-gray-f text-size-sm text-ellipsis text-nowrap mr-1" :class="timefontColor()">{{ lastMessage
+        }}</label>
     </view>
     <view class="flex items-end h-full flex-col">
       <label class="text-gray-f text-size-xs text-nowrap" :class="timefontColor()">{{
-        formatPast(new Date(props.conversation.updateTime), 'YYYY-MM-DD')
-      }}</label>
+        formatPast(new Date(props.conversation.updateTime), 'YYYY/MM/DD')
+        }}</label>
     </view>
   </view>
 </template>
 
 <script lang="ts" setup>
 import { PropType } from 'vue'
-import { ConversationModelType } from '../../types'
+import { ContentType, ConversationModelType } from '../../types/index.d.ts'
 import { formatPast } from '@/utils/formatTime'
 import { useChatStore } from '../../store/chatstore'
+import TextMessage from '../../model/TextMessage';
 
 defineOptions({ name: 'SessionItem' })
 
 const props = defineProps({
   conversation: {
     type: Object as PropType<ConversationModelType>,
-    default: () => {}
+    default: () => { }
   },
   index: Number
 })
@@ -51,6 +45,32 @@ const namefontColor = () => {
 const timefontColor = () => {
   return props.index === chatStore.currentSessionIndex ? 'text-white' : 'timeColor'
 }
+
+
+/**
+ * TODO: 修改为后端计算，否则在没有打开聊天窗口的时候，没有数据。
+ */
+const lastMessage = computed(() => {
+
+  if (props.conversation.msgList.length === 0) {
+    return props.conversation.lastMessageDescription
+  }
+  
+  const lastIndex = props.conversation.msgList.length - 1
+  const lastMessage = props.conversation.msgList[lastIndex]
+
+  if (!lastMessage) {
+    return ''
+  }
+
+  if (lastMessage.contentType === ContentType.TEXT) {
+    return (lastMessage as TextMessage).content
+  } else if (lastMessage.contentType === ContentType.IMAGE) {
+    return '[图片]'
+  } else {
+    return '[其他]'
+  }
+})
 </script>
 
 <style lang="scss" scoped>