From 1ff26564c781e8125cdab2cf981bcc60de4dedab Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Fri, 6 Jun 2025 13:43:39 +0800
Subject: [PATCH] =?UTF-8?q?refactor(editor):=20=E4=BC=98=E5=8C=96=E5=BC=95?=
 =?UTF-8?q?=E7=94=A8=E6=B6=88=E6=81=AF=E7=9A=84=E7=82=B9=E5=87=BB=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

使用事件委托统一处理引用消息的点击事件，包括关闭按钮点击和光标定位
移除重复的事件监听器，简化代码结构
修复引用消息ID字段从msg_id改为id的匹配问题
---
 src/components/editor/CustomEditor.vue | 62 ++++++++++++++++++++------
 1 file changed, 48 insertions(+), 14 deletions(-)

diff --git a/src/components/editor/CustomEditor.vue b/src/components/editor/CustomEditor.vue
index 754f90f..335f632 100644
--- a/src/components/editor/CustomEditor.vue
+++ b/src/components/editor/CustomEditor.vue
@@ -375,6 +375,7 @@ const sendMessage = () => {
         quoteId:messageData.quoteId,
       }
       console.log('发送前',data)
+      console.log('quoteData',quoteData.value)
       emit(
         'editor-event',
         emitCall('text_event', data,(ok)=>{
@@ -527,7 +528,7 @@ const parseEditorContent = () => {
   const result = {
     items: items.length > 0 ? items : [{ type: 1, content: '' }],
     mentionUids,
-    quoteId: quoteElements.length > 0 && quoteData.value ? quoteData.value.msg_id ||'' : ''
+    quoteId: quoteElements.length > 0 && quoteData.value ? quoteData.value.id ||'' : ''
   }
   
   // 如果有引用信息，添加到结果中
@@ -840,10 +841,15 @@ const onSubscribeQuote = (data) => {
     editor.appendChild(quoteElement)
   }
   
-  // 添加关闭按钮点击事件
-  const closeBtn = quoteElement.querySelector('.quote-close')
-  if (closeBtn) {
-    closeBtn.addEventListener('click', () => {
+  // 使用事件委托处理引用元素的所有点击事件
+  quoteElement.addEventListener('click', (e) => {
+    console.log('执行删除',e)
+    // 检查点击的是否是关闭按钮或其内部元素
+    const closeButton = e.target.classList?.contains('quote-close') ? e.target : e.target.closest('.quote-close')
+    if (closeButton) {
+      // 阻止事件冒泡
+      e.stopPropagation()
+      
       // 移除引用元素
       quoteElement.remove()
       
@@ -859,15 +865,8 @@ const onSubscribeQuote = (data) => {
       setTimeout(() => {
         editor.focus()
       }, 0)
-    })
-  }
-  
-  // 注意：不调用saveDraft()，确保引用内容不会被保存到草稿中
-  
-  // 添加点击整个引用卡片的事件
-  quoteElement.addEventListener('click', (e) => {
-    // 如果不是点击关闭按钮，则设置光标到引用卡片后面
-    if (!e.target.classList.contains('quote-close')) {
+    } else {
+      // 如果不是点击关闭按钮，则设置光标到引用卡片后面
       const selection = window.getSelection()
       const range = document.createRange()
       range.setStartAfter(quoteElement)
@@ -880,6 +879,13 @@ const onSubscribeQuote = (data) => {
     }
   })
   
+  // 注意：不调用saveDraft()，确保引用内容不会被保存到草稿中
+  
+  // 在同一个事件监听器中处理引用卡片的点击
+  // 已经在上面的事件处理中添加了关闭按钮的处理逻辑
+  // 这里只需要处理非关闭按钮的点击
+  // 注意：由于事件委托的方式，不需要额外添加点击事件监听器
+  
   // 监听键盘事件，处理删除操作
   // 监听键盘事件，处理删除操作
   const handleDeleteQuote = function(e) {
@@ -1108,6 +1114,11 @@ onMounted(() => {
   bus.subscribe(EditorConst.Quote, onSubscribeQuote)
   bus.subscribe(EditorConst.Edit, onSubscribeEdit)
   bus.subscribe(EditorConst.Clear, onSubscribeClear)
+
+  // 为编辑器添加点击事件监听器，用于处理引用消息关闭等
+  if (editorRef.value) {
+    editorRef.value.addEventListener('click', handleEditorClick);
+  }
   
   // 点击外部隐藏mention
   document.addEventListener('click', (event) => {
@@ -1133,6 +1144,11 @@ onBeforeUnmount(() => {
   bus.unsubscribe(EditorConst.Quote, onSubscribeQuote)
   bus.unsubscribe(EditorConst.Edit, onSubscribeEdit)
   bus.unsubscribe(EditorConst.Clear, onSubscribeClear)
+
+  // 移除编辑器点击事件监听器
+  if (editorRef.value) {
+    editorRef.value.removeEventListener('click', handleEditorClick);
+  }
   
   // 清理DOM事件监听器
   const editor = editorRef.value
@@ -1191,6 +1207,24 @@ const onVoteSubmit = (data) => {
   })
   isShowVote.value = false
 }
+
+// 处理编辑器内部点击事件（用于关闭引用等）
+const handleEditorClick = (event) => {
+  const closeButton = event.target.closest('.quote-close');
+
+  if (closeButton) {
+    const quoteElement = event.target.closest('.editor-quote');
+    if (quoteElement) {
+      quoteElement.remove();
+      quoteData.value = null;
+
+      handleInput({ target: editorRef.value });
+
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+};
 </script>
 
 <template>