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)