diff --git a/src/pages/dialog/index.vue b/src/pages/dialog/index.vue index c38bca9..9465d56 100644 --- a/src/pages/dialog/index.vue +++ b/src/pages/dialog/index.vue @@ -263,9 +263,20 @@ @editorChange="onEditorChange" style="width: 100%; flex: 1; height: 100%;" @click="onEditorClick" + v-if="state.canUseQuillEditor" /> - +
- +
{ @@ -728,7 +747,74 @@ const onSendMessage = (data = {}, callBack, showLoading = false) => { }) } +const onTextAreaChange = (value) => { + state.value.textAreaValue = value + + // 更新mentionUserIds数组,确保与输入框中的@内容一致 + const atPattern = /@([^@\s]+)(?:\s|$)/g + const matches = Array.from(value.matchAll(atPattern)) + const mentionedUsers = matches.map(match => match[1].trim().toLowerCase()) + + // 获取当前对话中的所有成员信息 + const members = dialogueStore.members || [] + + // 根据@的用户名找到对应的user_id + const newMentionUserIds = mentionedUsers.map(username => { + if (username === '所有人') { + return 0 // 如果是@所有人,返回0 + } + const member = members.find(m => m.nickname.trim().toLowerCase() === username) + return member ? member.id : null + }).filter(id => id !== null) + + // 只有在输入框中有@内容时才更新mentionUserIds + if (value.includes('@')) { + state.value.mentionUserIds = newMentionUserIds + } else { + state.value.mentionUserIds = [] + } +} + +// 处理输入框输入事件 +const onTextAreaInput = (value) => { + console.log(value, 'value') + if(value.length > 0){ + if(value[value.length - 1] === '@'){ + if(talkParams.type === 1){ + return + } + state.value.isShowMentionSelect = true + } + } +} + const onSendMessageClick = () => { + if (!state.value.canUseQuillEditor) { + // 处理普通输入框的发送消息 + if (state.value.textAreaValue.trim() === '') { + return + } + if (state.value.textAreaValue.length > 1024) { + return message.warning('发送内容超长,请分条发送') + } + let message = { + type: 'text', + content: state.value.textAreaValue, + quote_id: state.value.quoteInfo ? state.value.quoteInfo.msg_id : null, // 添加quote_id + mentions: state.value.mentionUserIds, // 使用最终的用户ID数组 + } + console.log(message) + onSendMessage( + message, + (ok) => { + if (!ok) return + state.value.textAreaValue = '' + state.value.quoteInfo = null // 发送后清除引用信息 + }, + true, + ) + return + } // 发送前确保 mentionUserIds 是最新的 updateMentionUserIds() @@ -1404,6 +1490,10 @@ const confirmMentionSelect = () => { selectMemberByAlphabetRef.value.confirmSelectMembers() } hideMentionSelect() + + // 重置选中人数和多选状态 + state.value.selectedMembersNum = 0 + state.value.mentionIsMulSelect = false } } @@ -1415,6 +1505,14 @@ const getSelectResult = (mentionSelect) => { //处理要提醒人的消息样式 const getMentionSelectLists = (mentionSelectList) => { + if(!state.value.canUseQuillEditor){ + if(mentionSelectList.length > 0){ + mentionSelectList.forEach(item => { + onTextAreaMention(item) + }) + } + return + } const quill = getQuill() const mention = quill.getModule('mention') @@ -1648,7 +1746,11 @@ let currentPressItem = null const handleAvatarTouchStart = (item) => { currentPressItem = item avatarPressTimer = setTimeout(() => { - doMentionUser(item) + if (!state.value.canUseQuillEditor) { + onTextAreaMention(item) + } else { + doMentionUser(item) + } }, 500) } @@ -1749,6 +1851,36 @@ const showMentionSelectDebounced = (quill) => { state.value.isShowMentionSelect = true // quill.blur() } + +// 处理普通输入框的表情插入 +const onTextAreaEmoticon = (data) => { + if (data.type == 1) { + if (data.img) { + // 如果是图片表情,插入对应的文本标记 + state.value.textAreaValue += `${data.value}` + } else { + // 如果是文本表情,直接插入 + state.value.textAreaValue += data.value + } + } +} + +// 处理普通输入框的长按@功能 +const onTextAreaMention = (user) => { + if (talkParams.type === 1) { + return + } + if(state.value.textAreaValue.length > 0){ + if(state.value.textAreaValue[state.value.textAreaValue.length - 1] === '@'){ + state.value.textAreaValue = state.value.textAreaValue.slice(0, -1) + } + } + state.value.textAreaValue += `@${user.nickname} ` + state.value.mentionUserIds.push(user.user_id) + if(state.value.isShowMentionSelect){ + state.value.isShowMentionSelect = false + } +}