From 5858c6c16396028a3836d32f0d9c3974a3d8b3be Mon Sep 17 00:00:00 2001
From: yuantao <yuantao@example.com>
Date: Thu, 16 Oct 2025 18:35:39 +0800
Subject: [PATCH] =?UTF-8?q?\"fix:=20resolve=20image=20deletion=20conflict?=
 =?UTF-8?q?=20in=20RichTextEditor\"=20\"=E9=80=9A=E8=BF=87=E4=BA=8C?=
 =?UTF-8?q?=E6=AC=A1=E7=82=B9=E5=87=BB=E6=9C=BA=E5=88=B6=E9=81=BF=E5=85=8D?=
 =?UTF-8?q?=E8=AF=AF=E5=88=A0=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C=E3=80=82=E5=90=8C=E6=97=B6=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E4=BA=86IFLOW.md=E6=96=87=E6=A1=A3=E4=BB=A5=E5=8F=8D=E6=98=A0?=
 =?UTF-8?q?=E8=BF=99=E4=BA=9B=E6=9B=B4=E6=94=B9=E3=80=82\"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 IFLOW.md                          | 10 +++++-
 src/components/RichTextEditor.vue | 58 ++++++++++++++++++-------------
 2 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/IFLOW.md b/IFLOW.md
index 2d6c48e..2329ba7 100644
--- a/IFLOW.md
+++ b/IFLOW.md
@@ -137,6 +137,8 @@
 ### RichTextEditor 组件
 *   **富文本编辑**: 支持多种文本格式（加粗、居中、待办事项、列表、标题、引用）
 *   **图片插入**: 支持插入图片功能
+*   **图片删除**: 支持通过短按图片显示删除按钮，二次点击删除按钮执行删除操作
+*   **图片拖拽排序**: 支持长按图片进行拖拽排序
 *   **工具栏**: 提供浮动工具栏，支持格式化操作
 
 ## 页面
@@ -160,6 +162,7 @@
 *   **编辑模式**: 支持新建和编辑便签
 *   **富文本编辑**: 集成RichTextEditor组件，支持丰富的文本格式
 *   **图片插入**: 支持通过工具栏插入图片
+*   **图片删除**: 支持通过短按图片显示删除按钮，二次点击删除按钮执行删除操作
 *   **状态管理**: 根据路由参数判断是新建还是编辑模式
 *   **智能日期显示**: 根据时间范围显示不同的日期格式
     *   今天：显示为 "今天 下午 4:00"
@@ -205,4 +208,9 @@
 *   **统一管理**: 通过 `dateUtils.js` 统一管理所有日期处理逻辑
 *   **多格式支持**: 支持多种日期格式化方式以适应不同场景
 *   **本地化显示**: 支持中文友好的日期时间显示
-*   **场景适配**: 不同页面使用最适合的日期格式化规则
\ No newline at end of file
+*   **场景适配**: 不同页面使用最适合的日期格式化规则
+
+### 图片处理增强
+*   **图片删除优化**: 通过二次点击机制避免误删，提升用户体验
+*   **图片拖拽排序**: 支持长按图片进行拖拽排序，操作更直观
+*   **事件冲突解决**: 优化了图片删除按钮与容器短按事件的冲突问题
\ No newline at end of file
diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue
index ba4fba2..e5ba150 100644
--- a/src/components/RichTextEditor.vue
+++ b/src/components/RichTextEditor.vue
@@ -64,11 +64,19 @@ const eventManager = {
       const deleteHandler = function (e) {
         e.stopPropagation()
         e.preventDefault()
-        // 添加延时确保不是由短按触发的切换显示操作
-        setTimeout(() => {
-          container.remove()
-          handleInput()
-        }, 50)
+        
+        // 检查删除按钮是否可见，只有在可见状态下才能触发删除
+        if (deleteBtn.classList.contains('visible')) {
+          // 检查是否是刚显示的按钮点击（通过时间戳判断）
+          const lastVisibleTime = deleteBtn._lastVisibleTime || 0
+          const currentTime = Date.now()
+          
+          // 如果距离上次显示时间超过300ms，才执行删除操作
+          if (currentTime - lastVisibleTime > 300) {
+            container.remove()
+            handleInput()
+          }
+        }
       }
 
       deleteBtn.addEventListener('click', deleteHandler)
@@ -98,25 +106,27 @@ const eventManager = {
       touchStartTime = Date.now()
     }
 
-    const touchEndHandler = function (e) {
-      const touchDuration = Date.now() - touchStartTime
-      // 短按（小于200ms）且非长按拖拽状态且不是删除按钮点击时切换删除按钮显示
-      if (touchDuration < 200 && !dragState.value.isLongPress && !isDeleteButtonClicked) {
-        e.stopPropagation()
-        // 切换删除按钮的显示状态
-        if (deleteBtn) {
-          const isCurrentlyVisible = deleteBtn.classList.contains('visible')
-          if (isCurrentlyVisible) {
-            deleteBtn.classList.remove('visible')
-          } else {
-            deleteBtn.classList.add('visible')
-          }
-        }
-      }
-      // 重置删除按钮点击标记
-      setTimeout(() => {
-        isDeleteButtonClicked = false
-      }, 50)
+    const touchEndHandler = function (e) {
+      const touchDuration = Date.now() - touchStartTime
+      // 短按（小于200ms）且非长按拖拽状态且不是删除按钮点击时切换删除按钮显示
+      if (touchDuration < 200 && !dragState.value.isLongPress && !isDeleteButtonClicked) {
+        e.stopPropagation()
+        // 切换删除按钮的显示状态
+        if (deleteBtn) {
+          const isCurrentlyVisible = deleteBtn.classList.contains('visible')
+          if (isCurrentlyVisible) {
+            deleteBtn.classList.remove('visible')
+          } else {
+            deleteBtn.classList.add('visible')
+            // 记录显示时间
+            deleteBtn._lastVisibleTime = Date.now()
+          }
+        }
+      }
+      // 重置删除按钮点击标记
+      setTimeout(() => {
+        isDeleteButtonClicked = false
+      }, 50)
     }
 
     container.addEventListener('touchstart', touchStartHandler)