From db8621ec5cba0e3215077da1aae96da7e920efb7 Mon Sep 17 00:00:00 2001 From: Phoenix <64720302+Concur-max@users.noreply.github.com> Date: Fri, 20 Jun 2025 10:09:54 +0800 Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E4=BF=AE=E5=A4=8D@=E6=8F=90?= =?UTF-8?q?=E5=8F=8A=E5=88=97=E8=A1=A8=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?= =?UTF-8?q?=E5=92=8C=E5=85=A8=E4=BD=93=E6=88=90=E5=91=98=E9=80=89=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修复@提及列表中全体成员选项的显示逻辑，不再需要管理员权限即可显示。同时优化点击事件处理，当点击非@提及列表区域时自动隐藏列表。 feat(message): 增加文件预览类型检查和样式优化 添加文件类型预览支持检查，仅允许预览PDF、Excel、Word和PPT文件。优化文件消息的悬停样式，提升用户体验。 --- src/components/editor/CustomEditor.vue | 17 ++++++---- src/components/talk/message/FileMessage.vue | 37 ++++++++++++++++----- 2 files changed, 39 insertions(+), 15 deletions(-) diff --git a/src/components/editor/CustomEditor.vue b/src/components/editor/CustomEditor.vue index bf46caa..9a1caf8 100644 --- a/src/components/editor/CustomEditor.vue +++ b/src/components/editor/CustomEditor.vue @@ -286,14 +286,9 @@ const showMentionList = () => { // 获取当前查询文本并转为小写，用于不区分大小写的匹配 const query = currentMentionQuery.value.toLowerCase() // 过滤成员列表，查找以查询文本开头的成员，并排除当前用户自己 - mentionList.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 }) - console.log('userStore',userStore.uid) - // 如果当前用户是群管理员，在列表开头添加"全体成员"选项 - if(dialogueStore.groupInfo.is_manager){ - mentionList.value.unshift({ id: 0, nickname: '全体成员', avatar: defAvatar, value: '全体成员' }) - } // 只有当列表有内容时才显示 showMention.value = mentionList.value.length > 0 // 重置选中项索引为第一项 @@ -2155,7 +2150,7 @@ const onVoteSubmit = (data) => { /** * 处理编辑器点击事件 - * 主要用于处理引用元素的关闭按钮点击 + * 用于处理引用元素的关闭按钮点击和隐藏@提及列表 * * @param {Event} event - 点击事件对象 */ @@ -2181,6 +2176,14 @@ const handleEditorClick = (event) => { event.stopPropagation(); } } + + // 检查点击的是否是@提及列表 + const isMentionListClick = event.target.closest('.mention-list'); + + // 如果@提及列表显示中，且点击的不是@提及列表，则隐藏@提及列表 + if (showMention.value && !isMentionListClick) { + hideMentionList(); + } }; diff --git a/src/components/talk/message/FileMessage.vue b/src/components/talk/message/FileMessage.vue index de5004e..d892ee1 100644 --- a/src/components/talk/message/FileMessage.vue +++ b/src/components/talk/message/FileMessage.vue @@ -62,6 +62,15 @@ const fileInfo = computed(() => { return fileTypes[extension] || fileTypes.DEFAULT }) +// 判断文件是否可以预览 +const canPreview = computed(() => { + const extension = getFileExtension(props.extra.path) + return extension === 'PDF' || + EXCEL_EXTENSIONS.includes(extension) || + WORD_EXTENSIONS.includes(extension) || + PPT_EXTENSIONS.includes(extension) +}) + // 获取文件扩展名 function getFileExtension(filepath) { const parts = filepath?.split('.') @@ -86,14 +95,19 @@ const strokeDashoffset = computed(() => // 处理文件点击事件 const handleClick = () => { - if(!props.extra.is_uploading){ - window.open( - `${import.meta.env.VITE_PAGE_URL}/office?url=${props.extra.path}`, - '_blank', - 'width=1200,height=900,left=200,top=200,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no' - ); + // 只有在不上传中且文件类型支持预览时才打开预览窗口 + if(!props.extra.is_uploading) { + if(canPreview.value){ + window.open( + `${import.meta.env.VITE_PAGE_URL}/office?url=${props.extra.path}`, + '_blank', + 'width=1200,height=900,left=200,top=200,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no' + ); + }else{ + window['$message'].warning('暂不支持在线预览该类型文件') + } + } - } function downloadFileWithProgress(resourceUrl, filename) { @@ -114,7 +128,7 @@ const handleDownload = () => {