From 0f8c0e4fa607709d9aecd14959338feb9aa55107 Mon Sep 17 00:00:00 2001 From: caiyx Date: Tue, 10 Dec 2024 11:31:36 +0800 Subject: [PATCH] fix --- src/event/talk.js | 4 +- src/hooks/useTalkRecord.js | 19 ++- src/pages/dialog/components/filePanel.vue | 4 +- src/pages/dialog/index.vue | 36 +++--- src/store/auth/index.js | 2 +- src/store/modules/dialogueList.js | 144 ++++++++++++---------- src/store/modules/talk.js | 1 - 7 files changed, 113 insertions(+), 97 deletions(-) diff --git a/src/event/talk.js b/src/event/talk.js index 4ea80bb..2c3b830 100644 --- a/src/event/talk.js +++ b/src/event/talk.js @@ -167,11 +167,13 @@ class Talk extends Base { insertTalkRecord() { let record = this.resource let newRecord = formatTalkRecord(this.getAccountId(), this.resource); + const {addDialogueRecord,addChatRecord} = useDialogueListStore() // 群成员变化的消息，需要更新群成员列表 if ([1102, 1103, 1104].includes(record.msg_type)) { useDialogueStore().updateGroupMembers() } - useDialogueListStore().addDialogueRecord([newRecord],'add') + addDialogueRecord([newRecord],'add') + addChatRecord(this.getIndexName(),newRecord) useDialogueStore().addDialogueRecord(newRecord) if (!this.isCurrSender()) { diff --git a/src/hooks/useTalkRecord.js b/src/hooks/useTalkRecord.js index cdef028..9875349 100644 --- a/src/hooks/useTalkRecord.js +++ b/src/hooks/useTalkRecord.js @@ -3,18 +3,16 @@ import { ServeTalkRecords } from '@/api/chat' import { useDialogueStore, useDialogueListStore } from '@/store' import { formatTalkRecord } from '@/utils/talk' import { addClass, removeClass } from '@/utils/dom' -import { storeToRefs } from 'pinia' export const useTalkRecord = (uid) => { const dialogueStore = useDialogueStore() - const dialogueListStore = useDialogueListStore() - const { getDialogueList } = storeToRefs(dialogueListStore) + const { getDialogueList,addDialogueRecord,zpagingComplete } = useDialogueListStore() const records = computed(() => { - const dialogueList = getDialogueList.value(dialogueStore.index_name) + const dialogueList = getDialogueList(dialogueStore.index_name) if(dialogueList){ - return dialogueList.records + return dialogueList.records.toReversed() } - return dialogueStore.records + return dialogueStore.records.toReversed() } ) const location = reactive({ @@ -105,8 +103,9 @@ export const useTalkRecord = (uid) => { } const reverseItems = items.toReversed() dialogueStore.unshiftDialogueRecord(reverseItems) - dialogueListStore.addDialogueRecord(params.direction=='down'?reverseItems:items,params.direction=='down'?'add':'unshift') - const dialogueList = getDialogueList.value(dialogueStore.index_name) + addDialogueRecord(params.direction=='down'?reverseItems:items,params.direction=='down'?'add':'unshift') + zpagingComplete(dialogueStore.index_name) + const dialogueList = getDialogueList(dialogueStore.index_name) loadConfig.status = dialogueList.records[0].sequence > 1 ? 1 : 2 // loadConfig.cursor = data.cursor @@ -132,7 +131,7 @@ export const useTalkRecord = (uid) => { } const onRefreshLoad = () => { - let dialogueList = getDialogueList.value(dialogueStore.index_name) + let dialogueList = getDialogueList(dialogueStore.index_name) if (dialogueList.records[0].sequence === 1 ) { return false } @@ -149,7 +148,7 @@ export const useTalkRecord = (uid) => { } const onLoad = async (params) => { - let dialogueList = getDialogueList.value(params.index_name) + let dialogueList = getDialogueList(params.index_name) if (!dialogueList) { loadConfig.cursor = 0 }else{ diff --git a/src/pages/dialog/components/filePanel.vue b/src/pages/dialog/components/filePanel.vue index c2ccac8..3de50ed 100644 --- a/src/pages/dialog/components/filePanel.vue +++ b/src/pages/dialog/components/filePanel.vue @@ -114,13 +114,13 @@ const choosePhoto = () => { if (item.type.indexOf('image/') === 0) { console.log("进入图片") let data = await onUploadImage(item) - return false; + // return false; emit('selectImg', data) // if (src) { // quill.insertEmbed(index, 'image', src) // quill.setSelection(index + 1) // } - return + // return } if (item.type.indexOf('video/') === 0) { diff --git a/src/pages/dialog/index.vue b/src/pages/dialog/index.vue index b56c255..f5d57a2 100644 --- a/src/pages/dialog/index.vue +++ b/src/pages/dialog/index.vue @@ -168,19 +168,17 @@ import emojiPanel from './components/emojiPanel.vue' import filePanel from './components/filePanel.vue' import lodash from "lodash"; import { ServePublishMessage } from '@/api/chat' -import { storeToRefs } from 'pinia' Quill.register('formats/emoji', EmojiBlot) -const dialogueListStore = useDialogueListStore() -const { getDialogueList } = storeToRefs(dialogueListStore) +const { getDialogueList,updateZpagingRef } = useDialogueListStore() const talkStore = useTalkStore() const settingsStore = useSettingsStore() const userStore = useUserStore() const dialogueStore = useDialogueStore() const editorDraftStore = useEditorDraftStore() const editor = ref() -const zpagingRef = ref(null) +const zpagingRef = ref() useZPaging(zpagingRef) const indexName = computed(() => dialogueStore.index_name) const talkParams = reactive({ @@ -305,11 +303,6 @@ const evnets = { const { loadConfig, records, onLoad, onRefreshLoad, onJumpMessage } = useTalkRecord(talkParams.uid) -// 添加计算属性来反转records数组 -const reversedRecords = computed(() => { - return [...records.value].reverse() -}) - const getQuill = () => { return editor.value?.getQuill() } @@ -450,17 +443,15 @@ const virtualListChange = (vList) => { } -watch(() => reversedRecords.value, (newValue, oldValue) => { - zpagingRef.value?.complete(newValue) - -}, { deep: true, immediate: true }) - -onMounted(async() => { - const dialogueList = getDialogueList.value(talkParams.index_name) - if (dialogueList?.records?.length) { - debugger - zpagingRef.value?.complete(dialogueList.records) +watch(() => zpagingRef.value, (newValue, oldValue) => { + if (newValue) { + updateZpagingRef(newValue) } +}) + +const initData = async() => { + const dialogueList = getDialogueList(talkParams.index_name) + let objT = { uid: talkParams.uid, talk_type: talkParams.type, @@ -469,7 +460,12 @@ onMounted(async() => { direction:dialogueList?'down':'up', no_limit: dialogueList?1:0, } - onLoad({ ...objT }) + await onLoad({ ...objT }) + // zpagingRef.value?.complete(records.value) +} + +onMounted(async() => { + initData() }) onUnmounted(() => { diff --git a/src/store/auth/index.js b/src/store/auth/index.js index e349d2b..7b29d53 100644 --- a/src/store/auth/index.js +++ b/src/store/auth/index.js @@ -4,7 +4,7 @@ import {uniStorage} from "@/utils/uniStorage.js" import {ref} from 'vue' export const useAuth = createGlobalState(() => { // const token = useStorage('token', '', uniStorage) - const token = ref('30119d9978a6f3321fb4779c0040e997df4dd0dd0cf6b71119657617d2249ed783f940b0050d5be7e758740ea467afdf3eeb4d28fb5ea234af60ebe51fb218ffea38d3362de44912166520e87a6f38dae8dda9ac1ca35393126a287143c4b6bf18216b911f8a76572c62563bf215ccfbf481b73f0bf6d5275d6ba21139798506790b4824a503c2fbbe8230a1118dd07583187e5c342dd8f8ca02f70dbd2dcea17ac3c5fbcf6e39893a63d2e79b34908949ce628eaede23e241afbcf5b83e01b9') + const token = ref('30119d9978a6f3321fb4779c0040e997df4dd0dd0cf6b71119657617d2249ed783f940b0050d5be7e758740ea467afdf3eeb4d28fb5ea234af60ebe51fb218ff6a0563074f3084b41c1bc8dc0733d06bfbb433a8d5a1d13eb6227adbf50a5da566a4cacdbf91899e563f10864fe2acfe62e0966fbd28506c80ffdda3f2f2f1cdf47228c1222630dd71bf9086f3fd73b23ac4fa18032fd834babe4ba7c7c210a329e9767e3e70b35f7745f2c84fda47c1c0ee95bdc6bf946fbef5927b397b37f7614b53736e13edef3e504c70124204b44913e3def0c87bf860be2788bf0360c3') const refreshToken = useStorage('refreshToken', '', uniStorage) const userInfo = useStorage('userInfo', {}, uniStorage) const leaderList = useStorage('leaderList', [], uniStorage) diff --git a/src/store/modules/dialogueList.js b/src/store/modules/dialogueList.js index e1af950..1d67e84 100644 --- a/src/store/modules/dialogueList.js +++ b/src/store/modules/dialogueList.js @@ -2,78 +2,98 @@ import { defineStore } from 'pinia' import { useDialogueStore } from '@/store' import lodash from 'lodash' -export const useDialogueListStore = defineStore('dialogueList', { - persist: true, - state: () => { - return { - dialogueList:[] - } - }, - getters: { - getDialogueList:(state)=>{ - return (indexName) => state.dialogueList.find(item=>item.index_name===indexName) - } - }, - actions: { - // 添加对话 - addDialogueRecord(newRecords,type='add') { - console.log(newRecords); +import {ref} from 'vue' +import {createGlobalState,useStorage} from '@vueuse/core' +import {uniStorage} from "@/utils/uniStorage.js" - const dialogue = lodash.cloneDeep(useDialogueStore()) - if (!dialogue || typeof dialogue !== 'object') return - // 检查是否已存在相同 index_name 的对话 - const existingIndex = this.$state.dialogueList.findIndex(item => item.index_name === dialogue.index_name) - if (existingIndex === -1) { - // 如果不存在，直接添加 - this.$state.dialogueList.push(dialogue) - } else { - // 如果对话存在，处理 records 数组 - const { records = [] } = dialogue - newRecords.forEach(newRecord => { - const recordIndex = this.$state.dialogueList[existingIndex].records.findIndex( - record => record.msg_id === newRecord.msg_id - ) +export const useDialogueListStore = createGlobalState(() => { + const dialogueList = useStorage('dialogueList', [], uniStorage) + const zpagingRef = ref() - if (recordIndex === -1) { - // 如果记录不存在，添加到 records 数组 - if(type==='add'){ - this.$state.dialogueList[existingIndex].records.push(newRecord) - }else{ - this.$state.dialogueList[existingIndex].records.unshift(newRecord) - } + const getDialogueList=(indexName)=>{ + return dialogueList.value.find(item=>item.index_name===indexName) + } + + const addDialogueRecord=(newRecords,type='add')=>{ + console.log(newRecords); + + const dialogue = lodash.cloneDeep(useDialogueStore()) + if (!dialogue || typeof dialogue !== 'object') return + // 检查是否已存在相同 index_name 的对话 + const existingIndex = dialogueList.value.findIndex(item => item.index_name === dialogue.index_name) + if (existingIndex === -1) { + // 如果不存在，直接添加 + dialogueList.value.push(dialogue) + } else { + // 如果对话存在，处理 records 数组 + const { records = [] } = dialogue + newRecords.forEach(newRecord => { + const recordIndex = dialogueList.value[existingIndex].records.findIndex( + record => record.msg_id === newRecord.msg_id + ) + + if (recordIndex === -1) { + // 如果记录不存在，添加到 records 数组 + if(type==='add'){ + dialogueList.value[existingIndex].records.push(newRecord) + }else{ + dialogueList.value[existingIndex].records.unshift(newRecord) } - }) - - // 更新除 records 和 index_name 外的其他属性 - const { index_name, records: _, ...updateProps } = dialogue - this.$state.dialogueList[existingIndex] = { - ...this.$state.dialogueList[existingIndex], - ...updateProps } + }) + + // 更新除 records 和 index_name 外的其他属性 + const { index_name, records: _, ...updateProps } = dialogue + dialogueList.value[existingIndex] = { + ...dialogueList.value[existingIndex], + ...updateProps } - }, + } + } - // // 更新上传图片进度 - // updateUploadProgress(msgId,progress){ - // console.log('updateUploadProgress'); + const deleteDialogueRecord=(record)=>{ + const dialogue = lodash.cloneDeep(useDialogueStore()) + const item = getDialogueList(dialogue.index_name) + const recordIndex = item.records.findIndex(item=>item.msg_id===record.msg_id) + if(recordIndex!==-1){ + item.records.splice(recordIndex,1) + } + } - // const dialogue = lodash.cloneDeep(useDialogueStore()) - // const item = this.getDialogueList(dialogue.index_name) - // const record = item.records.find(item=>item.msg_id===msgId) - // if(record){ - // record.uploadCurrent = progress - // console.log(record.uploadCurrent); + const updateUploadProgress=(id,progress)=>{ + const dialogue = lodash.cloneDeep(useDialogueStore()) + const item = getDialogueList(dialogue.index_name) + const record = item.records.find(item=>item.msg_id===id) + if(record){ + record.uploadCurrent = progress + } + } - // } - // } + const updateZpagingRef=(params)=>{ + zpagingRef.value=params + } - // 自增好友键盘输入事件 - // triggerKeyboard() { - // this.keyboard = true + const zpagingComplete=(index_name)=>{ + const item = getDialogueList(index_name) + zpagingRef.value?.complete(item.records.toReversed()) + } - // clearTimeout(keyboardTimeout) + const addChatRecord = (indexName,item)=>{ + const dialogue = lodash.cloneDeep(useDialogueStore()) + if (dialogue?.index_name === indexName) { + zpagingRef.value?.addChatRecordData(item.records) + } + } - // keyboardTimeout = setTimeout(() => (this.keyboard = false), 2000) - // }, + return { + dialogueList, + zpagingRef, + getDialogueList, + addDialogueRecord, + deleteDialogueRecord, + updateUploadProgress, + updateZpagingRef, + zpagingComplete, + addChatRecord, } }) diff --git a/src/store/modules/talk.js b/src/store/modules/talk.js index 62edab2..c50203e 100644 --- a/src/store/modules/talk.js +++ b/src/store/modules/talk.js @@ -9,7 +9,6 @@ export const useTalkStore = defineStore('talk', { return { // 加载状态[1:未加载;2:加载中;3:加载完成;4:加载失败;] loadStatus: 2, - // 会话列表 items: [] }