feat(upload): 重构文件上传逻辑并添加全局上传任务管理
- 在dialogue store中添加globalUploadList和uploadTaskMap管理上传任务 - 修改PanelFooter.vue使用addUploadTask替代直接添加记录 - 在uploads.ts中完善上传失败处理和任务清理逻辑 - 在useTalkRecord.ts中加载完成后恢复上传任务 - 移除调试用的console.log语句
This commit is contained in:
Phoenix
parent
efd61b30f4
commit
871e33990a
7350
pnpm-lock.yaml
Normal file
7350
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
@ -6,7 +6,7 @@ import {
|
||||
Pic,
|
||||
FolderUpload
|
||||
} from '@icon-park/vue-next'
|
||||
import {IosSend} from '@vicons/ionicons4'
|
||||
import { IosSend } from '@vicons/ionicons4'
|
||||
import { bus } from '@/utils/event-bus'
|
||||
import { EditorConst } from '@/constant/event-bus'
|
||||
import { emitCall } from '@/utils/common'
|
||||
@ -33,7 +33,7 @@ const props = defineProps({
|
||||
const emit = defineEmits(['editor-event'])
|
||||
const userStore = useUserStore()
|
||||
const dialogueStore = useDialogueStore()
|
||||
console.log('dialogueStore',dialogueStore.talk.talk_type)
|
||||
console.log('dialogueStore', dialogueStore.talk.talk_type)
|
||||
const editorDraftStore = useEditorDraftStore()
|
||||
const editorRef = ref(null)
|
||||
const content = ref('')
|
||||
@ -138,7 +138,7 @@ const checkMention = (target) => {
|
||||
}
|
||||
const showMentionList = () => {
|
||||
const query = currentMentionQuery.value.toLowerCase()
|
||||
mentionList.value = [{ id: 0, nickname: '全体成员', avatar: defAvatar, value: '全体成员' },...props.members].filter(member => {
|
||||
mentionList.value = [{ id: 0, nickname: '全体成员', avatar: defAvatar, value: '全体成员' }, ...props.members].filter(member => {
|
||||
return member.value.toLowerCase().startsWith(query) && member.id !== userStore.uid
|
||||
})
|
||||
showMention.value = mentionList.value.length > 0
|
||||
@ -776,8 +776,8 @@ const onUploadSendImg = async (event) => {
|
||||
console.error('Image upload failed or received invalid response:', res);
|
||||
const previewImages = editorRef.value.querySelectorAll('img[data-status="local-preview"][src^="data:image"]:not([data-uploaded-url])');
|
||||
if (previewImages.length > 0) {
|
||||
const lastPreviewImage = previewImages[previewImages.length -1];
|
||||
if(lastPreviewImage) {
|
||||
const lastPreviewImage = previewImages[previewImages.length - 1];
|
||||
if (lastPreviewImage) {
|
||||
lastPreviewImage.style.border = '2px dashed red';
|
||||
lastPreviewImage.title = 'Upload failed';
|
||||
}
|
||||
@ -787,8 +787,8 @@ const onUploadSendImg = async (event) => {
|
||||
console.error('Error during image upload process:', error);
|
||||
const previewImages = editorRef.value.querySelectorAll('img[data-status="local-preview"][src^="data:image"]:not([data-uploaded-url])');
|
||||
if (previewImages.length > 0) {
|
||||
const lastPreviewImage = previewImages[previewImages.length -1];
|
||||
if(lastPreviewImage) {
|
||||
const lastPreviewImage = previewImages[previewImages.length - 1];
|
||||
if (lastPreviewImage) {
|
||||
lastPreviewImage.style.border = '2px dashed red';
|
||||
lastPreviewImage.title = 'Upload error';
|
||||
}
|
||||
@ -927,7 +927,7 @@ const onSubscribeMention = async (data) => {
|
||||
fallbackRange.selectNodeContents(editorNode);
|
||||
fallbackRange.collapse(false);
|
||||
const newSelection = window.getSelection();
|
||||
if (newSelection){
|
||||
if (newSelection) {
|
||||
newSelection.removeAllRanges();
|
||||
newSelection.addRange(fallbackRange);
|
||||
insertMention(data, fallbackRange);
|
||||
@ -936,7 +936,7 @@ const onSubscribeMention = async (data) => {
|
||||
}
|
||||
}
|
||||
};
|
||||
const handleDeleteQuote = function(e) {
|
||||
const handleDeleteQuote = function (e) {
|
||||
if (e.key !== 'Backspace' && e.key !== 'Delete') return;
|
||||
const selection = window.getSelection();
|
||||
if (selection.rangeCount === 0) return;
|
||||
@ -1101,11 +1101,11 @@ const saveDraft = () => {
|
||||
quoteElements.forEach(quote => quote.remove())
|
||||
const contentToSave = tempDiv.textContent || ''
|
||||
const htmlToSave = tempDiv.innerHTML || ''
|
||||
const currentEditor= parseEditorContent().items
|
||||
const currentEditor = parseEditorContent().items
|
||||
const hasContent = contentToSave.trim().length > 0 ||
|
||||
htmlToSave.includes('<img') ||
|
||||
htmlToSave.includes('editor-file')
|
||||
if (currentEditor.length>0) {
|
||||
if (currentEditor.length > 0) {
|
||||
editorDraftStore.items[indexName.value] = JSON.stringify({
|
||||
content: currentEditor.reduce((result, x) => {
|
||||
if (x.type === 3) return result + '[图片]'
|
||||
@ -1188,7 +1188,7 @@ const onCodeSubmit = (data) => {
|
||||
emit('editor-event', {
|
||||
event: 'code_event',
|
||||
data,
|
||||
callBack: () => {}
|
||||
callBack: () => { }
|
||||
})
|
||||
isShowCode.value = false
|
||||
}
|
||||
@ -1196,7 +1196,7 @@ const onVoteSubmit = (data) => {
|
||||
emit('editor-event', {
|
||||
event: 'vote_event',
|
||||
data,
|
||||
callBack: () => {}
|
||||
callBack: () => { }
|
||||
})
|
||||
isShowVote.value = false
|
||||
}
|
||||
@ -1223,15 +1223,8 @@ const handleEditorClick = (event) => {
|
||||
<section class="el-container is-vertical">
|
||||
<header class="el-header toolbar bdr-t">
|
||||
<div class="tools pr-30px">
|
||||
<n-popover
|
||||
placement="top-start"
|
||||
trigger="click"
|
||||
raw
|
||||
:show-arrow="false"
|
||||
:width="300"
|
||||
ref="emoticonRef"
|
||||
style="width: 500px; height: 250px; border-radius: 10px; overflow: hidden"
|
||||
>
|
||||
<n-popover placement="top-start" trigger="click" raw :show-arrow="false" :width="300" ref="emoticonRef"
|
||||
style="width: 500px; height: 250px; border-radius: 10px; overflow: hidden">
|
||||
<template #trigger>
|
||||
<div class="item pointer">
|
||||
<n-icon size="18" class="icon" :component="SmilingFace" />
|
||||
@ -1240,13 +1233,7 @@ const handleEditorClick = (event) => {
|
||||
</template>
|
||||
<MeEditorEmoticon @on-select="onEmoticonEvent" />
|
||||
</n-popover>
|
||||
<div
|
||||
class="item pointer"
|
||||
v-for="nav in navs"
|
||||
:key="nav.title"
|
||||
v-show="nav.show"
|
||||
@click="nav.click"
|
||||
>
|
||||
<div class="item pointer" v-for="nav in navs" :key="nav.title" v-show="nav.show" @click="nav.click">
|
||||
<n-icon size="18" class="icon" :component="nav.icon" />
|
||||
<p class="tip-title">{{ nav.title }}</p>
|
||||
</div>
|
||||
@ -1261,31 +1248,15 @@ const handleEditorClick = (event) => {
|
||||
</div>
|
||||
</header>
|
||||
<main class="el-main height100">
|
||||
<div
|
||||
ref="editorRef"
|
||||
class="custom-editor"
|
||||
contenteditable="true"
|
||||
:placeholder="placeholder"
|
||||
@input="handleInput"
|
||||
@keydown="handleKeydown"
|
||||
@paste="handlePaste"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
></div>
|
||||
<div
|
||||
v-if="showMention && dialogueStore.talk.talk_type === 2"
|
||||
class="mention-list py-5px"
|
||||
:style="{ top: mentionPosition.top + 'px', left: mentionPosition.left + 'px' }"
|
||||
>
|
||||
<div ref="editorRef" class="custom-editor" contenteditable="true" :placeholder="placeholder"
|
||||
@input="handleInput" @keydown="handleKeydown" @paste="handlePaste" @focus="handleFocus" @blur="handleBlur">
|
||||
</div>
|
||||
<div v-if="showMention && dialogueStore.talk.talk_type === 2" class="mention-list py-5px"
|
||||
:style="{ top: mentionPosition.top + 'px', left: mentionPosition.left + 'px' }">
|
||||
<ul class="max-h-140px w-163px overflow-auto hide-scrollbar">
|
||||
<li
|
||||
v-for="(member, index) in mentionList"
|
||||
:key="member.user_id || member.id"
|
||||
class="cursor-pointer px-14px h-42px"
|
||||
:class="{ 'bg-#EEE9F9': index === selectedMentionIndex }"
|
||||
@mousedown.prevent="handleMentionSelectByMouse(member)"
|
||||
@mouseover="selectedMentionIndex = index"
|
||||
>
|
||||
<li v-for="(member, index) in mentionList" :key="member.user_id || member.id"
|
||||
class="cursor-pointer px-14px h-42px" :class="{ 'bg-#EEE9F9': index === selectedMentionIndex }"
|
||||
@mousedown.prevent="handleMentionSelectByMouse(member)" @mouseover="selectedMentionIndex = index">
|
||||
<div class="flex items-center border-b-1px border-b-solid border-b-#F8F8F8 h-full">
|
||||
<img class="w-26px h-26px rounded-50% mr-11px" :src="member.avatar" alt="">
|
||||
<span>{{ member.nickname }}</span>
|
||||
@ -1305,14 +1276,17 @@ const handleEditorClick = (event) => {
|
||||
.editor {
|
||||
--tip-bg-color: rgb(241 241 241 / 90%);
|
||||
height: 100%;
|
||||
|
||||
.toolbar {
|
||||
height: 38px;
|
||||
display: flex;
|
||||
|
||||
.tools {
|
||||
height: 40px;
|
||||
flex: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -1321,6 +1295,7 @@ const handleEditorClick = (event) => {
|
||||
margin: 0 2px;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
|
||||
.tip-title {
|
||||
display: none;
|
||||
position: absolute;
|
||||
@ -1337,6 +1312,7 @@ const handleEditorClick = (event) => {
|
||||
user-select: none;
|
||||
z-index: 999999999999;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.tip-title {
|
||||
display: block;
|
||||
@ -1345,6 +1321,7 @@ const handleEditorClick = (event) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.editor-file) {
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
@ -1361,6 +1338,7 @@ const handleEditorClick = (event) => {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&::after {
|
||||
content: attr(data-size);
|
||||
position: absolute;
|
||||
@ -1368,10 +1346,12 @@ const handleEditorClick = (event) => {
|
||||
color: #757575;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #e3f2fd;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.editor-emoji) {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
@ -1379,6 +1359,7 @@ const handleEditorClick = (event) => {
|
||||
vertical-align: middle;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
:deep(.editor-quote) {
|
||||
margin-bottom: 8px;
|
||||
padding: 8px 12px;
|
||||
@ -1394,18 +1375,22 @@ const handleEditorClick = (event) => {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--im-message-left-bg-hover-color, #eaeaea);
|
||||
}
|
||||
|
||||
.quote-content-wrapper {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quote-title {
|
||||
color: var(--im-primary-color, #409eff);
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.quote-content {
|
||||
color: var(--im-text-color, #333);
|
||||
word-break: break-all;
|
||||
@ -1416,12 +1401,14 @@ const handleEditorClick = (event) => {
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.quote-image img {
|
||||
max-width: 100px;
|
||||
max-height: 60px;
|
||||
border-radius: 3px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.quote-close {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
@ -1434,12 +1421,14 @@ const handleEditorClick = (event) => {
|
||||
font-size: 16px;
|
||||
margin-left: 8px;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-editor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -1452,44 +1441,53 @@ const handleEditorClick = (event) => {
|
||||
color: #333;
|
||||
background: transparent;
|
||||
overflow-y: auto;
|
||||
|
||||
&:empty:before {
|
||||
content: attr(placeholder);
|
||||
color: #999;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 3px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--im-scrollbar-thumb);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-editor:empty::before {
|
||||
content: attr(placeholder);
|
||||
color: #999;
|
||||
pointer-events: none;
|
||||
font-family: PingFang SC, Microsoft YaHei, 'Alibaba PuHuiTi 2.0 45' !important;
|
||||
}
|
||||
|
||||
.custom-editor:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mention:hover {
|
||||
background-color: #bae7ff;
|
||||
}
|
||||
|
||||
.editor-emoji {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.mention-list {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
@ -1498,6 +1496,7 @@ const handleEditorClick = (event) => {
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.quote-card {
|
||||
background: #f5f5f5;
|
||||
border-left: 3px solid #1890ff;
|
||||
@ -1506,18 +1505,22 @@ const handleEditorClick = (event) => {
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.quote-content {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.quote-title {
|
||||
font-weight: bold;
|
||||
color: #1890ff;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.quote-close {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
@ -1528,6 +1531,7 @@ const handleEditorClick = (event) => {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.edit-tip {
|
||||
background: #fff7e6;
|
||||
border: 1px solid #ffd591;
|
||||
@ -1540,6 +1544,7 @@ const handleEditorClick = (event) => {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.edit-tip button {
|
||||
background: none;
|
||||
border: none;
|
||||
@ -1548,11 +1553,13 @@ const handleEditorClick = (event) => {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
html[theme-mode='dark'] {
|
||||
.editor {
|
||||
--tip-bg-color: #48484d;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.editor-image-wrapper.image-upload-loading::before) {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -1568,19 +1575,23 @@ html[theme-mode='dark'] {
|
||||
animation: spin 0.6s linear infinite;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
:deep(.editor-image-wrapper.image-upload-loading img) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.hide-scrollbar {
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
@ -227,14 +227,13 @@ class Talk extends Base {
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
console.log('输出加载1')
|
||||
// 获取聊天面板元素节点
|
||||
const el = document.getElementById('imChatPanel')
|
||||
if (!el) return
|
||||
|
||||
// 判断的滚动条是否在底部
|
||||
const isBottom = isScrollAtBottom(el)
|
||||
|
||||
if (isBottom || record.user_id == this.getAccountId()) {
|
||||
scrollToBottom()
|
||||
} else {
|
||||
|
||||
@ -167,7 +167,7 @@ export const useTalkRecord = (uid: number) => {
|
||||
|
||||
nextTick(() => {
|
||||
const el = document.getElementById('imChatPanel')
|
||||
|
||||
console.log('request',request)
|
||||
if (el) {
|
||||
if (request.cursor == 0) {
|
||||
// el.scrollTop = el.scrollHeight
|
||||
@ -175,6 +175,12 @@ export const useTalkRecord = (uid: number) => {
|
||||
// setTimeout(() => {
|
||||
// el.scrollTop = el.scrollHeight + 1000
|
||||
// }, 500)
|
||||
console.log('滚动到底部')
|
||||
|
||||
// 在初次加载完成后恢复上传任务
|
||||
// 确保在所有聊天记录加载完成后再恢复上传任务
|
||||
dialogueStore.restoreUploadTasks()
|
||||
|
||||
scrollToBottom()
|
||||
} else {
|
||||
el.scrollTop = el.scrollHeight - scrollHeight
|
||||
@ -322,6 +328,8 @@ export const useTalkRecord = (uid: number) => {
|
||||
})
|
||||
} else {
|
||||
// 其他情况滚动到底部
|
||||
// 在特殊参数模式下也需要恢复上传任务
|
||||
dialogueStore.restoreUploadTasks()
|
||||
scrollToBottom()
|
||||
}
|
||||
}
|
||||
@ -332,6 +340,7 @@ export const useTalkRecord = (uid: number) => {
|
||||
|
||||
loadConfig.specialParams = undefined // 普通模式清空
|
||||
// 原有逻辑
|
||||
console.log('onLoad()执行load')
|
||||
load(params)
|
||||
}
|
||||
|
||||
@ -369,6 +378,7 @@ export const useTalkRecord = (uid: number) => {
|
||||
} else {
|
||||
// 如果不匹配，重置为普通模式
|
||||
resetLoadConfig()
|
||||
console.log('load执行2')
|
||||
load({
|
||||
receiver_id: loadConfig.receiver_id,
|
||||
talk_type: loadConfig.talk_type,
|
||||
@ -377,6 +387,7 @@ export const useTalkRecord = (uid: number) => {
|
||||
}
|
||||
} else {
|
||||
// 原有逻辑
|
||||
console.log('load执行3')
|
||||
load({
|
||||
receiver_id: loadConfig.receiver_id,
|
||||
talk_type: loadConfig.talk_type,
|
||||
|
||||
@ -15,7 +15,9 @@ export const useDialogueStore = defineStore('dialogue', {
|
||||
return {
|
||||
// 对话索引（聊天对话的唯一索引）
|
||||
index_name: '',
|
||||
|
||||
globalUploadList:[],
|
||||
// 添加一个映射，用于快速查找每个会话的上传任务
|
||||
uploadTaskMap: {}, // 格式: { "talk_type_receiver_id": [task1, task2, ...] }
|
||||
// 对话节点
|
||||
talk: {
|
||||
avatar:'',
|
||||
@ -129,8 +131,10 @@ export const useDialogueStore = defineStore('dialogue', {
|
||||
if (data.talk_type == 2) {
|
||||
this.updateGroupMembers()
|
||||
this.getGroupInfo()
|
||||
|
||||
}
|
||||
|
||||
// 注意：上传任务的恢复将在聊天记录加载完成后进行
|
||||
// 在useTalkRecord.ts的onLoad方法中，会在加载完聊天记录后调用restoreUploadTasks方法
|
||||
},
|
||||
|
||||
// 更新提及列表
|
||||
@ -292,6 +296,16 @@ export const useDialogueStore = defineStore('dialogue', {
|
||||
|
||||
// 更新视频上传进度
|
||||
updateUploadProgress(uploadId, percentage) {
|
||||
// 更新全局列表中的进度
|
||||
const globalTask = this.globalUploadList.find(item =>
|
||||
item.extra && item.extra.is_uploading && item.extra.upload_id === uploadId
|
||||
)
|
||||
|
||||
if (globalTask) {
|
||||
globalTask.extra.percentage = percentage
|
||||
}
|
||||
|
||||
// 更新当前会话记录中的进度
|
||||
const record = this.records.find(item =>
|
||||
item.extra && item.extra.is_uploading && item.extra.upload_id === uploadId
|
||||
)
|
||||
@ -301,6 +315,44 @@ export const useDialogueStore = defineStore('dialogue', {
|
||||
}
|
||||
},
|
||||
|
||||
// 添加上传任务
|
||||
addUploadTask(task) {
|
||||
// 添加到全局列表
|
||||
this.globalUploadList.push(task)
|
||||
|
||||
// 添加到会话映射
|
||||
const sessionKey = `${task.talk_type}_${task.receiver_id}`
|
||||
if (!this.uploadTaskMap[sessionKey]) {
|
||||
this.uploadTaskMap[sessionKey] = []
|
||||
}
|
||||
this.uploadTaskMap[sessionKey].push(task)
|
||||
|
||||
// 同时添加到当前会话记录
|
||||
this.addDialogueRecord(task)
|
||||
},
|
||||
|
||||
// 上传完成后移除任务
|
||||
removeUploadTask(uploadId) {
|
||||
// 从全局列表中找到任务
|
||||
const taskIndex = this.globalUploadList.findIndex(item => item.msg_id === uploadId)
|
||||
|
||||
if (taskIndex >= 0) {
|
||||
const task = this.globalUploadList[taskIndex]
|
||||
const sessionKey = `${task.talk_type}_${task.receiver_id}`
|
||||
|
||||
// 从会话映射中移除
|
||||
if (this.uploadTaskMap[sessionKey]) {
|
||||
const mapIndex = this.uploadTaskMap[sessionKey].findIndex(item => item.msg_id === uploadId)
|
||||
if (mapIndex >= 0) {
|
||||
this.uploadTaskMap[sessionKey].splice(mapIndex, 1)
|
||||
}
|
||||
}
|
||||
|
||||
// 从全局列表中移除
|
||||
this.globalUploadList.splice(taskIndex, 1)
|
||||
}
|
||||
},
|
||||
|
||||
// 视频上传完成后更新消息
|
||||
completeUpload(uploadId, videoInfo) {
|
||||
const record = this.records.find(item =>
|
||||
@ -317,6 +369,23 @@ export const useDialogueStore = defineStore('dialogue', {
|
||||
// 更新会话信息
|
||||
updateDialogueTalk(params){
|
||||
Object.assign(this.talk, params)
|
||||
},
|
||||
|
||||
// 恢复当前会话的上传任务
|
||||
restoreUploadTasks() {
|
||||
// 获取当前会话的sessionKey
|
||||
const sessionKey = `${this.talk.talk_type}_${this.talk.receiver_id}`
|
||||
|
||||
// 检查是否有需要恢复的上传任务
|
||||
if (this.uploadTaskMap[sessionKey] && this.uploadTaskMap[sessionKey].length > 0) {
|
||||
// 按照插入顺序排序上传任务
|
||||
const tasks = [...this.uploadTaskMap[sessionKey]].sort((a, b) => a.insert_sequence - b.insert_sequence)
|
||||
|
||||
// 将上传任务添加到当前会话记录中
|
||||
tasks.forEach(task => {
|
||||
this.addDialogueRecord(task)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ServeFindFileSplitInfo, ServeFileSubareaUpload } from '@/api/upload'
|
||||
import { ServeSendTalkFile } from '@/api/chat'
|
||||
import { uploadImg } from '@/api/upload'
|
||||
// import { message } from 'naive-ui'
|
||||
import {
|
||||
ServeSendTalkFile
|
||||
} from '@/api/chat'
|
||||
import {
|
||||
uploadImg,
|
||||
ServeFindFileSplitInfo,
|
||||
ServeFileSubareaUpload
|
||||
} from '@/api/upload'
|
||||
import {
|
||||
useDialogueStore
|
||||
} from '@/store'
|
||||
@ -140,12 +146,12 @@ export const useUploadsStore = defineStore('uploads', {
|
||||
this.triggerUpload(upload_id, clientUploadId)
|
||||
} else {
|
||||
message.error(res.message)
|
||||
onProgress(-1) // 通知上传失败
|
||||
this.handleUploadError(upload_id, clientUploadId)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("初始化分片上传失败:", error);
|
||||
message.error("初始化上传失败，请重试")
|
||||
onProgress(-1)
|
||||
this.handleUploadError(upload_id, clientUploadId)
|
||||
}
|
||||
},
|
||||
|
||||
@ -201,26 +207,20 @@ export const useUploadsStore = defineStore('uploads', {
|
||||
this.triggerUpload(uploadId, clientUploadId)
|
||||
}
|
||||
} else {
|
||||
updatedItem.onProgress(-1)
|
||||
// 上传失败处理
|
||||
console.error(`分片上传失败，错误码: ${res.code}，错误信息: ${res.message || '未知错误'}`);
|
||||
updatedItem.status = 3
|
||||
|
||||
|
||||
this.handleUploadError(uploadId, clientUploadId || '')
|
||||
}
|
||||
} catch (error) {
|
||||
updatedItem.onProgress(-1)
|
||||
console.error("分片上传错误:", error);
|
||||
|
||||
// 获取最新的项目状态
|
||||
// 这里不应该重新定义变量，而是使用已有的updatedItem
|
||||
// const updatedItem = this.findItem(uploadId)
|
||||
if (!updatedItem) return
|
||||
|
||||
// 如果是暂停导致的错误，不改变状态
|
||||
if (updatedItem.is_paused) return
|
||||
|
||||
updatedItem.status = 3
|
||||
this.handleUploadError(uploadId, clientUploadId || '')
|
||||
}
|
||||
},
|
||||
|
||||
@ -244,6 +244,10 @@ export const useUploadsStore = defineStore('uploads', {
|
||||
talk_type: item.talk_type
|
||||
})
|
||||
|
||||
// 从DialogueStore中移除上传任务
|
||||
const dialogueStore = useDialogueStore()
|
||||
dialogueStore.removeUploadTask(clientUploadId)
|
||||
|
||||
if (item.onComplete) {
|
||||
item.onComplete(item)
|
||||
}
|
||||
@ -291,5 +295,21 @@ export const useUploadsStore = defineStore('uploads', {
|
||||
// 从上传列表中移除旧的上传项
|
||||
this.items = this.items.filter(i => i.client_upload_id !== clientUploadId)
|
||||
},
|
||||
|
||||
// 上传失败处理
|
||||
async handleUploadError(uploadId: string, clientUploadId: string) {
|
||||
const item = this.findItem(uploadId)
|
||||
if (!item) return
|
||||
|
||||
item.status = 3 // 设置为上传失败状态
|
||||
|
||||
// 从DialogueStore中移除上传任务
|
||||
const dialogueStore = useDialogueStore()
|
||||
dialogueStore.removeUploadTask(clientUploadId)
|
||||
|
||||
if (item.onProgress) {
|
||||
item.onProgress(-1) // 通知上传失败
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -54,7 +54,6 @@ request.interceptors.request.use((config) => {
|
||||
|
||||
// 响应拦截器
|
||||
request.interceptors.response.use((response) => {
|
||||
console.log('response.data.status',response.data.status)
|
||||
if(response.data.code !==200&&response.data.status!==0){
|
||||
window['$message'].warning(response.data.msg)
|
||||
}
|
||||
|
||||
@ -592,8 +592,6 @@ const indexName = computed(() => dialogueStore.index_name)
|
||||
|
||||
// 切换会话
|
||||
const onTabTalk = (item: ISession, follow = false) => {
|
||||
console.log('onTabTalk')
|
||||
|
||||
if (item.index_name === indexName.value) return
|
||||
|
||||
searchKeyword.value = ''
|
||||
@ -638,7 +636,7 @@ const onReload = () => {
|
||||
// 初始化加载
|
||||
const onInitialize = () => {
|
||||
let index_name = getCacheIndexName()
|
||||
|
||||
console.log('index_name',index_name)
|
||||
index_name && onTabTalk(talkStore.findItem(index_name), true)
|
||||
}
|
||||
|
||||
|
||||
@ -393,7 +393,7 @@ watch(
|
||||
}, 3000)
|
||||
return
|
||||
}
|
||||
|
||||
console.log('执行逻辑')
|
||||
onLoad(
|
||||
{
|
||||
receiver_id: newProps.receiver_id,
|
||||
@ -403,7 +403,7 @@ watch(
|
||||
specialParams ? { specifiedMsg: specialParams } : undefined
|
||||
)
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
// onMounted(() => {
|
||||
@ -589,12 +589,25 @@ const handleIntersection = (entries) => {
|
||||
watch(
|
||||
() => records.value,
|
||||
() => {
|
||||
console.log()
|
||||
nextTick(() => {
|
||||
// 断开旧的观察者
|
||||
if (observer) {
|
||||
observer.disconnect()
|
||||
}
|
||||
|
||||
// 创建原数组的副本进行遍历
|
||||
// const recordsCopy = [...dialogueStore.records];
|
||||
// for (const [y, iy] of dialogueStore.globalUploadList.entries()) {
|
||||
// console.log('y',y)
|
||||
// console.log('iy',iy)
|
||||
// for (const [x, ix] of recordsCopy.entries()) {
|
||||
// if(x.msg_id === y.pre_msg){
|
||||
// // 注意：这里的ix是原数组的索引，需要考虑已插入元素的偏移
|
||||
// dialogueStore.records.splice(ix + 1 + (dialogueStore.records.length - recordsCopy.length), 0, y);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// console.log('dialogueStore.records',dialogueStore.records)
|
||||
// 重新初始化观察者
|
||||
const options = {
|
||||
root: null,
|
||||
|
||||
@ -115,6 +115,9 @@ const onSendVideoEvent = async ({ data }) => {
|
||||
// 创建临时消息记录
|
||||
const tempMessage = {
|
||||
msg_id: uploadId,
|
||||
insert_sequence: dialogueStore.records.length > 0
|
||||
? dialogueStore.records[dialogueStore.records.length-1].sequence
|
||||
: 0,
|
||||
sequence: Date.now(),
|
||||
talk_type: props.talk_type,
|
||||
msg_type: 5, // 视频消息类型
|
||||
@ -137,8 +140,8 @@ const onSendVideoEvent = async ({ data }) => {
|
||||
float: 'right' // 我发送的消息显示在右侧
|
||||
}
|
||||
|
||||
// 直接添加到对话记录中
|
||||
dialogueStore.addDialogueRecord(tempMessage)
|
||||
// 使用新的方法添加上传任务
|
||||
dialogueStore.addUploadTask(tempMessage)
|
||||
nextTick(()=>{
|
||||
scrollToBottom()
|
||||
})
|
||||
@ -151,8 +154,8 @@ const onSendVideoEvent = async ({ data }) => {
|
||||
dialogueStore.updateUploadProgress(uploadId, percentage)
|
||||
},
|
||||
async () => {
|
||||
dialogueStore.batchDelDialogueRecord([uploadId])
|
||||
|
||||
// 上传完成后，上传任务已经被removeUploadTask方法移除
|
||||
// 不需要再次从globalUploadList中移除
|
||||
}
|
||||
)
|
||||
}
|
||||
@ -171,6 +174,9 @@ const onSendFileEvent = ({ data }) => {
|
||||
const clientUploadId = `file-${Date.now()}-${Math.floor(Math.random() * 1000)}`
|
||||
const tempMessage = {
|
||||
msg_id: clientUploadId,
|
||||
insert_sequence: dialogueStore.records.length > 0
|
||||
? dialogueStore.records[dialogueStore.records.length-1].sequence
|
||||
: 0,
|
||||
sequence: Date.now(),
|
||||
talk_type: props.talk_type,
|
||||
msg_type: 6,
|
||||
@ -192,7 +198,7 @@ const onSendFileEvent = ({ data }) => {
|
||||
},
|
||||
float: 'right'
|
||||
}
|
||||
dialogueStore.addDialogueRecord(tempMessage)
|
||||
dialogueStore.addUploadTask(tempMessage)
|
||||
nextTick(()=>{
|
||||
scrollToBottom()
|
||||
})
|
||||
@ -201,8 +207,8 @@ const onSendFileEvent = ({ data }) => {
|
||||
dialogueStore.updateUploadProgress(clientUploadId, percentage)
|
||||
},
|
||||
async () => {
|
||||
dialogueStore.batchDelDialogueRecord([clientUploadId])
|
||||
|
||||
// 上传完成后，上传任务已经被removeUploadTask方法移除
|
||||
// 不需要再次从records中删除
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
@ -46,9 +46,9 @@ export default defineConfig(({ mode }) => {
|
||||
vueJsx({}),
|
||||
compressPlugin(),
|
||||
UnoCSS(),
|
||||
// vueDevTools({
|
||||
// launchEditor: 'trae',
|
||||
// })
|
||||
vueDevTools({
|
||||
launchEditor: 'trae',
|
||||
})
|
||||
],
|
||||
define: {
|
||||
__APP_ENV__: env.APP_ENV
|
||||
|
||||
Loading…
Reference in New Issue
Block a user