From 45e4415cecfa478538c8e0fd4af4c626cefb86d6 Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Wed, 11 Jun 2025 14:47:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E8=BD=AC=E5=8F=91=E3=80=81=E4=B8=8A=E4=BC=A0=E5=92=8C=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E5=BC=95=E7=94=A8=E5=88=A0=E9=99=A4=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加ChatMsgTypeForward到可转发消息类型
- 修复请求拦截器中状态码判断逻辑
- 优化视频消息上传封面获取和预览显示
- 修复上传分片错误处理和进度更新
- 重构编辑器引用删除逻辑，提升代码可维护性
- 调整图片消息样式和上传蒙版显示
---
 src/components/editor/CustomEditor.vue        | 105 +++++++++---------
 src/components/talk/message/ImageMessage.vue  |   4 +-
 src/components/talk/message/VideoMessage.vue  |  11 +-
 src/constant/message.ts                       |   1 +
 src/store/modules/uploads.ts                  |   8 +-
 src/utils/request.js                          |   3 +-
 .../message/inner/panel/PanelContent.vue      |   1 +
 src/views/message/inner/panel/PanelFooter.vue |  11 +-
 8 files changed, 77 insertions(+), 67 deletions(-)

diff --git a/src/components/editor/CustomEditor.vue b/src/components/editor/CustomEditor.vue
index 5cf1d0f..03619ff 100644
--- a/src/components/editor/CustomEditor.vue
+++ b/src/components/editor/CustomEditor.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick, markRaw, watch } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount, nextTick, markRaw, watch } from 'vue'
 import { NPopover, NIcon } from 'naive-ui'
 import {
   SmilingFace,
@@ -1063,6 +1063,54 @@ const onSubscribeMention = async (data) => {
   }
 };
 
+// 在组件顶层作用域定义handleDeleteQuote函数
+const handleDeleteQuote = function(e) {
+  // 如果不是删除键或退格键，直接返回
+  if (e.key !== 'Backspace' && e.key !== 'Delete') return;
+  
+  const selection = window.getSelection();
+  if (selection.rangeCount === 0) return;
+  
+  const range = selection.getRangeAt(0);
+  const editor = editorRef.value;
+  if (!editor) return;
+  
+  const quoteElement = editor.querySelector('.editor-quote');
+  
+  if (!quoteElement) {
+    // 如果没有引用元素，移除事件监听器
+    editor.removeEventListener('keydown', handleDeleteQuote);
+    return;
+  }
+  
+  // 获取引用元素在编辑器子节点中的索引
+  const quoteIndex = Array.from(editor.childNodes).indexOf(quoteElement);
+  
+  // 检查是否在引用元素前按下退格键
+  const isBeforeQuote = e.key === 'Backspace' && 
+                     range.collapsed && 
+                     range.startContainer === editor && 
+                     quoteIndex === range.startOffset;
+  
+  // 检查是否在引用元素后按下删除键
+  const isAfterQuote = e.key === 'Delete' && 
+                    range.collapsed && 
+                    range.startContainer === editor && 
+                    quoteIndex === range.startOffset - 1;
+  
+  if (isBeforeQuote || isAfterQuote) {
+    // 阻止默认行为
+    e.preventDefault();
+    
+    // 移除引用元素
+    quoteElement.remove();
+    quoteData.value = null;
+    
+    // 触发输入事件更新编辑器内容
+    handleInput({ target: editor });
+  }
+};
+
 const onSubscribeQuote = (data) => {
   
   quoteData.value = data
@@ -1135,58 +1183,8 @@ const onSubscribeQuote = (data) => {
     }
   })
   
-  
-  
-  
-  
-  
-  
-  
-  
-  const handleDeleteQuote = function(e) {
-    
-    if (e.key !== 'Backspace' && e.key !== 'Delete') return;
-    
-    const selection = window.getSelection();
-    if (selection.rangeCount === 0) return;
-    
-    const range = selection.getRangeAt(0);
-    const quoteElement = editor.querySelector('.editor-quote');
-    
-    if (!quoteElement) {
-      
-      editor.removeEventListener('keydown', handleDeleteQuote);
-      return;
-    }
-    
-    
-    const quoteIndex = Array.from(editor.childNodes).indexOf(quoteElement);
-    
-    
-    const isBeforeQuote = e.key === 'Backspace' && 
-                         range.collapsed && 
-                         range.startContainer === editor && 
-                         quoteIndex === range.startOffset;
-    
-    const isAfterQuote = e.key === 'Delete' && 
-                        range.collapsed && 
-                        range.startContainer === editor && 
-                        quoteIndex === range.startOffset - 1;
-    
-    if (isBeforeQuote || isAfterQuote) {
-      
-      e.preventDefault();
-      
-      
-      quoteElement.remove();
-      quoteData.value = null;
-      
-      
-      handleInput({ target: editor });
-    }
-  };
-
-editor.addEventListener('keydown', handleDeleteQuote);
+  // 使用顶层作用域定义的handleDeleteQuote函数
+  editor.addEventListener('keydown', handleDeleteQuote);
   
   
 setTimeout(() => {
@@ -1955,7 +1953,6 @@ const handleEditorClick = (event) => {
   
   
   
-  
 
   /**
    * 表情样式
diff --git a/src/components/talk/message/ImageMessage.vue b/src/components/talk/message/ImageMessage.vue
index 588a3a8..e4ae304 100644
--- a/src/components/talk/message/ImageMessage.vue
+++ b/src/components/talk/message/ImageMessage.vue
@@ -38,7 +38,7 @@ const img = (src: string, width = 200) => {
     <div class="image-container">
       <n-image class="h-149px" :src="extra.url" />
       <!-- 上传中的loading蒙版 -->
-      <div v-if="props.extra.is_uploading" class="loading-overlay">
+      <div v-if="extra.is_uploading" class="loading-overlay">
         <n-spin size="large" />
       </div>
     </div>
@@ -53,7 +53,7 @@ const img = (src: string, width = 200) => {
   height:149px;
   
   &.left {
-    background: var(--im-message-right-bg-color);
+    background: #F4F4FC;
   }
 
   .image-container {
diff --git a/src/components/talk/message/VideoMessage.vue b/src/components/talk/message/VideoMessage.vue
index d43e247..72ad3bb 100644
--- a/src/components/talk/message/VideoMessage.vue
+++ b/src/components/talk/message/VideoMessage.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import 'xgplayer/dist/index.min.css'
-import { ref, nextTick, watch } from 'vue'
+import { ref, nextTick, watch, computed } from 'vue'
 import { NImage, NModal, NCard, NProgress, NPopconfirm } from 'naive-ui'
 import { Play, Close, Pause, Right, Attention } from '@icon-park/vue-next'
 import { getImageInfo } from '@/utils/functions'
@@ -64,6 +64,11 @@ const updatePauseStatus = () => {
 // 初始化时检查状态
 updatePauseStatus()
 
+// 创建视频封面的URL
+const videoSrc = computed(() => {
+  // 即使在上传过程中也返回视频URL，这样可以显示视频封面
+  return props.extra.url || ''
+})
 // // 监听关键道具变化
 // watch(() => props.extra.percentage, (newVal: number | undefined) => {
 //   // 确保进度更新时 UI 也实时更新  
@@ -136,7 +141,7 @@ function resumeUpload(e) {
   >
   
     <!-- <n-image :src="extra.cover" preview-disabled /> -->
-    <video :src="props.extra.url" :controls="false"></video>
+    <video :src="videoSrc" :controls="false"></video>
     <!-- 上传进度时的黑色半透明蒙层 -->
     <div v-if="extra.is_uploading && !uploadFailed" class="upload-mask"></div>
     <!-- 上传进度显示 -->
@@ -252,7 +257,7 @@ function resumeUpload(e) {
   top: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.45);
+  background: rgba(0, 0, 0, 0.3); /* 降低不透明度，从0.45改为0.3，让视频封面能够显示 */
   z-index: 1;
   border-radius: 5px;
 }
diff --git a/src/constant/message.ts b/src/constant/message.ts
index 5bba52b..638c861 100644
--- a/src/constant/message.ts
+++ b/src/constant/message.ts
@@ -96,6 +96,7 @@ export const MessageComponents = {
 
 // 可转发的消息类型
 export const ForwardableMessageType = [
+  ChatMsgTypeForward,
   ChatMsgTypeText,
   ChatMsgTypeCode,
   ChatMsgTypeImage,
diff --git a/src/store/modules/uploads.ts b/src/store/modules/uploads.ts
index fdebd0e..5724054 100644
--- a/src/store/modules/uploads.ts
+++ b/src/store/modules/uploads.ts
@@ -170,14 +170,14 @@ export const useUploadsStore = defineStore('uploads', {
       
       // 更新状态为上传中
       currentItem.status = 1
-      
+      const updatedItem:any = this.findItem(uploadId)
       // 上传当前分片
       try {
 
         const res = await ServeFileSubareaUpload(form)
   
         // 获取最新的项目状态，确保仍然存在且没有被暂停
-        const updatedItem:any = this.findItem(uploadId)
+       
         if (res.code == 200) {
           // 当前分片上传成功，增加索引
           updatedItem.uploadIndex++
@@ -209,10 +209,12 @@ export const useUploadsStore = defineStore('uploads', {
         
         }
       } catch (error) {
+        updatedItem.onProgress(-1)
         console.error("分片上传错误:", error);
         
         // 获取最新的项目状态
-        const updatedItem = this.findItem(uploadId)
+        // 这里不应该重新定义变量，而是使用已有的updatedItem
+        // const updatedItem = this.findItem(uploadId)
         if (!updatedItem) return
         
         // 如果是暂停导致的错误，不改变状态
diff --git a/src/utils/request.js b/src/utils/request.js
index 9377a73..3c3f69d 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -54,7 +54,8 @@ request.interceptors.request.use((config) => {
 
 // 响应拦截器
 request.interceptors.response.use((response) => {
-  if(response.data.code !==200){
+  console.log('response.data.status',response.data.status)
+  if(response.data.code !==200&&response.data.status!==0){
     window['$message'].warning(response.data.msg)
   }
   return response.data
diff --git a/src/views/message/inner/panel/PanelContent.vue b/src/views/message/inner/panel/PanelContent.vue
index d65719a..b627bb1 100644
--- a/src/views/message/inner/panel/PanelContent.vue
+++ b/src/views/message/inner/panel/PanelContent.vue
@@ -330,6 +330,7 @@ const onContextMenuHandle = (key: string) => {
 
 const onRowClick = (item: ITalkRecord) => {
   if (dialogueStore.isOpenMultiSelect) {
+    console.log('item.msg_type',item.msg_type)
     if (ForwardableMessageType.includes(item.msg_type)) {
       item.isCheck = !item.isCheck
     } else {
diff --git a/src/views/message/inner/panel/PanelFooter.vue b/src/views/message/inner/panel/PanelFooter.vue
index e1a8abb..bb53a4d 100644
--- a/src/views/message/inner/panel/PanelFooter.vue
+++ b/src/views/message/inner/panel/PanelFooter.vue
@@ -101,10 +101,13 @@ const onSendImageEvent = ({ data, callBack }) => {
 
 // 发送视频消息
 const onSendVideoEvent = async ({ data }) => {
-
-  
   // 获取视频首帧作为封面图
-  // let resp = await getVideoImage(data)
+  let videoPreview = null
+  try {
+    videoPreview = await getVideoImage(data)
+  } catch (error) {
+    console.error('获取视频封面失败:', error)
+  }
   
   // 先创建一个带有上传ID的临时消息对象，用于显示进度
   const uploadId = `video-${Date.now()}-${Math.floor(Math.random() * 1000)}`
@@ -123,7 +126,7 @@ const onSendVideoEvent = async ({ data }) => {
     content: '',
     created_at: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}'),
     extra: {
-      url: '', 
+      url: videoPreview ? URL.createObjectURL(data) : '', // 使用本地视频URL作为预览
       size: data.size,
       is_uploading: true,
       upload_id: uploadId,