From b8466fc7e7af4ec1dedb8e100f83a7290c6e68db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=89=E6=B5=A9=E6=B5=A9?= <1036606149@qq.com> Date: Sun, 2 Jun 2024 17:09:08 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E5=8F=91=E9=80=81?= =?UTF-8?q?=E5=92=8C=E6=8E=A5=E6=94=B6=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/components/ImChat/src/ImChat.vue | 19 +++++++++- .../{imMessageStore.ts => chatStore.ts} | 19 ++++++++-- .../Message/components/messageList/index.vue | 6 +-- src/views/im/Message/index.vue | 38 ++++--------------- 4 files changed, 41 insertions(+), 41 deletions(-) rename src/store/modules/{imMessageStore.ts => chatStore.ts} (61%) diff --git a/src/layout/components/ImChat/src/ImChat.vue b/src/layout/components/ImChat/src/ImChat.vue index b5f1db38..f63a2bef 100644 --- a/src/layout/components/ImChat/src/ImChat.vue +++ b/src/layout/components/ImChat/src/ImChat.vue @@ -3,10 +3,11 @@ import { Dialog } from '@/components/Dialog' import { shallowRef, defineAsyncComponent, DefineComponent } from 'vue' import { getAccessToken } from '@/utils/auth' import { useWebSocket } from '@vueuse/core' -import { imMessageStore, ImMessageWebSocket } from '@/store/modules/imMessageStore' +import { chatStore, ImMessageWebSocket } from '@/store/modules/chatStore' +import * as MessageApi from '@/api/im/message' // 从 imMessageStore 中导入 addMessage 方法 -const { addMessage } = imMessageStore() +const { addMessage, setLocalMaxSeq, loadMessages } = chatStore() // 异步加载可能的对话框内容组件 const IMComponent = defineAsyncComponent(() => import('@/views/im/index.vue')) @@ -64,6 +65,7 @@ function initWebSocket() { // 保存到 pina imMessageStore addMessage(message) + setLocalMaxSeq(content.sequence) return } @@ -75,10 +77,23 @@ function initWebSocket() { console.log('websocket 初始化成功') } +// 初始化消息列表 +const pullParams = reactive({ + sequence: 0, // 消息序列号 + size: 10 +}) +async function loadImMessages() { + // 获取消息列表 + const list: ImMessageWebSocket[] = await MessageApi.pullMessageList(pullParams) + loadMessages(list) +} + // ========== 初始化 ========= onMounted(() => { // 首次加载 websocket initWebSocket() + // 加载loadMessages + loadImMessages() }) diff --git a/src/store/modules/imMessageStore.ts b/src/store/modules/chatStore.ts similarity index 61% rename from src/store/modules/imMessageStore.ts rename to src/store/modules/chatStore.ts index 04d92a6d..fb694423 100644 --- a/src/store/modules/imMessageStore.ts +++ b/src/store/modules/chatStore.ts @@ -1,3 +1,4 @@ +import { store } from '../index' import { defineStore } from 'pinia' export interface ImMessageWebSocket { @@ -13,23 +14,33 @@ export interface ImMessageWebSocket { sequence: number // 序号 } -export const imMessageStore = defineStore({ +export const chatStore = defineStore({ id: 'imMessage', state: () => ({ - messages: [] as ImMessageWebSocket[] + messages: [] as ImMessageWebSocket[], + localMaxSeq: 0 }), getters: { getMessages(): ImMessageWebSocket[] { return this.messages + }, + getLocalMaxSeq(): number { + return this.localMaxSeq } }, actions: { + loadMessages(messages: ImMessageWebSocket[]) { + this.messages = messages + }, addMessage(message: ImMessageWebSocket) { this.messages.push(message) + }, + setLocalMaxSeq(seq: number) { + this.localMaxSeq = seq } } }) -export function useImMessageStore() { - return imMessageStore() +export const useImMessageStore = () => { + return chatStore(store) } diff --git a/src/views/im/Message/components/messageList/index.vue b/src/views/im/Message/components/messageList/index.vue index 6bb23296..09d4e014 100644 --- a/src/views/im/Message/components/messageList/index.vue +++ b/src/views/im/Message/components/messageList/index.vue @@ -38,7 +38,7 @@ const handleMsgTimeShow = (sendTime, index) => { } /* computed-- 消息来源是否为自己 */ const isMyself = (msgBody) => { - return msgBody.senderId === userStore.user.id || msgBody.receiverId === userStore.user.id + return msgBody.senderId === userStore.user.id } /* 文本中是否包含link */ const isLink = computed(() => { @@ -52,9 +52,7 @@ const loginUserInfo = { } //处理聊天对方昵称展示 const handleNickName = (msgBody) => { - return msgBody.senderId === userStore.user.id || msgBody.receiverId === userStore.user.id - ? '我' - : '对方' + return msgBody.senderId === userStore.user.id ? '我' : '对方' } //引用消息 let clickQuoteMsgId = ref('') diff --git a/src/views/im/Message/index.vue b/src/views/im/Message/index.vue index 099d4abc..e9ac2e90 100644 --- a/src/views/im/Message/index.vue +++ b/src/views/im/Message/index.vue @@ -5,7 +5,10 @@ import { messageType } from '@/constant/im' import MessageList from './components/messageList/index.vue' import InputBox from './components/inputBox/index.vue' import * as MessageApi from '@/api/im/message' -import { imMessageStore } from '@/store/modules/imMessageStore' +import { chatStore, useImMessageStore } from '@/store/modules/chatStore' + +const { addMessage, setLocalMaxSeq } = chatStore() +const { messages } = useImMessageStore() const { query } = useRoute() // 查询参数 @@ -15,15 +18,6 @@ const drawer = ref(false) //抽屉显隐 const handleDrawer = () => { drawer.value = !drawer.value } -//删除好友 -const delTheFriend = () => { - console.log(nowPickInfo.value) - if (nowPickInfo.value?.id) { - const targetId = nowPickInfo.value.id - // EaseChatClient.deleteContact(targetId) - // ElMessage({ type: 'success', center: true, message: '好友已删除~' }) - } -} // 当前聊天对象信息 const nowPickInfo = ref({ id: 100, @@ -39,24 +33,15 @@ const nowPickInfo = ref({ } }) -//获取群组详情 -const groupDetail = computed(() => { - return nowPickInfo.value.groupDetail -}) //获取对应的消息内容 const pullParams = reactive({ - sequence: null, // 消息序列号 默认为null + sequence: 0, // 消息序列号 size: 10 }) +// 获取消息列表 const messageData = ref([]) const getMessageData = async () => { - // 获取消息列表 - const imMessages = imMessageStore().getMessages - if (imMessages) { - console.log('imMessages:' + imMessages) - console.log('imMessages:' + imMessages.length) - } - messageData.value = await MessageApi.pullMessageList(pullParams) + messageData.value = messages } console.log(messageData) @@ -69,10 +54,6 @@ const fechHistoryMessage = (loadType) => { console.log(loadType) console.log('加载更多') loadingHistoryMsg.value = true - // 如果 messageData 不为空 ，获取第一条数据的 sequence - if (messageData.value.length) { - pullParams.sequence = messageData.value[0].sequence - } getMessageData() loadingHistoryMsg.value = false } @@ -80,11 +61,6 @@ const fechHistoryMessage = (loadType) => { const scrollMessageList = (direction) => { console.log(direction) } -//消息重新编辑 -const inputBox = ref(null) -const reEditMessage = (msg) => (inputBox.value.textContent = msg) -//消息引用 -const messageQuote = (msg) => inputBox.value.handleQuoteMessage(msg) /** 初始化 **/ onMounted(() => { getMessageData()