diff --git a/src/components/editor/CustomEditor.vue b/src/components/editor/CustomEditor.vue index fe75735..129f8eb 100644 --- a/src/components/editor/CustomEditor.vue +++ b/src/components/editor/CustomEditor.vue @@ -252,8 +252,29 @@ const handlePaste = (event) => { // 获取粘贴的图片文件 const file = items[i].getAsFile() if (file) { - // 使用现有的上传图片功能处理 - onUploadFile([file]) + const tempUrl = URL.createObjectURL(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"); - -/** - * 文件上传处理 - * @param e 上传事件对象或文件数组 - */ -// 文件上传处理 -async function onUploadFile(e) { - let files; - - // 判断参数类型 - if (Array.isArray(e)) { - // 直接传入的文件数组 - files = e; - } else { - // 传入的是事件对象 - files = e.target.files; - e.target.value = null; // 清空input,允许再次选择相同文件 + const res=await uploadImg(form) + if(res.status===0){ + const data={ + height:0, + width:0, + size:10000, + url:res.data.ori_url, + } + emit( + 'editor-event', + emitCall( + 'image_event', + data + ) + ) + } } - - // 确保有文件 - if (!files || files.length === 0) return; - - // 处理第一个文件 - const file = files[0]; - +} +async function onUploadFile(e) { + let file = e.target.files[0] + + e.target.value = null // 清空input,允许再次选择相同文件 + console.log("文件类型"+file.type) if (file.type.indexOf('image/') === 0) { console.log("进入图片") - // 创建临时URL - const tempUrl = URL.createObjectURL(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); - - // 上传图片并获取永久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; + // 处理图片文件 - 立即显示临时消息,然后上传 + let fn = emitCall('image_event', file, () => {}) + emit('editor-event', fn) + + return } if (file.type.indexOf('video/') === 0) { @@ -1424,7 +1414,7 @@ const handleEditorClick = (event) => { 通过ref获取DOM引用 -->
@@ -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; /* 为文件大小信息留出空间 */ @@ -1542,13 +1526,7 @@ const handleEditorClick = (event) => { background-color: #e3f2fd; } } - - // 表情符号样式 - /** - * 表情符号样式 - * 使用: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; diff --git a/src/components/talk/message/FileMessage.vue b/src/components/talk/message/FileMessage.vue index 8129e4e..de5004e 100644 --- a/src/components/talk/message/FileMessage.vue +++ b/src/components/talk/message/FileMessage.vue @@ -64,8 +64,8 @@ const fileInfo = computed(() => { // 获取文件扩展名 function getFileExtension(filepath) { - const parts = filepath.split('.') - return parts.length > 1 ? parts.pop().toUpperCase() : '' + const parts = filepath?.split('.') + return parts?.length > 1 ? parts?.pop()?.toUpperCase() : '' } // 切换播放状态 diff --git a/src/hooks/useTalkRecord.ts b/src/hooks/useTalkRecord.ts index 4accf93..027c93f 100644 --- a/src/hooks/useTalkRecord.ts +++ b/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 } // 记录特殊参数,供分页加载用 diff --git a/src/views/message/inner/panel/PanelContent.vue b/src/views/message/inner/panel/PanelContent.vue index 5cb1cc9..b4d2df7 100644 --- a/src/views/message/inner/panel/PanelContent.vue +++ b/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)) diff --git a/src/views/message/inner/panel/PanelFooter.vue b/src/views/message/inner/panel/PanelFooter.vue index bea5429..e1a8abb 100644 --- a/src/views/message/inner/panel/PanelFooter.vue +++ b/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, diff --git a/vite.config.ts b/vite.config.ts index 715bc77..83a792e 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -46,9 +46,9 @@ export default defineConfig(({ mode }) => { vueJsx({}), compressPlugin(), UnoCSS(), - // vueDevTools({ - // launchEditor: 'trae', - // }) + vueDevTools({ + launchEditor: 'trae', + }) ], define: { __APP_ENV__: env.APP_ENV