\"fix: 改进移动端图片交互，修复删除按钮显示和拖拽功能\"

src/components/RichTextEditor.vue

@@ -117,6 +117,46 @@ onMounted(() => {
           }
         }
       });
+      
+      // 为图片容器添加触摸事件以显示/隐藏删除按钮
+      container.addEventListener('touchend', function(e) {
+        // 检查是否为轻触（非拖拽）
+        if (!dragState.value.isLongPress && dragState.value.longPressTimer) {
+          // 清除长按定时器
+          clearTimeout(dragState.value.longPressTimer);
+          dragState.value.longPressTimer = null;
+          
+          e.stopPropagation();
+          // 切换删除按钮的显示状态
+          if (deleteBtn) {
+            if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
+              deleteBtn.style.display = 'block';
+            } else {
+              deleteBtn.style.display = 'none';
+            }
+          }
+        }
+      });
+      
+      // 为图片容器添加触摸事件以显示/隐藏删除按钮
+      container.addEventListener('touchend', function(e) {
+        // 检查是否为轻触（非拖拽）
+        if (!dragState.value.isLongPress && dragState.value.longPressTimer) {
+          // 清除长按定时器
+          clearTimeout(dragState.value.longPressTimer);
+          dragState.value.longPressTimer = null;
+          
+          e.stopPropagation();
+          // 切换删除按钮的显示状态
+          if (deleteBtn) {
+            if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
+              deleteBtn.style.display = 'block';
+            } else {
+              deleteBtn.style.display = 'none';
+            }
+          }
+        }
+      });
     })
   }, 0)
 })
@@ -748,16 +788,7 @@ const insertImage = () => {
           const deleteBtn = document.createElement('img')
           deleteBtn.src = '/assets/icons/drawable-xxhdpi/item_image_btn_unbrella_delete.png'
           deleteBtn.className = 'image-delete-btn'
-          deleteBtn.style.position = 'absolute'
+          deleteBtn.style.cssText = 'position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; cursor: pointer; z-index: 10; display: none; transition: opacity 0.2s ease; touch-action: manipulation;'
-          deleteBtn.style.top = '8px'
-          deleteBtn.style.right = '8px'
-          deleteBtn.style.width = '24px'
-          deleteBtn.style.height = '24px'
-          deleteBtn.style.cursor = 'pointer'
-          deleteBtn.style.zIndex = '10'
-          deleteBtn.style.display = 'none' // 默认隐藏
-          deleteBtn.style.transition = 'opacity 0.2s ease'
-          deleteBtn.style.touchAction = 'manipulation' // 优化触摸体验
           
           // 将图片和删除按钮添加到容器中
           imgContainer.appendChild(img)
@@ -829,6 +860,24 @@ const insertImage = () => {
             }
           });
           
+          // 为图片容器添加触摸事件以显示/隐藏删除按钮
+          imgContainer.addEventListener('touchend', function(e) {
+            // 检查是否为轻触（非拖拽）
+            if (!dragState.value.isLongPress && dragState.value.longPressTimer) {
+              // 清除长按定时器
+              clearTimeout(dragState.value.longPressTimer);
+              dragState.value.longPressTimer = null;
+              
+              e.stopPropagation();
+              // 切换删除按钮的显示状态
+              if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
+                deleteBtn.style.display = 'block';
+              } else {
+                deleteBtn.style.display = 'none';
+              }
+            }
+          });
+          
           console.log('Added touch event listeners')
 
           // 插入图片容器到当前光标位置
@@ -1016,6 +1065,43 @@ const handleTouchStart = (e) => {
   }, 300) // 300毫秒长按触发拖拽
 }
     
+    // 添加拖拽指示器
+    const indicator = document.createElement('div')
+    indicator.className = 'drag-indicator'
+    indicator.style.position = 'fixed'
+    indicator.style.top = '50%'
+    indicator.style.left = '50%'
+    indicator.style.transform = 'translate(-50%, -50%)'
+    indicator.style.padding = '8px 16px'
+    indicator.style.background = 'rgba(0, 0, 0, 0.8)'
+    indicator.style.color = 'white'
+    indicator.style.borderRadius = '16px'
+    indicator.style.fontSize = '14px'
+    indicator.style.fontWeight = '500'
+    indicator.style.zIndex = '1000'
+    indicator.style.opacity = '0'
+    indicator.style.transition = 'opacity 0.15s ease-out'
+    indicator.textContent = '拖拽排序'
+    document.body.appendChild(indicator)
+    
+    // 渐显指示器
+    setTimeout(() => {
+      indicator.style.opacity = '1'
+    }, 5)
+    
+    // 保存指示器引用以便后续移除
+    dragState.value.indicator = indicator
+    
+    // 添加震动反馈（如果设备支持）
+    if (navigator.vibrate) {
+      navigator.vibrate(10)
+    }
+    
+    // 阻止页面滚动
+    e.preventDefault()
+  }, 300) // 300毫秒长按触发拖拽
+}
+
 // 处理触摸移动事件
 const handleTouchMove = (e) => {
   if (!dragState.value.longPressTimer && !dragState.value.isLongPress) return
@@ -1591,6 +1677,26 @@ defineExpose({
                 }
               }
             });
+            
+            // 为图片容器添加触摸事件以显示/隐藏删除按钮
+            container.addEventListener('touchend', function(e) {
+              // 检查是否为轻触（非拖拽）
+              if (!dragState.value.isLongPress && dragState.value.longPressTimer) {
+                // 清除长按定时器
+                clearTimeout(dragState.value.longPressTimer);
+                dragState.value.longPressTimer = null;
+                
+                e.stopPropagation();
+                // 切换删除按钮的显示状态
+                if (deleteBtn) {
+                  if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') {
+                    deleteBtn.style.display = 'block';
+                  } else {
+                    deleteBtn.style.display = 'none';
+                  }
+                }
+              }
+            });
           })
         }, 0)
       } catch (error) {