单聊对接

2024-10-19 16:06:29 +08:00
parent aaba03d001
commit 90619542c8
19 changed files with 354 additions and 137 deletions
--- a/src/views/chat/components/ChatHeader/Index.vue
+++ b/src/views/chat/components/ChatHeader/Index.vue
@ -1,7 +1,7 @@
 <template>
  <view
    class="flex items-center w-full border-b-1 border-b-gray border-b-solid"
-    style="height: 60px"
+    style="height: 60px; min-height: 60px"
  >
    <label class="text-black text-size-xl font-medium mx-4">{{
      chatStore.currentSession?.name
--- a/src/views/chat/components/ChatMessage/Index.vue
+++ b/src/views/chat/components/ChatMessage/Index.vue
@ -1,19 +1,27 @@
 <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"
+    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"
  >
    <template v-for="item in chatStore.currentSession?.msgList">
-      <TextMessage v-if="item.messageType === MessageType.TEXT" :key="item.id" :message="item" />
-      <ImageMessage v-if="item.messageType === MessageType.IMAGE" :key="item.id" :message="item" />
+      <TextMsg
+        v-if="item.contentType === ContentType.TEXT"
+        :key="item.clientMessageId"
+        :message="item"
+      />
+      <ImageMsg
+        v-if="item.contentType === ContentType.IMAGE"
+        :key="item.clientMessageId"
+        :message="item"
+      />
    </template>
  </view>
 </template>

 <script lang="ts" setup>
 import { useChatStore } from '../../store/chatstore'
-import TextMessage from '@/views/chat/components/Message/TextMessage.vue'
-import ImageMessage from '@/views/chat/components/Message/ImageMessage.vue'
-import { MessageType } from '../../types/index.d.ts'
+import TextMsg from '@/views/chat/components/Message/TextMsg.vue'
+import ImageMsg from '@/views/chat/components/Message/ImageMsg.vue'
+import { ContentType } from '../../types/index.d.ts'

 defineOptions({ name: 'ChatMessage' })

--- a/src/views/chat/components/InputSection/Index.vue
+++ b/src/views/chat/components/InputSection/Index.vue
@ -1,7 +1,7 @@
 <template>
  <view
    class="flex flex-col items-center w-full border-b-1 border-b-gray border-b-solid"
-    style="height: 248px"
+    style="height: 248px; min-height: 248px"
  >
    <view class="flex p-2 w-full" style="height: 20px">
      <Icon icon="ep:apple" color="var(--top-header-text-color)" class="custom-hover" />
@ -23,12 +23,13 @@

 <script lang="ts" setup>
 import TextMessage from '../../model/TextMessage'
-import { useChatStore } from '../../store/chatstore'
-import { SendStatus, MessageRole, MessageType } from '../../types/index.d.ts'
+import { useChatStoreWithOut } from '../../store/chatstore'
+import { CONVERSATION_TYPE } from '../../types/index.d.ts'
+import { SendStatus, MessageRole, ContentType } from '../../types/index.d.ts'

 defineOptions({ name: 'InputSection' })

-const chatStore = useChatStore()
+const chatStore = useChatStoreWithOut()
 const onEnter = () => {
  console.log('enter pressed')
  const msg = createTextMessage(chatStore.inputText)
@ -38,19 +39,19 @@ const onEnter = () => {

 const createTextMessage = (content: string): TextMessage => {
  console.log('====>>>>', content)
-  const _localId = `${new Date().getTime()}`
  // 部分信息从account信息里面获取
  const msg = new TextMessage(
-    _localId,
-    'https://img0.baidu.com/it/u=1121635512,1294972039&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
-    'Dylan May',
+    '',
+    '',
+    '',
    new Date().getTime(),
    false,
    content,
    MessageRole.SELF,
-    SendStatus.SUCCESS,
-    MessageType.TEXT,
-    chatStore.currentSession?.id || ''
+    SendStatus.SENDING,
+    chatStore.currentSession?.id || '',
+    chatStore.currentSession?.targetId,
+    chatStore.currentSession?.type || CONVERSATION_TYPE.SINGLE
  )

  return msg
--- a/src/views/chat/components/Message/BaseMessage.vue
+++ b/src/views/chat/components/Message/BaseMessage.vue
@ -6,14 +6,20 @@
    <el-avatar shape="square" size="default" class="mx-2" :src="props.message.avatar" />
    <view class="flex flex-col">
      <label class="text-xs text-gray-4 mb-1">{{ props.message.nickname }}</label>
-      <slot name="content"></slot>
+      <view class="flex items-center">
+        <el-icon v-if="props.message.sendStatus === SendStatus.SENDING" class="is-loading"
+          ><Loading
+        /></el-icon>
+        <slot name="content"></slot>
+      </view>
    </view>
  </view>
 </template>

 <script lang="ts" setup>
 import { PropType } from 'vue'
-import { MessageModelType, MessageRole } from '../../types/index.d.ts'
+import { Loading } from '@element-plus/icons-vue'
+import { MessageModelType, MessageRole, SendStatus } from '../../types/index.d.ts'

 defineOptions({ name: 'BaseMessage' })

--- a/src/views/chat/components/Message/ImageMessage.vue
+++ b/src/views/chat/components/Message/ImageMessage.vue
@ -13,7 +13,7 @@ import { PropType } from 'vue'
 import { useChatStore } from '../../store/chatstore'
 import { onMounted } from 'vue'
 import { MessageModelType } from '../../types'
-import BaseMesageLayout from '../Message/BaseMessage.vue'
+import BaseMesageLayout from './BaseMsg.vue'

 defineOptions({ name: 'ImageMessage' })

--- a/src/views/chat/components/Message/TextMessage.vue
+++ b/src/views/chat/components/Message/TextMessage.vue
@ -10,18 +10,15 @@

 <script lang="ts" setup>
 import { PropType } from 'vue'
-import { useChatStore } from '../../store/chatstore'
-import BaseMesageLayout from '../Message/BaseMessage.vue'
-import { MessageModelType } from '../../types/index'
+import BaseMesageLayout from './BaseMsg.vue'
+import TextMessage from '../../model/TextMessage'

 defineOptions({ name: 'TextMessage' })

 const props = defineProps({
  message: {
-    type: Object as PropType<MessageModelType>,
+    type: Object as PropType<TextMessage>,
    default: () => {}
  }
 })
-
-const { sessionList, setCurrentConversation, setCurrentSessionIndex } = useChatStore()
 </script>
--- a/src/views/chat/components/Session/Index.vue
+++ b/src/views/chat/components/Session/Index.vue
@ -2,7 +2,7 @@
  <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 w-full">
      <SessionItem
-        v-for="(item, index) in sessionList"
+        v-for="(item, index) in chatStore.sessionList"
        :key="item.id"
        :index="index"
        :conversation="item"
@ -14,16 +14,20 @@

 <script lang="ts" setup>
 import SessionItem from '../SessionItem/Index.vue'
-import { useChatStore } from '../../store/chatstore'
+import { useChatStoreWithOut } from '../../store/chatstore'
 import { onMounted } from 'vue'

 defineOptions({ name: 'Session' })

-const { sessionList, setCurrentConversation, setCurrentSessionIndex } = useChatStore()
+const chatStore = useChatStoreWithOut()
+const { setCurrentConversation, setCurrentSessionIndex, getSession } = useChatStoreWithOut()

 onMounted(() => {
+  getSession()
  // set default conversation
-  setCurrentConversation()
+  nextTick(() => {
+    setCurrentConversation()
+  })
 })

 const onSessionItemClick = (index: number) => {
--- a/src/views/chat/components/SessionItem/Index.vue
+++ b/src/views/chat/components/SessionItem/Index.vue
@ -1,19 +1,23 @@
 <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" />
-    <view class="flex flex-col flex-1">
+    <el-avatar shape="square" size="default" class="mr-2">
+      {{ props.conversation.name || '' }}
+    </el-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="fontColor()"
+        :class="namefontColor()"
        >{{ props.conversation.name }}</label
      >
-      <label class="text-gray-f text-size-sm text-ellipsis text-nowrap mr-1" :class="fontColor()">{{
-        props.conversation.description
-      }}</label>
+      <label
+        class="text-gray-f text-size-sm text-ellipsis text-nowrap mr-1"
+        :class="timefontColor()"
+        >{{ props.conversation.description }}</label
+      >
    </view>
-    <view class="flex items-end h-full">
-      <label class="text-gray-f text-size-sm text-nowrap" :class="fontColor()">{{
-        formatPast(new Date(props.conversation.updateTime))
+    <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>
    </view>
  </view>
@ -41,7 +45,20 @@ const bgColor = () => {
  return props.index === chatStore.currentSessionIndex ? 'bg-blue' : 'bg-white'
 }

-const fontColor = () => {
-  return props.index === chatStore.currentSessionIndex ? 'text-white' : 'text-gray-f'
+const namefontColor = () => {
+  return props.index === chatStore.currentSessionIndex ? 'text-white' : 'nameColor'
+}
+const timefontColor = () => {
+  return props.index === chatStore.currentSessionIndex ? 'text-white' : 'timeColor'
 }
 </script>
+
+<style lang="scss" scoped>
+.timeColor {
+  color: #999;
+}
+
+.nameColor {
+  color: black;
+}
+</style>