fix: 修复文件上传和编辑器相关问题

- 启用vueDevTools插件用于开发调试
- 移除调试用的console.error/log语句
- 修复文件扩展名获取可能导致的错误
- 优化文件上传逻辑，添加path字段
- 重构编辑器图片上传处理，支持直接发送
- 调整编辑器样式颜色

src/components/editor/CustomEditor.vue

@@ -252,8 +252,29 @@ const handlePaste = (event) => {
         // 获取粘贴的图片文件
         const file = items[i].getAsFile()
         if (file) {
-          // 使用现有的上传图片功能处理
+          const tempUrl = URL.createObjectURL(file);
-          onUploadFile([file])
+    const image = new Image();
+    image.src = tempUrl;
+    image.onload = () => {
+      const form = new FormData();
+      form.append('file', file);
+      form.append("source", "fonchain-chat");  
+      form.append("urlParam", `width=${image.width}&height=${image.height}`);
+      insertImage(tempUrl, image.width, image.height);
+      uploadImg(form).then(({ code, data, message }) => {
+        if (code == 0) {
+          const editorImages = editorRef.value.querySelectorAll('img.editor-image');
+          const lastImage = editorImages[editorImages.length - 1];
+          if (lastImage && lastImage.src === tempUrl) {
+            lastImage.src = data.ori_url;
+            handleInput({ target: editorRef.value });
+          }
+        } else {
+          window['$message'].error(message);
+        }
+      });
+    };
+    
           return
         }
       }
@@ -665,75 +686,44 @@ const formatFileSize = (size) => {
     return (size / (1024 * 1024 * 1024)).toFixed(2) + ' GB'
   }
 }
+//工具栏中选完图片直接发送
+const onUploadSendImg=async (eventFile)=>{
+  for (const file of eventFile.target.files) {
+    const form = new FormData();
+    form.append('file', file);
+    form.append("source", "fonchain-chat");
 
-
+   const res=await uploadImg(form)
-/**
+   if(res.status===0){
- * 文件上传处理
+    const data={
- * @param e 上传事件对象或文件数组
+          height:0,
- */
+          width:0,
-// 文件上传处理
+          size:10000,
-async function onUploadFile(e) {
+          url:res.data.ori_url,
-  let files;
-  
-  // 判断参数类型
-  if (Array.isArray(e)) {
-    // 直接传入的文件数组
-    files = e;
-  } else {
-    // 传入的是事件对象
-    files = e.target.files;
-    e.target.value = null;  // 清空input，允许再次选择相同文件
         }
+        emit(
+        'editor-event',
+        emitCall(
+          'image_event',
+          data
+        )
+      )
+   }
+  }
+}
+async function onUploadFile(e) {
+  let file = e.target.files[0]
 
-  // 确保有文件
+  e.target.value = null  // 清空input，允许再次选择相同文件
-  if (!files || files.length === 0) return;
-  
-  // 处理第一个文件
-  const file = files[0];
 
   console.log("文件类型"+file.type)
   if (file.type.indexOf('image/') === 0) {
     console.log("进入图片")
-    // 创建临时URL
+    // 处理图片文件 - 立即显示临时消息，然后上传
-    const tempUrl = URL.createObjectURL(file);
+    let fn = emitCall('image_event', file, () => {})
+    emit('editor-event', fn)
 
-    // 创建图片对象以获取尺寸
+    return
-    const image = new Image();
-    image.src = tempUrl;
-    
-    image.onload = () => {
-      // 上传图片到服务器
-      const form = new FormData();
-      form.append('file', file);
-      form.append("source", "fonchain-chat");  // 图片来源标识
-      form.append("urlParam", `width=${image.width}&height=${image.height}`);
-      
-      // 先将临时图片插入编辑器，不直接设置宽高，而是传递原始尺寸信息
-      insertImage(tempUrl, image.width, image.height);
-      
-      // 上传图片并获取永久URL
-      uploadImg(form).then(({ code, data, message }) => {
-        if (code == 0) {
-          // 上传成功后，将临时URL替换为永久URL
-          console.log('图片上传成功:', data.ori_url);
-          
-          // 查找编辑器中刚插入的图片元素并替换其src为永久URL
-          const editorImages = editorRef.value.querySelectorAll('img.editor-image');
-          // 查找最后插入的图片（通常是最近添加的那个）
-          const lastImage = editorImages[editorImages.length - 1];
-          if (lastImage && lastImage.src === tempUrl) {
-            // 替换为永久URL
-            lastImage.src = data.ori_url;
-            // 触发输入事件更新编辑器内容
-            handleInput({ target: editorRef.value });
-          }
-        } else {
-          window['$message'].error(message);
-        }
-      });
-    };
-    
-    return;
   }
 
   if (file.type.indexOf('video/') === 0) {
@@ -1424,7 +1414,7 @@ const handleEditorClick = (event) => {
     通过ref获取DOM引用
   -->
   <form enctype="multipart/form-data" style="display: none">
-    <input type="file" ref="fileImageRef" accept="image/*" @change="onUploadFile" />
+    <input type="file" ref="fileImageRef" accept="image/*" @change="onUploadSendImg" />
     <input type="file" ref="uploadFileRef" @change="onUploadFile" />
   </form>
 
@@ -1507,12 +1497,6 @@ const handleEditorClick = (event) => {
       }
     }
   }
-  
-  /**
-   * 文件链接样式
-   * 使用:deep()选择器影响组件内部元素
-   * 显示文件链接的卡片式样式
-   */
   :deep(.editor-file) {
     display: inline-block;
     padding: 5px 10px;
@@ -1520,7 +1504,7 @@ const handleEditorClick = (event) => {
     background-color: #f5f5f5;
     border: 1px solid #e0e0e0;
     border-radius: 4px;
-    color: #2196f3;
+    color: #462AA0;
     text-decoration: none;
     position: relative;
     padding-right: 60px; /* 为文件大小信息留出空间 */
@@ -1543,12 +1527,6 @@ const handleEditorClick = (event) => {
     }
   }
 
-  // 表情符号样式
-  /**
-   * 表情符号样式
-   * 使用:deep()选择器影响组件内部元素
-   * 设置表情符号的大小和对齐方式
-   */
   :deep(.editor-emoji) {
     display: inline-block;
     width: 24px;
@@ -1556,13 +1534,6 @@ const handleEditorClick = (event) => {
     vertical-align: middle; /* 垂直居中对齐 */
     margin: 0 2px;
   }
-
-  /**
-   * 引用消息样式
-   * 使用:deep()选择器影响组件内部元素
-   * 创建带有左侧边框的引用卡片
-   * 使用CSS变量适配不同主题
-   */
   :deep(.editor-quote) {
     margin-bottom: 8px;
     padding: 8px 12px;

src/components/talk/message/FileMessage.vue

@@ -64,8 +64,8 @@ const fileInfo = computed(() => {
 
 // 获取文件扩展名
 function getFileExtension(filepath) {
-  const parts = filepath.split('.')
+  const parts = filepath?.split('.')
-  return parts.length > 1 ? parts.pop().toUpperCase() : ''
+  return parts?.length > 1 ? parts?.pop()?.toUpperCase() : ''
 }
 
 // 切换播放状态

src/hooks/useTalkRecord.ts

@@ -190,8 +190,6 @@ export const useTalkRecord = (uid: number) => {
     loadConfig.receiver_id = params.receiver_id
     loadConfig.talk_type = params.talk_type
 
-    console.error('onLoad', params, options)
-
     // 新增：支持指定消息定位模式，参数以传入为准合并
     if (options?.specifiedMsg?.cursor !== undefined) {
       loadConfig.specialParams = { ...options.specifiedMsg } // 记录特殊参数，供分页加载用

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

@@ -289,7 +289,6 @@ watch(
   async (newProps) => {
     await nextTick()
     let specialParams = undefined
-    console.error(newProps, 'newProps')
     if (newProps.specifiedMsg) {
       try {
         const parsed = JSON.parse(decodeURIComponent(newProps.specifiedMsg))

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

@@ -101,7 +101,7 @@ const onSendImageEvent = ({ data, callBack }) => {
 
 // 发送视频消息
 const onSendVideoEvent = async ({ data }) => {
-  console.log('onSendVideoEvent')
+
   
   // 获取视频首帧作为封面图
   // let resp = await getVideoImage(data)
@@ -166,7 +166,6 @@ const onSendFileEvent = ({ data }) => {
     return window['$message'].warning('上传文件不能超过100M!')
   }
   const clientUploadId = `file-${Date.now()}-${Math.floor(Math.random() * 1000)}`
-
   const tempMessage = {
     msg_id: clientUploadId,
     sequence: Date.now(),
@@ -182,6 +181,7 @@ const onSendFileEvent = ({ data }) => {
     extra: {
       name: data.name,
       url: '', 
+      path:data.name,
       size: data.size,
       is_uploading: true,
       upload_id: clientUploadId,

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