feat: 优化图片删除按钮交互和防误触机制

- 添加全局常量DELETE_BUTTON_DELAY(1000ms)统一管理删除按钮延时时间
  - 实现删除按钮延时显示机制，防止误触操作
  - 调整删除按钮样式尺寸，增大点击区域(40px*40px)
  - 优化删除按钮显示/隐藏动画过渡效果
  - 修复删除按钮事件监听器重复绑定问题
  - 完善删除按钮可见性检查逻辑，确保只有可见状态才能执行删除操作

src/components/RichTextEditor.vue

@@ -24,6 +24,9 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
+// 全局常量定义
+const DELETE_BUTTON_DELAY = 1000 // 删除按钮延时时间（毫秒），用于防止误触
+
 const editorRef = ref(null)
 const content = ref(props.modelValue || '')
 const isToolbarVisible = ref(false)
@@ -111,19 +114,17 @@ onMounted(() => {
       if (deleteBtn) {
         // 先移除可能已有的事件监听器，避免重复
         deleteBtn.removeEventListener('click', null)
-        deleteBtn.removeEventListener('touchend', null)
 
-        deleteBtn.addEventListener('click', function (e) {
+        // 添加延时检查，确保删除按钮是可见的才执行删除操作
-          e.stopPropagation()
+        setTimeout(() => {
-          container.remove()
+          deleteBtn.addEventListener('click', function (e) {
-          handleInput()
+            e.stopPropagation()
-        })
+            if (deleteBtn.classList.contains('visible')) {
-
+              container.remove()
-        deleteBtn.addEventListener('touchend', function (e) {
+              handleInput()
-          e.stopPropagation()
+            }
-          container.remove()
+          })
-          handleInput()
+        }, DELETE_BUTTON_DELAY) // 使用全局常量延时，确保删除按钮状态已正确设置
-        })
       }
 
       // 为图片容器添加短按事件以显示/隐藏删除按钮
@@ -925,19 +926,17 @@ const insertImage = () => {
           // 为删除按钮添加点击事件（鼠标和触摸）
           // 先移除可能已有的事件监听器，避免重复
           deleteBtn.removeEventListener('click', null)
-          deleteBtn.removeEventListener('touchend', null)
 
-          deleteBtn.addEventListener('click', function (e) {
+          // 添加延时检查，确保删除按钮是可见的才执行删除操作
-            e.stopPropagation()
+          setTimeout(() => {
-            imgContainer.remove()
+            deleteBtn.addEventListener('click', function (e) {
-            handleInput()
+              e.stopPropagation()
-          })
+              if (deleteBtn.classList.contains('visible')) {
-
+                imgContainer.remove()
-          deleteBtn.addEventListener('touchend', function (e) {
+                handleInput()
-            e.stopPropagation()
+              }
-            imgContainer.remove()
+            })
-            handleInput()
+          }, DELETE_BUTTON_DELAY) // 使用全局常量延时，确保删除按钮状态已正确设置
-          })
 
           // 为图片容器添加短按事件以显示/隐藏删除按钮
           let touchStartTime = 0
@@ -1620,19 +1619,17 @@ const wrapOrphanedImages = () => {
         console.log('Found existing delete button, adding event listeners')
         // 先移除可能已有的事件监听器，避免重复
         deleteBtn.removeEventListener('click', null)
-        deleteBtn.removeEventListener('touchend', null)
 
-        deleteBtn.addEventListener('click', function (e) {
+        // 添加延时检查，确保删除按钮是可见的才执行删除操作
-          e.stopPropagation()
+        setTimeout(() => {
-          imgContainer.remove()
+          deleteBtn.addEventListener('click', function (e) {
-          handleInput()
+            e.stopPropagation()
-        })
+            if (deleteBtn.classList.contains('visible')) {
-
+              imgContainer.remove()
-        deleteBtn.addEventListener('touchend', function (e) {
+              handleInput()
-          e.stopPropagation()
+            }
-          imgContainer.remove()
+          })
-          handleInput()
+        }, DELETE_BUTTON_DELAY) // 使用全局常量延时，确保删除按钮状态已正确设置
-        })
 
         // 为图片容器添加短按事件以显示/隐藏删除按钮
         // 先移除可能已有的事件监听器，避免重复
@@ -1747,19 +1744,17 @@ const wrapOrphanedImages = () => {
     // 为删除按钮添加点击事件
     // 先移除可能已有的事件监听器，避免重复
     deleteBtn.removeEventListener('click', null)
-    deleteBtn.removeEventListener('touchend', null)
 
-    deleteBtn.addEventListener('click', function (e) {
+    // 添加延时检查，确保删除按钮是可见的才执行删除操作
-      e.stopPropagation()
+    setTimeout(() => {
-      imgContainer.remove()
+      deleteBtn.addEventListener('click', function (e) {
-      handleInput()
+        e.stopPropagation()
-    })
+        if (deleteBtn.classList.contains('visible')) {
-
+          imgContainer.remove()
-    deleteBtn.addEventListener('touchend', function (e) {
+          handleInput()
-      e.stopPropagation()
+        }
-      imgContainer.remove()
+      })
-      handleInput()
+    }, DELETE_BUTTON_DELAY) // 使用全局常量延时，确保删除按钮状态已正确设置
-    })
 
     // 为图片容器添加短按事件以显示/隐藏删除按钮
     let touchStartTime = 0
@@ -1896,19 +1891,17 @@ const adjustExistingImages = () => {
         if (deleteBtn) {
           // 先移除可能已有的事件监听器，避免重复
           deleteBtn.removeEventListener('click', null)
-          deleteBtn.removeEventListener('touchend', null)
 
-          deleteBtn.addEventListener('click', function (e) {
+          // 添加延时检查，确保删除按钮是可见的才执行删除操作
-            e.stopPropagation()
+          setTimeout(() => {
-            container.remove()
+            deleteBtn.addEventListener('click', function (e) {
-            handleInput()
+              e.stopPropagation()
-          })
+              if (deleteBtn.classList.contains('visible')) {
-
+                imgContainer.remove()
-          deleteBtn.addEventListener('touchend', function (e) {
+                handleInput()
-            e.stopPropagation()
+              }
-            container.remove()
+            })
-            handleInput()
+          }, DELETE_BUTTON_DELAY) // 使用全局常量延时，确保删除按钮状态已正确设置
-          })
         }
 
         // 为图片容器添加短按事件以显示/隐藏删除按钮
@@ -2061,19 +2054,17 @@ defineExpose({
             if (deleteBtn) {
               // 先移除可能已有的事件监听器，避免重复
               deleteBtn.removeEventListener('click', null)
-              deleteBtn.removeEventListener('touchend', null)
 
-              deleteBtn.addEventListener('click', function (e) {
+              // 添加延时检查，确保删除按钮是可见的才执行删除操作
-                e.stopPropagation()
+              setTimeout(() => {
-                container.remove()
+                deleteBtn.addEventListener('click', function (e) {
-                handleInput()
+                  e.stopPropagation()
-              })
+                  if (deleteBtn.classList.contains('visible')) {
-
+                    imgContainer.remove()
-              deleteBtn.addEventListener('touchend', function (e) {
+                    handleInput()
-                e.stopPropagation()
+                  }
-                container.remove()
+                })
-                handleInput()
+              }, DELETE_BUTTON_DELAY) // 使用全局常量延时，确保删除按钮状态已正确设置
-              })
             }
 
             // 为图片容器添加短按事件以显示/隐藏删除按钮
@@ -2195,19 +2186,17 @@ defineExpose({
                 if (deleteBtn) {
                   // 先移除可能已有的事件监听器，避免重复
                   deleteBtn.removeEventListener('click', null)
-                  deleteBtn.removeEventListener('touchend', null)
 
-                  deleteBtn.addEventListener('click', function (e) {
+                  // 添加延时检查，确保删除按钮是可见的才执行删除操作
-                    e.stopPropagation()
+                  setTimeout(() => {
-                    container.remove()
+                    deleteBtn.addEventListener('click', function (e) {
-                    handleInput()
+                      e.stopPropagation()
-                  })
+                      if (deleteBtn.classList.contains('visible')) {
-
+                        imgContainer.remove()
-                  deleteBtn.addEventListener('touchend', function (e) {
+                        handleInput()
-                    e.stopPropagation()
+                      }
-                    container.remove()
+                    })
-                    handleInput()
+                  }, DELETE_BUTTON_DELAY) // 使用全局常量延时，确保删除按钮状态已正确设置
-                  })
                 }
 
                 // 为图片容器添加短按事件以显示/隐藏删除按钮
@@ -2514,13 +2503,13 @@ defineExpose({
 
 :deep(.editor-content .image-delete-btn) {
   position: absolute;
-  top: 8px;
+  top: 4px;
-  right: 8px;
+  right: 4px;
-  width: 24px;
+  width: 40px;
-  height: 24px;
+  height: 40px;
   cursor: pointer;
   z-index: 1000;
-  transition: opacity 0.2s ease;
+  transition: opacity calc(v-bind(DELETE_BUTTON_DELAY) / 2 * 1ms) ease;
   /* 使用背景图片而不是背景色和边框，确保图标正确显示 */
   background-image: url('/assets/icons/drawable-xxhdpi/item_image_btn_unbrella_delete.png');
   background-size: contain;
@@ -2529,11 +2518,13 @@ defineExpose({
   background-color: transparent; /* 确保背景透明 */
   pointer-events: none;
   opacity: 0;
+  display: none;
 }
 
 :deep(.editor-content .image-delete-btn.visible) {
   pointer-events: all;
   opacity: 1;
+  display: block;
 }
 
 :deep(.editor-content .editor-image.draggable) {