feat(upload): 重构文件上传逻辑并添加全局上传任务管理

- 在dialogue store中添加globalUploadList和uploadTaskMap管理上传任务
- 修改PanelFooter.vue使用addUploadTask替代直接添加记录
- 在uploads.ts中完善上传失败处理和任务清理逻辑
- 在useTalkRecord.ts中加载完成后恢复上传任务
- 移除调试用的console.log语句

src/components/editor/CustomEditor.vue

@@ -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
+          <n-popover placement="top-start" trigger="click" raw :show-arrow="false" :width="300" ref="emoticonRef"
-            placement="top-start"
+            style="width: 500px; height: 250px; border-radius: 10px; overflow: hidden">
-            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
+          <div class="item pointer" v-for="nav in navs" :key="nav.title" v-show="nav.show" @click="nav.click">
-            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
+        <div ref="editorRef" class="custom-editor" contenteditable="true" :placeholder="placeholder"
-          ref="editorRef"
+          @input="handleInput" @keydown="handleKeydown" @paste="handlePaste" @focus="handleFocus" @blur="handleBlur">
-          class="custom-editor"
+        </div>
-          contenteditable="true"
+        <div v-if="showMention && dialogueStore.talk.talk_type === 2" class="mention-list py-5px"
-          :placeholder="placeholder"
+          :style="{ top: mentionPosition.top + 'px', left: mentionPosition.left + 'px' }">
-          @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
+            <li v-for="(member, index) in mentionList" :key="member.user_id || member.id"
-              v-for="(member, index) in mentionList"
+              class="cursor-pointer px-14px h-42px" :class="{ 'bg-#EEE9F9': index === selectedMentionIndex }"
-              :key="member.user_id || member.id"
+              @mousedown.prevent="handleMentionSelectByMouse(member)" @mouseover="selectedMentionIndex = index">
-              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;
 }

src/event/talk.js

@@ -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 {

src/hooks/useTalkRecord.ts

@@ -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,

src/store/modules/dialogue.js

@@ -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)
+        })
+      }
     }
   }
 })

src/store/modules/uploads.ts

@@ -1,7 +1,13 @@
 import { defineStore } from 'pinia'
-import { ServeFindFileSplitInfo, ServeFileSubareaUpload } from '@/api/upload'
+// import { message } from 'naive-ui'
-import { ServeSendTalkFile } from '@/api/chat'
+import {
-import { uploadImg } from '@/api/upload'
+  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) // 通知上传失败
+      }
+    }
   }
 })

src/utils/request.js

@@ -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)
   }

src/views/message/inner/IndexSider.vue

@@ -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)
 }
 

src/views/message/inner/panel/PanelContent.vue

@@ -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,

src/views/message/inner/panel/PanelFooter.vue

@@ -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中删除
     }
   )
 }

vite.config.ts

@@ -46,9 +46,9 @@ export default defineConfig(({ mode }) => {
       vueJsx({}), 
       compressPlugin(), 
       UnoCSS(),
-      // vueDevTools({
+      vueDevTools({
-      //   launchEditor: 'trae',
+        launchEditor: 'trae',
-      // })
+      })
     ],
     define: {
       __APP_ENV__: env.APP_ENV