From 51014991cfeffe696c21522e7d22129570ef2082 Mon Sep 17 00:00:00 2001 From: yuantao Date: Wed, 15 Oct 2025 18:34:53 +0800 Subject: [PATCH 01/37] =?UTF-8?q?=20=20-=20=E7=A7=BB=E9=99=A4=E4=BA=86vue-?= =?UTF-8?q?draggable-plus=E4=BE=9D=E8=B5=96=EF=BC=8C=E6=94=B9=E7=94=A8?= =?UTF-8?q?=E5=8E=9F=E7=94=9FHTML5=E6=8B=96=E6=8B=BDAPI=20=20=20-=20?= =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E4=BA=86=E5=9B=BE=E7=89=87=E6=8B=96=E6=8B=BD?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E7=9A=84=E8=B0=83=E8=AF=95=E4=BF=A1=E6=81=AF?= =?UTF-8?q?=EF=BC=8C=E4=BE=BF=E4=BA=8E=E9=97=AE=E9=A2=98=E6=8E=92=E6=9F=A5?= =?UTF-8?q?=20=20=20-=20=E4=BC=98=E5=8C=96=E4=BA=86=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E6=8F=92=E5=85=A5=E5=92=8C=E6=8B=96=E6=8B=BD=E5=A4=84=E7=90=86?= =?UTF-8?q?=E9=80=BB=E8=BE=91=20=20=20-=20=E4=BF=AE=E5=A4=8D=E4=BA=86?= =?UTF-8?q?=E6=8B=96=E6=8B=BD=E8=BF=87=E7=A8=8B=E4=B8=AD=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E5=92=8C=E6=8B=96=E6=8B=BD=E6=89=8B=E6=9F=84=E7=9A=84=E5=90=8C?= =?UTF-8?q?=E6=AD=A5=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 260 ++++++++++++++++++++++++------ 1 file changed, 215 insertions(+), 45 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index 23074df..47c30b3 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -32,9 +32,11 @@ const initialViewportHeight = ref(0) // 初始化编辑器内容 onMounted(() => { - console.log('RichTextEditor mounted, initial content:', props.modelValue) + console.log('Editor mounted') if (editorRef.value) { + console.log('Editor ref available') if (props.modelValue) { + console.log('Setting initial content') try { editorRef.value.innerHTML = props.modelValue content.value = props.modelValue @@ -53,16 +55,34 @@ onMounted(() => { // 记录初始视口高度 initialViewportHeight.value = window.visualViewport?.height || window.innerHeight + console.log('Initial viewport height:', initialViewportHeight.value) // 初始化CSS变量 document.documentElement.style.setProperty('--viewport-height', `${initialViewportHeight.value}px`) + console.log('Set viewport height CSS variable') // 添加虚拟键盘检测事件监听器 if (window.visualViewport) { + console.log('Adding viewport resize listener') window.visualViewport.addEventListener('resize', handleViewportResize) } else { + console.log('Adding window resize listener') window.addEventListener('resize', handleWindowResize) } + + // 为已有图片添加拖拽事件监听器 + setTimeout(() => { + console.log('Adding drag event listeners to existing images') + const imageElements = editorRef.value.querySelectorAll('img.editor-image') + console.log('Found existing images:', imageElements.length) + imageElements.forEach(img => { + console.log('Adding drag listeners to image:', img) + img.addEventListener('dragstart', handleImageDragStart) + img.addEventListener('dragover', handleImageDragOver) + img.addEventListener('drop', handleImageDrop) + img.addEventListener('dragend', handleImageDragEnd) + }) + }, 0) }) // 组件卸载时移除事件监听器 @@ -579,66 +599,143 @@ const insertTodoList = () => { // 处理图片拖拽开始 const handleImageDragStart = (e) => { + console.log('Drag start:', e.target) + console.log('Drag start event:', e) e.dataTransfer.effectAllowed = 'move' e.target.classList.add('dragging') + // Store the dragged element's index or identifier + e.dataTransfer.setData('text/plain', e.target.src) + console.log('Set drag data:', e.target.src) } // 处理图片拖拽经过 const handleImageDragOver = (e) => { + console.log('Drag over event:', e) e.preventDefault() e.dataTransfer.dropEffect = 'move' + // Add visual feedback for drop target const target = e.target - const draggingElement = document.querySelector('img.editor-image.dragging') - - if (draggingElement && target !== draggingElement && target.classList.contains('editor-image')) { - const rect = target.getBoundingClientRect() - const midpoint = rect.top + rect.height / 2 - - if (e.clientY < midpoint) { - // 在目标元素上方插入 - target.parentNode.insertBefore(draggingElement, target) - // 同时移动拖拽手柄 - const targetHandle = target.nextElementSibling - const draggingHandle = draggingElement.nextElementSibling - if (targetHandle && targetHandle.classList.contains('image-drag-handle') && - draggingHandle && draggingHandle.classList.contains('image-drag-handle')) { - target.parentNode.insertBefore(draggingHandle, targetHandle) - } - } else { - // 在目标元素下方插入 - target.parentNode.insertBefore(draggingElement, target.nextSibling) - // 同时移动拖拽手柄 - const targetHandle = target.nextElementSibling - const draggingHandle = draggingElement.nextElementSibling - if (targetHandle && targetHandle.classList.contains('image-drag-handle') && - draggingHandle && draggingHandle.classList.contains('image-drag-handle')) { - target.parentNode.insertBefore(draggingHandle, targetHandle.nextSibling) - } - } + console.log('Drag over target:', target) + if (target.classList && target.classList.contains('editor-image') && !target.classList.contains('dragging')) { + // Add a visual indicator for where the image will be dropped + target.style.boxShadow = '0 0 0 2px var(--primary)' + console.log('Added visual feedback to target') } } // 处理图片拖拽释放 const handleImageDrop = (e) => { + console.log('Drop event:', e) e.preventDefault() - const draggingElement = document.querySelector('img.editor-image.dragging') - if (draggingElement) { - draggingElement.classList.remove('dragging') - handleInput() // 触发内容更新 + + // Get the dragged image source + const draggedImageSrc = e.dataTransfer.getData('text/plain') + console.log('Dragged image source:', draggedImageSrc) + + // Get the drop target + const target = e.target + console.log('Drop target:', target) + + // Check if we're dropping on an image + if (target.classList && target.classList.contains('editor-image')) { + console.log('Dropping on an image') + // Reset all image styles + const images = editorRef.value.querySelectorAll('.editor-image') + images.forEach(img => { + img.style.boxShadow = '0 1px 5px rgba(0, 0, 0, 0.18)' + }) + + // Find the dragged image element + const draggedImage = Array.from(images).find(img => img.src === draggedImageSrc) + console.log('Dragged image element:', draggedImage) + + if (draggedImage && draggedImage !== target) { + console.log('Valid drag operation, moving image') + // Get the parent element + const parent = target.parentNode + console.log('Parent element:', parent) + + // Create a clone of the dragged image + const clonedImage = draggedImage.cloneNode(true) + console.log('Cloned image:', clonedImage) + + // Copy over event listeners by re-adding them + clonedImage.draggable = true + clonedImage.setAttribute('data-draggable', 'true') + clonedImage.addEventListener('dragstart', handleImageDragStart) + clonedImage.addEventListener('dragover', handleImageDragOver) + clonedImage.addEventListener('drop', handleImageDrop) + clonedImage.addEventListener('dragend', handleImageDragEnd) + + // Also clone the drag handle if it exists + const originalDragHandle = draggedImage.nextElementSibling + let clonedDragHandle = null + if (originalDragHandle && originalDragHandle.classList.contains('image-drag-handle')) { + console.log('Cloning drag handle') + clonedDragHandle = originalDragHandle.cloneNode(true) + // Add event listeners to the cloned drag handle + clonedDragHandle.addEventListener('mouseover', function() { + clonedDragHandle.classList.add('visible') + clonedDragHandle.style.display = 'block' + }) + clonedDragHandle.addEventListener('mouseout', function(e) { + setTimeout(() => { + if (!clonedImage.matches(':hover') && document.activeElement !== clonedImage) { + clonedDragHandle.classList.remove('visible') + clonedDragHandle.style.display = 'none' + } + }, 100) + }) + } + + // Insert the cloned image before the target + parent.insertBefore(clonedImage, target) + console.log('Inserted cloned image') + + // Insert the drag handle if it exists + if (clonedDragHandle) { + parent.insertBefore(clonedDragHandle, clonedImage.nextSibling) + console.log('Inserted cloned drag handle') + } + + // Remove the original dragged image and its drag handle + if (originalDragHandle && originalDragHandle.classList.contains('image-drag-handle')) { + originalDragHandle.remove() + console.log('Removed original drag handle') + } + draggedImage.remove() + console.log('Removed original image') + + // Update content + handleInput() + console.log('Updated content after drag') + } else { + console.log('Invalid drag operation') + } + } else { + console.log('Not dropping on an image') } } // 处理图片拖拽结束 -const handleImageDragEnd = (e) => { - const draggingElement = document.querySelector('img.editor-image.dragging') - if (draggingElement) { - draggingElement.classList.remove('dragging') - } +const handleImageDragEnd = (evt) => { + console.log('Drag end:', evt) + + // Reset styles of all images + const images = editorRef.value.querySelectorAll('.editor-image') + images.forEach(img => { + img.style.boxShadow = '0 1px 5px rgba(0, 0, 0, 0.18)' + img.classList.remove('dragging') + }) + + // Update content after drag operation + handleInput() } // 插入图片 const insertImage = () => { + console.log('Inserting image') // 创建文件输入元素 const fileInput = document.createElement('input') fileInput.type = 'file' @@ -650,23 +747,29 @@ const insertImage = () => { // 监听文件选择事件 fileInput.addEventListener('change', function (event) { + console.log('File selected:', event.target.files) const file = event.target.files[0] if (file && file.type.startsWith('image/')) { + console.log('Image file selected') // 创建FileReader读取文件 const reader = new FileReader() reader.onload = function (e) { + console.log('File read successfully') // 获取图片数据URL const imageDataUrl = e.target.result + console.log('Image data URL:', imageDataUrl) // 获取当前选区 const selection = window.getSelection() if (selection.rangeCount > 0) { const range = selection.getRangeAt(0) + console.log('Current range:', range) // 创建图片元素 const img = document.createElement('img') img.src = imageDataUrl img.className = 'editor-image' + img.setAttribute('data-draggable', 'true') img.style.maxWidth = '100%' img.style.height = 'auto' img.style.display = 'block' @@ -678,10 +781,14 @@ const insertImage = () => { img.style.background = 'var(--background-secondary)' img.style.position = 'relative' img.style.outline = 'none' // 移除默认焦点轮廓 + img.draggable = true + + console.log('Created image element:', img) // 创建一个临时图片来获取原始尺寸 const tempImg = new Image() tempImg.onload = function () { + console.log('Temp image loaded') // 获取CSS变量 const editorFontSize = getComputedStyle(document.documentElement).getPropertyValue('--editor-font-size').trim() || '16px' const editorLineHeight = getComputedStyle(document.documentElement).getPropertyValue('--editor-line-height').trim() || '1.6' @@ -735,11 +842,13 @@ const insertImage = () => { // 将拖拽手柄添加到图片后面（使用insertAdjacentElement） img.insertAdjacentElement('afterend', dragHandle) + console.log('Added drag handle to image') } tempImg.src = imageDataUrl // 添加事件监听器来显示/隐藏拖拽手柄 img.addEventListener('focus', function() { + console.log('Image focused') const dragHandle = img.nextElementSibling if (dragHandle && dragHandle.classList.contains('image-drag-handle')) { dragHandle.classList.add('visible') @@ -748,6 +857,7 @@ const insertImage = () => { }) img.addEventListener('blur', function() { + console.log('Image blurred') const dragHandle = img.nextElementSibling if (dragHandle && dragHandle.classList.contains('image-drag-handle')) { // 延迟隐藏，确保用户有时间将鼠标移到手柄上 @@ -761,6 +871,7 @@ const insertImage = () => { }) img.addEventListener('mouseover', function() { + console.log('Mouse over image') const dragHandle = img.nextElementSibling if (dragHandle && dragHandle.classList.contains('image-drag-handle')) { dragHandle.classList.add('visible') @@ -769,6 +880,7 @@ const insertImage = () => { }) img.addEventListener('mouseout', function(e) { + console.log('Mouse out of image') const dragHandle = img.nextElementSibling if (dragHandle && dragHandle.classList.contains('image-drag-handle')) { // 延迟隐藏，确保用户有时间将鼠标移到手柄上 @@ -785,6 +897,7 @@ const insertImage = () => { setTimeout(() => { const dragHandle = img.nextElementSibling if (dragHandle && dragHandle.classList.contains('image-drag-handle')) { + console.log('Adding event listeners to drag handle') dragHandle.addEventListener('mouseover', function() { dragHandle.classList.add('visible') dragHandle.style.display = 'block' // 直接设置显示样式 @@ -804,13 +917,12 @@ const insertImage = () => { // 添加拖拽功能 img.draggable = true - img.addEventListener('dragstart', handleImageDragStart) - img.addEventListener('dragover', handleImageDragOver) - img.addEventListener('drop', handleImageDrop) - img.addEventListener('dragend', handleImageDragEnd) + img.setAttribute('data-draggable', 'true') + console.log('Set draggable attributes') // 插入图片到当前光标位置 range.insertNode(img) + console.log('Inserted image into editor') // 调试信息 console.log('Image inserted:', img) @@ -819,13 +931,16 @@ const insertImage = () => { // 添加换行 const br = document.createElement('br') img.parentNode.insertBefore(br, img.nextSibling) + console.log('Added line break after image') // 触发输入事件更新内容 handleInput() + console.log('Handled input event') // 重新聚焦到编辑器 if (editorRef.value) { editorRef.value.focus() + console.log('Focused editor') } } } @@ -834,10 +949,12 @@ const insertImage = () => { // 清理文件输入元素 document.body.removeChild(fileInput) + console.log('Removed file input') }) // 触发文件选择对话框 fileInput.click() + console.log('Clicked file input') } // 处理键盘事件 @@ -1063,13 +1180,17 @@ const handleToolbarFocusOut = () => { // 调整已有图片的高度 const adjustExistingImages = () => { + console.log('Adjusting existing images') // 等待DOM更新完成 setTimeout(() => { if (editorRef.value) { - const images = editorRef.value.querySelectorAll('img.editor-image') - images.forEach(img => { + const imageElements = editorRef.value.querySelectorAll('img.editor-image') + console.log('Found image elements:', imageElements.length) + imageElements.forEach(img => { + console.log('Processing image:', img) // 只处理还没有调整过高度的图片 if (!img.dataset.heightAdjusted) { + console.log('Adjusting height for image') // 创建一个临时图片来获取原始尺寸 const tempImg = new Image() tempImg.onload = function () { @@ -1106,27 +1227,34 @@ const adjustExistingImages = () => { // 标记图片已调整过高度 img.dataset.heightAdjusted = 'true' + console.log('Adjusted image dimensions:', adjustedWidth, adjustedHeight) } tempImg.src = img.src } }) // 为现有图片添加拖拽功能 - images.forEach(img => { + imageElements.forEach(img => { + console.log('Adding drag functionality to image:', img) // 确保图片有拖拽属性 if (!img.hasAttribute('draggable')) { + console.log('Setting draggable attribute') img.draggable = true + img.setAttribute('data-draggable', 'true') // 添加拖拽事件监听器 img.addEventListener('dragstart', handleImageDragStart) img.addEventListener('dragover', handleImageDragOver) img.addEventListener('drop', handleImageDrop) img.addEventListener('dragend', handleImageDragEnd) + console.log('Added drag event listeners') } // 检查是否已存在拖拽手柄 let existingHandle = img.nextElementSibling + console.log('Existing handle:', existingHandle) if (!existingHandle || !existingHandle.classList.contains('image-drag-handle')) { + console.log('Creating drag handle') // 创建拖拽手柄 const dragHandle = document.createElement('div') dragHandle.className = 'image-drag-handle' @@ -1149,12 +1277,14 @@ const adjustExistingImages = () => { // 将拖拽手柄添加到图片后面 img.insertAdjacentElement('afterend', dragHandle) + console.log('Added drag handle') } // 确保拖拽手柄存在后再添加事件监听器 setTimeout(() => { const dragHandle = img.nextElementSibling if (dragHandle && dragHandle.classList.contains('image-drag-handle')) { + console.log('Adding event listeners to drag handle') // 添加事件监听器来显示/隐藏拖拽手柄 img.addEventListener('focus', function() { dragHandle.classList.add('visible') @@ -1211,7 +1341,7 @@ const adjustExistingImages = () => { defineExpose({ getContent: () => content.value, setContent: newContent => { - console.log('Setting content in editor:', newContent) + console.log('Setting content:', newContent) content.value = newContent || '' if (editorRef.value) { try { @@ -1219,6 +1349,26 @@ defineExpose({ console.log('Content set successfully in editorRef') // 调整已有图片的高度并添加拖拽功能 adjustExistingImages() + // 为图片添加拖拽事件监听器 + setTimeout(() => { + console.log('Adding drag event listeners to images in setContent') + const imageElements = editorRef.value.querySelectorAll('img.editor-image') + console.log('Found images in setContent:', imageElements.length) + imageElements.forEach(img => { + console.log('Adding drag listeners to image in setContent:', img) + // 先移除可能已有的事件监听器，避免重复 + img.removeEventListener('dragstart', handleImageDragStart) + img.removeEventListener('dragover', handleImageDragOver) + img.removeEventListener('drop', handleImageDrop) + img.removeEventListener('dragend', handleImageDragEnd) + + // 重新添加事件监听器 + img.addEventListener('dragstart', handleImageDragStart) + img.addEventListener('dragover', handleImageDragOver) + img.addEventListener('drop', handleImageDrop) + img.addEventListener('dragend', handleImageDragEnd) + }) + }, 0) } catch (error) { console.error('Failed to set innerHTML:', error) // 备选方案：使用textContent @@ -1239,6 +1389,26 @@ defineExpose({ console.log('Content set successfully after delay') // 调整已有图片的高度并添加拖拽功能 adjustExistingImages() + // 为图片添加拖拽事件监听器 + setTimeout(() => { + console.log('Adding drag event listeners to images in delayed setContent') + const imageElements = editorRef.value.querySelectorAll('img.editor-image') + console.log('Found images in delayed setContent:', imageElements.length) + imageElements.forEach(img => { + console.log('Adding drag listeners to image in delayed setContent:', img) + // 先移除可能已有的事件监听器，避免重复 + img.removeEventListener('dragstart', handleImageDragStart) + img.removeEventListener('dragover', handleImageDragOver) + img.removeEventListener('drop', handleImageDrop) + img.removeEventListener('dragend', handleImageDragEnd) + + // 重新添加事件监听器 + img.addEventListener('dragstart', handleImageDragStart) + img.addEventListener('dragover', handleImageDragOver) + img.addEventListener('drop', handleImageDrop) + img.addEventListener('dragend', handleImageDragEnd) + }) + }, 0) } catch (error) { console.error('Failed to set innerHTML after delay:', error) } From b139d64363bc205df7c6bade6190f8b3add16e64 Mon Sep 17 00:00:00 2001 From: yuantao Date: Wed, 15 Oct 2025 18:35:38 +0800 Subject: [PATCH 02/37] =?UTF-8?q?=20=20-=20=E7=A7=BB=E9=99=A4=E4=BA=86vue-?= =?UTF-8?q?draggable-plus=E4=BE=9D=E8=B5=96=EF=BC=8C=E6=94=B9=E7=94=A8?= =?UTF-8?q?=E5=8E=9F=E7=94=9FHTML5=E6=8B=96=E6=8B=BDAPI=20=20=20-=20?= =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E4=BA=86=E5=9B=BE=E7=89=87=E6=8B=96=E6=8B=BD?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E7=9A=84=E8=B0=83=E8=AF=95=E4=BF=A1=E6=81=AF?= =?UTF-8?q?=EF=BC=8C=E4=BE=BF=E4=BA=8E=E9=97=AE=E9=A2=98=E6=8E=92=E6=9F=A5?= =?UTF-8?q?=20=20=20-=20=E4=BC=98=E5=8C=96=E4=BA=86=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E6=8F=92=E5=85=A5=E5=92=8C=E6=8B=96=E6=8B=BD=E5=A4=84=E7=90=86?= =?UTF-8?q?=E9=80=BB=E8=BE=91=20=20=20-=20=E4=BF=AE=E5=A4=8D=E4=BA=86?= =?UTF-8?q?=E6=8B=96=E6=8B=BD=E8=BF=87=E7=A8=8B=E4=B8=AD=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E5=92=8C=E6=8B=96=E6=8B=BD=E6=89=8B=E6=9F=84=E7=9A=84=E5=90=8C?= =?UTF-8?q?=E6=AD=A5=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- console.txt | 155 +++++++++++++++++++++++++++++++++++ history.txt | 154 +++++++++++++++++----------------- package-lock.json | 24 ++++++ package.json | 1 + src/pages/NoteEditorPage.vue | 11 --- 5 files changed, 260 insertions(+), 85 deletions(-) create mode 100644 console.txt diff --git a/console.txt b/console.txt new file mode 100644 index 0000000..0c20ede --- /dev/null +++ b/console.txt @@ -0,0 +1,155 @@ +RichTextEditor.vue:35 Editor mounted +RichTextEditor.vue:37 Editor ref available +RichTextEditor.vue:39 Setting initial content +RichTextEditor.vue:43 Initial content set successfully +RichTextEditor.vue:1183 Adjusting existing images +RichTextEditor.vue:58 Initial viewport height: 667 +RichTextEditor.vue:62 Set viewport height CSS variable +RichTextEditor.vue:66 Adding viewport resize listener + Setting content: dasdasdsadad​ +RichTextEditor.vue:1257 Creating drag handle +RichTextEditor.vue:1276 Creating drag handle for existing image +RichTextEditor.vue:1280 Added drag handle +RichTextEditor.vue:1238 Adding drag functionality to image: ​ +RichTextEditor.vue:1241 Setting draggable attribute +RichTextEditor.vue:1250 Added drag event listeners +RichTextEditor.vue:1255 Existing handle: null +RichTextEditor.vue:1257 Creating drag handle +RichTextEditor.vue:1276 Creating drag handle for existing image +RichTextEditor.vue:1280 Added drag handle +RichTextEditor.vue:75 Adding drag event listeners to existing images +RichTextEditor.vue:77 Found existing images: 2 +RichTextEditor.vue:79 Adding drag listeners to image: ​ +RichTextEditor.vue:79 Adding drag listeners to image: ​ +RichTextEditor.vue:1188 Found image elements: 2 +RichTextEditor.vue:1190 Processing image: ​ +RichTextEditor.vue:1193 Adjusting height for image +RichTextEditor.vue:1190 Processing image: ​ +RichTextEditor.vue:1193 Adjusting height for image +RichTextEditor.vue:1238 Adding drag functionality to image: ​ +RichTextEditor.vue:1255 Existing handle:
​
​ +RichTextEditor.vue:1238 Adding drag functionality to image: ​ +RichTextEditor.vue:1255 Existing handle:
​
​ +RichTextEditor.vue:1354 Adding drag event listeners to images in setContent +RichTextEditor.vue:1356 Found images in setContent: 2 +RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ +RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ +RichTextEditor.vue:1188 Found image elements: 2 +RichTextEditor.vue:1190 Processing image: ​ +RichTextEditor.vue:1193 Adjusting height for image +RichTextEditor.vue:1190 Processing image: ​ +RichTextEditor.vue:1193 Adjusting height for image +RichTextEditor.vue:1238 Adding drag functionality to image: ​ +RichTextEditor.vue:1255 Existing handle:
​
​ +RichTextEditor.vue:1238 Adding drag functionality to image: ​ +RichTextEditor.vue:1255 Existing handle:
​
​ +RichTextEditor.vue:1354 Adding drag event listeners to images in setContent +RichTextEditor.vue:1356 Found images in setContent: 2 +RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ +RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ +RichTextEditor.vue:1188 Found image elements: 2 +RichTextEditor.vue:1190 Processing image: ​ +RichTextEditor.vue:1193 Adjusting height for image +RichTextEditor.vue:1190 Processing image: ​ +RichTextEditor.vue:1193 Adjusting height for image +RichTextEditor.vue:1238 Adding drag functionality to image: ​ +RichTextEditor.vue:1255 Existing handle:
​
​ +RichTextEditor.vue:1238 Adding drag functionality to image: ​ +RichTextEditor.vue:1255 Existing handle:
​
​ +RichTextEditor.vue:1354 Adding drag event listeners to images in setContent +RichTextEditor.vue:1356 Found images in setContent: 2 +RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ +RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ +RichTextEditor.vue:1188 Found image elements: 2 +RichTextEditor.vue:1190 Processing image: ​ +RichTextEditor.vue:1193 Adjusting height for image +RichTextEditor.vue:1190 Processing image: ​ +RichTextEditor.vue:1193 Adjusting height for image +RichTextEditor.vue:1238 Adding drag functionality to image: ​ +RichTextEditor.vue:1255 Existing handle:
​
​ +RichTextEditor.vue:1238 Adding drag functionality to image: ​ +RichTextEditor.vue:1255 Existing handle:
​
​ +RichTextEditor.vue:1354 Adding drag event listeners to images in setContent +RichTextEditor.vue:1356 Found images in setContent: 2 +RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ +RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ +RichTextEditor.vue:1188 Found image elements: 2 +RichTextEditor.vue:1190 Processing image: ​ +RichTextEditor.vue:1193 Adjusting height for image +RichTextEditor.vue:1190 Processing image: ​ +RichTextEditor.vue:1193 Adjusting height for image +RichTextEditor.vue:1238 Adding drag functionality to image: ​ +RichTextEditor.vue:1255 Existing handle:
​
​ +RichTextEditor.vue:1238 Adding drag functionality to image: ​ +RichTextEditor.vue:1255 Existing handle:
​
​ +RichTextEditor.vue:1354 Adding drag event listeners to images in setContent +RichTextEditor.vue:1356 Found images in setContent: 2 +RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ +RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ +RichTextEditor.vue:1188 Found image elements: 2 +RichTextEditor.vue:1190 Processing image: ​ +RichTextEditor.vue:1193 Adjusting height for image +RichTextEditor.vue:1190 Processing image: ​ +RichTextEditor.vue:1193 Adjusting height for image +RichTextEditor.vue:1238 Adding drag functionality to image: ​ +RichTextEditor.vue:1255 Existing handle:
​
​ +RichTextEditor.vue:1238 Adding drag functionality to image: ​ +RichTextEditor.vue:1255 Existing handle:
​
​ +RichTextEditor.vue:1354 Adding drag event listeners to images in setContent +RichTextEditor.vue:1356 Found images in setContent: 2 +RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ +RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ +RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 +RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 +RichTextEditor.vue:1287 Adding event listeners to drag handle +RichTextEditor.vue:1287 Adding event listeners to drag handle +RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 +RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 +RichTextEditor.vue:1287 Adding event listeners to drag handle +RichTextEditor.vue:1287 Adding event listeners to drag handle +RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 +RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 +RichTextEditor.vue:1287 Adding event listeners to drag handle +RichTextEditor.vue:1287 Adding event listeners to drag handle +RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 +RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 +RichTextEditor.vue:1287 Adding event listeners to drag handle +RichTextEditor.vue:1287 Adding event listeners to drag handle +RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 +RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 +RichTextEditor.vue:1287 Adding event listeners to drag handle +RichTextEditor.vue:1287 Adding event listeners to drag handle +RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 +RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 +RichTextEditor.vue:1287 Adding event listeners to drag handle +RichTextEditor.vue:1287 Adding event listeners to drag handle +RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 +RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 +RichTextEditor.vue:1287 Adding event listeners to drag handle +RichTextEditor.vue:1287 Adding event listeners to drag handle diff --git a/history.txt b/history.txt index 053d6e8..dfbeca8 100644 --- a/history.txt +++ b/history.txt @@ -1,74 +1,80 @@ -│ 1. Primary Request and Intent: │ -│ - Fix issue where page scrolling in NoteListPage.vue triggers sliding events in NoteItem component │ -│ - Add drag-and-drop sorting functionality for editor-image pictures in the rich text editor, showing drag handle │ -│ (detail_note_item_image_move.png) when image is focused and hiding when blurred │ -│ │ -│ 2. Key Technical Concepts: │ -│ - Vue 3 Composition API with script setup │ -│ - Touch event handling and event propagation prevention │ -│ - Direction detection for distinguishing scroll vs. slide gestures │ -│ - CSS touch-action property for controlling touch behaviors │ -│ - Drag and drop API for reordering elements │ -│ - DOM manipulation with createElement and event listeners │ -│ - Image resizing and positioning in rich text editor │ -│ │ -│ 3. Files and Code Sections: │ -│ - E:\yuantao\SmartisanNote.VUE\src\components\NoteItem.vue │ -│ - Enhanced event propagation prevention in touch handlers with stopImmediatePropagation() │ -│ - Improved direction detection to better distinguish scrolling from sliding │ -│ - Added CSS touch-action: pan-y to restrict touch behaviors │ -│ - Code snippet: Added stopImmediatePropagation() calls in handleContainerTouchStart, handleContainerTouchMove, │ -│ handleContainerTouchEnd, handleTouchStart, and handleTouchEnd functions │ -│ - E:\yuantao\SmartisanNote.VUE\src\components\RichTextEditor.vue │ -│ - Fixed drag handle creation and positioning for images │ -│ - Improved drag and drop sorting functionality │ -│ - Enhanced focus/mouse event handlers for showing/hiding drag handles │ -│ - Fixed variable naming conflict in adjustExistingImages function │ -│ - Code snippet: Modified insertImage function to create drag handles after image loading and improved event listener attachment │ -│ - Code snippet: Updated adjustExistingImages function to properly handle existing images and their drag handles │ -│ - Code snippet: Updated CSS styles for .image-drag-handle to ensure proper z-index and positioning │ -│ │ -│ 4. Errors and fixes: │ -│ - Variable naming conflict error "[vue/compiler-sfc] Identifier 'images' has already been declared": │ -│ - Identified duplicate variable declarations in adjustExistingImages function │ -│ - Fixed by removing redundant 'existingImages' variable and reusing existing 'images' variable │ -│ - User feedback confirmed the error was resolved │ -│ - Drag handle visibility issue: │ -│ - Identified that drag handles were not properly created or displayed │ -│ - Fixed by ensuring drag handles are created after image loading and improving CSS styles │ -│ - Enhanced event listener attachment to ensure proper show/hide functionality │ -│ │ -│ 5. Problem Solving: │ -│ - Solved NoteItem sliding event propagation issue with event.stopPropagation() and direction detection │ -│ - Implemented image drag handle functionality with proper creation, positioning, and event handling │ -│ - Resolved variable naming conflict in RichTextEditor component │ -│ - Fixed drag handle visibility issues by improving creation logic and CSS styles │ -│ │ -│ 6. All user messages: │ -│ - "@src\pages\NoteListPage.vue 在页面上下滑动时不应该触发NoteItem组件内的滑动事件" │ -│ - "现在依然存在这个问题" │ -│ - "把所有输出、注释的语言改为中文" │ -│ - "我并没有看到拖拽手柄" │ -│ - "我并没有看到任何相关的调试信息" │ -│ - "出现了错误：[vue/compiler-sfc] Identifier 'images' has already been declared. (1082:12)" │ -│ │ -│ 7. Pending Tasks: │ -│ - Verify that the fixes have resolved both issues: │ -│ - Page scrolling in NoteListPage.vue should no longer trigger NoteItem sliding events │ -│ - Image drag handles should now properly display when images are focused or hovered │ -│ │ -│ 8. Current Work: │ -│ Working on finalizing the fixes for both issues. Recently updated: │ -│ 1. RichTextEditor.vue to properly create and display image drag handles with improved event handling │ -│ 2. NoteItem.vue to better prevent event propagation during page scrolling │ -│ The changes include: │ -│ - Modified insertImage function to create drag handles after image loading │ -│ - Updated adjustExistingImages function to properly handle existing images │ -│ - Enhanced CSS styles for drag handles │ -│ - Added stopImmediatePropagation() calls in NoteItem touch handlers │ -│ │ -│ 9. Optional Next Step: │ -│ Test the implemented solutions to verify that: │ -│ 1. Page scrolling in NoteListPage.vue no longer triggers NoteItem sliding events │ -│ 2. Image drag handles properly display when images are focused or hovered │ -│ The most recent work focused on "检查RichTextEditor.vue中图片拖拽手柄不显示的问题" and "确保拖拽手柄的显示逻辑正确处理焦点和鼠标事件". │ \ No newline at end of file +│ 1. Primary Request and Intent: │ +│ - The user explicitly requested to modify the RichTextEditor.vue component to use the vue-draggable-plus │ +│ library (https://www.npmjs.com/package/vue-draggable-plus) for implementing drag functionality for images. │ +│ - The intent was to replace the existing native HTML5 drag and drop implementation with the │ +│ vue-draggable-plus library while maintaining the same functionality. │ +│ │ +│ 2. Key Technical Concepts: │ +│ - Vue 3 Composition API │ +│ - vue-draggable-plus library for drag and drop functionality │ +│ - HTML5 native drag and drop APIs │ +│ - Contenteditable div manipulation │ +│ - Image handling in rich text editors │ +│ - Event handling for drag operations (dragstart, dragover, drop, dragend) │ +│ │ +│ 3. Files and Code Sections: │ +│ - E:\yuantao\SmartisanNote.VUE\src\components\RichTextEditor.vue │ +│ - This is the main file that was modified to implement vue-draggable-plus │ +│ - Modified the script setup section to import vDraggable from vue-draggable-plus │ +│ - Added a images ref to store image data for vue-draggable-plus │ +│ - Added draggableOptions configuration for the library │ +│ - Modified the template to use v-draggable directive │ +│ - Updated the insertImage function to add vue-draggable-plus attributes to images │ +│ - Updated the adjustExistingImages function to work with vue-draggable-plus │ +│ - Modified drag event handlers to be compatible with vue-draggable-plus │ +│ - Important code snippet for the template modification: │ +│ ```html │ +│
│ +│ ``` │ +│ - Important code snippet for the script setup modification: │ +│ ```javascript │ +│ import { vDraggable } from 'vue-draggable-plus' │ +│ const images = ref([]) // Store images for vue-draggable-plus │ +│ const draggableOptions = { │ +│ animation: 200, │ +│ group: 'images', │ +│ ghostClass: 'dragging', │ +│ dragClass: 'dragging', │ +│ onEnd: (evt) => { │ +│ console.log('Drag end event:', evt) │ +│ handleImageDragEnd(evt) │ +│ } │ +│ } │ +│ ``` │ +│ │ +│ 4. Errors and fixes: │ +│ - No specific errors were encountered during the implementation process. The vue-draggable-plus library │ +│ was already installed, and the implementation was done incrementally to maintain compatibility with │ +│ existing functionality. │ +│ │ +│ 5. Problem Solving: │ +│ - The main challenge was integrating vue-draggable-plus with an existing contenteditable div │ +│ implementation that already had native drag functionality │ +│ - The solution involved maintaining the existing drag functions while adding vue-draggable-plus │ +│ attributes and data structures │ +│ - Care was taken to ensure backward compatibility and preserve existing functionality │ +│ │ +│ 6. All user messages: │ +│ - "@src\components\RichTextEditor.vue │ +│ 把拖拽功能改为使用(https://www.npmjs.com/package/vue-draggable-plus)这个库来实现" │ +│ │ +│ 7. Pending Tasks: │ +│ - Test the drag functionality to ensure it works correctly with the vue-draggable-plus implementation │ +│ │ +│ 8. Current Work: │ +│ - The implementation of vue-draggable-plus in the RichTextEditor.vue component has been completed │ +│ - The last action was preparing to test the functionality by running the development server │ +│ - All necessary modifications to integrate vue-draggable-plus have been made: │ +│ 1. Added vDraggable import │ +│ 2. Created images ref for storing image data │ +│ 3. Added draggableOptions configuration │ +│ 4. Modified template to use v-draggable directive │ +│ 5. Updated insertImage function to work with vue-draggable-plus │ +│ 6. Updated adjustExistingImages function to work with vue-draggable-plus │ +│ 7. Modified drag event handlers for compatibility │ +│ │ +│ 9. Optional Next Step: │ +│ The next step would be to actually run the development server to test the implementation: │ +│ "Now I'll test the drag functionality by running the development server" │ \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index b079e9b..004120f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "moment": "^2.30.1", "pinia": "^3.0.3", "vue": "^3.5.22", + "vue-draggable-plus": "^0.6.0", "vue-router": "^4.5.1" }, "devDependencies": { @@ -3303,6 +3304,12 @@ "@types/node": "*" } }, + "node_modules/@types/sortablejs": { + "version": "1.15.8", + "resolved": "https://registry.npmmirror.com/@types/sortablejs/-/sortablejs-1.15.8.tgz", + "integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==", + "license": "MIT" + }, "node_modules/@types/trusted-types": { "version": "2.0.7", "resolved": "https://registry.npmmirror.com/@types/trusted-types/-/trusted-types-2.0.7.tgz", @@ -12807,6 +12814,23 @@ } } }, + "node_modules/vue-draggable-plus": { + "version": "0.6.0", + "resolved": "https://registry.npmmirror.com/vue-draggable-plus/-/vue-draggable-plus-0.6.0.tgz", + "integrity": "sha512-G5TSfHrt9tX9EjdG49InoFJbt2NYk0h3kgjgKxkFWr3ulIUays0oFObr5KZ8qzD4+QnhtALiRwIqY6qul4egqw==", + "license": "MIT", + "dependencies": { + "@types/sortablejs": "^1.15.8" + }, + "peerDependencies": { + "@types/sortablejs": "^1.15.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/vue-hot-reload-api": { "version": "2.3.4", "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz", diff --git a/package.json b/package.json index 6eb272e..c298000 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "moment": "^2.30.1", "pinia": "^3.0.3", "vue": "^3.5.22", + "vue-draggable-plus": "^0.6.0", "vue-router": "^4.5.1" }, "devDependencies": { diff --git a/src/pages/NoteEditorPage.vue b/src/pages/NoteEditorPage.vue index 47dd7a1..154cb2a 100644 --- a/src/pages/NoteEditorPage.vue +++ b/src/pages/NoteEditorPage.vue @@ -47,35 +47,27 @@ const setNoteContent = async noteId => { // 确保store数据已加载，如果便签列表为空则先加载数据 if (store.notes.length === 0) { await store.loadData() - console.log('Store loaded, notes count:', store.notes.length) } // 从store中查找指定ID的便签 const note = store.notes.find(n => n.id === noteId) - console.log('Found note:', note) // 确保编辑器已经初始化完成 await nextTick() - console.log('Editor ref:', editorRef.value) if (note) { - console.log('Setting content:', note.content) // 无论editorRef是否可用，都先设置content的值作为备份 content.value = note.content || '' // 如果editorRef可用，直接设置编辑器内容 if (editorRef.value) { editorRef.value.setContent(note.content || '') } - } else { - console.log('Note not available') } } // 加载初始数据 onMounted(async () => { - console.log('NoteEditorPage mounted') await store.loadData() - console.log('Store loaded, notes count:', store.notes.length) // 如果是编辑现有便签，在组件挂载后设置内容 if (noteId.value) { @@ -87,7 +79,6 @@ onMounted(async () => { watch( noteId, async newNoteId => { - console.log('Note ID changed:', newNoteId) if (newNoteId) { await setNoteContent(newNoteId) } @@ -148,13 +139,11 @@ const debounce = (func, delay) => { // 延迟300ms更新内容，避免用户输入时频繁触发更新 const debouncedHandleContentChange = debounce(newContent => { content.value = newContent - console.log('Content updated:', newContent) }, 300) // 监听编辑器内容变化 // 当编辑器内容发生变化时调用此函数 const handleContentChange = newContent => { - console.log('Editor content changed:', newContent) debouncedHandleContentChange(newContent) } From 955fb7972b5a79d02d205b73adf99b51e24c621f Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 09:50:30 +0800 Subject: [PATCH 03/37] =?UTF-8?q?\"feat:=20=E5=AE=9E=E7=8E=B0=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=9B=BE=E7=89=87=E8=A7=A6=E6=91=B8=E6=8B=96?= =?UTF-8?q?=E6=8B=BD=E6=8E=92=E5=BA=8F=E5=8A=9F=E8=83=BD\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/base.css | 7 +- src/components/RichTextEditor.vue | 603 ++++++++++++------------------ 2 files changed, 238 insertions(+), 372 deletions(-) diff --git a/src/common/base.css b/src/common/base.css index c5ab74c..497de04 100644 --- a/src/common/base.css +++ b/src/common/base.css @@ -18,11 +18,8 @@ body { -moz-osx-font-smoothing: grayscale; } -view, -image, -text { - box-sizing: border-box; - flex-shrink: 0; +img { + user-select: none; } button { border: none; diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index 47c30b3..b0094e6 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -597,141 +597,15 @@ const insertTodoList = () => { } } -// 处理图片拖拽开始 -const handleImageDragStart = (e) => { - console.log('Drag start:', e.target) - console.log('Drag start event:', e) - e.dataTransfer.effectAllowed = 'move' - e.target.classList.add('dragging') - // Store the dragged element's index or identifier - e.dataTransfer.setData('text/plain', e.target.src) - console.log('Set drag data:', e.target.src) -} - -// 处理图片拖拽经过 -const handleImageDragOver = (e) => { - console.log('Drag over event:', e) - e.preventDefault() - e.dataTransfer.dropEffect = 'move' - - // Add visual feedback for drop target - const target = e.target - console.log('Drag over target:', target) - if (target.classList && target.classList.contains('editor-image') && !target.classList.contains('dragging')) { - // Add a visual indicator for where the image will be dropped - target.style.boxShadow = '0 0 0 2px var(--primary)' - console.log('Added visual feedback to target') - } -} - -// 处理图片拖拽释放 -const handleImageDrop = (e) => { - console.log('Drop event:', e) - e.preventDefault() - - // Get the dragged image source - const draggedImageSrc = e.dataTransfer.getData('text/plain') - console.log('Dragged image source:', draggedImageSrc) - - // Get the drop target - const target = e.target - console.log('Drop target:', target) - - // Check if we're dropping on an image - if (target.classList && target.classList.contains('editor-image')) { - console.log('Dropping on an image') - // Reset all image styles - const images = editorRef.value.querySelectorAll('.editor-image') - images.forEach(img => { - img.style.boxShadow = '0 1px 5px rgba(0, 0, 0, 0.18)' - }) - - // Find the dragged image element - const draggedImage = Array.from(images).find(img => img.src === draggedImageSrc) - console.log('Dragged image element:', draggedImage) - - if (draggedImage && draggedImage !== target) { - console.log('Valid drag operation, moving image') - // Get the parent element - const parent = target.parentNode - console.log('Parent element:', parent) - - // Create a clone of the dragged image - const clonedImage = draggedImage.cloneNode(true) - console.log('Cloned image:', clonedImage) - - // Copy over event listeners by re-adding them - clonedImage.draggable = true - clonedImage.setAttribute('data-draggable', 'true') - clonedImage.addEventListener('dragstart', handleImageDragStart) - clonedImage.addEventListener('dragover', handleImageDragOver) - clonedImage.addEventListener('drop', handleImageDrop) - clonedImage.addEventListener('dragend', handleImageDragEnd) - - // Also clone the drag handle if it exists - const originalDragHandle = draggedImage.nextElementSibling - let clonedDragHandle = null - if (originalDragHandle && originalDragHandle.classList.contains('image-drag-handle')) { - console.log('Cloning drag handle') - clonedDragHandle = originalDragHandle.cloneNode(true) - // Add event listeners to the cloned drag handle - clonedDragHandle.addEventListener('mouseover', function() { - clonedDragHandle.classList.add('visible') - clonedDragHandle.style.display = 'block' - }) - clonedDragHandle.addEventListener('mouseout', function(e) { - setTimeout(() => { - if (!clonedImage.matches(':hover') && document.activeElement !== clonedImage) { - clonedDragHandle.classList.remove('visible') - clonedDragHandle.style.display = 'none' - } - }, 100) - }) - } - - // Insert the cloned image before the target - parent.insertBefore(clonedImage, target) - console.log('Inserted cloned image') - - // Insert the drag handle if it exists - if (clonedDragHandle) { - parent.insertBefore(clonedDragHandle, clonedImage.nextSibling) - console.log('Inserted cloned drag handle') - } - - // Remove the original dragged image and its drag handle - if (originalDragHandle && originalDragHandle.classList.contains('image-drag-handle')) { - originalDragHandle.remove() - console.log('Removed original drag handle') - } - draggedImage.remove() - console.log('Removed original image') - - // Update content - handleInput() - console.log('Updated content after drag') - } else { - console.log('Invalid drag operation') - } - } else { - console.log('Not dropping on an image') - } -} - -// 处理图片拖拽结束 -const handleImageDragEnd = (evt) => { - console.log('Drag end:', evt) - - // Reset styles of all images - const images = editorRef.value.querySelectorAll('.editor-image') - images.forEach(img => { - img.style.boxShadow = '0 1px 5px rgba(0, 0, 0, 0.18)' - img.classList.remove('dragging') - }) - - // Update content after drag operation - handleInput() -} +// 图片拖拽相关状态 +const dragState = ref({ + isDragging: false, + draggedImage: null, + startY: 0, + currentY: 0, + longPressTimer: null, + isLongPress: false +}) // 插入图片 const insertImage = () => { @@ -819,106 +693,15 @@ const insertImage = () => { // 确保图片与基准线对齐 img.style.verticalAlign = 'top' - - // 创建拖拽手柄 - const dragHandle = document.createElement('div') - dragHandle.className = 'image-drag-handle' - dragHandle.style.position = 'absolute' - dragHandle.style.top = '0.3125rem' - dragHandle.style.right = '0.3125rem' - dragHandle.style.width = '1.5rem' - dragHandle.style.height = '1.5rem' - dragHandle.style.backgroundImage = "url('/assets/icons/drawable-xxhdpi/detail_note_item_image_move.png')" - dragHandle.style.backgroundSize = 'contain' - dragHandle.style.backgroundRepeat = 'no-repeat' - dragHandle.style.cursor = 'move' - dragHandle.style.display = 'none' - dragHandle.style.zIndex = '1000' - dragHandle.style.pointerEvents = 'auto' - dragHandle.style.position = 'absolute' - - // 调试信息 - console.log('Creating drag handle for image') - - // 将拖拽手柄添加到图片后面（使用insertAdjacentElement） - img.insertAdjacentElement('afterend', dragHandle) - console.log('Added drag handle to image') } tempImg.src = imageDataUrl - // 添加事件监听器来显示/隐藏拖拽手柄 - img.addEventListener('focus', function() { - console.log('Image focused') - const dragHandle = img.nextElementSibling - if (dragHandle && dragHandle.classList.contains('image-drag-handle')) { - dragHandle.classList.add('visible') - dragHandle.style.display = 'block' // 直接设置显示样式 - } - }) - - img.addEventListener('blur', function() { - console.log('Image blurred') - const dragHandle = img.nextElementSibling - if (dragHandle && dragHandle.classList.contains('image-drag-handle')) { - // 延迟隐藏，确保用户有时间将鼠标移到手柄上 - setTimeout(() => { - if (!dragHandle.matches(':hover')) { - dragHandle.classList.remove('visible') - dragHandle.style.display = 'none' // 直接设置隐藏样式 - } - }, 100) - } - }) - - img.addEventListener('mouseover', function() { - console.log('Mouse over image') - const dragHandle = img.nextElementSibling - if (dragHandle && dragHandle.classList.contains('image-drag-handle')) { - dragHandle.classList.add('visible') - dragHandle.style.display = 'block' // 直接设置显示样式 - } - }) - - img.addEventListener('mouseout', function(e) { - console.log('Mouse out of image') - const dragHandle = img.nextElementSibling - if (dragHandle && dragHandle.classList.contains('image-drag-handle')) { - // 延迟隐藏，确保用户有时间将鼠标移到手柄上 - setTimeout(() => { - if (!dragHandle.matches(':hover') && document.activeElement !== img) { - dragHandle.classList.remove('visible') - dragHandle.style.display = 'none' // 直接设置隐藏样式 - } - }, 100) - } - }) - - // 添加拖拽手柄的事件监听器 - setTimeout(() => { - const dragHandle = img.nextElementSibling - if (dragHandle && dragHandle.classList.contains('image-drag-handle')) { - console.log('Adding event listeners to drag handle') - dragHandle.addEventListener('mouseover', function() { - dragHandle.classList.add('visible') - dragHandle.style.display = 'block' // 直接设置显示样式 - }) - - dragHandle.addEventListener('mouseout', function(e) { - // 延迟隐藏，确保用户有时间将鼠标移到图片上 - setTimeout(() => { - if (!img.matches(':hover') && document.activeElement !== img) { - dragHandle.classList.remove('visible') - dragHandle.style.display = 'none' // 直接设置隐藏样式 - } - }, 100) - }) - } - }, 0) - - // 添加拖拽功能 - img.draggable = true - img.setAttribute('data-draggable', 'true') - console.log('Set draggable attributes') + // 添加触摸事件监听器实现拖拽功能 + img.addEventListener('touchstart', handleTouchStart) + img.addEventListener('touchmove', handleTouchMove) + img.addEventListener('touchend', handleTouchEnd) + img.addEventListener('touchcancel', handleTouchCancel) + console.log('Added touch event listeners') // 插入图片到当前光标位置 range.insertNode(img) @@ -1009,6 +792,192 @@ const handleKeydown = e => { } } +// 处理触摸开始事件 +const handleTouchStart = (e) => { + const img = e.target + if (!img.classList.contains('editor-image')) return + + // 清除之前的定时器 + if (dragState.value.longPressTimer) { + clearTimeout(dragState.value.longPressTimer) + } + + // 设置长按检测定时器（1秒） + dragState.value.longPressTimer = setTimeout(() => { + dragState.value.isLongPress = true + dragState.value.draggedImage = img + dragState.value.startY = e.touches[0].clientY + dragState.value.currentY = e.touches[0].clientY + + // 添加拖拽样式 + img.classList.add('dragging') + img.style.opacity = '0.7' + img.style.transform = 'scale(0.95)' + img.style.zIndex = '999' + img.style.transition = 'all 0.2s ease' + + // 添加震动反馈（如果设备支持） + if (navigator.vibrate) { + navigator.vibrate(50) + } + + // 阻止页面滚动 + e.preventDefault() + }, 1000) // 1秒长按触发拖拽 +} + +// 处理触摸移动事件 +const handleTouchMove = (e) => { + if (!dragState.value.isLongPress || !dragState.value.draggedImage) return + + e.preventDefault() // 阻止页面滚动 + + const img = dragState.value.draggedImage + dragState.value.currentY = e.touches[0].clientY + + // 计算位移 + const deltaY = dragState.value.currentY - dragState.value.startY + + // 更新图片位置 + img.style.transform = `translateY(${deltaY}px) scale(0.95)` + + // 使用requestAnimationFrame优化性能 + requestAnimationFrame(() => { + // 检查与其他图片的碰撞，实现排序 + checkAndSwapImages(img, deltaY) + }) +} + +// 处理触摸结束事件 +const handleTouchEnd = (e) => { + // 清除长按定时器 + if (dragState.value.longPressTimer) { + clearTimeout(dragState.value.longPressTimer) + dragState.value.longPressTimer = null + } + + if (!dragState.value.isLongPress || !dragState.value.draggedImage) { + dragState.value.isLongPress = false + return + } + + // 重置拖拽状态 + const img = dragState.value.draggedImage + img.classList.remove('dragging') + img.style.opacity = '' + img.style.transform = '' + img.style.zIndex = '' + img.style.transition = '' + + // 添加震动反馈（如果设备支持） + if (navigator.vibrate) { + navigator.vibrate(30) + } + + // 重置状态 + dragState.value.isLongPress = false + dragState.value.draggedImage = null + dragState.value.startY = 0 + dragState.value.currentY = 0 + + // 触发内容更新 + handleInput() +} + +// 处理触摸取消事件 +const handleTouchCancel = (e) => { + // 清除长按定时器 + if (dragState.value.longPressTimer) { + clearTimeout(dragState.value.longPressTimer) + dragState.value.longPressTimer = null + } + + if (!dragState.value.isLongPress || !dragState.value.draggedImage) { + dragState.value.isLongPress = false + return + } + + // 重置拖拽状态 + const img = dragState.value.draggedImage + img.classList.remove('dragging') + img.style.opacity = '' + img.style.transform = '' + img.style.zIndex = '' + img.style.transition = '' + + // 重置状态 + dragState.value.isLongPress = false + dragState.value.draggedImage = null + dragState.value.startY = 0 + dragState.value.currentY = 0 +} + +// 检查并交换图片位置 +const checkAndSwapImages = (draggedImg, deltaY) => { + const allImages = Array.from(editorRef.value.querySelectorAll('.editor-image')) + const draggedIndex = allImages.indexOf(draggedImg) + + if (draggedIndex === -1) return + + // 计算拖拽图片的中心位置 + const draggedRect = draggedImg.getBoundingClientRect() + const draggedCenterY = draggedRect.top + draggedRect.height / 2 + deltaY + + // 查找最近的图片进行交换 + for (let i = 0; i < allImages.length; i++) { + if (i === draggedIndex) continue + + const targetImg = allImages[i] + const targetRect = targetImg.getBoundingClientRect() + const targetCenterY = targetRect.top + targetRect.height / 2 + + // 检查是否与目标图片重叠 + if (Math.abs(draggedCenterY - targetCenterY) < (draggedRect.height + targetRect.height) / 2) { + // 交换位置 + swapImages(draggedImg, targetImg) + break + } + } +} + +// 交换两张图片的位置 +const swapImages = (img1, img2) => { + const parent1 = img1.parentNode + const parent2 = img2.parentNode + + // 如果两张图片在同一父元素中 + if (parent1 === parent2) { + // 创建临时标记来帮助交换位置 + const tempMarker = document.createElement('div') + parent1.insertBefore(tempMarker, img1) + + // 交换位置 + parent1.insertBefore(img1, img2) + parent1.insertBefore(img2, tempMarker) + + // 移除临时标记 + tempMarker.remove() + + // 添加过渡效果 + img1.style.transition = 'transform 0.2s ease' + img2.style.transition = 'transform 0.2s ease' + + // 短暂延时后移除过渡效果 + setTimeout(() => { + img1.style.transition = '' + img2.style.transition = '' + }, 200) + } else { + // 不同父元素的情况（更复杂，需要特殊处理） + // 这里简化处理，实际项目中可能需要更复杂的逻辑 + const temp = document.createElement('div') + parent1.insertBefore(temp, img1) + parent2.insertBefore(img1, img2) + parent1.insertBefore(img2, temp) + temp.remove() + } +} + // 更新工具栏状态 const updateToolbarState = () => { nextTick(() => { @@ -1236,100 +1205,23 @@ const adjustExistingImages = () => { // 为现有图片添加拖拽功能 imageElements.forEach(img => { console.log('Adding drag functionality to image:', img) - // 确保图片有拖拽属性 - if (!img.hasAttribute('draggable')) { - console.log('Setting draggable attribute') - img.draggable = true - img.setAttribute('data-draggable', 'true') - - // 添加拖拽事件监听器 - img.addEventListener('dragstart', handleImageDragStart) - img.addEventListener('dragover', handleImageDragOver) - img.addEventListener('drop', handleImageDrop) - img.addEventListener('dragend', handleImageDragEnd) - console.log('Added drag event listeners') + // 添加触摸事件监听器 + if (!img.hasAttribute('data-touch-listeners')) { + console.log('Adding touch event listeners') + img.addEventListener('touchstart', handleTouchStart) + img.addEventListener('touchmove', handleTouchMove) + img.addEventListener('touchend', handleTouchEnd) + img.addEventListener('touchcancel', handleTouchCancel) + img.setAttribute('data-touch-listeners', 'true') + console.log('Added touch event listeners') } - // 检查是否已存在拖拽手柄 - let existingHandle = img.nextElementSibling - console.log('Existing handle:', existingHandle) - if (!existingHandle || !existingHandle.classList.contains('image-drag-handle')) { - console.log('Creating drag handle') - // 创建拖拽手柄 - const dragHandle = document.createElement('div') - dragHandle.className = 'image-drag-handle' - dragHandle.style.position = 'absolute' - dragHandle.style.top = '0.3125rem' - dragHandle.style.right = '0.3125rem' - dragHandle.style.width = '1.5rem' - dragHandle.style.height = '1.5rem' - dragHandle.style.backgroundImage = "url('/assets/icons/drawable-xxhdpi/detail_note_item_image_move.png')" - dragHandle.style.backgroundSize = 'contain' - dragHandle.style.backgroundRepeat = 'no-repeat' - dragHandle.style.cursor = 'move' - dragHandle.style.display = 'none' - dragHandle.style.zIndex = '1000' - dragHandle.style.pointerEvents = 'auto' - dragHandle.style.position = 'absolute' - - // 调试信息 - console.log('Creating drag handle for existing image') - - // 将拖拽手柄添加到图片后面 - img.insertAdjacentElement('afterend', dragHandle) - console.log('Added drag handle') - } - - // 确保拖拽手柄存在后再添加事件监听器 + // 移除已存在的拖拽手柄 setTimeout(() => { const dragHandle = img.nextElementSibling if (dragHandle && dragHandle.classList.contains('image-drag-handle')) { - console.log('Adding event listeners to drag handle') - // 添加事件监听器来显示/隐藏拖拽手柄 - img.addEventListener('focus', function() { - dragHandle.classList.add('visible') - dragHandle.style.display = 'block' // 直接设置显示样式 - }) - - img.addEventListener('blur', function() { - // 延迟隐藏，确保用户有时间将鼠标移到手柄上 - setTimeout(() => { - if (!dragHandle.matches(':hover')) { - dragHandle.classList.remove('visible') - dragHandle.style.display = 'none' // 直接设置隐藏样式 - } - }, 100) - }) - - img.addEventListener('mouseover', function() { - dragHandle.classList.add('visible') - dragHandle.style.display = 'block' // 直接设置显示样式 - }) - - img.addEventListener('mouseout', function(e) { - // 延迟隐藏，确保用户有时间将鼠标移到手柄上 - setTimeout(() => { - if (!dragHandle.matches(':hover') && document.activeElement !== img) { - dragHandle.classList.remove('visible') - dragHandle.style.display = 'none' // 直接设置隐藏样式 - } - }, 100) - }) - - dragHandle.addEventListener('mouseover', function() { - dragHandle.classList.add('visible') - dragHandle.style.display = 'block' // 直接设置显示样式 - }) - - dragHandle.addEventListener('mouseout', function(e) { - // 延迟隐藏，确保用户有时间将鼠标移到图片上 - setTimeout(() => { - if (!img.matches(':hover') && document.activeElement !== img) { - dragHandle.classList.remove('visible') - dragHandle.style.display = 'none' // 直接设置隐藏样式 - } - }, 100) - }) + console.log('Removing existing drag handle') + dragHandle.remove() } }, 0) }) @@ -1355,18 +1247,18 @@ defineExpose({ const imageElements = editorRef.value.querySelectorAll('img.editor-image') console.log('Found images in setContent:', imageElements.length) imageElements.forEach(img => { - console.log('Adding drag listeners to image in setContent:', img) + console.log('Adding touch listeners to image in setContent:', img) // 先移除可能已有的事件监听器，避免重复 - img.removeEventListener('dragstart', handleImageDragStart) - img.removeEventListener('dragover', handleImageDragOver) - img.removeEventListener('drop', handleImageDrop) - img.removeEventListener('dragend', handleImageDragEnd) + img.removeEventListener('touchstart', handleTouchStart) + img.removeEventListener('touchmove', handleTouchMove) + img.removeEventListener('touchend', handleTouchEnd) + img.removeEventListener('touchcancel', handleTouchCancel) // 重新添加事件监听器 - img.addEventListener('dragstart', handleImageDragStart) - img.addEventListener('dragover', handleImageDragOver) - img.addEventListener('drop', handleImageDrop) - img.addEventListener('dragend', handleImageDragEnd) + img.addEventListener('touchstart', handleTouchStart) + img.addEventListener('touchmove', handleTouchMove) + img.addEventListener('touchend', handleTouchEnd) + img.addEventListener('touchcancel', handleTouchCancel) }) }, 0) } catch (error) { @@ -1395,18 +1287,18 @@ defineExpose({ const imageElements = editorRef.value.querySelectorAll('img.editor-image') console.log('Found images in delayed setContent:', imageElements.length) imageElements.forEach(img => { - console.log('Adding drag listeners to image in delayed setContent:', img) + console.log('Adding touch listeners to image in delayed setContent:', img) // 先移除可能已有的事件监听器，避免重复 - img.removeEventListener('dragstart', handleImageDragStart) - img.removeEventListener('dragover', handleImageDragOver) - img.removeEventListener('drop', handleImageDrop) - img.removeEventListener('dragend', handleImageDragEnd) + img.removeEventListener('touchstart', handleTouchStart) + img.removeEventListener('touchmove', handleTouchMove) + img.removeEventListener('touchend', handleTouchEnd) + img.removeEventListener('touchcancel', handleTouchCancel) // 重新添加事件监听器 - img.addEventListener('dragstart', handleImageDragStart) - img.addEventListener('dragover', handleImageDragOver) - img.addEventListener('drop', handleImageDrop) - img.addEventListener('dragend', handleImageDragEnd) + img.addEventListener('touchstart', handleTouchStart) + img.addEventListener('touchmove', handleTouchMove) + img.addEventListener('touchend', handleTouchEnd) + img.addEventListener('touchcancel', handleTouchCancel) }) }, 0) } catch (error) { @@ -1645,35 +1537,12 @@ defineExpose({ cursor: move; } -:deep(.editor-content .image-drag-handle) { - position: absolute; - top: 0.3125rem; - right: 0.3125rem; - width: 1.5rem; - height: 1.5rem; - background-image: url('/assets/icons/drawable-xxhdpi/detail_note_item_image_move.png'); - background-size: contain; - background-repeat: no-repeat; - cursor: move; - display: none; - z-index: 1000; - pointer-events: auto; /* 确保手柄可以接收鼠标事件 */ - position: absolute; -} - -:deep(.editor-content .editor-image:focus + .image-drag-handle), -:deep(.editor-content .editor-image:hover + .image-drag-handle), -:deep(.editor-content .image-drag-handle:hover) { - display: block !important; -} - -/* 强制显示拖拽手柄的类 */ -:deep(.editor-content .image-drag-handle.visible) { - display: block !important; -} - :deep(.editor-content .editor-image.dragging) { - opacity: 0.5; + opacity: 0.7; + transform: scale(0.95); + z-index: 999; + transition: all 0.2s ease; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } /* 待办事项样式 */ From 731d18630234bb8b29e675d6bf952b70d4c2b691 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 10:11:47 +0800 Subject: [PATCH 04/37] =?UTF-8?q?\"feat:=20=E4=BC=98=E5=8C=96=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=9B=BE=E7=89=87=E6=8B=96=E6=8B=BD=E4=BD=93?= =?UTF-8?q?=E9=AA=8C=E5=92=8C=E8=A7=86=E8=A7=89=E5=8F=8D=E9=A6=88\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/base.css | 11 ++ src/components/RichTextEditor.vue | 234 ++++++++++++++++++++++++------ 2 files changed, 202 insertions(+), 43 deletions(-) diff --git a/src/common/base.css b/src/common/base.css index 497de04..2354854 100644 --- a/src/common/base.css +++ b/src/common/base.css @@ -20,6 +20,17 @@ body { img { user-select: none; + -webkit-tap-highlight-color: transparent; + outline-color: transparent; + lighting-color: transparent; +} +::selection { + background-color: #d3b9a7; /* 选中时的背景颜色 */ + color: #ffffff; /* 选中时的文字颜色 */ +} +img::selection { + background-color: transparent; /* 选中时的背景颜色 */ + color: #ffffff; /* 选中时的文字颜色 */ } button { border: none; diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index b0094e6..d4d87e0 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -601,10 +601,12 @@ const insertTodoList = () => { const dragState = ref({ isDragging: false, draggedImage: null, + startX: 0, startY: 0, currentY: 0, longPressTimer: null, - isLongPress: false + isLongPress: false, + indicator: null }) // 插入图片 @@ -797,12 +799,22 @@ const handleTouchStart = (e) => { const img = e.target if (!img.classList.contains('editor-image')) return + // 防止图片被选中 + img.style.userSelect = 'none' + img.style.webkitUserSelect = 'none' + img.style.mozUserSelect = 'none' + img.style.msUserSelect = 'none' + // 清除之前的定时器 if (dragState.value.longPressTimer) { clearTimeout(dragState.value.longPressTimer) } - // 设置长按检测定时器（1秒） + // 记录触摸开始位置 + dragState.value.startX = e.touches[0].clientX + dragState.value.startY = e.touches[0].clientY + + // 设置长按检测定时器（400毫秒） dragState.value.longPressTimer = setTimeout(() => { dragState.value.isLongPress = true dragState.value.draggedImage = img @@ -811,35 +823,86 @@ const handleTouchStart = (e) => { // 添加拖拽样式 img.classList.add('dragging') - img.style.opacity = '0.7' - img.style.transform = 'scale(0.95)' + img.style.opacity = '0.85' + img.style.transform = 'scale(0.99)' img.style.zIndex = '999' - img.style.transition = 'all 0.2s ease' + img.style.transition = 'all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + + // 添加拖拽指示器 + 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.75)' + indicator.style.color = 'white' + indicator.style.borderRadius = '16px' + indicator.style.fontSize = '13px' + indicator.style.zIndex = '1000' + indicator.style.opacity = '0' + indicator.style.transition = 'opacity 0.2s ease' + indicator.textContent = '拖拽排序' + document.body.appendChild(indicator) + + // 渐显指示器 + setTimeout(() => { + indicator.style.opacity = '1' + }, 10) + + // 保存指示器引用以便后续移除 + dragState.value.indicator = indicator // 添加震动反馈（如果设备支持） if (navigator.vibrate) { - navigator.vibrate(50) + navigator.vibrate(15) } // 阻止页面滚动 e.preventDefault() - }, 1000) // 1秒长按触发拖拽 + }, 400) // 400毫秒长按触发拖拽 } // 处理触摸移动事件 const handleTouchMove = (e) => { - if (!dragState.value.isLongPress || !dragState.value.draggedImage) return + if (!dragState.value.longPressTimer && !dragState.value.isLongPress) return + + const img = dragState.value.draggedImage + const currentX = e.touches[0].clientX + const currentY = e.touches[0].clientY + + // 防止图片被选中 + e.preventDefault() + + // 如果还没有触发长按，检查是否移动过多（超过8px则取消长按） + if (!dragState.value.isLongPress) { + const deltaX = Math.abs(currentX - dragState.value.startX) + const deltaY = Math.abs(currentY - dragState.value.startY) + const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY) + + if (distance > 8) { + // 移动过多，取消长按 + if (dragState.value.longPressTimer) { + clearTimeout(dragState.value.longPressTimer) + dragState.value.longPressTimer = null + } + return + } + } + + if (!dragState.value.isLongPress || !img) return e.preventDefault() // 阻止页面滚动 - const img = dragState.value.draggedImage - dragState.value.currentY = e.touches[0].clientY + dragState.value.currentY = currentY // 计算位移 const deltaY = dragState.value.currentY - dragState.value.startY - // 更新图片位置 - img.style.transform = `translateY(${deltaY}px) scale(0.95)` + // 更新图片位置，添加缓动效果 + const easeFactor = 0.7 + img.style.transform = `translateY(${deltaY * easeFactor}px) scale(0.99)` // 使用requestAnimationFrame优化性能 requestAnimationFrame(() => { @@ -863,22 +926,43 @@ const handleTouchEnd = (e) => { // 重置拖拽状态 const img = dragState.value.draggedImage - img.classList.remove('dragging') - img.style.opacity = '' - img.style.transform = '' - img.style.zIndex = '' - img.style.transition = '' + + // 添加释放动画 + img.style.transition = 'all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + img.style.transform = 'translateY(0) scale(1)' + img.style.opacity = '1' + + // 移除拖拽指示器 + if (dragState.value.indicator) { + const indicator = dragState.value.indicator + indicator.style.opacity = '0' + setTimeout(() => { + if (indicator.parentNode) { + indicator.parentNode.removeChild(indicator) + } + }, 250) + } // 添加震动反馈（如果设备支持） if (navigator.vibrate) { - navigator.vibrate(30) + navigator.vibrate(8) } + // 延迟重置样式以显示动画 + setTimeout(() => { + if (img) { + img.classList.remove('dragging') + img.style.zIndex = '' + img.style.transition = '' + } + }, 250) + // 重置状态 dragState.value.isLongPress = false dragState.value.draggedImage = null dragState.value.startY = 0 dragState.value.currentY = 0 + dragState.value.indicator = null // 触发内容更新 handleInput() @@ -899,17 +983,38 @@ const handleTouchCancel = (e) => { // 重置拖拽状态 const img = dragState.value.draggedImage - img.classList.remove('dragging') - img.style.opacity = '' - img.style.transform = '' - img.style.zIndex = '' - img.style.transition = '' + + // 添加取消动画 + img.style.transition = 'all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + img.style.transform = 'translateY(0) scale(1)' + img.style.opacity = '1' + + // 移除拖拽指示器 + if (dragState.value.indicator) { + const indicator = dragState.value.indicator + indicator.style.opacity = '0' + setTimeout(() => { + if (indicator.parentNode) { + indicator.parentNode.removeChild(indicator) + } + }, 250) + } + + // 延迟重置样式以显示动画 + setTimeout(() => { + if (img) { + img.classList.remove('dragging') + img.style.zIndex = '' + img.style.transition = '' + } + }, 250) // 重置状态 dragState.value.isLongPress = false dragState.value.draggedImage = null dragState.value.startY = 0 dragState.value.currentY = 0 + dragState.value.indicator = null } // 检查并交换图片位置 @@ -921,7 +1026,7 @@ const checkAndSwapImages = (draggedImg, deltaY) => { // 计算拖拽图片的中心位置 const draggedRect = draggedImg.getBoundingClientRect() - const draggedCenterY = draggedRect.top + draggedRect.height / 2 + deltaY + const draggedCenterY = draggedRect.top + draggedRect.height / 2 + deltaY * 0.8 // 添加缓动因子 // 查找最近的图片进行交换 for (let i = 0; i < allImages.length; i++) { @@ -931,8 +1036,23 @@ const checkAndSwapImages = (draggedImg, deltaY) => { const targetRect = targetImg.getBoundingClientRect() const targetCenterY = targetRect.top + targetRect.height / 2 - // 检查是否与目标图片重叠 - if (Math.abs(draggedCenterY - targetCenterY) < (draggedRect.height + targetRect.height) / 2) { + // 检查是否与目标图片重叠，使用更精确的碰撞检测 + const overlapThreshold = (draggedRect.height + targetRect.height) * 0.4 + const distance = Math.abs(draggedCenterY - targetCenterY) + + if (distance < overlapThreshold) { + // 添加接近效果 + targetImg.style.transition = 'all 0.2s ease' + targetImg.style.transform = 'scale(1.02)' + targetImg.style.boxShadow = '0 0 0 2px var(--primary)' + + // 短暂延迟后恢复 + setTimeout(() => { + targetImg.style.transform = '' + targetImg.style.boxShadow = '' + targetImg.style.transition = '' + }, 200) + // 交换位置 swapImages(draggedImg, targetImg) break @@ -947,26 +1067,42 @@ const swapImages = (img1, img2) => { // 如果两张图片在同一父元素中 if (parent1 === parent2) { - // 创建临时标记来帮助交换位置 + // 添加交换动画 + img1.style.transition = 'transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + img2.style.transition = 'transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + + // 获取当前位置 + const rect1 = img1.getBoundingClientRect() + const rect2 = img2.getBoundingClientRect() + + // 计算位移 + const translateY1 = rect2.top - rect1.top + const translateY2 = rect1.top - rect2.top + + // 应用位移 + img1.style.transform = `translateY(${translateY1}px) scale(0.99)` + img2.style.transform = `translateY(${translateY2}px) scale(0.99)` + + // 交换DOM位置 const tempMarker = document.createElement('div') parent1.insertBefore(tempMarker, img1) - - // 交换位置 parent1.insertBefore(img1, img2) parent1.insertBefore(img2, tempMarker) - - // 移除临时标记 tempMarker.remove() - // 添加过渡效果 - img1.style.transition = 'transform 0.2s ease' - img2.style.transition = 'transform 0.2s ease' - - // 短暂延时后移除过渡效果 + // 重置变换 setTimeout(() => { - img1.style.transition = '' - img2.style.transition = '' - }, 200) + img1.style.transform = 'scale(0.99)' + img2.style.transform = 'scale(0.99)' + + // 短暂延时后移除过渡效果 + setTimeout(() => { + img1.style.transition = '' + img2.style.transition = '' + img1.style.transform = '' + img2.style.transform = '' + }, 250) + }, 250) } else { // 不同父元素的情况（更复杂，需要特殊处理） // 这里简化处理，实际项目中可能需要更复杂的逻辑 @@ -1531,6 +1667,12 @@ defineExpose({ background: var(--background-secondary); position: relative; outline: none; /* 移除默认焦点轮廓 */ + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -webkit-touch-callout: none; + -webkit-tap-highlight-color: transparent; } :deep(.editor-content .editor-image.draggable) { @@ -1538,11 +1680,17 @@ defineExpose({ } :deep(.editor-content .editor-image.dragging) { - opacity: 0.7; - transform: scale(0.95); + opacity: 0.85; + transform: scale(0.99); z-index: 999; - transition: all 0.2s ease; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); + transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); + box-shadow: 0 12px 25px rgba(0, 0, 0, 0.22); + will-change: transform; + filter: brightness(1.03); + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } /* 待办事项样式 */ From 2b68185ce75f39a638818478c9554618180af5e7 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 10:21:57 +0800 Subject: [PATCH 05/37] =?UTF-8?q?\"feat:=20=E8=BF=9B=E4=B8=80=E6=AD=A5?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E6=8B=96=E6=8B=BD=E6=80=A7=E8=83=BD=E5=92=8C=E4=BD=93=E9=AA=8C?= =?UTF-8?q?\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 118 +++++++++++------------------- 1 file changed, 43 insertions(+), 75 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index d4d87e0..a396113 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -606,7 +606,9 @@ const dragState = ref({ currentY: 0, longPressTimer: null, isLongPress: false, - indicator: null + indicator: null, + lastCheckTime: 0, + lastMoveTime: 0 }) // 插入图片 @@ -814,7 +816,7 @@ const handleTouchStart = (e) => { dragState.value.startX = e.touches[0].clientX dragState.value.startY = e.touches[0].clientY - // 设置长按检测定时器（400毫秒） + // 设置长按检测定时器（300毫秒） dragState.value.longPressTimer = setTimeout(() => { dragState.value.isLongPress = true dragState.value.draggedImage = img @@ -823,10 +825,10 @@ const handleTouchStart = (e) => { // 添加拖拽样式 img.classList.add('dragging') - img.style.opacity = '0.85' - img.style.transform = 'scale(0.99)' + img.style.opacity = '0.9' + img.style.transform = 'scale(0.98)' img.style.zIndex = '999' - img.style.transition = 'all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' // 添加拖拽指示器 const indicator = document.createElement('div') @@ -836,32 +838,33 @@ const handleTouchStart = (e) => { indicator.style.left = '50%' indicator.style.transform = 'translate(-50%, -50%)' indicator.style.padding = '8px 16px' - indicator.style.background = 'rgba(0, 0, 0, 0.75)' + indicator.style.background = 'rgba(0, 0, 0, 0.8)' indicator.style.color = 'white' indicator.style.borderRadius = '16px' - indicator.style.fontSize = '13px' + indicator.style.fontSize = '14px' + indicator.style.fontWeight = '500' indicator.style.zIndex = '1000' indicator.style.opacity = '0' - indicator.style.transition = 'opacity 0.2s ease' + indicator.style.transition = 'opacity 0.15s ease-out' indicator.textContent = '拖拽排序' document.body.appendChild(indicator) // 渐显指示器 setTimeout(() => { indicator.style.opacity = '1' - }, 10) + }, 5) // 保存指示器引用以便后续移除 dragState.value.indicator = indicator // 添加震动反馈（如果设备支持） if (navigator.vibrate) { - navigator.vibrate(15) + navigator.vibrate(10) } // 阻止页面滚动 e.preventDefault() - }, 400) // 400毫秒长按触发拖拽 + }, 300) // 300毫秒长按触发拖拽 } // 处理触摸移动事件 @@ -901,14 +904,20 @@ const handleTouchMove = (e) => { const deltaY = dragState.value.currentY - dragState.value.startY // 更新图片位置，添加缓动效果 - const easeFactor = 0.7 - img.style.transform = `translateY(${deltaY * easeFactor}px) scale(0.99)` + const easeFactor = 0.9 // 调整缓动因子使拖拽更跟手 + img.style.transform = `translateY(${deltaY * easeFactor}px) scale(0.98)` - // 使用requestAnimationFrame优化性能 - requestAnimationFrame(() => { - // 检查与其他图片的碰撞，实现排序 + // 使用节流优化，避免过于频繁的检查 + if (!dragState.value.lastMoveTime) { + dragState.value.lastMoveTime = 0 + } + + const now = Date.now() + // 限制检查频率为每25ms一次，提高响应速度 + if (now - dragState.value.lastMoveTime >= 25) { + dragState.value.lastMoveTime = now checkAndSwapImages(img, deltaY) - }) + } } // 处理触摸结束事件 @@ -928,24 +937,25 @@ const handleTouchEnd = (e) => { const img = dragState.value.draggedImage // 添加释放动画 - img.style.transition = 'all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' img.style.transform = 'translateY(0) scale(1)' img.style.opacity = '1' // 移除拖拽指示器 if (dragState.value.indicator) { const indicator = dragState.value.indicator + indicator.style.transition = 'opacity 0.15s ease-out' indicator.style.opacity = '0' setTimeout(() => { if (indicator.parentNode) { indicator.parentNode.removeChild(indicator) } - }, 250) + }, 150) } // 添加震动反馈（如果设备支持） if (navigator.vibrate) { - navigator.vibrate(8) + navigator.vibrate(5) } // 延迟重置样式以显示动画 @@ -955,7 +965,7 @@ const handleTouchEnd = (e) => { img.style.zIndex = '' img.style.transition = '' } - }, 250) + }, 200) // 重置状态 dragState.value.isLongPress = false @@ -985,19 +995,20 @@ const handleTouchCancel = (e) => { const img = dragState.value.draggedImage // 添加取消动画 - img.style.transition = 'all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' img.style.transform = 'translateY(0) scale(1)' img.style.opacity = '1' // 移除拖拽指示器 if (dragState.value.indicator) { const indicator = dragState.value.indicator + indicator.style.transition = 'opacity 0.15s ease-out' indicator.style.opacity = '0' setTimeout(() => { if (indicator.parentNode) { indicator.parentNode.removeChild(indicator) } - }, 250) + }, 150) } // 延迟重置样式以显示动画 @@ -1007,7 +1018,7 @@ const handleTouchCancel = (e) => { img.style.zIndex = '' img.style.transition = '' } - }, 250) + }, 200) // 重置状态 dragState.value.isLongPress = false @@ -1026,7 +1037,7 @@ const checkAndSwapImages = (draggedImg, deltaY) => { // 计算拖拽图片的中心位置 const draggedRect = draggedImg.getBoundingClientRect() - const draggedCenterY = draggedRect.top + draggedRect.height / 2 + deltaY * 0.8 // 添加缓动因子 + const draggedCenterY = draggedRect.top + draggedRect.height / 2 + deltaY * 0.9 // 调整缓动因子以匹配触摸移动 // 查找最近的图片进行交换 for (let i = 0; i < allImages.length; i++) { @@ -1037,23 +1048,11 @@ const checkAndSwapImages = (draggedImg, deltaY) => { const targetCenterY = targetRect.top + targetRect.height / 2 // 检查是否与目标图片重叠，使用更精确的碰撞检测 - const overlapThreshold = (draggedRect.height + targetRect.height) * 0.4 + const overlapThreshold = (draggedRect.height + targetRect.height) * 0.4 // 调整阈值使交换更灵敏 const distance = Math.abs(draggedCenterY - targetCenterY) if (distance < overlapThreshold) { - // 添加接近效果 - targetImg.style.transition = 'all 0.2s ease' - targetImg.style.transform = 'scale(1.02)' - targetImg.style.boxShadow = '0 0 0 2px var(--primary)' - - // 短暂延迟后恢复 - setTimeout(() => { - targetImg.style.transform = '' - targetImg.style.boxShadow = '' - targetImg.style.transition = '' - }, 200) - - // 交换位置 + // 直接交换位置，移除视觉反馈以避免闪烁 swapImages(draggedImg, targetImg) break } @@ -1067,42 +1066,12 @@ const swapImages = (img1, img2) => { // 如果两张图片在同一父元素中 if (parent1 === parent2) { - // 添加交换动画 - img1.style.transition = 'transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)' - img2.style.transition = 'transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)' - - // 获取当前位置 - const rect1 = img1.getBoundingClientRect() - const rect2 = img2.getBoundingClientRect() - - // 计算位移 - const translateY1 = rect2.top - rect1.top - const translateY2 = rect1.top - rect2.top - - // 应用位移 - img1.style.transform = `translateY(${translateY1}px) scale(0.99)` - img2.style.transform = `translateY(${translateY2}px) scale(0.99)` - - // 交换DOM位置 + // 直接交换DOM位置，避免复杂的动画导致的闪烁 const tempMarker = document.createElement('div') parent1.insertBefore(tempMarker, img1) parent1.insertBefore(img1, img2) parent1.insertBefore(img2, tempMarker) tempMarker.remove() - - // 重置变换 - setTimeout(() => { - img1.style.transform = 'scale(0.99)' - img2.style.transform = 'scale(0.99)' - - // 短暂延时后移除过渡效果 - setTimeout(() => { - img1.style.transition = '' - img2.style.transition = '' - img1.style.transform = '' - img2.style.transform = '' - }, 250) - }, 250) } else { // 不同父元素的情况（更复杂，需要特殊处理） // 这里简化处理，实际项目中可能需要更复杂的逻辑 @@ -1680,13 +1649,12 @@ defineExpose({ } :deep(.editor-content .editor-image.dragging) { - opacity: 0.85; - transform: scale(0.99); + opacity: 0.9; + transform: scale(0.98); z-index: 999; - transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); + transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.15s ease; /* 优化过渡效果 */ box-shadow: 0 12px 25px rgba(0, 0, 0, 0.22); - will-change: transform; - filter: brightness(1.03); + will-change: transform, opacity; /* 提示浏览器优化这些属性 */ user-select: none; -webkit-user-select: none; -moz-user-select: none; From 3dedcb615b0b23ba30f0569e443bf58198e94dd2 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 10:24:05 +0800 Subject: [PATCH 06/37] =?UTF-8?q?\"feat:=20=E8=B0=83=E6=95=B4=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E6=8B=96=E6=8B=BD=E6=8E=92=E5=BA=8F=E9=98=88=E5=80=BC?= =?UTF-8?q?=E4=B8=BA=E8=A6=86=E7=9B=96=E7=9B=AE=E6=A0=87=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E4=B8=89=E5=88=86=E4=B9=8B=E4=BA=8C=E9=AB=98=E5=BA=A6\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index a396113..5a3213f 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -1048,7 +1048,8 @@ const checkAndSwapImages = (draggedImg, deltaY) => { const targetCenterY = targetRect.top + targetRect.height / 2 // 检查是否与目标图片重叠，使用更精确的碰撞检测 - const overlapThreshold = (draggedRect.height + targetRect.height) * 0.4 // 调整阈值使交换更灵敏 + // 当拖拽图片覆盖目标图片高度的三分之二时触发排序 + const overlapThreshold = targetRect.height * 0.67 const distance = Math.abs(draggedCenterY - targetCenterY) if (distance < overlapThreshold) { From c0578dd02d3996e3c77f79a389a53a6a4586f31e Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 10:27:58 +0800 Subject: [PATCH 07/37] =?UTF-8?q?\"feat:=20=E5=AE=9E=E7=8E=B0=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E6=8E=92=E5=BA=8F=E5=90=8E=E8=87=AA=E5=8A=A8=E9=80=80?= =?UTF-8?q?=E5=87=BA=E6=8E=92=E5=BA=8F=E6=A8=A1=E5=BC=8F\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 49 ++++++++++++++++++++++++++++++- 1 file changed, 48 insertions(+), 1 deletion(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index 5a3213f..5411fd7 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -611,6 +611,47 @@ const dragState = ref({ lastMoveTime: 0 }) +// 重置拖拽状态 +const resetDragState = () => { + // 清除长按定时器 + if (dragState.value.longPressTimer) { + clearTimeout(dragState.value.longPressTimer) + dragState.value.longPressTimer = null + } + + // 重置所有拖拽状态 + dragState.value.isLongPress = false + dragState.value.draggedImage = null + dragState.value.startX = 0 + dragState.value.startY = 0 + dragState.value.currentY = 0 + dragState.value.lastMoveTime = 0 + + // 移除拖拽指示器 + if (dragState.value.indicator) { + const indicator = dragState.value.indicator + indicator.style.opacity = '0' + setTimeout(() => { + if (indicator.parentNode) { + indicator.parentNode.removeChild(indicator) + } + }, 150) + dragState.value.indicator = null + } + + // 重置所有图片的拖拽样式 + if (editorRef.value) { + const draggedImages = editorRef.value.querySelectorAll('.editor-image.dragging') + draggedImages.forEach(img => { + img.classList.remove('dragging') + img.style.zIndex = '' + img.style.transition = '' + img.style.transform = '' + img.style.opacity = '' + }) + } +} + // 插入图片 const insertImage = () => { console.log('Inserting image') @@ -1049,7 +1090,7 @@ const checkAndSwapImages = (draggedImg, deltaY) => { // 检查是否与目标图片重叠，使用更精确的碰撞检测 // 当拖拽图片覆盖目标图片高度的三分之二时触发排序 - const overlapThreshold = targetRect.height * 0.67 + const overlapThreshold = targetRect.height * 0.01 const distance = Math.abs(draggedCenterY - targetCenterY) if (distance < overlapThreshold) { @@ -1082,6 +1123,12 @@ const swapImages = (img1, img2) => { parent1.insertBefore(img2, temp) temp.remove() } + + // 触发内容更新 + handleInput() + + // 自动退出排序模式 + resetDragState() } // 更新工具栏状态 From 1ca85f27099c55805b7c9a08e6d5f343073fb334 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 10:31:12 +0800 Subject: [PATCH 08/37] =?UTF-8?q?\"fix:=20=E4=BF=AE=E5=A4=8D=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E6=8E=92=E5=BA=8F=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=81=A2?= =?UTF-8?q?=E5=A4=8D=E6=AD=A3=E7=A1=AE=E7=9A=84=E9=98=88=E5=80=BC=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index 5411fd7..d89b6c6 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -1090,7 +1090,7 @@ const checkAndSwapImages = (draggedImg, deltaY) => { // 检查是否与目标图片重叠，使用更精确的碰撞检测 // 当拖拽图片覆盖目标图片高度的三分之二时触发排序 - const overlapThreshold = targetRect.height * 0.01 + const overlapThreshold = targetRect.height * 0.67 const distance = Math.abs(draggedCenterY - targetCenterY) if (distance < overlapThreshold) { From 4e2771277de812e365532b98d10265d7ca689fc0 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 10:35:50 +0800 Subject: [PATCH 09/37] =?UTF-8?q?\"feat:=20=E4=B8=BA=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=A7=BB=E9=99=A4=E6=8C=89=E9=92=AE=EF=BC=8C?= =?UTF-8?q?=E4=BD=BF=E7=94=A8item=5Fimage=5Fbtn=5Funbrella=5Fdelete.png?= =?UTF-8?q?=E5=9B=BE=E6=A0=87\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 204 +++++++++++++++++++++++------- 1 file changed, 156 insertions(+), 48 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index d89b6c6..0893e8d 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -684,6 +684,12 @@ const insertImage = () => { const range = selection.getRangeAt(0) console.log('Current range:', range) + // 创建图片容器 + const imgContainer = document.createElement('div') + imgContainer.className = 'image-container' + imgContainer.style.position = 'relative' + imgContainer.style.display = 'inline-block' + // 创建图片元素 const img = document.createElement('img') img.src = imageDataUrl @@ -702,6 +708,24 @@ const insertImage = () => { img.style.outline = 'none' // 移除默认焦点轮廓 img.draggable = true + // 创建删除按钮 + 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.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' + + // 将图片和删除按钮添加到容器中 + imgContainer.appendChild(img) + imgContainer.appendChild(deleteBtn) + console.log('Created image element:', img) // 创建一个临时图片来获取原始尺寸 @@ -746,20 +770,43 @@ const insertImage = () => { img.addEventListener('touchmove', handleTouchMove) img.addEventListener('touchend', handleTouchEnd) img.addEventListener('touchcancel', handleTouchCancel) + + // 为图片容器添加事件监听器 + imgContainer.addEventListener('touchstart', handleTouchStart) + imgContainer.addEventListener('touchmove', handleTouchMove) + imgContainer.addEventListener('touchend', handleTouchEnd) + imgContainer.addEventListener('touchcancel', handleTouchCancel) + + // 为删除按钮添加点击事件 + deleteBtn.addEventListener('click', function(e) { + e.stopPropagation(); + imgContainer.remove(); + handleInput(); + }); + + // 为图片容器添加鼠标悬停事件以显示/隐藏删除按钮 + imgContainer.addEventListener('mouseenter', function() { + deleteBtn.style.display = 'block'; + }); + + imgContainer.addEventListener('mouseleave', function() { + deleteBtn.style.display = 'none'; + }); + console.log('Added touch event listeners') - // 插入图片到当前光标位置 - range.insertNode(img) - console.log('Inserted image into editor') + // 插入图片容器到当前光标位置 + range.insertNode(imgContainer) + console.log('Inserted image container into editor') // 调试信息 - console.log('Image inserted:', img) - console.log('Next sibling (should be drag handle):', img.nextSibling) + console.log('Image container inserted:', imgContainer) + console.log('Next sibling (should be drag handle):', imgContainer.nextSibling) // 添加换行 const br = document.createElement('br') - img.parentNode.insertBefore(br, img.nextSibling) - console.log('Added line break after image') + imgContainer.parentNode.insertBefore(br, imgContainer.nextSibling) + console.log('Added line break after image container') // 触发输入事件更新内容 handleInput() @@ -1090,7 +1137,7 @@ const checkAndSwapImages = (draggedImg, deltaY) => { // 检查是否与目标图片重叠，使用更精确的碰撞检测 // 当拖拽图片覆盖目标图片高度的三分之二时触发排序 - const overlapThreshold = targetRect.height * 0.67 + const overlapThreshold = targetRect.height * 0.27 const distance = Math.abs(draggedCenterY - targetCenterY) if (distance < overlapThreshold) { @@ -1306,9 +1353,12 @@ const adjustExistingImages = () => { // 等待DOM更新完成 setTimeout(() => { if (editorRef.value) { - const imageElements = editorRef.value.querySelectorAll('img.editor-image') - console.log('Found image elements:', imageElements.length) - imageElements.forEach(img => { + const imageContainers = editorRef.value.querySelectorAll('.image-container') + console.log('Found image containers:', imageContainers.length) + imageContainers.forEach(container => { + const img = container.querySelector('img.editor-image') + if (!img) return + console.log('Processing image:', img) // 只处理还没有调整过高度的图片 if (!img.dataset.heightAdjusted) { @@ -1356,27 +1406,42 @@ const adjustExistingImages = () => { }) // 为现有图片添加拖拽功能 - imageElements.forEach(img => { + imageContainers.forEach(container => { + const img = container.querySelector('img.editor-image') + if (!img) return + console.log('Adding drag functionality to image:', img) // 添加触摸事件监听器 if (!img.hasAttribute('data-touch-listeners')) { console.log('Adding touch event listeners') - img.addEventListener('touchstart', handleTouchStart) - img.addEventListener('touchmove', handleTouchMove) - img.addEventListener('touchend', handleTouchEnd) - img.addEventListener('touchcancel', handleTouchCancel) + // 为图片容器添加事件监听器 + container.addEventListener('touchstart', handleTouchStart) + container.addEventListener('touchmove', handleTouchMove) + container.addEventListener('touchend', handleTouchEnd) + container.addEventListener('touchcancel', handleTouchCancel) + + // 为删除按钮添加点击事件 + const deleteBtn = container.querySelector('.image-delete-btn') + if (deleteBtn) { + deleteBtn.addEventListener('click', function(e) { + e.stopPropagation(); + container.remove(); + handleInput(); + }); + } + + // 为图片容器添加鼠标悬停事件以显示/隐藏删除按钮 + container.addEventListener('mouseenter', function() { + if (deleteBtn) deleteBtn.style.display = 'block'; + }); + + container.addEventListener('mouseleave', function() { + if (deleteBtn) deleteBtn.style.display = 'none'; + }); + img.setAttribute('data-touch-listeners', 'true') console.log('Added touch event listeners') } - - // 移除已存在的拖拽手柄 - setTimeout(() => { - const dragHandle = img.nextElementSibling - if (dragHandle && dragHandle.classList.contains('image-drag-handle')) { - console.log('Removing existing drag handle') - dragHandle.remove() - } - }, 0) }) } }, 0) @@ -1397,21 +1462,34 @@ defineExpose({ // 为图片添加拖拽事件监听器 setTimeout(() => { console.log('Adding drag event listeners to images in setContent') - const imageElements = editorRef.value.querySelectorAll('img.editor-image') - console.log('Found images in setContent:', imageElements.length) - imageElements.forEach(img => { + const imageContainers = editorRef.value.querySelectorAll('.image-container') + console.log('Found image containers in setContent:', imageContainers.length) + imageContainers.forEach(container => { + const img = container.querySelector('img.editor-image') + if (!img) return + console.log('Adding touch listeners to image in setContent:', img) // 先移除可能已有的事件监听器，避免重复 - img.removeEventListener('touchstart', handleTouchStart) - img.removeEventListener('touchmove', handleTouchMove) - img.removeEventListener('touchend', handleTouchEnd) - img.removeEventListener('touchcancel', handleTouchCancel) + container.removeEventListener('touchstart', handleTouchStart) + container.removeEventListener('touchmove', handleTouchMove) + container.removeEventListener('touchend', handleTouchEnd) + container.removeEventListener('touchcancel', handleTouchCancel) // 重新添加事件监听器 - img.addEventListener('touchstart', handleTouchStart) - img.addEventListener('touchmove', handleTouchMove) - img.addEventListener('touchend', handleTouchEnd) - img.addEventListener('touchcancel', handleTouchCancel) + container.addEventListener('touchstart', handleTouchStart) + container.addEventListener('touchmove', handleTouchMove) + container.addEventListener('touchend', handleTouchEnd) + container.addEventListener('touchcancel', handleTouchCancel) + + // 为删除按钮添加点击事件 + const deleteBtn = container.querySelector('.image-delete-btn') + if (deleteBtn) { + deleteBtn.addEventListener('click', function(e) { + e.stopPropagation(); + container.remove(); + handleInput(); + }); + } }) }, 0) } catch (error) { @@ -1437,21 +1515,34 @@ defineExpose({ // 为图片添加拖拽事件监听器 setTimeout(() => { console.log('Adding drag event listeners to images in delayed setContent') - const imageElements = editorRef.value.querySelectorAll('img.editor-image') - console.log('Found images in delayed setContent:', imageElements.length) - imageElements.forEach(img => { + const imageContainers = editorRef.value.querySelectorAll('.image-container') + console.log('Found image containers in delayed setContent:', imageContainers.length) + imageContainers.forEach(container => { + const img = container.querySelector('img.editor-image') + if (!img) return + console.log('Adding touch listeners to image in delayed setContent:', img) // 先移除可能已有的事件监听器，避免重复 - img.removeEventListener('touchstart', handleTouchStart) - img.removeEventListener('touchmove', handleTouchMove) - img.removeEventListener('touchend', handleTouchEnd) - img.removeEventListener('touchcancel', handleTouchCancel) + container.removeEventListener('touchstart', handleTouchStart) + container.removeEventListener('touchmove', handleTouchMove) + container.removeEventListener('touchend', handleTouchEnd) + container.removeEventListener('touchcancel', handleTouchCancel) // 重新添加事件监听器 - img.addEventListener('touchstart', handleTouchStart) - img.addEventListener('touchmove', handleTouchMove) - img.addEventListener('touchend', handleTouchEnd) - img.addEventListener('touchcancel', handleTouchCancel) + container.addEventListener('touchstart', handleTouchStart) + container.addEventListener('touchmove', handleTouchMove) + container.addEventListener('touchend', handleTouchEnd) + container.addEventListener('touchcancel', handleTouchCancel) + + // 为删除按钮添加点击事件 + const deleteBtn = container.querySelector('.image-delete-btn') + if (deleteBtn) { + deleteBtn.addEventListener('click', function(e) { + e.stopPropagation(); + container.remove(); + handleInput(); + }); + } }) }, 0) } catch (error) { @@ -1671,11 +1762,16 @@ defineExpose({ text-align: center; } +:deep(.editor-content .image-container) { + display: inline-block; + position: relative; + margin: calc((var(--editor-line-height, 1.6) * 10) * 1px) auto; +} + :deep(.editor-content .editor-image) { max-width: 100%; height: auto; display: block; - margin: calc((var(--editor-line-height, 1.6) * 10) * 1px) auto; object-fit: cover; box-sizing: border-box; border: 0.625rem solid white; @@ -1692,6 +1788,18 @@ defineExpose({ -webkit-tap-highlight-color: transparent; } +:deep(.editor-content .image-delete-btn) { + position: absolute; + top: 8px; + right: 8px; + width: 24px; + height: 24px; + cursor: pointer; + z-index: 10; + display: none; + transition: opacity 0.2s ease; +} + :deep(.editor-content .editor-image.draggable) { cursor: move; } From ae035b5786bce659774eae4c1c6bcfdff3840ef9 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 10:37:51 +0800 Subject: [PATCH 10/37] =?UTF-8?q?\"fix:=20=E4=BF=AE=E5=A4=8D=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E6=8B=96=E6=8B=BD=E4=BA=8B=E4=BB=B6=E7=9B=91=E5=90=AC?= =?UTF-8?q?=E5=99=A8=E9=94=99=E8=AF=AF=EF=BC=8C=E7=A7=BB=E9=99=A4=E6=9C=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E7=9A=84=E5=87=BD=E6=95=B0=E5=BC=95=E7=94=A8?= =?UTF-8?q?\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 30 ++++++++++++++++++++++-------- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index 0893e8d..a3348f6 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -73,14 +73,28 @@ onMounted(() => { // 为已有图片添加拖拽事件监听器 setTimeout(() => { console.log('Adding drag event listeners to existing images') - const imageElements = editorRef.value.querySelectorAll('img.editor-image') - console.log('Found existing images:', imageElements.length) - imageElements.forEach(img => { - console.log('Adding drag listeners to image:', img) - img.addEventListener('dragstart', handleImageDragStart) - img.addEventListener('dragover', handleImageDragOver) - img.addEventListener('drop', handleImageDrop) - img.addEventListener('dragend', handleImageDragEnd) + const imageContainers = editorRef.value.querySelectorAll('.image-container') + console.log('Found existing image containers:', imageContainers.length) + imageContainers.forEach(container => { + const img = container.querySelector('img.editor-image') + if (!img) return + + console.log('Adding touch listeners to image:', img) + // 添加触摸事件监听器 + container.addEventListener('touchstart', handleTouchStart) + container.addEventListener('touchmove', handleTouchMove) + container.addEventListener('touchend', handleTouchEnd) + container.addEventListener('touchcancel', handleTouchCancel) + + // 为删除按钮添加点击事件 + const deleteBtn = container.querySelector('.image-delete-btn') + if (deleteBtn) { + deleteBtn.addEventListener('click', function(e) { + e.stopPropagation(); + container.remove(); + handleInput(); + }); + } }) }, 0) }) From 52a706843c7112beb548896fe1e49c3199dabd60 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 10:41:00 +0800 Subject: [PATCH 11/37] =?UTF-8?q?\"feat:=20=E4=BC=98=E5=8C=96=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=9B=BE=E7=89=87=E5=88=A0=E9=99=A4=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E4=BA=A4=E4=BA=92=EF=BC=8C=E4=BD=BF=E7=94=A8=E8=A7=A6?= =?UTF-8?q?=E6=91=B8=E4=BA=8B=E4=BB=B6=E6=9B=BF=E4=BB=A3=E9=BC=A0=E6=A0=87?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 113 +++++++++++++++++++++++++++--- 1 file changed, 103 insertions(+), 10 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index a3348f6..177e59b 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -95,6 +95,35 @@ onMounted(() => { handleInput(); }); } + + // 为图片容器添加触摸事件以显示/隐藏删除按钮 + container.addEventListener('touchstart', function(e) { + // 防止与拖拽功能冲突 + if (!dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } + } + }); + + // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） + container.addEventListener('click', function(e) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } + }); }) }, 0) }) @@ -735,6 +764,7 @@ const insertImage = () => { deleteBtn.style.zIndex = '10' deleteBtn.style.display = 'none' // 默认隐藏 deleteBtn.style.transition = 'opacity 0.2s ease' + deleteBtn.style.touchAction = 'manipulation' // 优化触摸体验 // 将图片和删除按钮添加到容器中 imgContainer.appendChild(img) @@ -798,13 +828,29 @@ const insertImage = () => { handleInput(); }); - // 为图片容器添加鼠标悬停事件以显示/隐藏删除按钮 - imgContainer.addEventListener('mouseenter', function() { - deleteBtn.style.display = 'block'; + // 为图片容器添加触摸事件以显示/隐藏删除按钮 + imgContainer.addEventListener('touchstart', function(e) { + // 防止与拖拽功能冲突 + if (!dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } }); - imgContainer.addEventListener('mouseleave', function() { - deleteBtn.style.display = 'none'; + // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） + imgContainer.addEventListener('click', function(e) { + 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') @@ -1444,13 +1490,31 @@ const adjustExistingImages = () => { }); } - // 为图片容器添加鼠标悬停事件以显示/隐藏删除按钮 - container.addEventListener('mouseenter', function() { - if (deleteBtn) deleteBtn.style.display = 'block'; + // 为图片容器添加触摸事件以显示/隐藏删除按钮 + container.addEventListener('touchstart', function(e) { + // 防止与拖拽功能冲突 + if (!dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } }); - container.addEventListener('mouseleave', function() { - if (deleteBtn) deleteBtn.style.display = 'none'; + // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） + container.addEventListener('click', function(e) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } }); img.setAttribute('data-touch-listeners', 'true') @@ -1504,6 +1568,35 @@ defineExpose({ handleInput(); }); } + + // 为图片容器添加触摸事件以显示/隐藏删除按钮 + container.addEventListener('touchstart', function(e) { + // 防止与拖拽功能冲突 + if (!dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } + } + }); + + // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） + container.addEventListener('click', function(e) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } + }); }) }, 0) } catch (error) { From 51809ad7572748292eefbe05d8a84205d7680214 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 10:43:17 +0800 Subject: [PATCH 12/37] =?UTF-8?q?\"fix:=20=E4=BF=AE=E5=A4=8D=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E5=88=A0=E9=99=A4=E6=8C=89=E9=92=AE=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E5=92=8C=E6=8B=96=E6=8B=BD=E5=8A=9F=E8=83=BD=E5=86=B2=E7=AA=81?= =?UTF-8?q?=E9=97=AE=E9=A2=98\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 71 ++++++++++++++++++++----------- 1 file changed, 46 insertions(+), 25 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index 177e59b..a74dfea 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -809,13 +809,7 @@ const insertImage = () => { } tempImg.src = imageDataUrl - // 添加触摸事件监听器实现拖拽功能 - img.addEventListener('touchstart', handleTouchStart) - img.addEventListener('touchmove', handleTouchMove) - img.addEventListener('touchend', handleTouchEnd) - img.addEventListener('touchcancel', handleTouchCancel) - - // 为图片容器添加事件监听器 + // 为图片容器添加事件监听器（用于拖拽功能） imgContainer.addEventListener('touchstart', handleTouchStart) imgContainer.addEventListener('touchmove', handleTouchMove) imgContainer.addEventListener('touchend', handleTouchEnd) @@ -829,18 +823,7 @@ const insertImage = () => { }); // 为图片容器添加触摸事件以显示/隐藏删除按钮 - imgContainer.addEventListener('touchstart', function(e) { - // 防止与拖拽功能冲突 - if (!dragState.value.isLongPress) { - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; - } - } - }); + // 注意：这个事件监听器需要在拖拽事件监听器之前添加，以确保正确处理 // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） imgContainer.addEventListener('click', function(e) { @@ -946,14 +929,52 @@ const handleKeydown = e => { // 处理触摸开始事件 const handleTouchStart = (e) => { - const img = e.target - if (!img.classList.contains('editor-image')) return + // 获取触摸目标 + const target = e.target + + // 检查目标是否为图片容器或图片 + let imgContainer = null + let img = null + + if (target.classList.contains('image-container')) { + imgContainer = target + img = target.querySelector('.editor-image') + } else if (target.classList.contains('editor-image')) { + img = target + imgContainer = target.parentElement + } else { + // 如果触摸的不是图片或图片容器，直接返回 + return + } + + // 检查是否触摸的是删除按钮 + if (target.classList.contains('image-delete-btn')) { + // 如果是删除按钮，让事件正常处理 + return + } + + // 如果当前没有处于长按拖拽状态，切换删除按钮的显示状态 + if (!dragState.value.isLongPress) { + const deleteBtn = imgContainer.querySelector('.image-delete-btn') + if (deleteBtn) { + // 切换删除按钮的显示状态 + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block' + } else { + deleteBtn.style.display = 'none' + } + // 如果只是简单的点击（非长按），我们不阻止事件继续传播 + // 这样可以允许删除按钮的点击事件正常处理 + } + } // 防止图片被选中 - img.style.userSelect = 'none' - img.style.webkitUserSelect = 'none' - img.style.mozUserSelect = 'none' - img.style.msUserSelect = 'none' + if (img) { + img.style.userSelect = 'none' + img.style.webkitUserSelect = 'none' + img.style.mozUserSelect = 'none' + img.style.msUserSelect = 'none' + } // 清除之前的定时器 if (dragState.value.longPressTimer) { From 72d1fa30d37cdd16f45b87bc8844e8550f229fb4 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 10:45:00 +0800 Subject: [PATCH 13/37] =?UTF-8?q?\"fix:=20=E9=87=8D=E6=96=B0=E8=AE=BE?= =?UTF-8?q?=E8=AE=A1=E8=A7=A6=E6=91=B8=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86?= =?UTF-8?q?=E9=80=BB=E8=BE=91=EF=BC=8C=E4=BF=AE=E5=A4=8D=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=92=8C=E6=8B=96=E6=8B=BD=E5=8A=9F=E8=83=BD?= =?UTF-8?q?\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 117 ++++++++++++------------------ 1 file changed, 45 insertions(+), 72 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index a74dfea..e8cfc91 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -96,9 +96,15 @@ onMounted(() => { }); } - // 为图片容器添加触摸事件以显示/隐藏删除按钮 - container.addEventListener('touchstart', function(e) { - // 防止与拖拽功能冲突 + // 为图片容器添加事件监听器（用于拖拽功能） + container.addEventListener('touchstart', handleTouchStart) + container.addEventListener('touchmove', handleTouchMove) + container.addEventListener('touchend', handleTouchEnd) + container.addEventListener('touchcancel', handleTouchCancel) + + // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） + container.addEventListener('click', function(e) { + // 如果当前没有处于拖拽状态，则切换删除按钮显示状态 if (!dragState.value.isLongPress) { e.stopPropagation(); // 切换删除按钮的显示状态 @@ -111,19 +117,6 @@ onMounted(() => { } } }); - - // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） - container.addEventListener('click', function(e) { - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn) { - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; - } - } - }); }) }, 0) }) @@ -809,12 +802,6 @@ const insertImage = () => { } tempImg.src = imageDataUrl - // 为图片容器添加事件监听器（用于拖拽功能） - imgContainer.addEventListener('touchstart', handleTouchStart) - imgContainer.addEventListener('touchmove', handleTouchMove) - imgContainer.addEventListener('touchend', handleTouchEnd) - imgContainer.addEventListener('touchcancel', handleTouchCancel) - // 为删除按钮添加点击事件 deleteBtn.addEventListener('click', function(e) { e.stopPropagation(); @@ -822,17 +809,23 @@ const insertImage = () => { handleInput(); }); - // 为图片容器添加触摸事件以显示/隐藏删除按钮 - // 注意：这个事件监听器需要在拖拽事件监听器之前添加，以确保正确处理 + // 为图片容器添加事件监听器（用于拖拽功能和删除按钮切换） + imgContainer.addEventListener('touchstart', handleTouchStart) + imgContainer.addEventListener('touchmove', handleTouchMove) + imgContainer.addEventListener('touchend', handleTouchEnd) + imgContainer.addEventListener('touchcancel', handleTouchCancel) // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） imgContainer.addEventListener('click', function(e) { - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; + // 如果当前没有处于拖拽状态，则切换删除按钮显示状态 + if (!dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } } }); @@ -932,6 +925,12 @@ const handleTouchStart = (e) => { // 获取触摸目标 const target = e.target + // 检查是否触摸的是删除按钮 + if (target.classList.contains('image-delete-btn')) { + // 如果是删除按钮，让事件正常处理 + return + } + // 检查目标是否为图片容器或图片 let imgContainer = null let img = null @@ -947,27 +946,6 @@ const handleTouchStart = (e) => { return } - // 检查是否触摸的是删除按钮 - if (target.classList.contains('image-delete-btn')) { - // 如果是删除按钮，让事件正常处理 - return - } - - // 如果当前没有处于长按拖拽状态，切换删除按钮的显示状态 - if (!dragState.value.isLongPress) { - const deleteBtn = imgContainer.querySelector('.image-delete-btn') - if (deleteBtn) { - // 切换删除按钮的显示状态 - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block' - } else { - deleteBtn.style.display = 'none' - } - // 如果只是简单的点击（非长按），我们不阻止事件继续传播 - // 这样可以允许删除按钮的点击事件正常处理 - } - } - // 防止图片被选中 if (img) { img.style.userSelect = 'none' @@ -993,11 +971,13 @@ const handleTouchStart = (e) => { dragState.value.currentY = e.touches[0].clientY // 添加拖拽样式 - img.classList.add('dragging') - img.style.opacity = '0.9' - img.style.transform = 'scale(0.98)' - img.style.zIndex = '999' - img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + if (img) { + img.classList.add('dragging') + img.style.opacity = '0.9' + img.style.transform = 'scale(0.98)' + img.style.zIndex = '999' + img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + } // 添加拖拽指示器 const indicator = document.createElement('div') @@ -1590,9 +1570,15 @@ defineExpose({ }); } - // 为图片容器添加触摸事件以显示/隐藏删除按钮 - container.addEventListener('touchstart', function(e) { - // 防止与拖拽功能冲突 + // 为图片容器添加事件监听器（用于拖拽功能） + container.addEventListener('touchstart', handleTouchStart) + container.addEventListener('touchmove', handleTouchMove) + container.addEventListener('touchend', handleTouchEnd) + container.addEventListener('touchcancel', handleTouchCancel) + + // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） + container.addEventListener('click', function(e) { + // 如果当前没有处于拖拽状态，则切换删除按钮显示状态 if (!dragState.value.isLongPress) { e.stopPropagation(); // 切换删除按钮的显示状态 @@ -1605,19 +1591,6 @@ defineExpose({ } } }); - - // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） - container.addEventListener('click', function(e) { - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn) { - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; - } - } - }); }) }, 0) } catch (error) { From be97920e8afbddaa8989bf02c95b166bc5184168 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 10:47:00 +0800 Subject: [PATCH 14/37] =?UTF-8?q?\"fix:=20=E6=94=B9=E8=BF=9B=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=9B=BE=E7=89=87=E4=BA=A4=E4=BA=92=EF=BC=8C?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=88=A0=E9=99=A4=E6=8C=89=E9=92=AE=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E5=92=8C=E6=8B=96=E6=8B=BD=E5=8A=9F=E8=83=BD\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 126 +++++++++++++++++++++++++++--- 1 file changed, 116 insertions(+), 10 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index e8cfc91..e4aea1c 100644 --- a/src/components/RichTextEditor.vue +++ b/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.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' // 优化触摸体验 + 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;' // 将图片和删除按钮添加到容器中 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') // 插入图片容器到当前光标位置 @@ -1015,6 +1064,43 @@ const handleTouchStart = (e) => { e.preventDefault() }, 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) => { @@ -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) { From a1b3fe7fb0373c9efa62bdda0d26aec98fe2491b Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 10:49:23 +0800 Subject: [PATCH 15/37] =?UTF-8?q?\"fix:=20=E4=BF=AE=E5=A4=8DhandleTouchSta?= =?UTF-8?q?rt=E5=87=BD=E6=95=B0=E4=B8=AD=E7=9A=84=E9=87=8D=E5=A4=8D?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=92=8C=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86?= =?UTF-8?q?=E9=97=AE=E9=A2=98\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index e4aea1c..d7653c7 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -1059,10 +1059,11 @@ const handleTouchStart = (e) => { if (navigator.vibrate) { navigator.vibrate(10) } - - // 阻止页面滚动 - e.preventDefault() }, 300) // 300毫秒长按触发拖拽 + + // 阻止页面滚动 + e.preventDefault() +} } // 添加拖拽指示器 From a55f8249ae3affb4ccc4b0773175dd6e1f38892a Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 10:50:22 +0800 Subject: [PATCH 16/37] =?UTF-8?q?\"fix:=20=E4=BF=AE=E5=A4=8DsetTimeout?= =?UTF-8?q?=E5=9B=9E=E8=B0=83=E5=87=BD=E6=95=B0=E4=B8=AD=E7=9A=84=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E5=AF=B9=E8=B1=A1=E5=BC=95=E7=94=A8=E9=97=AE=E9=A2=98?= =?UTF-8?q?\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index d7653c7..b525e53 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -1097,10 +1097,10 @@ const handleTouchStart = (e) => { if (navigator.vibrate) { navigator.vibrate(10) } - - // 阻止页面滚动 - e.preventDefault() }, 300) // 300毫秒长按触发拖拽 + + // 阻止页面滚动 + e.preventDefault() } // 处理触摸移动事件 From 1cb724acbd1db7e7a0ef638ebb2a9d6c9e2f1cb4 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 10:52:07 +0800 Subject: [PATCH 17/37] =?UTF-8?q?\"fix:=20=E4=BF=AE=E5=A4=8DhandleTouchSta?= =?UTF-8?q?rt=E5=87=BD=E6=95=B0=E4=B8=AD=E7=9A=84=E9=87=8D=E5=A4=8D?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=92=8C=E5=87=BD=E6=95=B0=E9=97=AD=E5=90=88?= =?UTF-8?q?=E9=97=AE=E9=A2=98\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 38 ------------------------------- 1 file changed, 38 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index b525e53..e1cd4df 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -1064,44 +1064,6 @@ const handleTouchStart = (e) => { // 阻止页面滚动 e.preventDefault() } -} - - // 添加拖拽指示器 - 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) - } - }, 300) // 300毫秒长按触发拖拽 - - // 阻止页面滚动 - e.preventDefault() -} // 处理触摸移动事件 const handleTouchMove = (e) => { From adf570d89f7c8964b8f446ab4f945696f78f384d Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 10:56:32 +0800 Subject: [PATCH 18/37] =?UTF-8?q?\"feat:=20=E6=92=A4=E5=9B=9E=E6=8B=96?= =?UTF-8?q?=E6=8B=BD=E5=8A=9F=E8=83=BD=E6=AD=A3=E5=B8=B8=E7=89=88=E6=9C=AC?= =?UTF-8?q?=E5=B9=B6=E9=87=8D=E6=96=B0=E6=B7=BB=E5=8A=A0=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=8A=9F=E8=83=BD\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 241 +++++++----------------------- 1 file changed, 58 insertions(+), 183 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index e1cd4df..342d772 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -96,64 +96,15 @@ onMounted(() => { }); } - // 为图片容器添加事件监听器（用于拖拽功能） - container.addEventListener('touchstart', handleTouchStart) - container.addEventListener('touchmove', handleTouchMove) - container.addEventListener('touchend', handleTouchEnd) - container.addEventListener('touchcancel', handleTouchCancel) - - // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） + // 为图片容器添加点击事件以显示/隐藏删除按钮 container.addEventListener('click', function(e) { - // 如果当前没有处于拖拽状态，则切换删除按钮显示状态 - if (!dragState.value.isLongPress) { - 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'; - } - } - } - }); - - // 为图片容器添加触摸事件以显示/隐藏删除按钮 - 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'; - } + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; } } }); @@ -833,6 +784,12 @@ const insertImage = () => { } tempImg.src = imageDataUrl + // 添加触摸事件监听器实现拖拽功能 + imgContainer.addEventListener('touchstart', handleTouchStart) + imgContainer.addEventListener('touchmove', handleTouchMove) + imgContainer.addEventListener('touchend', handleTouchEnd) + imgContainer.addEventListener('touchcancel', handleTouchCancel) + // 为删除按钮添加点击事件 deleteBtn.addEventListener('click', function(e) { e.stopPropagation(); @@ -840,41 +797,14 @@ const insertImage = () => { handleInput(); }); - // 为图片容器添加事件监听器（用于拖拽功能和删除按钮切换） - imgContainer.addEventListener('touchstart', handleTouchStart) - imgContainer.addEventListener('touchmove', handleTouchMove) - imgContainer.addEventListener('touchend', handleTouchEnd) - imgContainer.addEventListener('touchcancel', handleTouchCancel) - - // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） + // 为图片容器添加点击事件以显示/隐藏删除按钮 imgContainer.addEventListener('click', function(e) { - // 如果当前没有处于拖拽状态，则切换删除按钮显示状态 - if (!dragState.value.isLongPress) { - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; - } - } - }); - - // 为图片容器添加触摸事件以显示/隐藏删除按钮 - 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'; - } + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; } }); @@ -971,37 +901,14 @@ const handleKeydown = e => { // 处理触摸开始事件 const handleTouchStart = (e) => { - // 获取触摸目标 - const target = e.target - - // 检查是否触摸的是删除按钮 - if (target.classList.contains('image-delete-btn')) { - // 如果是删除按钮，让事件正常处理 - return - } - - // 检查目标是否为图片容器或图片 - let imgContainer = null - let img = null - - if (target.classList.contains('image-container')) { - imgContainer = target - img = target.querySelector('.editor-image') - } else if (target.classList.contains('editor-image')) { - img = target - imgContainer = target.parentElement - } else { - // 如果触摸的不是图片或图片容器，直接返回 - return - } + const img = e.target + if (!img.classList.contains('editor-image')) return // 防止图片被选中 - if (img) { - img.style.userSelect = 'none' - img.style.webkitUserSelect = 'none' - img.style.mozUserSelect = 'none' - img.style.msUserSelect = 'none' - } + img.style.userSelect = 'none' + img.style.webkitUserSelect = 'none' + img.style.mozUserSelect = 'none' + img.style.msUserSelect = 'none' // 清除之前的定时器 if (dragState.value.longPressTimer) { @@ -1020,13 +927,11 @@ const handleTouchStart = (e) => { dragState.value.currentY = e.touches[0].clientY // 添加拖拽样式 - if (img) { - img.classList.add('dragging') - img.style.opacity = '0.9' - img.style.transform = 'scale(0.98)' - img.style.zIndex = '999' - img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' - } + img.classList.add('dragging') + img.style.opacity = '0.9' + img.style.transform = 'scale(0.98)' + img.style.zIndex = '999' + img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' // 添加拖拽指示器 const indicator = document.createElement('div') @@ -1059,10 +964,10 @@ const handleTouchStart = (e) => { if (navigator.vibrate) { navigator.vibrate(10) } + + // 阻止页面滚动 + e.preventDefault() }, 300) // 300毫秒长按触发拖拽 - - // 阻止页面滚动 - e.preventDefault() } // 处理触摸移动事件 @@ -1247,7 +1152,7 @@ const checkAndSwapImages = (draggedImg, deltaY) => { // 检查是否与目标图片重叠，使用更精确的碰撞检测 // 当拖拽图片覆盖目标图片高度的三分之二时触发排序 - const overlapThreshold = targetRect.height * 0.27 + const overlapThreshold = targetRect.height * 0.67 const distance = Math.abs(draggedCenterY - targetCenterY) if (distance < overlapThreshold) { @@ -1540,21 +1445,7 @@ const adjustExistingImages = () => { }); } - // 为图片容器添加触摸事件以显示/隐藏删除按钮 - container.addEventListener('touchstart', function(e) { - // 防止与拖拽功能冲突 - if (!dragState.value.isLongPress) { - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; - } - } - }); - - // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） + // 为图片容器添加点击事件以显示/隐藏删除按钮 container.addEventListener('click', function(e) { e.stopPropagation(); // 切换删除按钮的显示状态 @@ -1619,44 +1510,15 @@ defineExpose({ }); } - // 为图片容器添加事件监听器（用于拖拽功能） - container.addEventListener('touchstart', handleTouchStart) - container.addEventListener('touchmove', handleTouchMove) - container.addEventListener('touchend', handleTouchEnd) - container.addEventListener('touchcancel', handleTouchCancel) - - // 为图片容器添加点击事件以显示/隐藏删除按钮（用于桌面端测试） + // 为图片容器添加点击事件以显示/隐藏删除按钮 container.addEventListener('click', function(e) { - // 如果当前没有处于拖拽状态，则切换删除按钮显示状态 - if (!dragState.value.isLongPress) { - 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'; - } + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; } } }); @@ -1713,6 +1575,19 @@ defineExpose({ handleInput(); }); } + + // 为图片容器添加点击事件以显示/隐藏删除按钮 + container.addEventListener('click', function(e) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } + } + }); }) }, 0) } catch (error) { From fddb131fcb7b1d5a9ba987b4218f20cdfd6aa2c7 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 11:31:55 +0800 Subject: [PATCH 19/37] =?UTF-8?q?\"fix:=20=E4=BF=AE=E5=A4=8D=E6=8B=96?= =?UTF-8?q?=E6=8B=BD=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BD=BF=E5=85=B6=E9=80=82?= =?UTF-8?q?=E9=85=8D=E5=9B=BE=E7=89=87=E5=AE=B9=E5=99=A8=E7=BB=93=E6=9E=84?= =?UTF-8?q?\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 47 ++++++++++++++++++++++--------- 1 file changed, 33 insertions(+), 14 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index 342d772..ee6c94e 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -901,14 +901,31 @@ const handleKeydown = e => { // 处理触摸开始事件 const handleTouchStart = (e) => { - const img = e.target - if (!img.classList.contains('editor-image')) return + // 获取触摸目标 + const target = e.target + + // 检查目标是否为图片容器或图片 + let imgContainer = null + let img = null + + if (target.classList.contains('image-container')) { + imgContainer = target + img = target.querySelector('.editor-image') + } else if (target.classList.contains('editor-image')) { + img = target + imgContainer = target.parentElement + } else { + // 如果触摸的不是图片或图片容器，直接返回 + return + } // 防止图片被选中 - img.style.userSelect = 'none' - img.style.webkitUserSelect = 'none' - img.style.mozUserSelect = 'none' - img.style.msUserSelect = 'none' + if (img) { + img.style.userSelect = 'none' + img.style.webkitUserSelect = 'none' + img.style.mozUserSelect = 'none' + img.style.msUserSelect = 'none' + } // 清除之前的定时器 if (dragState.value.longPressTimer) { @@ -927,11 +944,13 @@ const handleTouchStart = (e) => { dragState.value.currentY = e.touches[0].clientY // 添加拖拽样式 - img.classList.add('dragging') - img.style.opacity = '0.9' - img.style.transform = 'scale(0.98)' - img.style.zIndex = '999' - img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + if (img) { + img.classList.add('dragging') + img.style.opacity = '0.9' + img.style.transform = 'scale(0.98)' + img.style.zIndex = '999' + img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + } // 添加拖拽指示器 const indicator = document.createElement('div') @@ -964,10 +983,10 @@ const handleTouchStart = (e) => { if (navigator.vibrate) { navigator.vibrate(10) } - - // 阻止页面滚动 - e.preventDefault() }, 300) // 300毫秒长按触发拖拽 + + // 阻止页面滚动 + e.preventDefault() } // 处理触摸移动事件 From ec6f945f4e73289a5b4466f67643f5c84d0231bd Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 11:38:37 +0800 Subject: [PATCH 20/37] =?UTF-8?q?\"feat:=20=E6=B7=BB=E5=8A=A0=E5=88=A0?= =?UTF-8?q?=E9=99=A4=E6=8C=89=E9=92=AE=E5=8A=9F=E8=83=BD=EF=BC=8C=E7=9F=AD?= =?UTF-8?q?=E6=8C=89=E5=9B=BE=E7=89=87=E6=98=BE=E7=A4=BA/=E9=9A=90?= =?UTF-8?q?=E8=97=8F=E5=88=A0=E9=99=A4=E6=8C=89=E9=92=AE\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 182 +++++++++++++++++------------- 1 file changed, 104 insertions(+), 78 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index ee6c94e..6ea3b1c 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -96,15 +96,24 @@ onMounted(() => { }); } - // 为图片容器添加点击事件以显示/隐藏删除按钮 - container.addEventListener('click', function(e) { - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn) { - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; + // 为图片容器添加短按事件以显示/隐藏删除按钮 + let touchStartTime = 0; + container.addEventListener('touchstart', function(e) { + touchStartTime = Date.now(); + }); + + container.addEventListener('touchend', function(e) { + const touchDuration = Date.now() - touchStartTime; + // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 + if (touchDuration < 200 && !dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } } } }); @@ -797,14 +806,23 @@ const insertImage = () => { handleInput(); }); - // 为图片容器添加点击事件以显示/隐藏删除按钮 - imgContainer.addEventListener('click', function(e) { - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; + // 为图片容器添加短按事件以显示/隐藏删除按钮 + let touchStartTime = 0; + imgContainer.addEventListener('touchstart', function(e) { + touchStartTime = Date.now(); + }); + + imgContainer.addEventListener('touchend', function(e) { + const touchDuration = Date.now() - touchStartTime; + // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 + if (touchDuration < 200 && !dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } } }); @@ -901,31 +919,14 @@ const handleKeydown = e => { // 处理触摸开始事件 const handleTouchStart = (e) => { - // 获取触摸目标 - const target = e.target - - // 检查目标是否为图片容器或图片 - let imgContainer = null - let img = null - - if (target.classList.contains('image-container')) { - imgContainer = target - img = target.querySelector('.editor-image') - } else if (target.classList.contains('editor-image')) { - img = target - imgContainer = target.parentElement - } else { - // 如果触摸的不是图片或图片容器，直接返回 - return - } + const img = e.target + if (!img.classList.contains('editor-image')) return // 防止图片被选中 - if (img) { - img.style.userSelect = 'none' - img.style.webkitUserSelect = 'none' - img.style.mozUserSelect = 'none' - img.style.msUserSelect = 'none' - } + img.style.userSelect = 'none' + img.style.webkitUserSelect = 'none' + img.style.mozUserSelect = 'none' + img.style.msUserSelect = 'none' // 清除之前的定时器 if (dragState.value.longPressTimer) { @@ -944,13 +945,11 @@ const handleTouchStart = (e) => { dragState.value.currentY = e.touches[0].clientY // 添加拖拽样式 - if (img) { - img.classList.add('dragging') - img.style.opacity = '0.9' - img.style.transform = 'scale(0.98)' - img.style.zIndex = '999' - img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' - } + img.classList.add('dragging') + img.style.opacity = '0.9' + img.style.transform = 'scale(0.98)' + img.style.zIndex = '999' + img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' // 添加拖拽指示器 const indicator = document.createElement('div') @@ -983,10 +982,10 @@ const handleTouchStart = (e) => { if (navigator.vibrate) { navigator.vibrate(10) } + + // 阻止页面滚动 + e.preventDefault() }, 300) // 300毫秒长按触发拖拽 - - // 阻止页面滚动 - e.preventDefault() } // 处理触摸移动事件 @@ -1439,7 +1438,7 @@ const adjustExistingImages = () => { } }) - // 为现有图片添加拖拽功能 + // 为现有图片添加拖拽功能和删除按钮功能 imageContainers.forEach(container => { const img = container.querySelector('img.editor-image') if (!img) return @@ -1464,15 +1463,24 @@ const adjustExistingImages = () => { }); } - // 为图片容器添加点击事件以显示/隐藏删除按钮 - container.addEventListener('click', function(e) { - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn) { - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; + // 为图片容器添加短按事件以显示/隐藏删除按钮 + let touchStartTime = 0; + container.addEventListener('touchstart', function(e) { + touchStartTime = Date.now(); + }); + + container.addEventListener('touchend', function(e) { + const touchDuration = Date.now() - touchStartTime; + // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 + if (touchDuration < 200 && !dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } } } }); @@ -1529,15 +1537,24 @@ defineExpose({ }); } - // 为图片容器添加点击事件以显示/隐藏删除按钮 - container.addEventListener('click', function(e) { - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn) { - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; + // 为图片容器添加短按事件以显示/隐藏删除按钮 + let touchStartTime = 0; + container.addEventListener('touchstart', function(e) { + touchStartTime = Date.now(); + }); + + container.addEventListener('touchend', function(e) { + const touchDuration = Date.now() - touchStartTime; + // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 + if (touchDuration < 200 && !dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } } } }); @@ -1595,15 +1612,24 @@ defineExpose({ }); } - // 为图片容器添加点击事件以显示/隐藏删除按钮 - container.addEventListener('click', function(e) { - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn) { - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; + // 为图片容器添加短按事件以显示/隐藏删除按钮 + let touchStartTime = 0; + container.addEventListener('touchstart', function(e) { + touchStartTime = Date.now(); + }); + + container.addEventListener('touchend', function(e) { + const touchDuration = Date.now() - touchStartTime; + // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 + if (touchDuration < 200 && !dragState.value.isLongPress) { + e.stopPropagation(); + // 切换删除按钮的显示状态 + if (deleteBtn) { + if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { + deleteBtn.style.display = 'block'; + } else { + deleteBtn.style.display = 'none'; + } } } }); From e8bf63da7903b125cd305a839c13812de5793fe0 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 11:44:03 +0800 Subject: [PATCH 21/37] =?UTF-8?q?\"fix:=20=E4=BF=AE=E5=A4=8D=E5=88=A0?= =?UTF-8?q?=E9=99=A4=E6=8C=89=E9=92=AE=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E8=A7=A6=E6=91=B8=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E6=94=AF=E6=8C=81\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index 6ea3b1c..a78d961 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -94,6 +94,12 @@ onMounted(() => { container.remove(); handleInput(); }); + + deleteBtn.addEventListener('touchend', function(e) { + e.stopPropagation(); + container.remove(); + handleInput(); + }); } // 为图片容器添加短按事件以显示/隐藏删除按钮 @@ -799,13 +805,19 @@ const insertImage = () => { imgContainer.addEventListener('touchend', handleTouchEnd) imgContainer.addEventListener('touchcancel', handleTouchCancel) - // 为删除按钮添加点击事件 + // 为删除按钮添加点击事件（鼠标和触摸） deleteBtn.addEventListener('click', function(e) { e.stopPropagation(); imgContainer.remove(); handleInput(); }); + deleteBtn.addEventListener('touchend', function(e) { + e.stopPropagation(); + imgContainer.remove(); + handleInput(); + }); + // 为图片容器添加短按事件以显示/隐藏删除按钮 let touchStartTime = 0; imgContainer.addEventListener('touchstart', function(e) { @@ -1461,6 +1473,12 @@ const adjustExistingImages = () => { container.remove(); handleInput(); }); + + deleteBtn.addEventListener('touchend', function(e) { + e.stopPropagation(); + container.remove(); + handleInput(); + }); } // 为图片容器添加短按事件以显示/隐藏删除按钮 @@ -1535,6 +1553,12 @@ defineExpose({ container.remove(); handleInput(); }); + + deleteBtn.addEventListener('touchend', function(e) { + e.stopPropagation(); + container.remove(); + handleInput(); + }); } // 为图片容器添加短按事件以显示/隐藏删除按钮 From 5e06278ded356016ad4129d915278d75ef56f249 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 13:49:59 +0800 Subject: [PATCH 22/37] =?UTF-8?q?"=E4=BF=AE=E5=A4=8D=E6=89=93=E5=BC=80?= =?UTF-8?q?=E5=B7=B2=E6=9C=89=E4=BE=BF=E7=AD=BE=E6=97=B6=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=97=A0=E6=B3=95=E6=98=BE=E7=A4=BA=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98=EF=BC=8C=E5=B9=B6=E6=B8=85=E7=90=86=E8=B0=83?= =?UTF-8?q?=E8=AF=95=E4=BB=A3=E7=A0=81"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 973 +++++++++++++++++++++++++----- 1 file changed, 817 insertions(+), 156 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index a78d961..c84bbee 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -29,6 +29,18 @@ const content = ref(props.modelValue || '') const isToolbarVisible = ref(false) const isKeyboardVisible = ref(false) const initialViewportHeight = ref(0) +const dragState = ref({ + isDragging: false, + draggedImage: null, + startX: 0, + startY: 0, + currentY: 0, + longPressTimer: null, + isLongPress: false, + indicator: null, + lastCheckTime: 0, + lastMoveTime: 0 +}) // 初始化编辑器内容 onMounted(() => { @@ -87,8 +99,21 @@ onMounted(() => { container.addEventListener('touchcancel', handleTouchCancel) // 为删除按钮添加点击事件 - const deleteBtn = container.querySelector('.image-delete-btn') + let deleteBtn = container.querySelector('.image-delete-btn') + if (!deleteBtn) { + // 如果删除按钮不存在，创建它 + console.log('Delete button not found in mounted hook, creating new one') + deleteBtn = document.createElement('div') + deleteBtn.className = 'image-delete-btn' + deleteBtn.style.cssText = 'position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; cursor: pointer; z-index: 1000; display: none; transition: opacity 0.2s ease; touch-action: manipulation;' + container.appendChild(deleteBtn) + } + if (deleteBtn) { + // 先移除可能已有的事件监听器，避免重复 + deleteBtn.removeEventListener('click', null) + deleteBtn.removeEventListener('touchend', null) + deleteBtn.addEventListener('click', function(e) { e.stopPropagation(); container.remove(); @@ -103,26 +128,63 @@ onMounted(() => { } // 为图片容器添加短按事件以显示/隐藏删除按钮 - let touchStartTime = 0; - container.addEventListener('touchstart', function(e) { - touchStartTime = Date.now(); - }); + // 先移除可能已有的事件监听器，避免重复 + const touchStartHandler = container._touchStartHandler; + const touchEndHandler = container._touchEndHandler; - container.addEventListener('touchend', function(e) { + if (touchStartHandler) { + container.removeEventListener('touchstart', touchStartHandler); + } + + if (touchEndHandler) { + container.removeEventListener('touchend', touchEndHandler); + } + + let touchStartTime = 0; + const newTouchStartHandler = function(e) { + touchStartTime = Date.now(); + }; + + const newTouchEndHandler = function(e) { const touchDuration = Date.now() - touchStartTime; + console.log('Touch end event triggered in mounted hook, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress); // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 if (touchDuration < 200 && !dragState.value.isLongPress) { e.stopPropagation(); + console.log('Short tap detected in mounted hook, toggling delete button visibility'); // 切换删除按钮的显示状态 if (deleteBtn) { - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { + console.log('Current delete button display style in mounted hook:', deleteBtn.style.display); + // 检查删除按钮当前是否可见 + const computedStyle = getComputedStyle(deleteBtn); + const isCurrentlyVisible = deleteBtn.style.display === 'block' || + computedStyle.display === 'block' || + (deleteBtn.style.display !== 'none' && + computedStyle.display !== 'none'); + + console.log('Delete button current styles in mounted hook - inline:', deleteBtn.style.display, 'computed:', computedStyle.display); + + if (isCurrentlyVisible) { deleteBtn.style.display = 'none'; + console.log('Delete button hidden in mounted hook'); + } else { + deleteBtn.style.display = 'block'; + console.log('Delete button displayed in mounted hook'); } + } else { + console.log('Delete button not found in mounted hook'); } + } else { + console.log('Not a short tap or isLongPress is true in mounted hook'); } - }); + }; + + container.addEventListener('touchstart', newTouchStartHandler); + container.addEventListener('touchend', newTouchEndHandler); + + // 保存事件处理函数的引用，以便后续移除 + container._touchStartHandler = newTouchStartHandler; + container._touchEndHandler = newTouchEndHandler; }) }, 0) }) @@ -134,6 +196,39 @@ onUnmounted(() => { } else { window.removeEventListener('resize', handleWindowResize) } + + // 清理所有图片容器的事件监听器 + if (editorRef.value) { + const imageContainers = editorRef.value.querySelectorAll('.image-container') + imageContainers.forEach(container => { + // 移除拖拽事件监听器 + container.removeEventListener('touchstart', handleTouchStart) + container.removeEventListener('touchmove', handleTouchMove) + container.removeEventListener('touchend', handleTouchEnd) + container.removeEventListener('touchcancel', handleTouchCancel) + + // 移除短按事件监听器 + const touchStartHandler = container._touchStartHandler; + const touchEndHandler = container._touchEndHandler; + + if (touchStartHandler) { + container.removeEventListener('touchstart', touchStartHandler); + delete container._touchStartHandler; + } + + if (touchEndHandler) { + container.removeEventListener('touchend', touchEndHandler); + delete container._touchEndHandler; + } + + // 移除删除按钮事件监听器 + const deleteBtn = container.querySelector('.image-delete-btn') + if (deleteBtn) { + deleteBtn.removeEventListener('click', null) + deleteBtn.removeEventListener('touchend', null) + } + }) + } }) // 工具栏配置 @@ -180,8 +275,8 @@ const tools = ref([ // 处理输入事件 const handleInput = () => { if (editorRef.value) { - // 获取编辑器内容 - let innerHTML = editorRef.value.innerHTML + // 获取编辑器内容（不清理，保持功能完整） + let innerHTML = editorRef.value.innerHTML; // 处理换行符，确保在段落之间有明确的分隔 innerHTML = innerHTML.replace(/<\/p>

/g, '

\n

') @@ -639,20 +734,6 @@ const insertTodoList = () => { } } -// 图片拖拽相关状态 -const dragState = ref({ - isDragging: false, - draggedImage: null, - startX: 0, - startY: 0, - currentY: 0, - longPressTimer: null, - isLongPress: false, - indicator: null, - lastCheckTime: 0, - lastMoveTime: 0 -}) - // 重置拖拽状态 const resetDragState = () => { // 清除长按定时器 @@ -723,9 +804,42 @@ const insertImage = () => { // 获取当前选区 const selection = window.getSelection() if (selection.rangeCount > 0) { - const range = selection.getRangeAt(0) + let range = selection.getRangeAt(0) console.log('Current range:', range) + // 检查选区是否在图片容器内部，如果是则调整到容器后面 + const startContainer = range.startContainer + let imageContainer = null + + // 如果startContainer是图片容器本身 + if (startContainer.classList && startContainer.classList.contains('image-container')) { + imageContainer = startContainer + } + // 如果startContainer是图片容器的子元素 + else if (startContainer.parentNode && startContainer.parentNode.classList && + startContainer.parentNode.classList.contains('image-container')) { + imageContainer = startContainer.parentNode + } + // 向上查找父元素 + else { + let parent = startContainer.parentNode + while (parent && parent !== editorRef.value) { + if (parent.classList && parent.classList.contains('image-container')) { + imageContainer = parent + break + } + parent = parent.parentNode + } + } + + // 如果选区在图片容器内部，调整到容器后面 + if (imageContainer) { + console.log('Selection is inside image container, adjusting range') + range = document.createRange() + range.setStartAfter(imageContainer) + range.collapse(true) + } + // 创建图片容器 const imgContainer = document.createElement('div') imgContainer.className = 'image-container' @@ -748,13 +862,18 @@ const insertImage = () => { img.style.background = 'var(--background-secondary)' img.style.position = 'relative' img.style.outline = 'none' // 移除默认焦点轮廓 + img.style.userSelect = 'none' // 防止选中 + img.style.webkitUserSelect = 'none' // 防止选中 + img.style.mozUserSelect = 'none' // 防止选中 + img.style.msUserSelect = 'none' // 防止选中 + img.style.webkitTouchCallout = 'none' // 防止长按弹出菜单 + img.style.webkitTapHighlightColor = 'transparent' // 防止点击高亮 img.draggable = true // 创建删除按钮 - const deleteBtn = document.createElement('img') - deleteBtn.src = '/assets/icons/drawable-xxhdpi/item_image_btn_unbrella_delete.png' + const deleteBtn = document.createElement('div') deleteBtn.className = 'image-delete-btn' - 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.cssText = 'position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; cursor: pointer; z-index: 1000; display: none; transition: opacity 0.2s ease; touch-action: manipulation;' // 将图片和删除按钮添加到容器中 imgContainer.appendChild(img) @@ -800,12 +919,23 @@ const insertImage = () => { tempImg.src = imageDataUrl // 添加触摸事件监听器实现拖拽功能 + // 先移除可能已有的事件监听器，避免重复 + imgContainer.removeEventListener('touchstart', handleTouchStart) + imgContainer.removeEventListener('touchmove', handleTouchMove) + imgContainer.removeEventListener('touchend', handleTouchEnd) + imgContainer.removeEventListener('touchcancel', handleTouchCancel) + + // 重新添加事件监听器 imgContainer.addEventListener('touchstart', handleTouchStart) imgContainer.addEventListener('touchmove', handleTouchMove) imgContainer.addEventListener('touchend', handleTouchEnd) imgContainer.addEventListener('touchcancel', handleTouchCancel) // 为删除按钮添加点击事件（鼠标和触摸） + // 先移除可能已有的事件监听器，避免重复 + deleteBtn.removeEventListener('click', null) + deleteBtn.removeEventListener('touchend', null) + deleteBtn.addEventListener('click', function(e) { e.stopPropagation(); imgContainer.remove(); @@ -820,23 +950,56 @@ const insertImage = () => { // 为图片容器添加短按事件以显示/隐藏删除按钮 let touchStartTime = 0; - imgContainer.addEventListener('touchstart', function(e) { + const touchStartHandler = function(e) { touchStartTime = Date.now(); - }); + }; - imgContainer.addEventListener('touchend', function(e) { + const touchEndHandler = function(e) { const touchDuration = Date.now() - touchStartTime; + console.log('Touch end event triggered, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress); // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 if (touchDuration < 200 && !dragState.value.isLongPress) { e.stopPropagation(); + console.log('Short tap detected, toggling delete button visibility'); // 切换删除按钮的显示状态 - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; + if (deleteBtn) { + console.log('Current delete button display style:', deleteBtn.style.display); + // 检查删除按钮当前是否可见 + const computedStyle = getComputedStyle(deleteBtn); + const isCurrentlyVisible = deleteBtn.style.display === 'block' || + computedStyle.display === 'block' || + (deleteBtn.style.display !== 'none' && + computedStyle.display !== 'none'); + + console.log('Delete button current styles - inline:', deleteBtn.style.display, 'computed:', computedStyle.display); + console.log('Delete button background image:', computedStyle.backgroundImage); + console.log('Delete button width:', computedStyle.width, 'height:', computedStyle.height); + console.log('Delete button position:', computedStyle.position); + console.log('Delete button z-index:', computedStyle.zIndex); + + if (isCurrentlyVisible) { + deleteBtn.style.display = 'none'; + console.log('Delete button hidden'); + } else { + deleteBtn.style.display = 'block'; + console.log('Delete button displayed'); + // 添加调试样式以确保可见 + deleteBtn.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'; // 半透明红色背景用于调试 + } } else { - deleteBtn.style.display = 'none'; + console.log('Delete button not found'); } + } else { + console.log('Not a short tap or isLongPress is true'); } - }); + }; + + imgContainer.addEventListener('touchstart', touchStartHandler); + imgContainer.addEventListener('touchend', touchEndHandler); + + // 保存事件处理函数的引用，以便后续移除 + imgContainer._touchStartHandler = touchStartHandler; + imgContainer._touchEndHandler = touchEndHandler; console.log('Added touch event listeners') @@ -852,16 +1015,27 @@ const insertImage = () => { const br = document.createElement('br') imgContainer.parentNode.insertBefore(br, imgContainer.nextSibling) console.log('Added line break after image container') + + // 修正选区位置，避免嵌套插入 + // 使用setTimeout确保DOM更新完成后再设置选区 + setTimeout(() => { + const newRange = document.createRange(); + newRange.setStartAfter(br); + newRange.collapse(true); + const sel = window.getSelection(); + sel.removeAllRanges(); + sel.addRange(newRange); + + // 重新聚焦到编辑器 + if (editorRef.value) { + editorRef.value.focus() + console.log('Focused editor') + } + }, 0); // 触发输入事件更新内容 handleInput() console.log('Handled input event') - - // 重新聚焦到编辑器 - if (editorRef.value) { - editorRef.value.focus() - console.log('Focused editor') - } } } reader.readAsDataURL(file) @@ -934,11 +1108,13 @@ const handleTouchStart = (e) => { const img = e.target if (!img.classList.contains('editor-image')) return - // 防止图片被选中 + // 防止图片被选中 - 在触摸开始时就应用 img.style.userSelect = 'none' img.style.webkitUserSelect = 'none' img.style.mozUserSelect = 'none' img.style.msUserSelect = 'none' + img.style.webkitTouchCallout = 'none' + img.style.webkitTapHighlightColor = 'transparent' // 清除之前的定时器 if (dragState.value.longPressTimer) { @@ -949,7 +1125,7 @@ const handleTouchStart = (e) => { dragState.value.startX = e.touches[0].clientX dragState.value.startY = e.touches[0].clientY - // 设置长按检测定时器（300毫秒） + // 设置长按检测定时器（500毫秒） dragState.value.longPressTimer = setTimeout(() => { dragState.value.isLongPress = true dragState.value.draggedImage = img @@ -958,10 +1134,10 @@ const handleTouchStart = (e) => { // 添加拖拽样式 img.classList.add('dragging') - img.style.opacity = '0.9' - img.style.transform = 'scale(0.98)' + img.style.opacity = '0.85' + img.style.transform = 'scale(0.96)' img.style.zIndex = '999' - img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + img.style.transition = 'all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)' // 添加拖拽指示器 const indicator = document.createElement('div') @@ -971,33 +1147,34 @@ const handleTouchStart = (e) => { 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.background = 'rgba(0, 0, 0, 0.85)' 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.style.transition = 'opacity 0.1s ease-out' + indicator.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.3)' indicator.textContent = '拖拽排序' document.body.appendChild(indicator) // 渐显指示器 setTimeout(() => { indicator.style.opacity = '1' - }, 5) + }, 1) // 保存指示器引用以便后续移除 dragState.value.indicator = indicator // 添加震动反馈（如果设备支持） if (navigator.vibrate) { - navigator.vibrate(10) + navigator.vibrate(15) } // 阻止页面滚动 e.preventDefault() - }, 300) // 300毫秒长按触发拖拽 + }, 500) // 500毫秒长按触发拖拽 } // 处理触摸移动事件 @@ -1011,13 +1188,13 @@ const handleTouchMove = (e) => { // 防止图片被选中 e.preventDefault() - // 如果还没有触发长按，检查是否移动过多（超过8px则取消长按） + // 如果还没有触发长按，检查是否移动过多（超过6px则取消长按） if (!dragState.value.isLongPress) { const deltaX = Math.abs(currentX - dragState.value.startX) const deltaY = Math.abs(currentY - dragState.value.startY) const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY) - if (distance > 8) { + if (distance > 6) { // 移动过多，取消长按 if (dragState.value.longPressTimer) { clearTimeout(dragState.value.longPressTimer) @@ -1036,9 +1213,12 @@ const handleTouchMove = (e) => { // 计算位移 const deltaY = dragState.value.currentY - dragState.value.startY - // 更新图片位置，添加缓动效果 - const easeFactor = 0.9 // 调整缓动因子使拖拽更跟手 - img.style.transform = `translateY(${deltaY * easeFactor}px) scale(0.98)` + // 使用requestAnimationFrame确保流畅的动画 + requestAnimationFrame(() => { + // 更新图片位置，添加缓动效果 + const easeFactor = 0.95 // 调整缓动因子使拖拽更跟手 + img.style.transform = `translateY(${deltaY * easeFactor}px) scale(0.96)` + }); // 使用节流优化，避免过于频繁的检查 if (!dragState.value.lastMoveTime) { @@ -1046,8 +1226,8 @@ const handleTouchMove = (e) => { } const now = Date.now() - // 限制检查频率为每25ms一次，提高响应速度 - if (now - dragState.value.lastMoveTime >= 25) { + // 限制检查频率为每16ms一次（约60fps），提高响应速度 + if (now - dragState.value.lastMoveTime >= 16) { dragState.value.lastMoveTime = now checkAndSwapImages(img, deltaY) } @@ -1069,26 +1249,26 @@ const handleTouchEnd = (e) => { // 重置拖拽状态 const img = dragState.value.draggedImage - // 添加释放动画 - img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + // 添加更流畅的释放动画 + img.style.transition = 'all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)' img.style.transform = 'translateY(0) scale(1)' img.style.opacity = '1' // 移除拖拽指示器 if (dragState.value.indicator) { const indicator = dragState.value.indicator - indicator.style.transition = 'opacity 0.15s ease-out' + indicator.style.transition = 'opacity 0.1s ease-out' indicator.style.opacity = '0' setTimeout(() => { if (indicator.parentNode) { indicator.parentNode.removeChild(indicator) } - }, 150) + }, 100) } // 添加震动反馈（如果设备支持） if (navigator.vibrate) { - navigator.vibrate(5) + navigator.vibrate(8) } // 延迟重置样式以显示动画 @@ -1098,7 +1278,7 @@ const handleTouchEnd = (e) => { img.style.zIndex = '' img.style.transition = '' } - }, 200) + }, 150) // 重置状态 dragState.value.isLongPress = false @@ -1128,20 +1308,20 @@ const handleTouchCancel = (e) => { const img = dragState.value.draggedImage // 添加取消动画 - img.style.transition = 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + img.style.transition = 'all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)' img.style.transform = 'translateY(0) scale(1)' img.style.opacity = '1' // 移除拖拽指示器 if (dragState.value.indicator) { const indicator = dragState.value.indicator - indicator.style.transition = 'opacity 0.15s ease-out' + indicator.style.transition = 'opacity 0.1s ease-out' indicator.style.opacity = '0' setTimeout(() => { if (indicator.parentNode) { indicator.parentNode.removeChild(indicator) } - }, 150) + }, 100) } // 延迟重置样式以显示动画 @@ -1151,7 +1331,7 @@ const handleTouchCancel = (e) => { img.style.zIndex = '' img.style.transition = '' } - }, 200) + }, 150) // 重置状态 dragState.value.isLongPress = false @@ -1170,7 +1350,7 @@ const checkAndSwapImages = (draggedImg, deltaY) => { // 计算拖拽图片的中心位置 const draggedRect = draggedImg.getBoundingClientRect() - const draggedCenterY = draggedRect.top + draggedRect.height / 2 + deltaY * 0.9 // 调整缓动因子以匹配触摸移动 + const draggedCenterY = draggedRect.top + draggedRect.height / 2 + deltaY * 0.95 // 调整缓动因子以匹配触摸移动 // 查找最近的图片进行交换 for (let i = 0; i < allImages.length; i++) { @@ -1181,8 +1361,8 @@ const checkAndSwapImages = (draggedImg, deltaY) => { const targetCenterY = targetRect.top + targetRect.height / 2 // 检查是否与目标图片重叠，使用更精确的碰撞检测 - // 当拖拽图片覆盖目标图片高度的三分之二时触发排序 - const overlapThreshold = targetRect.height * 0.67 + // 当拖拽图片覆盖目标图片高度的60%时触发排序 + const overlapThreshold = targetRect.height * 0.6 const distance = Math.abs(draggedCenterY - targetCenterY) if (distance < overlapThreshold) { @@ -1195,32 +1375,71 @@ const checkAndSwapImages = (draggedImg, deltaY) => { // 交换两张图片的位置 const swapImages = (img1, img2) => { + // 为交换添加平滑过渡效果 const parent1 = img1.parentNode const parent2 = img2.parentNode + // 添加交换动画类 + img1.classList.add('swap-animation') + img2.classList.add('swap-animation') + // 如果两张图片在同一父元素中 if (parent1 === parent2) { - // 直接交换DOM位置，避免复杂的动画导致的闪烁 - const tempMarker = document.createElement('div') - parent1.insertBefore(tempMarker, img1) - parent1.insertBefore(img1, img2) - parent1.insertBefore(img2, tempMarker) - tempMarker.remove() + // 计算两个图片的位置差 + const rect1 = img1.getBoundingClientRect() + const rect2 = img2.getBoundingClientRect() + const deltaY = rect2.top - rect1.top + + // 添加临时的变换动画 + img1.style.transform = `translateY(${deltaY}px)` + img2.style.transform = `translateY(${-deltaY}px)` + + // 在动画完成后交换DOM位置 + setTimeout(() => { + // 移除临时变换 + img1.style.transform = '' + img2.style.transform = '' + + // 移除交换动画类 + img1.classList.remove('swap-animation') + img2.classList.remove('swap-animation') + + // 交换DOM位置 + const tempMarker = document.createElement('div') + parent1.insertBefore(tempMarker, img1) + parent1.insertBefore(img1, img2) + parent1.insertBefore(img2, tempMarker) + tempMarker.remove() + + // 触发内容更新 + handleInput() + + // 自动退出排序模式，提高响应速度 + setTimeout(() => { + resetDragState() + }, 10) + }, 200) } else { // 不同父元素的情况（更复杂，需要特殊处理） // 这里简化处理，实际项目中可能需要更复杂的逻辑 + // 移除交换动画类 + img1.classList.remove('swap-animation') + img2.classList.remove('swap-animation') + const temp = document.createElement('div') parent1.insertBefore(temp, img1) parent2.insertBefore(img1, img2) parent1.insertBefore(img2, temp) temp.remove() + + // 触发内容更新 + handleInput() + + // 自动退出排序模式，提高响应速度 + setTimeout(() => { + resetDragState() + }, 10) } - - // 触发内容更新 - handleInput() - - // 自动退出排序模式 - resetDragState() } // 更新工具栏状态 @@ -1392,6 +1611,233 @@ const handleToolbarFocusOut = () => { }, 200) // 增加延迟时间，确保有足够时间处理点击事件 } +// 包装孤立的图片（没有被.image-container包装的图片） +const wrapOrphanedImages = () => { + if (!editorRef.value) return; + + // 查找所有没有被.image-container包装的图片 + const images = editorRef.value.querySelectorAll('img:not(.editor-image)'); + console.log('Found orphaned images:', images.length); + + images.forEach(img => { + // 检查图片是否已经在.image-container中 + if (img.closest('.image-container')) return; + + console.log('Wrapping orphaned image'); + + // 检查图片的父元素是否是.image-container，避免嵌套 + if (img.parentNode && img.parentNode.classList && img.parentNode.classList.contains('image-container')) { + console.log('Image is already in image-container, checking for delete button'); + // 确保图片有正确的类名 + img.className = 'editor-image'; + img.setAttribute('data-draggable', 'true'); + + // 为已存在的图片容器添加删除按钮事件监听器 + const imgContainer = img.parentNode; + const deleteBtn = imgContainer.querySelector('.image-delete-btn'); + if (deleteBtn) { + console.log('Found existing delete button, adding event listeners'); + // 先移除可能已有的事件监听器，避免重复 + deleteBtn.removeEventListener('click', null); + deleteBtn.removeEventListener('touchend', null); + + deleteBtn.addEventListener('click', function(e) { + e.stopPropagation(); + imgContainer.remove(); + handleInput(); + }); + + deleteBtn.addEventListener('touchend', function(e) { + e.stopPropagation(); + imgContainer.remove(); + handleInput(); + }); + + // 为图片容器添加短按事件以显示/隐藏删除按钮 + // 先移除可能已有的事件监听器，避免重复 + const touchStartHandler = imgContainer._touchStartHandler; + const touchEndHandler = imgContainer._touchEndHandler; + + if (touchStartHandler) { + imgContainer.removeEventListener('touchstart', touchStartHandler); + } + + if (touchEndHandler) { + imgContainer.removeEventListener('touchend', touchEndHandler); + } + + let touchStartTime = 0; + const newTouchStartHandler = function(e) { + touchStartTime = Date.now(); + }; + + const newTouchEndHandler = function(e) { + const touchDuration = Date.now() - touchStartTime; + console.log('Touch end event triggered for existing image, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress); + // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 + if (touchDuration < 200 && !dragState.value.isLongPress) { + e.stopPropagation(); + console.log('Short tap detected for existing image, toggling delete button visibility'); + // 切换删除按钮的显示状态 + if (deleteBtn) { + console.log('Current delete button display style for existing image:', deleteBtn.style.display); + // 检查删除按钮当前是否可见 + const computedStyle = getComputedStyle(deleteBtn); + const isCurrentlyVisible = deleteBtn.style.display === 'block' || + computedStyle.display === 'block' || + (deleteBtn.style.display !== 'none' && + computedStyle.display !== 'none'); + + console.log('Delete button current styles for existing image - inline:', deleteBtn.style.display, 'computed:', computedStyle.display); + + if (isCurrentlyVisible) { + deleteBtn.style.display = 'none'; + console.log('Delete button hidden for existing image'); + } else { + deleteBtn.style.display = 'block'; + console.log('Delete button displayed for existing image'); + } + } else { + console.log('Delete button not found for existing image'); + } + } else { + console.log('Not a short tap or isLongPress is true for existing image'); + } + }; + + imgContainer.addEventListener('touchstart', newTouchStartHandler); + imgContainer.addEventListener('touchend', newTouchEndHandler); + + // 保存事件处理函数的引用，以便后续移除 + imgContainer._touchStartHandler = newTouchStartHandler; + imgContainer._touchEndHandler = newTouchEndHandler; + } + return; + } + + // 创建图片容器 + const imgContainer = document.createElement('div'); + imgContainer.className = 'image-container'; + imgContainer.style.position = 'relative'; + imgContainer.style.display = 'inline-block'; + + // 设置图片样式 + img.className = 'editor-image'; + img.setAttribute('data-draggable', 'true'); + img.style.maxWidth = '100%'; + img.style.height = 'auto'; + img.style.display = 'block'; + img.style.objectFit = 'cover'; + img.style.boxSizing = 'border-box'; + img.style.border = '0.625rem solid white'; + img.style.borderRadius = '0.2rem'; + img.style.boxShadow = '0 1px 5px rgba(0, 0, 0, 0.18)'; + img.style.background = 'var(--background-secondary)'; + img.style.position = 'relative'; + img.style.outline = 'none'; + img.style.userSelect = 'none'; // 防止选中 + img.style.webkitUserSelect = 'none'; // 防止选中 + img.style.mozUserSelect = 'none'; // 防止选中 + img.style.msUserSelect = 'none'; // 防止选中 + img.style.webkitTouchCallout = 'none'; // 防止长按弹出菜单 + img.style.webkitTapHighlightColor = 'transparent'; // 防止点击高亮 + img.draggable = true; + + // 创建删除按钮 + const deleteBtn = document.createElement('div'); + deleteBtn.className = 'image-delete-btn'; + deleteBtn.style.cssText = 'position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; cursor: pointer; z-index: 1000; display: none; transition: opacity 0.2s ease; touch-action: manipulation;'; + + // 将图片和删除按钮添加到容器中 + imgContainer.appendChild(img); + imgContainer.appendChild(deleteBtn); + + // 替换原来的图片 + img.parentNode.replaceChild(imgContainer, img); + + // 为新包装的图片添加事件监听器 + // 先移除可能已有的事件监听器，避免重复 + imgContainer.removeEventListener('touchstart', handleTouchStart) + imgContainer.removeEventListener('touchmove', handleTouchMove) + imgContainer.removeEventListener('touchend', handleTouchEnd) + imgContainer.removeEventListener('touchcancel', handleTouchCancel) + + // 重新添加事件监听器 + imgContainer.addEventListener('touchstart', handleTouchStart) + imgContainer.addEventListener('touchmove', handleTouchMove) + imgContainer.addEventListener('touchend', handleTouchEnd) + imgContainer.addEventListener('touchcancel', handleTouchCancel) + + // 为删除按钮添加点击事件 + // 先移除可能已有的事件监听器，避免重复 + deleteBtn.removeEventListener('click', null) + deleteBtn.removeEventListener('touchend', null) + + deleteBtn.addEventListener('click', function(e) { + e.stopPropagation(); + imgContainer.remove(); + handleInput(); + }); + + deleteBtn.addEventListener('touchend', function(e) { + e.stopPropagation(); + imgContainer.remove(); + handleInput(); + }); + + // 为图片容器添加短按事件以显示/隐藏删除按钮 + let touchStartTime = 0; + const touchStartHandler = function(e) { + touchStartTime = Date.now(); + }; + + const touchEndHandler = function(e) { + const touchDuration = Date.now() - touchStartTime; + console.log('Touch end event triggered in wrapOrphanedImages, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress); + // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 + if (touchDuration < 200 && !dragState.value.isLongPress) { + e.stopPropagation(); + console.log('Short tap detected in wrapOrphanedImages, toggling delete button visibility'); + // 切换删除按钮的显示状态 + if (deleteBtn) { + console.log('Current delete button display style in wrapOrphanedImages:', deleteBtn.style.display); + // 检查删除按钮当前是否可见 + const computedStyle = getComputedStyle(deleteBtn); + const isCurrentlyVisible = deleteBtn.style.display === 'block' || + computedStyle.display === 'block' || + (deleteBtn.style.display !== 'none' && + computedStyle.display !== 'none'); + + console.log('Delete button current styles - inline:', deleteBtn.style.display, 'computed:', computedStyle.display); + console.log('Delete button background image:', computedStyle.backgroundImage); + console.log('Delete button width:', computedStyle.width, 'height:', computedStyle.height); + console.log('Delete button position:', computedStyle.position); + console.log('Delete button z-index:', computedStyle.zIndex); + + if (isCurrentlyVisible) { + deleteBtn.style.display = 'none'; + console.log('Delete button hidden in wrapOrphanedImages'); + } else { + deleteBtn.style.display = 'block'; + console.log('Delete button displayed in wrapOrphanedImages'); + } + } else { + console.log('Delete button not found in wrapOrphanedImages'); + } + } else { + console.log('Not a short tap or isLongPress is true in wrapOrphanedImages'); + } + }; + + imgContainer.addEventListener('touchstart', touchStartHandler); + imgContainer.addEventListener('touchend', touchEndHandler); + + // 保存事件处理函数的引用，以便后续移除 + imgContainer._touchStartHandler = touchStartHandler; + imgContainer._touchEndHandler = touchEndHandler; + }); +} + // 调整已有图片的高度 const adjustExistingImages = () => { console.log('Adjusting existing images') @@ -1456,64 +1902,152 @@ const adjustExistingImages = () => { if (!img) return console.log('Adding drag functionality to image:', img) - // 添加触摸事件监听器 - if (!img.hasAttribute('data-touch-listeners')) { - console.log('Adding touch event listeners') - // 为图片容器添加事件监听器 - container.addEventListener('touchstart', handleTouchStart) - container.addEventListener('touchmove', handleTouchMove) - container.addEventListener('touchend', handleTouchEnd) - container.addEventListener('touchcancel', handleTouchCancel) - - // 为删除按钮添加点击事件 - const deleteBtn = container.querySelector('.image-delete-btn') - if (deleteBtn) { - deleteBtn.addEventListener('click', function(e) { - e.stopPropagation(); - container.remove(); - handleInput(); - }); - - deleteBtn.addEventListener('touchend', function(e) { - e.stopPropagation(); - container.remove(); - handleInput(); - }); - } - - // 为图片容器添加短按事件以显示/隐藏删除按钮 - let touchStartTime = 0; - container.addEventListener('touchstart', function(e) { - touchStartTime = Date.now(); - }); - - container.addEventListener('touchend', function(e) { - const touchDuration = Date.now() - touchStartTime; - // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 - if (touchDuration < 200 && !dragState.value.isLongPress) { - e.stopPropagation(); - // 切换删除按钮的显示状态 - if (deleteBtn) { - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { - deleteBtn.style.display = 'none'; - } - } - } - }); - - img.setAttribute('data-touch-listeners', 'true') - console.log('Added touch event listeners') + // 为图片容器添加事件监听器（总是添加，确保功能正常） + // 先移除可能已有的事件监听器，避免重复 + container.removeEventListener('touchstart', handleTouchStart) + container.removeEventListener('touchmove', handleTouchMove) + container.removeEventListener('touchend', handleTouchEnd) + container.removeEventListener('touchcancel', handleTouchCancel) + + // 重新添加事件监听器 + container.addEventListener('touchstart', handleTouchStart) + container.addEventListener('touchmove', handleTouchMove) + container.addEventListener('touchend', handleTouchEnd) + container.addEventListener('touchcancel', handleTouchCancel) + + // 为删除按钮添加点击事件 + let deleteBtn = container.querySelector('.image-delete-btn') + if (!deleteBtn) { + // 如果删除按钮不存在，创建它 + console.log('Delete button not found, creating new one') + deleteBtn = document.createElement('div') + deleteBtn.className = 'image-delete-btn' + deleteBtn.style.cssText = 'position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; cursor: pointer; z-index: 1000; display: none; transition: opacity 0.2s ease; touch-action: manipulation;' + container.appendChild(deleteBtn) } + + if (deleteBtn) { + // 先移除可能已有的事件监听器，避免重复 + deleteBtn.removeEventListener('click', null) + deleteBtn.removeEventListener('touchend', null) + + deleteBtn.addEventListener('click', function(e) { + e.stopPropagation(); + container.remove(); + handleInput(); + }); + + deleteBtn.addEventListener('touchend', function(e) { + e.stopPropagation(); + container.remove(); + handleInput(); + }); + } + + // 为图片容器添加短按事件以显示/隐藏删除按钮 + // 先移除可能已有的事件监听器，避免重复 + const touchStartHandler = container._touchStartHandler; + const touchEndHandler = container._touchEndHandler; + + if (touchStartHandler) { + container.removeEventListener('touchstart', touchStartHandler); + } + + if (touchEndHandler) { + container.removeEventListener('touchend', touchEndHandler); + } + + let touchStartTime = 0; + const newTouchStartHandler = function(e) { + touchStartTime = Date.now(); + }; + + const newTouchEndHandler = function(e) { + const touchDuration = Date.now() - touchStartTime; + console.log('Touch end event triggered in adjustExistingImages, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress); + // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 + if (touchDuration < 200 && !dragState.value.isLongPress) { + e.stopPropagation(); + console.log('Short tap detected in adjustExistingImages, toggling delete button visibility'); + // 切换删除按钮的显示状态 + if (deleteBtn) { + console.log('Current delete button display style in adjustExistingImages:', deleteBtn.style.display); + // 检查删除按钮当前是否可见 + const computedStyle = getComputedStyle(deleteBtn); + const isCurrentlyVisible = deleteBtn.style.display === 'block' || + computedStyle.display === 'block' || + (deleteBtn.style.display !== 'none' && + computedStyle.display !== 'none'); + + console.log('Delete button current styles - inline:', deleteBtn.style.display, 'computed:', computedStyle.display); + + if (isCurrentlyVisible) { + deleteBtn.style.display = 'none'; + console.log('Delete button hidden in adjustExistingImages'); + } else { + deleteBtn.style.display = 'block'; + console.log('Delete button displayed in adjustExistingImages'); + } + } else { + console.log('Delete button not found in adjustExistingImages'); + } + } else { + console.log('Not a short tap or isLongPress is true in adjustExistingImages'); + } + }; + + container.addEventListener('touchstart', newTouchStartHandler); + container.addEventListener('touchend', newTouchEndHandler); + + // 保存事件处理函数的引用，以便后续移除 + container._touchStartHandler = newTouchStartHandler; + container._touchEndHandler = newTouchEndHandler; + + img.setAttribute('data-touch-listeners', 'true') + console.log('Added touch event listeners') }) } }, 0) } +// 清理动态添加的属性（仅在保存时移除临时属性，保留必要属性） +const cleanContentForSave = () => { + if (!editorRef.value) return content.value; + + // 创建一个临时的div来操作内容 + const tempDiv = document.createElement('div'); + tempDiv.innerHTML = editorRef.value.innerHTML; + + // 移除图片上的临时动态属性 + const images = tempDiv.querySelectorAll('img.editor-image'); + images.forEach(img => { + // 移除拖拽时的临时样式属性 + img.style.removeProperty('z-index'); + img.style.removeProperty('transition'); + img.style.removeProperty('transform'); + img.style.removeProperty('opacity'); + + // 移除拖拽时的临时类名 + img.classList.remove('dragging'); + img.classList.remove('swap-animation'); + + // 移除临时的数据属性（保留必要的属性如data-draggable） + img.removeAttribute('data-height-adjusted'); + img.removeAttribute('data-touch-listeners'); + }); + + // 移除拖拽指示器（如果存在） + const indicators = tempDiv.querySelectorAll('.drag-indicator'); + indicators.forEach(indicator => { + indicator.remove(); + }); + + return tempDiv.innerHTML; +}; + // 暴露方法给父组件 defineExpose({ - getContent: () => content.value, + getContent: () => cleanContentForSave(), setContent: newContent => { console.log('Setting content:', newContent) content.value = newContent || '' @@ -1521,6 +2055,14 @@ defineExpose({ try { editorRef.value.innerHTML = content.value console.log('Content set successfully in editorRef') + // 重置拖拽状态，确保isLongPress为false + dragState.value.isLongPress = false + dragState.value.draggedImage = null + dragState.value.startX = 0 + dragState.value.startY = 0 + dragState.value.currentY = 0 + // 确保所有图片都被正确包装在.image-container中 + wrapOrphanedImages() // 调整已有图片的高度并添加拖拽功能 adjustExistingImages() // 为图片添加拖拽事件监听器 @@ -1548,6 +2090,10 @@ defineExpose({ // 为删除按钮添加点击事件 const deleteBtn = container.querySelector('.image-delete-btn') if (deleteBtn) { + // 先移除可能已有的事件监听器，避免重复 + deleteBtn.removeEventListener('click', null) + deleteBtn.removeEventListener('touchend', null) + deleteBtn.addEventListener('click', function(e) { e.stopPropagation(); container.remove(); @@ -1562,26 +2108,72 @@ defineExpose({ } // 为图片容器添加短按事件以显示/隐藏删除按钮 - let touchStartTime = 0; - container.addEventListener('touchstart', function(e) { - touchStartTime = Date.now(); - }); + // 先移除可能已有的事件监听器，避免重复 + const touchStartHandler = container._touchStartHandler; + const touchEndHandler = container._touchEndHandler; - container.addEventListener('touchend', function(e) { + if (touchStartHandler) { + container.removeEventListener('touchstart', touchStartHandler); + } + + if (touchEndHandler) { + container.removeEventListener('touchend', touchEndHandler); + } + + let touchStartTime = 0; + const newTouchStartHandler = function(e) { + touchStartTime = Date.now(); + }; + + const newTouchEndHandler = function(e) { const touchDuration = Date.now() - touchStartTime; + console.log('Touch end event triggered in setContent, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress); // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 if (touchDuration < 200 && !dragState.value.isLongPress) { e.stopPropagation(); + console.log('Short tap detected in setContent, toggling delete button visibility'); // 切换删除按钮的显示状态 if (deleteBtn) { - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { + console.log('Current delete button display style in setContent:', deleteBtn.style.display); + // 检查删除按钮当前是否可见 + const computedStyle = getComputedStyle(deleteBtn); + const isCurrentlyVisible = deleteBtn.style.display === 'block' || + computedStyle.display === 'block' || + (deleteBtn.style.display !== 'none' && + computedStyle.display !== 'none'); + + console.log('Delete button current styles - inline:', deleteBtn.style.display, 'computed:', computedStyle.display); + console.log('Delete button background image:', computedStyle.backgroundImage); + console.log('Delete button width:', computedStyle.width, 'height:', computedStyle.height); + console.log('Delete button position:', computedStyle.position); + console.log('Delete button z-index:', computedStyle.zIndex); + + if (isCurrentlyVisible) { deleteBtn.style.display = 'none'; + console.log('Delete button hidden in setContent'); + } else { + deleteBtn.style.display = 'block'; + console.log('Delete button displayed in setContent'); + // 添加调试样式以确保可见 + deleteBtn.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'; // 半透明红色背景用于调试 } + } else { + console.log('Delete button not found in setContent'); } + } else { + console.log('Not a short tap or isLongPress is true in setContent'); } - }); + }; + + container.addEventListener('touchstart', newTouchStartHandler); + container.addEventListener('touchend', newTouchEndHandler); + + // 保存事件处理函数的引用，以便后续移除 + container._touchStartHandler = newTouchStartHandler; + container._touchEndHandler = newTouchEndHandler; + + img.setAttribute('data-touch-listeners', 'true') + console.log('Added touch event listeners') }) }, 0) } catch (error) { @@ -1602,6 +2194,14 @@ defineExpose({ try { editorRef.value.innerHTML = content.value console.log('Content set successfully after delay') + // 重置拖拽状态，确保isLongPress为false + dragState.value.isLongPress = false + dragState.value.draggedImage = null + dragState.value.startX = 0 + dragState.value.startY = 0 + dragState.value.currentY = 0 + // 确保所有图片都被正确包装在.image-container中 + wrapOrphanedImages() // 调整已有图片的高度并添加拖拽功能 adjustExistingImages() // 为图片添加拖拽事件监听器 @@ -1629,34 +2229,84 @@ defineExpose({ // 为删除按钮添加点击事件 const deleteBtn = container.querySelector('.image-delete-btn') if (deleteBtn) { + // 先移除可能已有的事件监听器，避免重复 + deleteBtn.removeEventListener('click', null) + deleteBtn.removeEventListener('touchend', null) + deleteBtn.addEventListener('click', function(e) { e.stopPropagation(); container.remove(); handleInput(); }); + + deleteBtn.addEventListener('touchend', function(e) { + e.stopPropagation(); + container.remove(); + handleInput(); + }); } // 为图片容器添加短按事件以显示/隐藏删除按钮 - let touchStartTime = 0; - container.addEventListener('touchstart', function(e) { - touchStartTime = Date.now(); - }); + // 先移除可能已有的事件监听器，避免重复 + const touchStartHandler = container._touchStartHandler; + const touchEndHandler = container._touchEndHandler; - container.addEventListener('touchend', function(e) { + if (touchStartHandler) { + container.removeEventListener('touchstart', touchStartHandler); + } + + if (touchEndHandler) { + container.removeEventListener('touchend', touchEndHandler); + } + + let touchStartTime = 0; + const newTouchStartHandler = function(e) { + touchStartTime = Date.now(); + }; + + const newTouchEndHandler = function(e) { const touchDuration = Date.now() - touchStartTime; + console.log('Touch end event triggered in delayed setContent, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress); // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 if (touchDuration < 200 && !dragState.value.isLongPress) { e.stopPropagation(); + console.log('Short tap detected in delayed setContent, toggling delete button visibility'); // 切换删除按钮的显示状态 if (deleteBtn) { - if (deleteBtn.style.display === 'none' || deleteBtn.style.display === '') { - deleteBtn.style.display = 'block'; - } else { + console.log('Current delete button display style in delayed setContent:', deleteBtn.style.display); + // 检查删除按钮当前是否可见 + const computedStyle = getComputedStyle(deleteBtn); + const isCurrentlyVisible = deleteBtn.style.display === 'block' || + computedStyle.display === 'block' || + (deleteBtn.style.display !== 'none' && + computedStyle.display !== 'none'); + + console.log('Delete button current styles - inline:', deleteBtn.style.display, 'computed:', computedStyle.display); + + if (isCurrentlyVisible) { deleteBtn.style.display = 'none'; + console.log('Delete button hidden in delayed setContent'); + } else { + deleteBtn.style.display = 'block'; + console.log('Delete button displayed in delayed setContent'); } + } else { + console.log('Delete button not found in delayed setContent'); } + } else { + console.log('Not a short tap or isLongPress is true in delayed setContent'); } - }); + }; + + container.addEventListener('touchstart', newTouchStartHandler); + container.addEventListener('touchend', newTouchEndHandler); + + // 保存事件处理函数的引用，以便后续移除 + container._touchStartHandler = newTouchStartHandler; + container._touchEndHandler = newTouchEndHandler; + + img.setAttribute('data-touch-listeners', 'true') + console.log('Added touch event listeners') }) }, 0) } catch (error) { @@ -1909,9 +2559,15 @@ defineExpose({ width: 24px; height: 24px; cursor: pointer; - z-index: 10; + z-index: 1000; display: none; transition: opacity 0.2s ease; + /* 使用背景图片而不是背景色和边框，确保图标正确显示 */ + background-image: url('/assets/icons/drawable-xxhdpi/item_image_btn_unbrella_delete.png'); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + background-color: transparent; /* 确保背景透明 */ } :deep(.editor-content .editor-image.draggable) { @@ -1919,8 +2575,8 @@ defineExpose({ } :deep(.editor-content .editor-image.dragging) { - opacity: 0.9; - transform: scale(0.98); + opacity: 0.85; + transform: scale(0.96); z-index: 999; transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.15s ease; /* 优化过渡效果 */ box-shadow: 0 12px 25px rgba(0, 0, 0, 0.22); @@ -1931,6 +2587,11 @@ defineExpose({ -ms-user-select: none; } +/* 图片交换动画 */ +:deep(.editor-content .editor-image.swap-animation) { + transition: transform 0.2s ease-out; +} + /* 待办事项样式 */ :deep(.todo-container) { display: flex; From 1034ca88c480819f9989e6e59180c8cde6a52292 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 14:27:40 +0800 Subject: [PATCH 23/37] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E7=9A=84=E9=9A=90=E8=97=8F=E6=98=BE=E7=A4=BA=E7=8A=B6=E6=80=81?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E5=88=87=E6=8D=A2=E6=A0=B7=E5=BC=8Fclass?= =?UTF-8?q?=E6=9D=A5=E5=AE=9E=E7=8E=B0=EF=BC=8C=E5=B9=B6=E7=A1=AE=E4=BF=9D?= =?UTF-8?q?=E5=9C=A8=E4=BF=9D=E5=AD=98=E6=97=B6=E7=A7=BB=E9=99=A4=E5=AF=B9?= =?UTF-8?q?=E5=BA=94=E7=9A=84=E7=8A=B6=E6=80=81=E6=81=A2=E5=A4=8D=E5=88=B0?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E4=B8=8D=E6=98=BE=E7=A4=BA=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 1174 ++++++++++++++--------------- 1 file changed, 570 insertions(+), 604 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index c84bbee..df72eb8 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -39,7 +39,7 @@ const dragState = ref({ isLongPress: false, indicator: null, lastCheckTime: 0, - lastMoveTime: 0 + lastMoveTime: 0, }) // 初始化编辑器内容 @@ -64,15 +64,15 @@ onMounted(() => { console.log('Editor initialized without initial content') } } - + // 记录初始视口高度 initialViewportHeight.value = window.visualViewport?.height || window.innerHeight console.log('Initial viewport height:', initialViewportHeight.value) - + // 初始化CSS变量 document.documentElement.style.setProperty('--viewport-height', `${initialViewportHeight.value}px`) console.log('Set viewport height CSS variable') - + // 添加虚拟键盘检测事件监听器 if (window.visualViewport) { console.log('Adding viewport resize listener') @@ -81,7 +81,7 @@ onMounted(() => { console.log('Adding window resize listener') window.addEventListener('resize', handleWindowResize) } - + // 为已有图片添加拖拽事件监听器 setTimeout(() => { console.log('Adding drag event listeners to existing images') @@ -90,14 +90,14 @@ onMounted(() => { imageContainers.forEach(container => { const img = container.querySelector('img.editor-image') if (!img) return - + console.log('Adding touch listeners to image:', img) // 添加触摸事件监听器 container.addEventListener('touchstart', handleTouchStart) container.addEventListener('touchmove', handleTouchMove) container.addEventListener('touchend', handleTouchEnd) container.addEventListener('touchcancel', handleTouchCancel) - + // 为删除按钮添加点击事件 let deleteBtn = container.querySelector('.image-delete-btn') if (!deleteBtn) { @@ -105,86 +105,81 @@ onMounted(() => { console.log('Delete button not found in mounted hook, creating new one') deleteBtn = document.createElement('div') deleteBtn.className = 'image-delete-btn' - deleteBtn.style.cssText = 'position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; cursor: pointer; z-index: 1000; display: none; transition: opacity 0.2s ease; touch-action: manipulation;' container.appendChild(deleteBtn) } - + if (deleteBtn) { // 先移除可能已有的事件监听器，避免重复 deleteBtn.removeEventListener('click', null) deleteBtn.removeEventListener('touchend', null) - - deleteBtn.addEventListener('click', function(e) { - e.stopPropagation(); - container.remove(); - handleInput(); - }); - - deleteBtn.addEventListener('touchend', function(e) { - e.stopPropagation(); - container.remove(); - handleInput(); - }); + + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + container.remove() + handleInput() + }) + + deleteBtn.addEventListener('touchend', function (e) { + e.stopPropagation() + container.remove() + handleInput() + }) } - + // 为图片容器添加短按事件以显示/隐藏删除按钮 // 先移除可能已有的事件监听器，避免重复 - const touchStartHandler = container._touchStartHandler; - const touchEndHandler = container._touchEndHandler; - + const touchStartHandler = container._touchStartHandler + const touchEndHandler = container._touchEndHandler + if (touchStartHandler) { - container.removeEventListener('touchstart', touchStartHandler); + container.removeEventListener('touchstart', touchStartHandler) } - + if (touchEndHandler) { - container.removeEventListener('touchend', touchEndHandler); + container.removeEventListener('touchend', touchEndHandler) } - - let touchStartTime = 0; - const newTouchStartHandler = function(e) { - touchStartTime = Date.now(); - }; - - const newTouchEndHandler = function(e) { - const touchDuration = Date.now() - touchStartTime; - console.log('Touch end event triggered in mounted hook, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress); + + let touchStartTime = 0 + const newTouchStartHandler = function (e) { + touchStartTime = Date.now() + } + + const newTouchEndHandler = function (e) { + const touchDuration = Date.now() - touchStartTime + console.log('Touch end event triggered in mounted hook, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress) // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 if (touchDuration < 200 && !dragState.value.isLongPress) { - e.stopPropagation(); - console.log('Short tap detected in mounted hook, toggling delete button visibility'); + e.stopPropagation() + console.log('Short tap detected in mounted hook, toggling delete button visibility') // 切换删除按钮的显示状态 if (deleteBtn) { - console.log('Current delete button display style in mounted hook:', deleteBtn.style.display); + console.log('Current delete button display style in mounted hook:', deleteBtn.style.display) // 检查删除按钮当前是否可见 - const computedStyle = getComputedStyle(deleteBtn); - const isCurrentlyVisible = deleteBtn.style.display === 'block' || - computedStyle.display === 'block' || - (deleteBtn.style.display !== 'none' && - computedStyle.display !== 'none'); - - console.log('Delete button current styles in mounted hook - inline:', deleteBtn.style.display, 'computed:', computedStyle.display); - + const isCurrentlyVisible = deleteBtn.classList.contains('visible') + + console.log('Delete button current styles in mounted hook - inline:', deleteBtn.style.display, 'computed:', computedStyle.display) + if (isCurrentlyVisible) { - deleteBtn.style.display = 'none'; - console.log('Delete button hidden in mounted hook'); + deleteBtn.classList.remove('visible') + console.log('Delete button hidden in mounted hook') } else { - deleteBtn.style.display = 'block'; - console.log('Delete button displayed in mounted hook'); + deleteBtn.classList.add('visible') + console.log('Delete button displayed in mounted hook') } } else { - console.log('Delete button not found in mounted hook'); + console.log('Delete button not found in mounted hook') } } else { - console.log('Not a short tap or isLongPress is true in mounted hook'); + console.log('Not a short tap or isLongPress is true in mounted hook') } - }; - - container.addEventListener('touchstart', newTouchStartHandler); - container.addEventListener('touchend', newTouchEndHandler); - + } + + container.addEventListener('touchstart', newTouchStartHandler) + container.addEventListener('touchend', newTouchEndHandler) + // 保存事件处理函数的引用，以便后续移除 - container._touchStartHandler = newTouchStartHandler; - container._touchEndHandler = newTouchEndHandler; + container._touchStartHandler = newTouchStartHandler + container._touchEndHandler = newTouchEndHandler }) }, 0) }) @@ -196,7 +191,7 @@ onUnmounted(() => { } else { window.removeEventListener('resize', handleWindowResize) } - + // 清理所有图片容器的事件监听器 if (editorRef.value) { const imageContainers = editorRef.value.querySelectorAll('.image-container') @@ -206,21 +201,21 @@ onUnmounted(() => { container.removeEventListener('touchmove', handleTouchMove) container.removeEventListener('touchend', handleTouchEnd) container.removeEventListener('touchcancel', handleTouchCancel) - + // 移除短按事件监听器 - const touchStartHandler = container._touchStartHandler; - const touchEndHandler = container._touchEndHandler; - + const touchStartHandler = container._touchStartHandler + const touchEndHandler = container._touchEndHandler + if (touchStartHandler) { - container.removeEventListener('touchstart', touchStartHandler); - delete container._touchStartHandler; + container.removeEventListener('touchstart', touchStartHandler) + delete container._touchStartHandler } - + if (touchEndHandler) { - container.removeEventListener('touchend', touchEndHandler); - delete container._touchEndHandler; + container.removeEventListener('touchend', touchEndHandler) + delete container._touchEndHandler } - + // 移除删除按钮事件监听器 const deleteBtn = container.querySelector('.image-delete-btn') if (deleteBtn) { @@ -235,39 +230,39 @@ onUnmounted(() => { // 定义富文本编辑器的所有工具按钮及其功能 const tools = ref([ { - name: 'bold', // 加粗工具 + name: 'bold', // 加粗工具 icon: '/assets/icons/drawable-xxhdpi/rtf_bold_normal.9.png', - action: () => formatText('bold'), // 执行加粗格式化 - active: false, // 工具是否处于激活状态 + action: () => formatText('bold'), // 执行加粗格式化 + active: false, // 工具是否处于激活状态 }, { - name: 'center', // 居中对齐工具 + name: 'center', // 居中对齐工具 icon: '/assets/icons/drawable-xxhdpi/rtf_center_normal.9.png', - action: () => formatText('justifyCenter'), // 执行居中对齐格式化 + action: () => formatText('justifyCenter'), // 执行居中对齐格式化 active: false, }, { - name: 'todo', // 待办事项工具 + name: 'todo', // 待办事项工具 icon: '/assets/icons/drawable-xxhdpi/rtf_gtasks_normal.9.png', action: () => formatText('insertTodoList'), // 插入待办事项列表 active: false, }, { - name: 'list', // 无序列表工具 + name: 'list', // 无序列表工具 icon: '/assets/icons/drawable-xxhdpi/rtf_list_normal.9.png', action: () => formatText('insertUnorderedList'), // 插入无序列表 active: false, }, { - name: 'header', // 标题工具 + name: 'header', // 标题工具 icon: '/assets/icons/drawable-xxhdpi/rtf_header_normal.9.png', - action: () => formatText('formatBlock', 'h2'), // 格式化为二级标题 + action: () => formatText('formatBlock', 'h2'), // 格式化为二级标题 active: false, }, { - name: 'quote', // 引用工具 + name: 'quote', // 引用工具 icon: '/assets/icons/drawable-xxhdpi/rtf_quot_normal.9.png', - action: () => insertQuote(), // 插入引用格式 + action: () => insertQuote(), // 插入引用格式 active: false, }, ]) @@ -276,7 +271,7 @@ const tools = ref([ const handleInput = () => { if (editorRef.value) { // 获取编辑器内容（不清理，保持功能完整） - let innerHTML = editorRef.value.innerHTML; + let innerHTML = editorRef.value.innerHTML // 处理换行符，确保在段落之间有明确的分隔 innerHTML = innerHTML.replace(/<\/p>

/g, '

\n

') @@ -332,9 +327,7 @@ const isInListOrQuote = () => { let current = container.nodeType === Node.TEXT_NODE ? container.parentElement : container while (current && current !== editorRef.value) { // 检查是否在列表、引用或待办事项中 - if (current.tagName === 'UL' || current.tagName === 'OL' || current.tagName === 'LI' || - current.tagName === 'BLOCKQUOTE' || current.classList.contains('quote-content') || - current.classList.contains('todo-container')) { + if (current.tagName === 'UL' || current.tagName === 'OL' || current.tagName === 'LI' || current.tagName === 'BLOCKQUOTE' || current.classList.contains('quote-content') || current.classList.contains('todo-container')) { return true } current = current.parentElement @@ -494,20 +487,20 @@ const insertTodoList = () => { // 创建待办事项容器 const todoContainer = document.createElement('div') - todoContainer.contentEditable = false // 容器本身不可编辑 + todoContainer.contentEditable = false // 容器本身不可编辑 todoContainer.className = 'todo-container' // 创建图标元素（复选框） const icon = document.createElement('img') icon.className = 'todo-icon' - icon.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks.png' // 未完成状态图标 + icon.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks.png' // 未完成状态图标 icon.alt = '待办事项' // 创建内容容器（可编辑区域） const contentSpan = document.createElement('div') - contentSpan.contentEditable = true // 内容区域可编辑 + contentSpan.contentEditable = true // 内容区域可编辑 contentSpan.className = 'todo-content' - contentSpan.textContent = '待办事项' // 默认文本 + contentSpan.textContent = '待办事项' // 默认文本 // 组装元素：将图标和内容区域添加到容器中 todoContainer.appendChild(icon) @@ -544,16 +537,16 @@ const insertTodoList = () => { // 根据当前状态切换图标和样式 if (this.src.includes('rtf_icon_gtasks.png')) { // 切换到完成状态 - this.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks_light.png' // 完成状态图标 - contentSpan.style.color = 'var(--text-tertiary)' // 灰色文字 - contentSpan.style.textDecoration = 'line-through' // 添加删除线 + this.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks_light.png' // 完成状态图标 + contentSpan.style.color = 'var(--text-tertiary)' // 灰色文字 + contentSpan.style.textDecoration = 'line-through' // 添加删除线 } else { // 切换到未完成状态 - this.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks.png' // 未完成状态图标 - contentSpan.style.color = 'var(--note-content)' // 正常文字颜色 - contentSpan.style.textDecoration = 'none' // 移除删除线 + this.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks.png' // 未完成状态图标 + contentSpan.style.color = 'var(--note-content)' // 正常文字颜色 + contentSpan.style.textDecoration = 'none' // 移除删除线 } - handleInput() // 触发内容更新 + handleInput() // 触发内容更新 }) // 添加事件监听器到内容区域，监听内容变化和按键事件 @@ -568,8 +561,8 @@ const insertTodoList = () => { }, 0) } - contentSpan.addEventListener('input', checkContent) // 内容输入时检查 - contentSpan.addEventListener('blur', checkContent) // 失去焦点时检查 + contentSpan.addEventListener('input', checkContent) // 内容输入时检查 + contentSpan.addEventListener('blur', checkContent) // 失去焦点时检查 // 添加焦点事件监听器，确保工具栏在待办事项获得焦点时保持可见 contentSpan.addEventListener('focus', () => { @@ -741,7 +734,7 @@ const resetDragState = () => { clearTimeout(dragState.value.longPressTimer) dragState.value.longPressTimer = null } - + // 重置所有拖拽状态 dragState.value.isLongPress = false dragState.value.draggedImage = null @@ -749,7 +742,7 @@ const resetDragState = () => { dragState.value.startY = 0 dragState.value.currentY = 0 dragState.value.lastMoveTime = 0 - + // 移除拖拽指示器 if (dragState.value.indicator) { const indicator = dragState.value.indicator @@ -761,7 +754,7 @@ const resetDragState = () => { }, 150) dragState.value.indicator = null } - + // 重置所有图片的拖拽样式 if (editorRef.value) { const draggedImages = editorRef.value.querySelectorAll('.editor-image.dragging') @@ -810,14 +803,13 @@ const insertImage = () => { // 检查选区是否在图片容器内部，如果是则调整到容器后面 const startContainer = range.startContainer let imageContainer = null - + // 如果startContainer是图片容器本身 if (startContainer.classList && startContainer.classList.contains('image-container')) { imageContainer = startContainer } // 如果startContainer是图片容器的子元素 - else if (startContainer.parentNode && startContainer.parentNode.classList && - startContainer.parentNode.classList.contains('image-container')) { + else if (startContainer.parentNode && startContainer.parentNode.classList && startContainer.parentNode.classList.contains('image-container')) { imageContainer = startContainer.parentNode } // 向上查找父元素 @@ -831,7 +823,7 @@ const insertImage = () => { parent = parent.parentNode } } - + // 如果选区在图片容器内部，调整到容器后面 if (imageContainer) { console.log('Selection is inside image container, adjusting range') @@ -845,7 +837,7 @@ const insertImage = () => { imgContainer.className = 'image-container' imgContainer.style.position = 'relative' imgContainer.style.display = 'inline-block' - + // 创建图片元素 const img = document.createElement('img') img.src = imageDataUrl @@ -869,18 +861,17 @@ const insertImage = () => { img.style.webkitTouchCallout = 'none' // 防止长按弹出菜单 img.style.webkitTapHighlightColor = 'transparent' // 防止点击高亮 img.draggable = true - + // 创建删除按钮 const deleteBtn = document.createElement('div') deleteBtn.className = 'image-delete-btn' - deleteBtn.style.cssText = 'position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; cursor: pointer; z-index: 1000; display: none; transition: opacity 0.2s ease; touch-action: manipulation;' - + // 将图片和删除按钮添加到容器中 imgContainer.appendChild(img) imgContainer.appendChild(deleteBtn) - + console.log('Created image element:', img) - + // 创建一个临时图片来获取原始尺寸 const tempImg = new Image() tempImg.onload = function () { @@ -924,89 +915,79 @@ const insertImage = () => { imgContainer.removeEventListener('touchmove', handleTouchMove) imgContainer.removeEventListener('touchend', handleTouchEnd) imgContainer.removeEventListener('touchcancel', handleTouchCancel) - + // 重新添加事件监听器 imgContainer.addEventListener('touchstart', handleTouchStart) imgContainer.addEventListener('touchmove', handleTouchMove) imgContainer.addEventListener('touchend', handleTouchEnd) imgContainer.addEventListener('touchcancel', handleTouchCancel) - + // 为删除按钮添加点击事件（鼠标和触摸） // 先移除可能已有的事件监听器，避免重复 deleteBtn.removeEventListener('click', null) deleteBtn.removeEventListener('touchend', null) - - deleteBtn.addEventListener('click', function(e) { - e.stopPropagation(); - imgContainer.remove(); - handleInput(); - }); - - deleteBtn.addEventListener('touchend', function(e) { - e.stopPropagation(); - imgContainer.remove(); - handleInput(); - }); - + + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + imgContainer.remove() + handleInput() + }) + + deleteBtn.addEventListener('touchend', function (e) { + e.stopPropagation() + imgContainer.remove() + handleInput() + }) + // 为图片容器添加短按事件以显示/隐藏删除按钮 - let touchStartTime = 0; - const touchStartHandler = function(e) { - touchStartTime = Date.now(); - }; - - const touchEndHandler = function(e) { - const touchDuration = Date.now() - touchStartTime; - console.log('Touch end event triggered, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress); + let touchStartTime = 0 + const touchStartHandler = function (e) { + touchStartTime = Date.now() + } + + const touchEndHandler = function (e) { + const touchDuration = Date.now() - touchStartTime + console.log('Touch end event triggered, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress) // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 if (touchDuration < 200 && !dragState.value.isLongPress) { - e.stopPropagation(); - console.log('Short tap detected, toggling delete button visibility'); + e.stopPropagation() + console.log('Short tap detected, toggling delete button visibility') // 切换删除按钮的显示状态 if (deleteBtn) { - console.log('Current delete button display style:', deleteBtn.style.display); + console.log('Current delete button display style:', deleteBtn.style.display) // 检查删除按钮当前是否可见 - const computedStyle = getComputedStyle(deleteBtn); - const isCurrentlyVisible = deleteBtn.style.display === 'block' || - computedStyle.display === 'block' || - (deleteBtn.style.display !== 'none' && - computedStyle.display !== 'none'); - - console.log('Delete button current styles - inline:', deleteBtn.style.display, 'computed:', computedStyle.display); - console.log('Delete button background image:', computedStyle.backgroundImage); - console.log('Delete button width:', computedStyle.width, 'height:', computedStyle.height); - console.log('Delete button position:', computedStyle.position); - console.log('Delete button z-index:', computedStyle.zIndex); - + const isCurrentlyVisible = deleteBtn.classList.contains('visible') + + console.log('Delete button current styles - inline:', deleteBtn.style.display) + if (isCurrentlyVisible) { - deleteBtn.style.display = 'none'; - console.log('Delete button hidden'); + deleteBtn.classList.remove('visible') + console.log('Delete button hidden') } else { - deleteBtn.style.display = 'block'; - console.log('Delete button displayed'); - // 添加调试样式以确保可见 - deleteBtn.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'; // 半透明红色背景用于调试 + deleteBtn.classList.add('visible') + console.log('Delete button displayed') } } else { - console.log('Delete button not found'); + console.log('Delete button not found') } } else { - console.log('Not a short tap or isLongPress is true'); + console.log('Not a short tap or isLongPress is true') } - }; - - imgContainer.addEventListener('touchstart', touchStartHandler); - imgContainer.addEventListener('touchend', touchEndHandler); - + } + + imgContainer.addEventListener('touchstart', touchStartHandler) + imgContainer.addEventListener('touchend', touchEndHandler) + // 保存事件处理函数的引用，以便后续移除 - imgContainer._touchStartHandler = touchStartHandler; - imgContainer._touchEndHandler = touchEndHandler; - + imgContainer._touchStartHandler = touchStartHandler + imgContainer._touchEndHandler = touchEndHandler + console.log('Added touch event listeners') // 插入图片容器到当前光标位置 range.insertNode(imgContainer) console.log('Inserted image container into editor') - + // 调试信息 console.log('Image container inserted:', imgContainer) console.log('Next sibling (should be drag handle):', imgContainer.nextSibling) @@ -1015,23 +996,23 @@ const insertImage = () => { const br = document.createElement('br') imgContainer.parentNode.insertBefore(br, imgContainer.nextSibling) console.log('Added line break after image container') - + // 修正选区位置，避免嵌套插入 // 使用setTimeout确保DOM更新完成后再设置选区 setTimeout(() => { - const newRange = document.createRange(); - newRange.setStartAfter(br); - newRange.collapse(true); - const sel = window.getSelection(); - sel.removeAllRanges(); - sel.addRange(newRange); - + const newRange = document.createRange() + newRange.setStartAfter(br) + newRange.collapse(true) + const sel = window.getSelection() + sel.removeAllRanges() + sel.addRange(newRange) + // 重新聚焦到编辑器 if (editorRef.value) { editorRef.value.focus() console.log('Focused editor') } - }, 0); + }, 0) // 触发输入事件更新内容 handleInput() @@ -1104,10 +1085,10 @@ const handleKeydown = e => { } // 处理触摸开始事件 -const handleTouchStart = (e) => { +const handleTouchStart = e => { const img = e.target if (!img.classList.contains('editor-image')) return - + // 防止图片被选中 - 在触摸开始时就应用 img.style.userSelect = 'none' img.style.webkitUserSelect = 'none' @@ -1115,30 +1096,30 @@ const handleTouchStart = (e) => { img.style.msUserSelect = 'none' img.style.webkitTouchCallout = 'none' img.style.webkitTapHighlightColor = 'transparent' - + // 清除之前的定时器 if (dragState.value.longPressTimer) { clearTimeout(dragState.value.longPressTimer) } - + // 记录触摸开始位置 dragState.value.startX = e.touches[0].clientX dragState.value.startY = e.touches[0].clientY - + // 设置长按检测定时器（500毫秒） dragState.value.longPressTimer = setTimeout(() => { dragState.value.isLongPress = true dragState.value.draggedImage = img dragState.value.startY = e.touches[0].clientY dragState.value.currentY = e.touches[0].clientY - + // 添加拖拽样式 img.classList.add('dragging') img.style.opacity = '0.85' img.style.transform = 'scale(0.96)' img.style.zIndex = '999' img.style.transition = 'all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)' - + // 添加拖拽指示器 const indicator = document.createElement('div') indicator.className = 'drag-indicator' @@ -1158,42 +1139,42 @@ const handleTouchStart = (e) => { indicator.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.3)' indicator.textContent = '拖拽排序' document.body.appendChild(indicator) - + // 渐显指示器 setTimeout(() => { indicator.style.opacity = '1' }, 1) - + // 保存指示器引用以便后续移除 dragState.value.indicator = indicator - + // 添加震动反馈（如果设备支持） if (navigator.vibrate) { navigator.vibrate(15) } - + // 阻止页面滚动 e.preventDefault() }, 500) // 500毫秒长按触发拖拽 } // 处理触摸移动事件 -const handleTouchMove = (e) => { +const handleTouchMove = e => { if (!dragState.value.longPressTimer && !dragState.value.isLongPress) return - + const img = dragState.value.draggedImage const currentX = e.touches[0].clientX const currentY = e.touches[0].clientY - + // 防止图片被选中 e.preventDefault() - + // 如果还没有触发长按，检查是否移动过多（超过6px则取消长按） if (!dragState.value.isLongPress) { const deltaX = Math.abs(currentX - dragState.value.startX) const deltaY = Math.abs(currentY - dragState.value.startY) const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY) - + if (distance > 6) { // 移动过多，取消长按 if (dragState.value.longPressTimer) { @@ -1203,28 +1184,28 @@ const handleTouchMove = (e) => { return } } - + if (!dragState.value.isLongPress || !img) return - + e.preventDefault() // 阻止页面滚动 - + dragState.value.currentY = currentY - + // 计算位移 const deltaY = dragState.value.currentY - dragState.value.startY - + // 使用requestAnimationFrame确保流畅的动画 requestAnimationFrame(() => { // 更新图片位置，添加缓动效果 const easeFactor = 0.95 // 调整缓动因子使拖拽更跟手 img.style.transform = `translateY(${deltaY * easeFactor}px) scale(0.96)` - }); - + }) + // 使用节流优化，避免过于频繁的检查 if (!dragState.value.lastMoveTime) { dragState.value.lastMoveTime = 0 } - + const now = Date.now() // 限制检查频率为每16ms一次（约60fps），提高响应速度 if (now - dragState.value.lastMoveTime >= 16) { @@ -1234,26 +1215,26 @@ const handleTouchMove = (e) => { } // 处理触摸结束事件 -const handleTouchEnd = (e) => { +const handleTouchEnd = e => { // 清除长按定时器 if (dragState.value.longPressTimer) { clearTimeout(dragState.value.longPressTimer) dragState.value.longPressTimer = null } - + if (!dragState.value.isLongPress || !dragState.value.draggedImage) { dragState.value.isLongPress = false return } - + // 重置拖拽状态 const img = dragState.value.draggedImage - + // 添加更流畅的释放动画 img.style.transition = 'all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)' img.style.transform = 'translateY(0) scale(1)' img.style.opacity = '1' - + // 移除拖拽指示器 if (dragState.value.indicator) { const indicator = dragState.value.indicator @@ -1265,12 +1246,12 @@ const handleTouchEnd = (e) => { } }, 100) } - + // 添加震动反馈（如果设备支持） if (navigator.vibrate) { navigator.vibrate(8) } - + // 延迟重置样式以显示动画 setTimeout(() => { if (img) { @@ -1279,39 +1260,39 @@ const handleTouchEnd = (e) => { img.style.transition = '' } }, 150) - + // 重置状态 dragState.value.isLongPress = false dragState.value.draggedImage = null dragState.value.startY = 0 dragState.value.currentY = 0 dragState.value.indicator = null - + // 触发内容更新 handleInput() } // 处理触摸取消事件 -const handleTouchCancel = (e) => { +const handleTouchCancel = e => { // 清除长按定时器 if (dragState.value.longPressTimer) { clearTimeout(dragState.value.longPressTimer) dragState.value.longPressTimer = null } - + if (!dragState.value.isLongPress || !dragState.value.draggedImage) { dragState.value.isLongPress = false return } - + // 重置拖拽状态 const img = dragState.value.draggedImage - + // 添加取消动画 img.style.transition = 'all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)' img.style.transform = 'translateY(0) scale(1)' img.style.opacity = '1' - + // 移除拖拽指示器 if (dragState.value.indicator) { const indicator = dragState.value.indicator @@ -1323,7 +1304,7 @@ const handleTouchCancel = (e) => { } }, 100) } - + // 延迟重置样式以显示动画 setTimeout(() => { if (img) { @@ -1332,7 +1313,7 @@ const handleTouchCancel = (e) => { img.style.transition = '' } }, 150) - + // 重置状态 dragState.value.isLongPress = false dragState.value.draggedImage = null @@ -1345,26 +1326,26 @@ const handleTouchCancel = (e) => { const checkAndSwapImages = (draggedImg, deltaY) => { const allImages = Array.from(editorRef.value.querySelectorAll('.editor-image')) const draggedIndex = allImages.indexOf(draggedImg) - + if (draggedIndex === -1) return - + // 计算拖拽图片的中心位置 const draggedRect = draggedImg.getBoundingClientRect() const draggedCenterY = draggedRect.top + draggedRect.height / 2 + deltaY * 0.95 // 调整缓动因子以匹配触摸移动 - + // 查找最近的图片进行交换 for (let i = 0; i < allImages.length; i++) { if (i === draggedIndex) continue - + const targetImg = allImages[i] const targetRect = targetImg.getBoundingClientRect() const targetCenterY = targetRect.top + targetRect.height / 2 - + // 检查是否与目标图片重叠，使用更精确的碰撞检测 // 当拖拽图片覆盖目标图片高度的60%时触发排序 const overlapThreshold = targetRect.height * 0.6 const distance = Math.abs(draggedCenterY - targetCenterY) - + if (distance < overlapThreshold) { // 直接交换位置，移除视觉反馈以避免闪烁 swapImages(draggedImg, targetImg) @@ -1378,42 +1359,42 @@ const swapImages = (img1, img2) => { // 为交换添加平滑过渡效果 const parent1 = img1.parentNode const parent2 = img2.parentNode - + // 添加交换动画类 img1.classList.add('swap-animation') img2.classList.add('swap-animation') - + // 如果两张图片在同一父元素中 if (parent1 === parent2) { // 计算两个图片的位置差 const rect1 = img1.getBoundingClientRect() const rect2 = img2.getBoundingClientRect() const deltaY = rect2.top - rect1.top - + // 添加临时的变换动画 img1.style.transform = `translateY(${deltaY}px)` img2.style.transform = `translateY(${-deltaY}px)` - + // 在动画完成后交换DOM位置 setTimeout(() => { // 移除临时变换 img1.style.transform = '' img2.style.transform = '' - + // 移除交换动画类 img1.classList.remove('swap-animation') img2.classList.remove('swap-animation') - + // 交换DOM位置 const tempMarker = document.createElement('div') parent1.insertBefore(tempMarker, img1) parent1.insertBefore(img1, img2) parent1.insertBefore(img2, tempMarker) tempMarker.remove() - + // 触发内容更新 handleInput() - + // 自动退出排序模式，提高响应速度 setTimeout(() => { resetDragState() @@ -1425,16 +1406,16 @@ const swapImages = (img1, img2) => { // 移除交换动画类 img1.classList.remove('swap-animation') img2.classList.remove('swap-animation') - + const temp = document.createElement('div') parent1.insertBefore(temp, img1) parent2.insertBefore(img1, img2) parent1.insertBefore(img2, temp) temp.remove() - + // 触发内容更新 handleInput() - + // 自动退出排序模式，提高响应速度 setTimeout(() => { resetDragState() @@ -1464,16 +1445,16 @@ const updateToolbarState = () => { // 处理视口大小变化（用于检测虚拟键盘） const handleViewportResize = () => { if (!window.visualViewport) return - + const currentHeight = window.visualViewport.height const heightDifference = initialViewportHeight.value - currentHeight - + // 如果高度差超过150px，认为虚拟键盘已弹出 isKeyboardVisible.value = heightDifference > 150 - + // 动态设置CSS变量以调整工具栏位置 document.documentElement.style.setProperty('--viewport-height', `${currentHeight}px`) - + // 根据虚拟键盘状态更新工具栏可见性 updateToolbarVisibility() } @@ -1482,10 +1463,10 @@ const handleViewportResize = () => { const handleWindowResize = () => { const currentHeight = window.innerHeight const heightDifference = initialViewportHeight.value - currentHeight - + // 如果高度差超过150px，认为虚拟键盘已弹出 isKeyboardVisible.value = heightDifference > 150 - + // 根据虚拟键盘状态更新工具栏可见性 updateToolbarVisibility() } @@ -1518,7 +1499,7 @@ const isTodoContentActive = () => { } // 监听虚拟键盘状态变化 -watch(isKeyboardVisible, (newVal) => { +watch(isKeyboardVisible, newVal => { updateToolbarVisibility() }) @@ -1571,7 +1552,7 @@ const handleToolClick = (action, event) => { // 对于待办事项，确保工具栏保持可见 isToolbarVisible.value = true } - + // 确保工具栏在虚拟键盘可见时保持显示 if (isKeyboardVisible.value) { isToolbarVisible.value = true @@ -1613,229 +1594,216 @@ const handleToolbarFocusOut = () => { // 包装孤立的图片（没有被.image-container包装的图片） const wrapOrphanedImages = () => { - if (!editorRef.value) return; - + if (!editorRef.value) return + // 查找所有没有被.image-container包装的图片 - const images = editorRef.value.querySelectorAll('img:not(.editor-image)'); - console.log('Found orphaned images:', images.length); - + const images = editorRef.value.querySelectorAll('img:not(.editor-image)') + console.log('Found orphaned images:', images.length) + images.forEach(img => { // 检查图片是否已经在.image-container中 - if (img.closest('.image-container')) return; - - console.log('Wrapping orphaned image'); - + if (img.closest('.image-container')) return + + console.log('Wrapping orphaned image') + // 检查图片的父元素是否是.image-container，避免嵌套 if (img.parentNode && img.parentNode.classList && img.parentNode.classList.contains('image-container')) { - console.log('Image is already in image-container, checking for delete button'); + console.log('Image is already in image-container, checking for delete button') // 确保图片有正确的类名 - img.className = 'editor-image'; - img.setAttribute('data-draggable', 'true'); - + img.className = 'editor-image' + img.setAttribute('data-draggable', 'true') + // 为已存在的图片容器添加删除按钮事件监听器 - const imgContainer = img.parentNode; - const deleteBtn = imgContainer.querySelector('.image-delete-btn'); + const imgContainer = img.parentNode + const deleteBtn = imgContainer.querySelector('.image-delete-btn') if (deleteBtn) { - console.log('Found existing delete button, adding event listeners'); + console.log('Found existing delete button, adding event listeners') // 先移除可能已有的事件监听器，避免重复 - deleteBtn.removeEventListener('click', null); - deleteBtn.removeEventListener('touchend', null); - - deleteBtn.addEventListener('click', function(e) { - e.stopPropagation(); - imgContainer.remove(); - handleInput(); - }); - - deleteBtn.addEventListener('touchend', function(e) { - e.stopPropagation(); - imgContainer.remove(); - handleInput(); - }); - + deleteBtn.removeEventListener('click', null) + deleteBtn.removeEventListener('touchend', null) + + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + imgContainer.remove() + handleInput() + }) + + deleteBtn.addEventListener('touchend', function (e) { + e.stopPropagation() + imgContainer.remove() + handleInput() + }) + // 为图片容器添加短按事件以显示/隐藏删除按钮 // 先移除可能已有的事件监听器，避免重复 - const touchStartHandler = imgContainer._touchStartHandler; - const touchEndHandler = imgContainer._touchEndHandler; - + const touchStartHandler = imgContainer._touchStartHandler + const touchEndHandler = imgContainer._touchEndHandler + if (touchStartHandler) { - imgContainer.removeEventListener('touchstart', touchStartHandler); + imgContainer.removeEventListener('touchstart', touchStartHandler) } - + if (touchEndHandler) { - imgContainer.removeEventListener('touchend', touchEndHandler); + imgContainer.removeEventListener('touchend', touchEndHandler) } - - let touchStartTime = 0; - const newTouchStartHandler = function(e) { - touchStartTime = Date.now(); - }; - - const newTouchEndHandler = function(e) { - const touchDuration = Date.now() - touchStartTime; - console.log('Touch end event triggered for existing image, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress); + + let touchStartTime = 0 + const newTouchStartHandler = function (e) { + touchStartTime = Date.now() + } + + const newTouchEndHandler = function (e) { + const touchDuration = Date.now() - touchStartTime + console.log('Touch end event triggered for existing image, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress) // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 if (touchDuration < 200 && !dragState.value.isLongPress) { - e.stopPropagation(); - console.log('Short tap detected for existing image, toggling delete button visibility'); + e.stopPropagation() + console.log('Short tap detected for existing image, toggling delete button visibility') // 切换删除按钮的显示状态 if (deleteBtn) { - console.log('Current delete button display style for existing image:', deleteBtn.style.display); + console.log('Current delete button display style for existing image:', deleteBtn.style.display) // 检查删除按钮当前是否可见 - const computedStyle = getComputedStyle(deleteBtn); - const isCurrentlyVisible = deleteBtn.style.display === 'block' || - computedStyle.display === 'block' || - (deleteBtn.style.display !== 'none' && - computedStyle.display !== 'none'); - - console.log('Delete button current styles for existing image - inline:', deleteBtn.style.display, 'computed:', computedStyle.display); - + const isCurrentlyVisible = deleteBtn.classList.contains('visible') + + console.log('Delete button current styles for existing image - inline:', deleteBtn.style.display) + if (isCurrentlyVisible) { - deleteBtn.style.display = 'none'; - console.log('Delete button hidden for existing image'); + deleteBtn.classList.remove('visible') + console.log('Delete button hidden for existing image') } else { - deleteBtn.style.display = 'block'; - console.log('Delete button displayed for existing image'); + deleteBtn.classList.add('visible') + console.log('Delete button displayed for existing image') } } else { - console.log('Delete button not found for existing image'); + console.log('Delete button not found for existing image') } } else { - console.log('Not a short tap or isLongPress is true for existing image'); + console.log('Not a short tap or isLongPress is true for existing image') } - }; - - imgContainer.addEventListener('touchstart', newTouchStartHandler); - imgContainer.addEventListener('touchend', newTouchEndHandler); - + } + + imgContainer.addEventListener('touchstart', newTouchStartHandler) + imgContainer.addEventListener('touchend', newTouchEndHandler) + // 保存事件处理函数的引用，以便后续移除 - imgContainer._touchStartHandler = newTouchStartHandler; - imgContainer._touchEndHandler = newTouchEndHandler; + imgContainer._touchStartHandler = newTouchStartHandler + imgContainer._touchEndHandler = newTouchEndHandler } - return; + return } - + // 创建图片容器 - const imgContainer = document.createElement('div'); - imgContainer.className = 'image-container'; - imgContainer.style.position = 'relative'; - imgContainer.style.display = 'inline-block'; - + const imgContainer = document.createElement('div') + imgContainer.className = 'image-container' + imgContainer.style.position = 'relative' + imgContainer.style.display = 'inline-block' + // 设置图片样式 - img.className = 'editor-image'; - img.setAttribute('data-draggable', 'true'); - img.style.maxWidth = '100%'; - img.style.height = 'auto'; - img.style.display = 'block'; - img.style.objectFit = 'cover'; - img.style.boxSizing = 'border-box'; - img.style.border = '0.625rem solid white'; - img.style.borderRadius = '0.2rem'; - img.style.boxShadow = '0 1px 5px rgba(0, 0, 0, 0.18)'; - img.style.background = 'var(--background-secondary)'; - img.style.position = 'relative'; - img.style.outline = 'none'; - img.style.userSelect = 'none'; // 防止选中 - img.style.webkitUserSelect = 'none'; // 防止选中 - img.style.mozUserSelect = 'none'; // 防止选中 - img.style.msUserSelect = 'none'; // 防止选中 - img.style.webkitTouchCallout = 'none'; // 防止长按弹出菜单 - img.style.webkitTapHighlightColor = 'transparent'; // 防止点击高亮 - img.draggable = true; - + img.className = 'editor-image' + img.setAttribute('data-draggable', 'true') + img.style.maxWidth = '100%' + img.style.height = 'auto' + img.style.display = 'block' + img.style.objectFit = 'cover' + img.style.boxSizing = 'border-box' + img.style.border = '0.625rem solid white' + img.style.borderRadius = '0.2rem' + img.style.boxShadow = '0 1px 5px rgba(0, 0, 0, 0.18)' + img.style.background = 'var(--background-secondary)' + img.style.position = 'relative' + img.style.outline = 'none' + img.style.userSelect = 'none' // 防止选中 + img.style.webkitUserSelect = 'none' // 防止选中 + img.style.mozUserSelect = 'none' // 防止选中 + img.style.msUserSelect = 'none' // 防止选中 + img.style.webkitTouchCallout = 'none' // 防止长按弹出菜单 + img.style.webkitTapHighlightColor = 'transparent' // 防止点击高亮 + img.draggable = true + // 创建删除按钮 - const deleteBtn = document.createElement('div'); - deleteBtn.className = 'image-delete-btn'; - deleteBtn.style.cssText = 'position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; cursor: pointer; z-index: 1000; display: none; transition: opacity 0.2s ease; touch-action: manipulation;'; - + const deleteBtn = document.createElement('div') + deleteBtn.className = 'image-delete-btn' + // 将图片和删除按钮添加到容器中 - imgContainer.appendChild(img); - imgContainer.appendChild(deleteBtn); - + imgContainer.appendChild(img) + imgContainer.appendChild(deleteBtn) + // 替换原来的图片 - img.parentNode.replaceChild(imgContainer, img); - + img.parentNode.replaceChild(imgContainer, img) + // 为新包装的图片添加事件监听器 // 先移除可能已有的事件监听器，避免重复 imgContainer.removeEventListener('touchstart', handleTouchStart) imgContainer.removeEventListener('touchmove', handleTouchMove) imgContainer.removeEventListener('touchend', handleTouchEnd) imgContainer.removeEventListener('touchcancel', handleTouchCancel) - + // 重新添加事件监听器 imgContainer.addEventListener('touchstart', handleTouchStart) imgContainer.addEventListener('touchmove', handleTouchMove) imgContainer.addEventListener('touchend', handleTouchEnd) imgContainer.addEventListener('touchcancel', handleTouchCancel) - + // 为删除按钮添加点击事件 // 先移除可能已有的事件监听器，避免重复 deleteBtn.removeEventListener('click', null) deleteBtn.removeEventListener('touchend', null) - - deleteBtn.addEventListener('click', function(e) { - e.stopPropagation(); - imgContainer.remove(); - handleInput(); - }); - - deleteBtn.addEventListener('touchend', function(e) { - e.stopPropagation(); - imgContainer.remove(); - handleInput(); - }); - + + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + imgContainer.remove() + handleInput() + }) + + deleteBtn.addEventListener('touchend', function (e) { + e.stopPropagation() + imgContainer.remove() + handleInput() + }) + // 为图片容器添加短按事件以显示/隐藏删除按钮 - let touchStartTime = 0; - const touchStartHandler = function(e) { - touchStartTime = Date.now(); - }; - - const touchEndHandler = function(e) { - const touchDuration = Date.now() - touchStartTime; - console.log('Touch end event triggered in wrapOrphanedImages, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress); + let touchStartTime = 0 + const touchStartHandler = function (e) { + touchStartTime = Date.now() + } + + const touchEndHandler = function (e) { + const touchDuration = Date.now() - touchStartTime + console.log('Touch end event triggered in wrapOrphanedImages, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress) // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 if (touchDuration < 200 && !dragState.value.isLongPress) { - e.stopPropagation(); - console.log('Short tap detected in wrapOrphanedImages, toggling delete button visibility'); + e.stopPropagation() + console.log('Short tap detected in wrapOrphanedImages, toggling delete button visibility') // 切换删除按钮的显示状态 if (deleteBtn) { - console.log('Current delete button display style in wrapOrphanedImages:', deleteBtn.style.display); + console.log('Current delete button display style in wrapOrphanedImages:', deleteBtn.style.display) // 检查删除按钮当前是否可见 - const computedStyle = getComputedStyle(deleteBtn); - const isCurrentlyVisible = deleteBtn.style.display === 'block' || - computedStyle.display === 'block' || - (deleteBtn.style.display !== 'none' && - computedStyle.display !== 'none'); - - console.log('Delete button current styles - inline:', deleteBtn.style.display, 'computed:', computedStyle.display); - console.log('Delete button background image:', computedStyle.backgroundImage); - console.log('Delete button width:', computedStyle.width, 'height:', computedStyle.height); - console.log('Delete button position:', computedStyle.position); - console.log('Delete button z-index:', computedStyle.zIndex); - + const isCurrentlyVisible = deleteBtn.classList.contains('visible') + + console.log('Delete button current styles - inline:', deleteBtn.style.display) + if (isCurrentlyVisible) { - deleteBtn.style.display = 'none'; - console.log('Delete button hidden in wrapOrphanedImages'); + deleteBtn.classList.remove('visible') + console.log('Delete button hidden in wrapOrphanedImages') } else { - deleteBtn.style.display = 'block'; - console.log('Delete button displayed in wrapOrphanedImages'); + deleteBtn.classList.add('visible') + console.log('Delete button displayed in wrapOrphanedImages') } } else { - console.log('Delete button not found in wrapOrphanedImages'); + console.log('Delete button not found in wrapOrphanedImages') } } else { - console.log('Not a short tap or isLongPress is true in wrapOrphanedImages'); + console.log('Not a short tap or isLongPress is true in wrapOrphanedImages') } - }; - - imgContainer.addEventListener('touchstart', touchStartHandler); - imgContainer.addEventListener('touchend', touchEndHandler); - + } + + imgContainer.addEventListener('touchstart', touchStartHandler) + imgContainer.addEventListener('touchend', touchEndHandler) + // 保存事件处理函数的引用，以便后续移除 - imgContainer._touchStartHandler = touchStartHandler; - imgContainer._touchEndHandler = touchEndHandler; - }); + imgContainer._touchStartHandler = touchStartHandler + imgContainer._touchEndHandler = touchEndHandler + }) } // 调整已有图片的高度 @@ -1849,7 +1817,7 @@ const adjustExistingImages = () => { imageContainers.forEach(container => { const img = container.querySelector('img.editor-image') if (!img) return - + console.log('Processing image:', img) // 只处理还没有调整过高度的图片 if (!img.dataset.heightAdjusted) { @@ -1895,12 +1863,12 @@ const adjustExistingImages = () => { tempImg.src = img.src } }) - + // 为现有图片添加拖拽功能和删除按钮功能 imageContainers.forEach(container => { const img = container.querySelector('img.editor-image') if (!img) return - + console.log('Adding drag functionality to image:', img) // 为图片容器添加事件监听器（总是添加，确保功能正常） // 先移除可能已有的事件监听器，避免重复 @@ -1908,13 +1876,13 @@ const adjustExistingImages = () => { container.removeEventListener('touchmove', handleTouchMove) container.removeEventListener('touchend', handleTouchEnd) container.removeEventListener('touchcancel', handleTouchCancel) - + // 重新添加事件监听器 container.addEventListener('touchstart', handleTouchStart) container.addEventListener('touchmove', handleTouchMove) container.addEventListener('touchend', handleTouchEnd) container.addEventListener('touchcancel', handleTouchCancel) - + // 为删除按钮添加点击事件 let deleteBtn = container.querySelector('.image-delete-btn') if (!deleteBtn) { @@ -1922,87 +1890,82 @@ const adjustExistingImages = () => { console.log('Delete button not found, creating new one') deleteBtn = document.createElement('div') deleteBtn.className = 'image-delete-btn' - deleteBtn.style.cssText = 'position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; cursor: pointer; z-index: 1000; display: none; transition: opacity 0.2s ease; touch-action: manipulation;' container.appendChild(deleteBtn) } - + if (deleteBtn) { // 先移除可能已有的事件监听器，避免重复 deleteBtn.removeEventListener('click', null) deleteBtn.removeEventListener('touchend', null) - - deleteBtn.addEventListener('click', function(e) { - e.stopPropagation(); - container.remove(); - handleInput(); - }); - - deleteBtn.addEventListener('touchend', function(e) { - e.stopPropagation(); - container.remove(); - handleInput(); - }); + + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + container.remove() + handleInput() + }) + + deleteBtn.addEventListener('touchend', function (e) { + e.stopPropagation() + container.remove() + handleInput() + }) } - + // 为图片容器添加短按事件以显示/隐藏删除按钮 // 先移除可能已有的事件监听器，避免重复 - const touchStartHandler = container._touchStartHandler; - const touchEndHandler = container._touchEndHandler; - + const touchStartHandler = container._touchStartHandler + const touchEndHandler = container._touchEndHandler + if (touchStartHandler) { - container.removeEventListener('touchstart', touchStartHandler); + container.removeEventListener('touchstart', touchStartHandler) } - + if (touchEndHandler) { - container.removeEventListener('touchend', touchEndHandler); + container.removeEventListener('touchend', touchEndHandler) } - - let touchStartTime = 0; - const newTouchStartHandler = function(e) { - touchStartTime = Date.now(); - }; - - const newTouchEndHandler = function(e) { - const touchDuration = Date.now() - touchStartTime; - console.log('Touch end event triggered in adjustExistingImages, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress); + + let touchStartTime = 0 + const newTouchStartHandler = function (e) { + touchStartTime = Date.now() + } + + const newTouchEndHandler = function (e) { + const touchDuration = Date.now() - touchStartTime + console.log('Touch end event triggered in adjustExistingImages, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress) // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 if (touchDuration < 200 && !dragState.value.isLongPress) { - e.stopPropagation(); - console.log('Short tap detected in adjustExistingImages, toggling delete button visibility'); + e.stopPropagation() + console.log('Short tap detected in adjustExistingImages, toggling delete button visibility') // 切换删除按钮的显示状态 if (deleteBtn) { - console.log('Current delete button display style in adjustExistingImages:', deleteBtn.style.display); + console.log('Current delete button display style in adjustExistingImages:', deleteBtn.style.display) // 检查删除按钮当前是否可见 - const computedStyle = getComputedStyle(deleteBtn); - const isCurrentlyVisible = deleteBtn.style.display === 'block' || - computedStyle.display === 'block' || - (deleteBtn.style.display !== 'none' && - computedStyle.display !== 'none'); - - console.log('Delete button current styles - inline:', deleteBtn.style.display, 'computed:', computedStyle.display); - + const isCurrentlyVisible = deleteBtn.classList.contains('visible') + + console.log('Delete button current styles - inline:', deleteBtn.style.display) + if (isCurrentlyVisible) { - deleteBtn.style.display = 'none'; - console.log('Delete button hidden in adjustExistingImages'); + deleteBtn.classList.remove('visible') + console.log('Delete button hidden in adjustExistingImages') } else { - deleteBtn.style.display = 'block'; - console.log('Delete button displayed in adjustExistingImages'); + deleteBtn.classList.add('visible') + console.log('Delete button displayed in adjustExistingImages') } } else { - console.log('Delete button not found in adjustExistingImages'); + console.log('Delete button not found in adjustExistingImages') } } else { - console.log('Not a short tap or isLongPress is true in adjustExistingImages'); + console.log('Not a short tap or isLongPress is true in adjustExistingImages') } - }; - - container.addEventListener('touchstart', newTouchStartHandler); - container.addEventListener('touchend', newTouchEndHandler); - + } + + container.addEventListener('touchstart', newTouchStartHandler) + container.addEventListener('touchend', newTouchEndHandler) + // 保存事件处理函数的引用，以便后续移除 - container._touchStartHandler = newTouchStartHandler; - container._touchEndHandler = newTouchEndHandler; - + container._touchStartHandler = newTouchStartHandler + container._touchEndHandler = newTouchEndHandler + img.setAttribute('data-touch-listeners', 'true') console.log('Added touch event listeners') }) @@ -2012,38 +1975,44 @@ const adjustExistingImages = () => { // 清理动态添加的属性（仅在保存时移除临时属性，保留必要属性） const cleanContentForSave = () => { - if (!editorRef.value) return content.value; - + if (!editorRef.value) return content.value + // 创建一个临时的div来操作内容 - const tempDiv = document.createElement('div'); - tempDiv.innerHTML = editorRef.value.innerHTML; - + const tempDiv = document.createElement('div') + tempDiv.innerHTML = editorRef.value.innerHTML + // 移除图片上的临时动态属性 - const images = tempDiv.querySelectorAll('img.editor-image'); + const images = tempDiv.querySelectorAll('img.editor-image') images.forEach(img => { // 移除拖拽时的临时样式属性 - img.style.removeProperty('z-index'); - img.style.removeProperty('transition'); - img.style.removeProperty('transform'); - img.style.removeProperty('opacity'); - + img.style.removeProperty('z-index') + img.style.removeProperty('transition') + img.style.removeProperty('transform') + img.style.removeProperty('opacity') + // 移除拖拽时的临时类名 - img.classList.remove('dragging'); - img.classList.remove('swap-animation'); - + img.classList.remove('dragging') + img.classList.remove('swap-animation') + // 移除临时的数据属性（保留必要的属性如data-draggable） - img.removeAttribute('data-height-adjusted'); - img.removeAttribute('data-touch-listeners'); - }); - + img.removeAttribute('data-height-adjusted') + img.removeAttribute('data-touch-listeners') + }) + + // 移除删除按钮的显示状态类 + const deleteButtons = tempDiv.querySelectorAll('.image-delete-btn') + deleteButtons.forEach(btn => { + btn.classList.remove('visible') + }) + // 移除拖拽指示器（如果存在） - const indicators = tempDiv.querySelectorAll('.drag-indicator'); + const indicators = tempDiv.querySelectorAll('.drag-indicator') indicators.forEach(indicator => { - indicator.remove(); - }); - - return tempDiv.innerHTML; -}; + indicator.remove() + }) + + return tempDiv.innerHTML +} // 暴露方法给父组件 defineExpose({ @@ -2073,105 +2042,100 @@ defineExpose({ imageContainers.forEach(container => { const img = container.querySelector('img.editor-image') if (!img) return - + console.log('Adding touch listeners to image in setContent:', img) // 先移除可能已有的事件监听器，避免重复 container.removeEventListener('touchstart', handleTouchStart) container.removeEventListener('touchmove', handleTouchMove) container.removeEventListener('touchend', handleTouchEnd) container.removeEventListener('touchcancel', handleTouchCancel) - + // 重新添加事件监听器 container.addEventListener('touchstart', handleTouchStart) container.addEventListener('touchmove', handleTouchMove) container.addEventListener('touchend', handleTouchEnd) container.addEventListener('touchcancel', handleTouchCancel) - + // 为删除按钮添加点击事件 const deleteBtn = container.querySelector('.image-delete-btn') if (deleteBtn) { // 先移除可能已有的事件监听器，避免重复 deleteBtn.removeEventListener('click', null) deleteBtn.removeEventListener('touchend', null) - - deleteBtn.addEventListener('click', function(e) { - e.stopPropagation(); - container.remove(); - handleInput(); - }); - - deleteBtn.addEventListener('touchend', function(e) { - e.stopPropagation(); - container.remove(); - handleInput(); - }); + + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + container.remove() + handleInput() + }) + + deleteBtn.addEventListener('touchend', function (e) { + e.stopPropagation() + container.remove() + handleInput() + }) } - + // 为图片容器添加短按事件以显示/隐藏删除按钮 // 先移除可能已有的事件监听器，避免重复 - const touchStartHandler = container._touchStartHandler; - const touchEndHandler = container._touchEndHandler; - + const touchStartHandler = container._touchStartHandler + const touchEndHandler = container._touchEndHandler + if (touchStartHandler) { - container.removeEventListener('touchstart', touchStartHandler); + container.removeEventListener('touchstart', touchStartHandler) } - + if (touchEndHandler) { - container.removeEventListener('touchend', touchEndHandler); + container.removeEventListener('touchend', touchEndHandler) } - - let touchStartTime = 0; - const newTouchStartHandler = function(e) { - touchStartTime = Date.now(); - }; - - const newTouchEndHandler = function(e) { - const touchDuration = Date.now() - touchStartTime; - console.log('Touch end event triggered in setContent, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress); + + let touchStartTime = 0 + const newTouchStartHandler = function (e) { + touchStartTime = Date.now() + } + + const newTouchEndHandler = function (e) { + const touchDuration = Date.now() - touchStartTime + console.log('Touch end event triggered in setContent, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress) // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 if (touchDuration < 200 && !dragState.value.isLongPress) { - e.stopPropagation(); - console.log('Short tap detected in setContent, toggling delete button visibility'); + e.stopPropagation() + console.log('Short tap detected in setContent, toggling delete button visibility') // 切换删除按钮的显示状态 if (deleteBtn) { - console.log('Current delete button display style in setContent:', deleteBtn.style.display); + console.log('Current delete button display style in setContent:', deleteBtn.style.display) // 检查删除按钮当前是否可见 - const computedStyle = getComputedStyle(deleteBtn); - const isCurrentlyVisible = deleteBtn.style.display === 'block' || - computedStyle.display === 'block' || - (deleteBtn.style.display !== 'none' && - computedStyle.display !== 'none'); - - console.log('Delete button current styles - inline:', deleteBtn.style.display, 'computed:', computedStyle.display); - console.log('Delete button background image:', computedStyle.backgroundImage); - console.log('Delete button width:', computedStyle.width, 'height:', computedStyle.height); - console.log('Delete button position:', computedStyle.position); - console.log('Delete button z-index:', computedStyle.zIndex); - + const computedStyle = getComputedStyle(deleteBtn) + const isCurrentlyVisible = deleteBtn.classList.contains('visible') + + console.log('Delete button current styles - inline:', deleteBtn.style.display, 'computed:', computedStyle.display) + console.log('Delete button background image:', computedStyle.backgroundImage) + console.log('Delete button width:', computedStyle.width, 'height:', computedStyle.height) + console.log('Delete button position:', computedStyle.position) + console.log('Delete button z-index:', computedStyle.zIndex) + if (isCurrentlyVisible) { - deleteBtn.style.display = 'none'; - console.log('Delete button hidden in setContent'); + deleteBtn.classList.remove('visible') + console.log('Delete button hidden in setContent') } else { - deleteBtn.style.display = 'block'; - console.log('Delete button displayed in setContent'); - // 添加调试样式以确保可见 - deleteBtn.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'; // 半透明红色背景用于调试 + deleteBtn.classList.add('visible') + console.log('Delete button displayed in setContent') } } else { - console.log('Delete button not found in setContent'); + console.log('Delete button not found in setContent') } } else { - console.log('Not a short tap or isLongPress is true in setContent'); + console.log('Not a short tap or isLongPress is true in setContent') } - }; - - container.addEventListener('touchstart', newTouchStartHandler); - container.addEventListener('touchend', newTouchEndHandler); - + } + + container.addEventListener('touchstart', newTouchStartHandler) + container.addEventListener('touchend', newTouchEndHandler) + // 保存事件处理函数的引用，以便后续移除 - container._touchStartHandler = newTouchStartHandler; - container._touchEndHandler = newTouchEndHandler; - + container._touchStartHandler = newTouchStartHandler + container._touchEndHandler = newTouchEndHandler + img.setAttribute('data-touch-listeners', 'true') console.log('Added touch event listeners') }) @@ -2212,99 +2176,95 @@ defineExpose({ imageContainers.forEach(container => { const img = container.querySelector('img.editor-image') if (!img) return - + console.log('Adding touch listeners to image in delayed setContent:', img) // 先移除可能已有的事件监听器，避免重复 container.removeEventListener('touchstart', handleTouchStart) container.removeEventListener('touchmove', handleTouchMove) container.removeEventListener('touchend', handleTouchEnd) container.removeEventListener('touchcancel', handleTouchCancel) - + // 重新添加事件监听器 container.addEventListener('touchstart', handleTouchStart) container.addEventListener('touchmove', handleTouchMove) container.addEventListener('touchend', handleTouchEnd) container.addEventListener('touchcancel', handleTouchCancel) - + // 为删除按钮添加点击事件 const deleteBtn = container.querySelector('.image-delete-btn') if (deleteBtn) { // 先移除可能已有的事件监听器，避免重复 deleteBtn.removeEventListener('click', null) deleteBtn.removeEventListener('touchend', null) - - deleteBtn.addEventListener('click', function(e) { - e.stopPropagation(); - container.remove(); - handleInput(); - }); - - deleteBtn.addEventListener('touchend', function(e) { - e.stopPropagation(); - container.remove(); - handleInput(); - }); + + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + container.remove() + handleInput() + }) + + deleteBtn.addEventListener('touchend', function (e) { + e.stopPropagation() + container.remove() + handleInput() + }) } - + // 为图片容器添加短按事件以显示/隐藏删除按钮 // 先移除可能已有的事件监听器，避免重复 - const touchStartHandler = container._touchStartHandler; - const touchEndHandler = container._touchEndHandler; - + const touchStartHandler = container._touchStartHandler + const touchEndHandler = container._touchEndHandler + if (touchStartHandler) { - container.removeEventListener('touchstart', touchStartHandler); + container.removeEventListener('touchstart', touchStartHandler) } - + if (touchEndHandler) { - container.removeEventListener('touchend', touchEndHandler); + container.removeEventListener('touchend', touchEndHandler) } - - let touchStartTime = 0; - const newTouchStartHandler = function(e) { - touchStartTime = Date.now(); - }; - - const newTouchEndHandler = function(e) { - const touchDuration = Date.now() - touchStartTime; - console.log('Touch end event triggered in delayed setContent, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress); + + let touchStartTime = 0 + const newTouchStartHandler = function (e) { + touchStartTime = Date.now() + } + + const newTouchEndHandler = function (e) { + const touchDuration = Date.now() - touchStartTime + console.log('Touch end event triggered in delayed setContent, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress) // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 if (touchDuration < 200 && !dragState.value.isLongPress) { - e.stopPropagation(); - console.log('Short tap detected in delayed setContent, toggling delete button visibility'); + e.stopPropagation() + console.log('Short tap detected in delayed setContent, toggling delete按钮visibility') // 切换删除按钮的显示状态 if (deleteBtn) { - console.log('Current delete button display style in delayed setContent:', deleteBtn.style.display); + console.log('Current delete button display style in delayed setContent:', deleteBtn.style.display) // 检查删除按钮当前是否可见 - const computedStyle = getComputedStyle(deleteBtn); - const isCurrentlyVisible = deleteBtn.style.display === 'block' || - computedStyle.display === 'block' || - (deleteBtn.style.display !== 'none' && - computedStyle.display !== 'none'); - - console.log('Delete button current styles - inline:', deleteBtn.style.display, 'computed:', computedStyle.display); - + const isCurrentlyVisible = deleteBtn.classList.contains('visible') + + console.log('Delete button current styles - inline:', deleteBtn.style.display, 'computed:', computedStyle.display) + if (isCurrentlyVisible) { - deleteBtn.style.display = 'none'; - console.log('Delete button hidden in delayed setContent'); + deleteBtn.classList.remove('visible') + console.log('Delete button hidden in delayed setContent') } else { - deleteBtn.style.display = 'block'; - console.log('Delete button displayed in delayed setContent'); + deleteBtn.classList.add('visible') + console.log('Delete button displayed in delayed setContent') } } else { - console.log('Delete button not found in delayed setContent'); + console.log('Delete button not found in delayed setContent') } } else { - console.log('Not a short tap or isLongPress is true in delayed setContent'); + console.log('Not a short tap or isLongPress is true in delayed setContent') } - }; - - container.addEventListener('touchstart', newTouchStartHandler); - container.addEventListener('touchend', newTouchEndHandler); - + } + + container.addEventListener('touchstart', newTouchStartHandler) + container.addEventListener('touchend', newTouchEndHandler) + // 保存事件处理函数的引用，以便后续移除 - container._touchStartHandler = newTouchStartHandler; - container._touchEndHandler = newTouchEndHandler; - + container._touchStartHandler = newTouchStartHandler + container._touchEndHandler = newTouchEndHandler + img.setAttribute('data-touch-listeners', 'true') console.log('Added touch event listeners') }) @@ -2560,7 +2520,6 @@ defineExpose({ height: 24px; cursor: pointer; z-index: 1000; - display: none; transition: opacity 0.2s ease; /* 使用背景图片而不是背景色和边框，确保图标正确显示 */ background-image: url('/assets/icons/drawable-xxhdpi/item_image_btn_unbrella_delete.png'); @@ -2568,6 +2527,13 @@ defineExpose({ background-repeat: no-repeat; background-position: center; background-color: transparent; /* 确保背景透明 */ + pointer-events: none; + opacity: 0; +} + +:deep(.editor-content .image-delete-btn.visible) { + pointer-events: all; + opacity: 1; } :deep(.editor-content .editor-image.draggable) { From 02b0fa260dfff9e8150cbdfba194c026e2c32e24 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 14:53:26 +0800 Subject: [PATCH 24/37] =?UTF-8?q?=20=20feat:=20=E4=BC=98=E5=8C=96=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E5=88=A0=E9=99=A4=E6=8C=89=E9=92=AE=E4=BA=A4=E4=BA=92?= =?UTF-8?q?=E5=92=8C=E9=98=B2=E8=AF=AF=E8=A7=A6=E6=9C=BA=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加全局常量DELETE_BUTTON_DELAY(1000ms)统一管理删除按钮延时时间 - 实现删除按钮延时显示机制，防止误触操作 - 调整删除按钮样式尺寸，增大点击区域(40px*40px) - 优化删除按钮显示/隐藏动画过渡效果 - 修复删除按钮事件监听器重复绑定问题 - 完善删除按钮可见性检查逻辑，确保只有可见状态才能执行删除操作 --- src/components/RichTextEditor.vue | 169 ++++++++++++++---------------- 1 file changed, 80 insertions(+), 89 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index df72eb8..143c676 100644 --- a/src/components/RichTextEditor.vue +++ b/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() - container.remove() - handleInput() - }) - - deleteBtn.addEventListener('touchend', function (e) { - e.stopPropagation() - container.remove() - handleInput() - }) + // 添加延时检查，确保删除按钮是可见的才执行删除操作 + setTimeout(() => { + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + if (deleteBtn.classList.contains('visible')) { + 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() - imgContainer.remove() - handleInput() - }) - - deleteBtn.addEventListener('touchend', function (e) { - e.stopPropagation() - imgContainer.remove() - handleInput() - }) + // 添加延时检查，确保删除按钮是可见的才执行删除操作 + setTimeout(() => { + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + if (deleteBtn.classList.contains('visible')) { + 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() - imgContainer.remove() - handleInput() - }) - - deleteBtn.addEventListener('touchend', function (e) { - e.stopPropagation() - imgContainer.remove() - handleInput() - }) + // 添加延时检查，确保删除按钮是可见的才执行删除操作 + setTimeout(() => { + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + if (deleteBtn.classList.contains('visible')) { + 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() - imgContainer.remove() - handleInput() - }) - - deleteBtn.addEventListener('touchend', function (e) { - e.stopPropagation() - imgContainer.remove() - handleInput() - }) + // 添加延时检查，确保删除按钮是可见的才执行删除操作 + setTimeout(() => { + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + if (deleteBtn.classList.contains('visible')) { + 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() - container.remove() - handleInput() - }) - - deleteBtn.addEventListener('touchend', function (e) { - e.stopPropagation() - container.remove() - handleInput() - }) + // 添加延时检查，确保删除按钮是可见的才执行删除操作 + setTimeout(() => { + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + if (deleteBtn.classList.contains('visible')) { + imgContainer.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() - container.remove() - handleInput() - }) - - deleteBtn.addEventListener('touchend', function (e) { - e.stopPropagation() - container.remove() - handleInput() - }) + // 添加延时检查，确保删除按钮是可见的才执行删除操作 + setTimeout(() => { + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + if (deleteBtn.classList.contains('visible')) { + imgContainer.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() - container.remove() - handleInput() - }) - - deleteBtn.addEventListener('touchend', function (e) { - e.stopPropagation() - container.remove() - handleInput() - }) + // 添加延时检查，确保删除按钮是可见的才执行删除操作 + setTimeout(() => { + deleteBtn.addEventListener('click', function (e) { + e.stopPropagation() + if (deleteBtn.classList.contains('visible')) { + imgContainer.remove() + handleInput() + } + }) + }, DELETE_BUTTON_DELAY) // 使用全局常量延时，确保删除按钮状态已正确设置 } // 为图片容器添加短按事件以显示/隐藏删除按钮 @@ -2514,13 +2503,13 @@ defineExpose({ :deep(.editor-content .image-delete-btn) { position: absolute; - top: 8px; - right: 8px; - width: 24px; - height: 24px; + top: 4px; + right: 4px; + width: 40px; + 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) { From c135ab0613ecf17548c1161e72eb1f8251d6c0bf Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 16:06:56 +0800 Subject: [PATCH 25/37] =?UTF-8?q?=20=201.=20=E9=87=8D=E6=9E=84=E4=BA=86?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E7=9B=91=E5=90=AC=E5=99=A8=E7=AE=A1=E7=90=86?= =?UTF-8?q?=EF=BC=9A=20=20=20=20=20=20-=20=E5=88=9B=E5=BB=BA=E4=BA=86?= =?UTF-8?q?=E7=BB=9F=E4=B8=80=E7=9A=84eventManager=E5=AF=B9=E8=B1=A1?= =?UTF-8?q?=E6=9D=A5=E7=AE=A1=E7=90=86=E5=9B=BE=E7=89=87=E5=AE=B9=E5=99=A8?= =?UTF-8?q?=E7=9A=84=E4=BA=8B=E4=BB=B6=E7=9B=91=E5=90=AC=E5=99=A8=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E5=92=8C=E7=A7=BB=E9=99=A4=20=20=20=20=20=20-=20?= =?UTF-8?q?=E6=B6=88=E9=99=A4=E4=BA=86=E5=9C=A8=E5=A4=9A=E4=B8=AA=E5=9C=B0?= =?UTF-8?q?=E6=96=B9=E9=87=8D=E5=A4=8D=E6=B7=BB=E5=8A=A0=E7=9B=B8=E5=90=8C?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E7=9B=91=E5=90=AC=E5=99=A8=E7=9A=84=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=20=20=20=20=20=20-=20=E4=BF=AE=E5=A4=8D=E4=BA=86?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E7=9B=91=E5=90=AC=E5=99=A8=E6=97=A0=E6=B3=95?= =?UTF-8?q?=E6=AD=A3=E7=A1=AE=E7=A7=BB=E9=99=A4=E7=9A=84=E9=97=AE=E9=A2=98?= =?UTF-8?q?=EF=BC=8C=E9=80=9A=E8=BF=87=E4=BF=9D=E5=AD=98=E5=87=BD=E6=95=B0?= =?UTF-8?q?=E5=BC=95=E7=94=A8=E6=9D=A5=E7=A1=AE=E4=BF=9D=E8=83=BD=E6=AD=A3?= =?UTF-8?q?=E7=A1=AE=E7=A7=BB=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2. 优化了图片处理功能： - 创建了createImageContainer函数来统一创建图片容器和相关元素 - 创建了adjustImageSize函数来统一处理图片尺寸调整 - 简化了wrapOrphanedImages和adjustExistingImages函数的实现 3. 优化了待办事项功能： - 创建了createTodoItem函数来统一创建待办事项元素 - 创建了addTodoEventListeners函数来统一添加待办事项的事件监听器 - 简化了insertTodoList函数的实现，减少了重复代码 4. 简化了setContent函数： - 移除了大量的重复代码和不必要的日志输出 - 利用已有的函数来处理图片相关的功能 5. 优化了组件生命周期钩子： - 简化了onMounted和onUnmounted函数中的代码 - 使用eventManager来统一管理事件监听器的添加和移除 6. 优化了触摸事件处理： - 创建了resetDragAnimation函数来统一处理拖拽动画的重置 - 简化了handleTouchEnd和handleTouchCancel函数的实现 7. 简化了工具栏按钮处理逻辑： - 简化了handleToolClick函数的实现 --- src/components/RichTextEditor.vue | 1359 +++++++---------------------- 1 file changed, 313 insertions(+), 1046 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index 143c676..8e0130d 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -45,17 +45,106 @@ const dragState = ref({ lastMoveTime: 0, }) +// 统一的事件监听器管理器 +const eventManager = { + // 为图片容器添加事件监听器 + addImageContainerListeners(container, deleteBtn) { + // 先移除可能已有的事件监听器，避免重复 + this.removeImageContainerListeners(container) + + // 添加触摸事件监听器 + container.addEventListener('touchstart', handleTouchStart) + container.addEventListener('touchmove', handleTouchMove) + container.addEventListener('touchend', handleTouchEnd) + container.addEventListener('touchcancel', handleTouchCancel) + + // 为删除按钮添加点击事件 + if (deleteBtn) { + // 添加延时检查，确保删除按钮是可见的才执行删除操作 + setTimeout(() => { + // 保存事件处理函数的引用，以便后续移除 + const deleteHandler = function (e) { + e.stopPropagation() + if (deleteBtn.classList.contains('visible')) { + container.remove() + handleInput() + } + } + + deleteBtn.addEventListener('click', deleteHandler) + deleteBtn._deleteHandler = deleteHandler + }, DELETE_BUTTON_DELAY) + } + + // 为图片容器添加短按事件以显示/隐藏删除按钮 + let touchStartTime = 0 + const touchStartHandler = function (e) { + touchStartTime = Date.now() + } + + const touchEndHandler = function (e) { + const touchDuration = Date.now() - touchStartTime + // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 + if (touchDuration < 200 && !dragState.value.isLongPress) { + e.stopPropagation() + // 切换删除按钮的显示状态 + if (deleteBtn) { + const isCurrentlyVisible = deleteBtn.classList.contains('visible') + if (isCurrentlyVisible) { + deleteBtn.classList.remove('visible') + } else { + deleteBtn.classList.add('visible') + } + } + } + } + + container.addEventListener('touchstart', touchStartHandler) + container.addEventListener('touchend', touchEndHandler) + + // 保存事件处理函数的引用，以便后续移除 + container._touchStartHandler = touchStartHandler + container._touchEndHandler = touchEndHandler + }, + + // 移除图片容器的事件监听器 + removeImageContainerListeners(container) { + // 移除拖拽事件监听器 + container.removeEventListener('touchstart', handleTouchStart) + container.removeEventListener('touchmove', handleTouchMove) + container.removeEventListener('touchend', handleTouchEnd) + container.removeEventListener('touchcancel', handleTouchCancel) + + // 移除短按事件监听器 + const touchStartHandler = container._touchStartHandler + const touchEndHandler = container._touchEndHandler + + if (touchStartHandler) { + container.removeEventListener('touchstart', touchStartHandler) + delete container._touchStartHandler + } + + if (touchEndHandler) { + container.removeEventListener('touchend', touchEndHandler) + delete container._touchEndHandler + } + + // 移除删除按钮事件监听器 + const deleteBtn = container.querySelector('.image-delete-btn') + if (deleteBtn && deleteBtn._deleteHandler) { + deleteBtn.removeEventListener('click', deleteBtn._deleteHandler) + delete deleteBtn._deleteHandler + } + }, +} + // 初始化编辑器内容 onMounted(() => { - console.log('Editor mounted') if (editorRef.value) { - console.log('Editor ref available') if (props.modelValue) { - console.log('Setting initial content') try { editorRef.value.innerHTML = props.modelValue content.value = props.modelValue - console.log('Initial content set successfully') // 调整已有图片的高度 adjustExistingImages() } catch (error) { @@ -64,123 +153,40 @@ onMounted(() => { } else { // 即使没有初始内容，也要确保编辑器是可编辑的 editorRef.value.contentEditable = true - console.log('Editor initialized without initial content') } } // 记录初始视口高度 initialViewportHeight.value = window.visualViewport?.height || window.innerHeight - console.log('Initial viewport height:', initialViewportHeight.value) // 初始化CSS变量 document.documentElement.style.setProperty('--viewport-height', `${initialViewportHeight.value}px`) - console.log('Set viewport height CSS variable') // 添加虚拟键盘检测事件监听器 if (window.visualViewport) { - console.log('Adding viewport resize listener') window.visualViewport.addEventListener('resize', handleViewportResize) } else { - console.log('Adding window resize listener') window.addEventListener('resize', handleWindowResize) } // 为已有图片添加拖拽事件监听器 setTimeout(() => { - console.log('Adding drag event listeners to existing images') const imageContainers = editorRef.value.querySelectorAll('.image-container') - console.log('Found existing image containers:', imageContainers.length) imageContainers.forEach(container => { const img = container.querySelector('img.editor-image') if (!img) return - console.log('Adding touch listeners to image:', img) - // 添加触摸事件监听器 - container.addEventListener('touchstart', handleTouchStart) - container.addEventListener('touchmove', handleTouchMove) - container.addEventListener('touchend', handleTouchEnd) - container.addEventListener('touchcancel', handleTouchCancel) - // 为删除按钮添加点击事件 let deleteBtn = container.querySelector('.image-delete-btn') if (!deleteBtn) { // 如果删除按钮不存在，创建它 - console.log('Delete button not found in mounted hook, creating new one') deleteBtn = document.createElement('div') deleteBtn.className = 'image-delete-btn' container.appendChild(deleteBtn) } - if (deleteBtn) { - // 先移除可能已有的事件监听器，避免重复 - deleteBtn.removeEventListener('click', null) - - // 添加延时检查，确保删除按钮是可见的才执行删除操作 - setTimeout(() => { - deleteBtn.addEventListener('click', function (e) { - e.stopPropagation() - if (deleteBtn.classList.contains('visible')) { - container.remove() - handleInput() - } - }) - }, DELETE_BUTTON_DELAY) // 使用全局常量延时，确保删除按钮状态已正确设置 - } - - // 为图片容器添加短按事件以显示/隐藏删除按钮 - // 先移除可能已有的事件监听器，避免重复 - const touchStartHandler = container._touchStartHandler - const touchEndHandler = container._touchEndHandler - - if (touchStartHandler) { - container.removeEventListener('touchstart', touchStartHandler) - } - - if (touchEndHandler) { - container.removeEventListener('touchend', touchEndHandler) - } - - let touchStartTime = 0 - const newTouchStartHandler = function (e) { - touchStartTime = Date.now() - } - - const newTouchEndHandler = function (e) { - const touchDuration = Date.now() - touchStartTime - console.log('Touch end event triggered in mounted hook, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress) - // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 - if (touchDuration < 200 && !dragState.value.isLongPress) { - e.stopPropagation() - console.log('Short tap detected in mounted hook, toggling delete button visibility') - // 切换删除按钮的显示状态 - if (deleteBtn) { - console.log('Current delete button display style in mounted hook:', deleteBtn.style.display) - // 检查删除按钮当前是否可见 - const isCurrentlyVisible = deleteBtn.classList.contains('visible') - - console.log('Delete button current styles in mounted hook - inline:', deleteBtn.style.display, 'computed:', computedStyle.display) - - if (isCurrentlyVisible) { - deleteBtn.classList.remove('visible') - console.log('Delete button hidden in mounted hook') - } else { - deleteBtn.classList.add('visible') - console.log('Delete button displayed in mounted hook') - } - } else { - console.log('Delete button not found in mounted hook') - } - } else { - console.log('Not a short tap or isLongPress is true in mounted hook') - } - } - - container.addEventListener('touchstart', newTouchStartHandler) - container.addEventListener('touchend', newTouchEndHandler) - - // 保存事件处理函数的引用，以便后续移除 - container._touchStartHandler = newTouchStartHandler - container._touchEndHandler = newTouchEndHandler + // 使用事件管理器添加事件监听器 + eventManager.addImageContainerListeners(container, deleteBtn) }) }, 0) }) @@ -197,32 +203,7 @@ onUnmounted(() => { if (editorRef.value) { const imageContainers = editorRef.value.querySelectorAll('.image-container') imageContainers.forEach(container => { - // 移除拖拽事件监听器 - container.removeEventListener('touchstart', handleTouchStart) - container.removeEventListener('touchmove', handleTouchMove) - container.removeEventListener('touchend', handleTouchEnd) - container.removeEventListener('touchcancel', handleTouchCancel) - - // 移除短按事件监听器 - const touchStartHandler = container._touchStartHandler - const touchEndHandler = container._touchEndHandler - - if (touchStartHandler) { - container.removeEventListener('touchstart', touchStartHandler) - delete container._touchStartHandler - } - - if (touchEndHandler) { - container.removeEventListener('touchend', touchEndHandler) - delete container._touchEndHandler - } - - // 移除删除按钮事件监听器 - const deleteBtn = container.querySelector('.image-delete-btn') - if (deleteBtn) { - deleteBtn.removeEventListener('click', null) - deleteBtn.removeEventListener('touchend', null) - } + eventManager.removeImageContainerListeners(container) }) } }) @@ -476,6 +457,72 @@ const insertQuote = () => { } } +// 统一的待办事项创建函数 +const createTodoItem = (text = '') => { + // 创建待办事项容器 + const todoContainer = document.createElement('div') + todoContainer.contentEditable = false // 容器本身不可编辑 + todoContainer.className = 'todo-container' + + // 创建图标元素（复选框） + const icon = document.createElement('img') + icon.className = 'todo-icon' + icon.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks.png' // 未完成状态图标 + icon.alt = '待办事项' + + // 创建内容容器（可编辑区域） + const contentSpan = document.createElement('div') + contentSpan.contentEditable = true // 内容区域可编辑 + contentSpan.className = 'todo-content' + contentSpan.textContent = text || '待办事项' // 默认文本 + + // 组装元素：将图标和内容区域添加到容器中 + todoContainer.appendChild(icon) + todoContainer.appendChild(contentSpan) + + return { todoContainer, icon, contentSpan } +} + +// 为待办事项添加事件监听器 +const addTodoEventListeners = (icon, contentSpan, todoContainer) => { + // 添加事件监听器到图标，实现待办事项完成状态切换 + icon.addEventListener('click', function () { + // 根据当前状态切换图标和样式 + if (this.src.includes('rtf_icon_gtasks.png')) { + // 切换到完成状态 + this.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks_light.png' // 完成状态图标 + contentSpan.style.color = 'var(--text-tertiary)' // 灰色文字 + contentSpan.style.textDecoration = 'line-through' // 添加删除线 + } else { + // 切换到未完成状态 + this.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks.png' // 未完成状态图标 + contentSpan.style.color = 'var(--note-content)' // 正常文字颜色 + contentSpan.style.textDecoration = 'none' // 移除删除线 + } + handleInput() // 触发内容更新 + }) + + // 添加事件监听器到内容区域，监听内容变化和按键事件 + const checkContent = () => { + // 延迟检查，确保内容已更新 + setTimeout(() => { + if (contentSpan.textContent.trim() === '') { + // 如果内容为空，移除整个待办事项容器 + todoContainer.remove() + handleInput() + } + }, 0) + } + + contentSpan.addEventListener('input', checkContent) // 内容输入时检查 + contentSpan.addEventListener('blur', checkContent) // 失去焦点时检查 + + // 添加焦点事件监听器，确保工具栏在待办事项获得焦点时保持可见 + contentSpan.addEventListener('focus', () => { + isToolbarVisible.value = true + }) +} + // 插入待办事项列表 // 创建一个可交互的待办事项元素，包含复选框图标和可编辑内容区域 const insertTodoList = () => { @@ -486,26 +533,8 @@ const insertTodoList = () => { // 检查嵌套限制，防止在列表或引用中插入待办事项 if (isInListOrQuote()) return - // 创建待办事项容器 - const todoContainer = document.createElement('div') - todoContainer.contentEditable = false // 容器本身不可编辑 - todoContainer.className = 'todo-container' - - // 创建图标元素（复选框） - const icon = document.createElement('img') - icon.className = 'todo-icon' - icon.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks.png' // 未完成状态图标 - icon.alt = '待办事项' - - // 创建内容容器（可编辑区域） - const contentSpan = document.createElement('div') - contentSpan.contentEditable = true // 内容区域可编辑 - contentSpan.className = 'todo-content' - contentSpan.textContent = '待办事项' // 默认文本 - - // 组装元素：将图标和内容区域添加到容器中 - todoContainer.appendChild(icon) - todoContainer.appendChild(contentSpan) + // 创建待办事项 + const { todoContainer, icon, contentSpan } = createTodoItem() // 插入到当前光标位置 range.insertNode(todoContainer) @@ -514,6 +543,9 @@ const insertTodoList = () => { const br = document.createElement('br') todoContainer.parentNode.insertBefore(br, todoContainer.nextSibling) + // 为待办事项添加事件监听器 + addTodoEventListeners(icon, contentSpan, todoContainer) + // 聚焦到内容区域（延迟执行，确保在handleToolClick处理完后再聚焦） setTimeout(() => { if (editorRef.value) { @@ -533,68 +565,13 @@ const insertTodoList = () => { } }, 0) - // 添加事件监听器到图标，实现待办事项完成状态切换 - icon.addEventListener('click', function () { - // 根据当前状态切换图标和样式 - if (this.src.includes('rtf_icon_gtasks.png')) { - // 切换到完成状态 - this.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks_light.png' // 完成状态图标 - contentSpan.style.color = 'var(--text-tertiary)' // 灰色文字 - contentSpan.style.textDecoration = 'line-through' // 添加删除线 - } else { - // 切换到未完成状态 - this.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks.png' // 未完成状态图标 - contentSpan.style.color = 'var(--note-content)' // 正常文字颜色 - contentSpan.style.textDecoration = 'none' // 移除删除线 - } - handleInput() // 触发内容更新 - }) - - // 添加事件监听器到内容区域，监听内容变化和按键事件 - const checkContent = () => { - // 延迟检查，确保内容已更新 - setTimeout(() => { - if (contentSpan.textContent.trim() === '') { - // 如果内容为空，移除整个待办事项容器 - todoContainer.remove() - handleInput() - } - }, 0) - } - - contentSpan.addEventListener('input', checkContent) // 内容输入时检查 - contentSpan.addEventListener('blur', checkContent) // 失去焦点时检查 - - // 添加焦点事件监听器，确保工具栏在待办事项获得焦点时保持可见 - contentSpan.addEventListener('focus', () => { - isToolbarVisible.value = true - }) - // 监听回车键，创建同级待办事项 contentSpan.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault() // 创建新的待办事项 - const newTodoContainer = document.createElement('div') - newTodoContainer.contentEditable = false - newTodoContainer.className = 'todo-container' - - // 创建图标元素 - const newIcon = document.createElement('img') - newIcon.className = 'todo-icon' - newIcon.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks.png' - newIcon.alt = '待办事项' - - // 创建内容容器 - const newContentSpan = document.createElement('div') - newContentSpan.contentEditable = true - newContentSpan.className = 'todo-content' - newContentSpan.textContent = '' - - // 组装元素 - newTodoContainer.appendChild(newIcon) - newTodoContainer.appendChild(newContentSpan) + const { todoContainer: newTodoContainer, icon: newIcon, contentSpan: newContentSpan } = createTodoItem() // 插入到当前待办事项后面 todoContainer.parentNode.insertBefore(newTodoContainer, todoContainer.nextSibling) @@ -603,6 +580,9 @@ const insertTodoList = () => { const newBr = document.createElement('br') newTodoContainer.parentNode.insertBefore(newBr, newTodoContainer.nextSibling) + // 为新待办事项添加事件监听器 + addTodoEventListeners(newIcon, newContentSpan, newTodoContainer) + // 聚焦到新内容区域 const newRange = document.createRange() newRange.selectNodeContents(newContentSpan) @@ -610,116 +590,6 @@ const insertTodoList = () => { selection.removeAllRanges() selection.addRange(newRange) - // 添加事件监听器到新图标 - newIcon.addEventListener('click', function () { - // 根据当前状态切换图标 - if (this.src.includes('rtf_icon_gtasks.png')) { - this.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks_light.png' - newContentSpan.style.color = 'var(--text-tertiary)' - newContentSpan.style.textDecoration = 'line-through' - } else { - this.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks.png' - newContentSpan.style.color = 'var(--note-content)' - newContentSpan.style.textDecoration = 'none' - } - handleInput() - }) - - // 添加事件监听器到新内容区域 - const newCheckContent = () => { - setTimeout(() => { - if (newContentSpan.textContent.trim() === '') { - newTodoContainer.remove() - handleInput() - } - }, 0) - } - - newContentSpan.addEventListener('input', newCheckContent) - newContentSpan.addEventListener('blur', newCheckContent) - - // 添加焦点事件监听器，确保工具栏在待办事项获得焦点时保持可见 - newContentSpan.addEventListener('focus', () => { - isToolbarVisible.value = true - }) - - // 监听新内容区域的回车键 - newContentSpan.addEventListener('keydown', e => { - if (e.key === 'Enter') { - e.preventDefault() - - // 创建新的待办事项 - const nextTodoContainer = document.createElement('div') - nextTodoContainer.contentEditable = false - nextTodoContainer.className = 'todo-container' - - // 创建图标元素 - const nextIcon = document.createElement('img') - nextIcon.className = 'todo-icon' - nextIcon.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks.png' - nextIcon.alt = '待办事项' - - // 创建内容容器 - const nextContentSpan = document.createElement('div') - nextContentSpan.contentEditable = true - nextContentSpan.className = 'todo-content' - nextContentSpan.textContent = '' - - // 组装元素 - nextTodoContainer.appendChild(nextIcon) - nextTodoContainer.appendChild(nextContentSpan) - - // 插入到当前待办事项后面 - newTodoContainer.parentNode.insertBefore(nextTodoContainer, newTodoContainer.nextSibling) - - // 添加换行 - const nextBr = document.createElement('br') - nextTodoContainer.parentNode.insertBefore(nextBr, nextTodoContainer.nextSibling) - - // 聚焦到新内容区域 - const nextRange = document.createRange() - nextRange.selectNodeContents(nextContentSpan) - nextRange.collapse(false) - selection.removeAllRanges() - selection.addRange(nextRange) - - // 添加事件监听器到新图标 - nextIcon.addEventListener('click', function () { - // 根据当前状态切换图标 - if (this.src.includes('rtf_icon_gtasks.png')) { - this.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks_light.png' - nextContentSpan.style.color = 'var(--text-tertiary)' - nextContentSpan.style.textDecoration = 'line-through' - } else { - this.src = '/assets/icons/drawable-xxhdpi/rtf_icon_gtasks.png' - nextContentSpan.style.color = 'var(--note-content)' - nextContentSpan.style.textDecoration = 'none' - } - handleInput() - }) - - // 添加事件监听器到新内容区域 - const nextCheckContent = () => { - setTimeout(() => { - if (nextContentSpan.textContent.trim() === '') { - nextTodoContainer.remove() - handleInput() - } - }, 0) - } - - nextContentSpan.addEventListener('input', nextCheckContent) - nextContentSpan.addEventListener('blur', nextCheckContent) - - // 添加焦点事件监听器，确保工具栏在待办事项获得焦点时保持可见 - nextContentSpan.addEventListener('focus', () => { - isToolbarVisible.value = true - }) - - handleInput() - } - }) - handleInput() } }) @@ -769,9 +639,93 @@ const resetDragState = () => { } } +// 统一的图片容器创建函数 +const createImageContainer = imageDataUrl => { + // 创建图片容器 + const imgContainer = document.createElement('div') + imgContainer.className = 'image-container' + imgContainer.style.position = 'relative' + imgContainer.style.display = 'inline-block' + + // 创建图片元素 + const img = document.createElement('img') + img.src = imageDataUrl + img.className = 'editor-image' + img.setAttribute('data-draggable', 'true') + img.style.maxWidth = '100%' + img.style.height = 'auto' + img.style.display = 'block' + img.style.objectFit = 'cover' + img.style.boxSizing = 'border-box' + img.style.border = '0.625rem solid white' + img.style.borderRadius = '0.2rem' + img.style.boxShadow = '0 1px 5px rgba(0, 0, 0, 0.18)' + img.style.background = 'var(--background-secondary)' + img.style.position = 'relative' + img.style.outline = 'none' // 移除默认焦点轮廓 + img.style.userSelect = 'none' // 防止选中 + img.style.webkitUserSelect = 'none' // 防止选中 + img.style.mozUserSelect = 'none' // 防止选中 + img.style.msUserSelect = 'none' // 防止选中 + img.style.webkitTouchCallout = 'none' // 防止长按弹出菜单 + img.style.webkitTapHighlightColor = 'transparent' // 防止点击高亮 + img.draggable = true + + // 创建删除按钮 + const deleteBtn = document.createElement('div') + deleteBtn.className = 'image-delete-btn' + + // 将图片和删除按钮添加到容器中 + imgContainer.appendChild(img) + imgContainer.appendChild(deleteBtn) + + // 使用事件管理器添加事件监听器 + eventManager.addImageContainerListeners(imgContainer, deleteBtn) + + return { imgContainer, img, deleteBtn } +} + +// 调整图片尺寸的函数 +const adjustImageSize = img => { + // 创建一个临时图片来获取原始尺寸 + const tempImg = new Image() + tempImg.onload = function () { + // 获取CSS变量 + const editorFontSize = getComputedStyle(document.documentElement).getPropertyValue('--editor-font-size').trim() || '16px' + const editorLineHeight = getComputedStyle(document.documentElement).getPropertyValue('--editor-line-height').trim() || '1.6' + const fontSize = parseInt(editorFontSize) + const lineHeight = parseFloat(editorLineHeight) + + // 计算行高 + const computedLineHeight = fontSize * lineHeight + + // 获取编辑器的宽度（减去一些内边距） + const editorWidth = editorRef.value.offsetWidth - 20 // 20px为左右内边距 + + // 按宽度撑满计算调整后的尺寸 + const originalHeight = tempImg.height + const originalWidth = tempImg.width + const scaleRatio = editorWidth / originalWidth + const scaledHeight = originalHeight * scaleRatio + + // 计算调整后的高度，使其为行高的整数倍 + const scaleFactor = Math.max(1, Math.round(scaledHeight / computedLineHeight)) + const adjustedHeight = scaleFactor * computedLineHeight + + // 按比例调整宽度 + const adjustedWidth = (originalWidth * adjustedHeight) / originalHeight + + img.style.height = `${adjustedHeight}px` + img.style.width = `${adjustedWidth}px` + + // 确保图片与基准线对齐 + img.style.verticalAlign = 'top' + } + tempImg.src = img.src +} + // 插入图片 const insertImage = () => { - console.log('Inserting image') // 创建文件输入元素 const fileInput = document.createElement('input') fileInput.type = 'file' @@ -783,23 +737,18 @@ const insertImage = () => { // 监听文件选择事件 fileInput.addEventListener('change', function (event) { - console.log('File selected:', event.target.files) const file = event.target.files[0] if (file && file.type.startsWith('image/')) { - console.log('Image file selected') // 创建FileReader读取文件 const reader = new FileReader() reader.onload = function (e) { - console.log('File read successfully') // 获取图片数据URL const imageDataUrl = e.target.result - console.log('Image data URL:', imageDataUrl) // 获取当前选区 const selection = window.getSelection() if (selection.rangeCount > 0) { let range = selection.getRangeAt(0) - console.log('Current range:', range) // 检查选区是否在图片容器内部，如果是则调整到容器后面 const startContainer = range.startContainer @@ -827,174 +776,23 @@ const insertImage = () => { // 如果选区在图片容器内部，调整到容器后面 if (imageContainer) { - console.log('Selection is inside image container, adjusting range') range = document.createRange() range.setStartAfter(imageContainer) range.collapse(true) } // 创建图片容器 - const imgContainer = document.createElement('div') - imgContainer.className = 'image-container' - imgContainer.style.position = 'relative' - imgContainer.style.display = 'inline-block' + const { imgContainer, img, deleteBtn } = createImageContainer(imageDataUrl) - // 创建图片元素 - const img = document.createElement('img') - img.src = imageDataUrl - img.className = 'editor-image' - img.setAttribute('data-draggable', 'true') - img.style.maxWidth = '100%' - img.style.height = 'auto' - img.style.display = 'block' - img.style.objectFit = 'cover' - img.style.boxSizing = 'border-box' - img.style.border = '0.625rem solid white' - img.style.borderRadius = '0.2rem' - img.style.boxShadow = '0 1px 5px rgba(0, 0, 0, 0.18)' - img.style.background = 'var(--background-secondary)' - img.style.position = 'relative' - img.style.outline = 'none' // 移除默认焦点轮廓 - img.style.userSelect = 'none' // 防止选中 - img.style.webkitUserSelect = 'none' // 防止选中 - img.style.mozUserSelect = 'none' // 防止选中 - img.style.msUserSelect = 'none' // 防止选中 - img.style.webkitTouchCallout = 'none' // 防止长按弹出菜单 - img.style.webkitTapHighlightColor = 'transparent' // 防止点击高亮 - img.draggable = true - - // 创建删除按钮 - const deleteBtn = document.createElement('div') - deleteBtn.className = 'image-delete-btn' - - // 将图片和删除按钮添加到容器中 - imgContainer.appendChild(img) - imgContainer.appendChild(deleteBtn) - - console.log('Created image element:', img) - - // 创建一个临时图片来获取原始尺寸 - const tempImg = new Image() - tempImg.onload = function () { - console.log('Temp image loaded') - // 获取CSS变量 - const editorFontSize = getComputedStyle(document.documentElement).getPropertyValue('--editor-font-size').trim() || '16px' - const editorLineHeight = getComputedStyle(document.documentElement).getPropertyValue('--editor-line-height').trim() || '1.6' - const fontSize = parseInt(editorFontSize) - const lineHeight = parseFloat(editorLineHeight) - - // 计算行高 - const computedLineHeight = fontSize * lineHeight - - // 获取编辑器的宽度（减去一些内边距） - const editorWidth = editorRef.value.offsetWidth - 20 // 20px为左右内边距 - - // 按宽度撑满计算调整后的尺寸 - const originalHeight = tempImg.height - const originalWidth = tempImg.width - const scaleRatio = editorWidth / originalWidth - const scaledHeight = originalHeight * scaleRatio - - // 计算调整后的高度，使其为行高的整数倍 - const scaleFactor = Math.max(1, Math.round(scaledHeight / computedLineHeight)) - const adjustedHeight = scaleFactor * computedLineHeight - - // 按比例调整宽度 - const adjustedWidth = (originalWidth * adjustedHeight) / originalHeight - - img.style.height = `${adjustedHeight}px` - img.style.width = `${adjustedWidth}px` - - // 确保图片与基准线对齐 - img.style.verticalAlign = 'top' - } - tempImg.src = imageDataUrl - - // 添加触摸事件监听器实现拖拽功能 - // 先移除可能已有的事件监听器，避免重复 - imgContainer.removeEventListener('touchstart', handleTouchStart) - imgContainer.removeEventListener('touchmove', handleTouchMove) - imgContainer.removeEventListener('touchend', handleTouchEnd) - imgContainer.removeEventListener('touchcancel', handleTouchCancel) - - // 重新添加事件监听器 - imgContainer.addEventListener('touchstart', handleTouchStart) - imgContainer.addEventListener('touchmove', handleTouchMove) - imgContainer.addEventListener('touchend', handleTouchEnd) - imgContainer.addEventListener('touchcancel', handleTouchCancel) - - // 为删除按钮添加点击事件（鼠标和触摸） - // 先移除可能已有的事件监听器，避免重复 - deleteBtn.removeEventListener('click', null) - - // 添加延时检查，确保删除按钮是可见的才执行删除操作 - setTimeout(() => { - deleteBtn.addEventListener('click', function (e) { - e.stopPropagation() - if (deleteBtn.classList.contains('visible')) { - imgContainer.remove() - handleInput() - } - }) - }, DELETE_BUTTON_DELAY) // 使用全局常量延时，确保删除按钮状态已正确设置 - - // 为图片容器添加短按事件以显示/隐藏删除按钮 - let touchStartTime = 0 - const touchStartHandler = function (e) { - touchStartTime = Date.now() - } - - const touchEndHandler = function (e) { - const touchDuration = Date.now() - touchStartTime - console.log('Touch end event triggered, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress) - // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 - if (touchDuration < 200 && !dragState.value.isLongPress) { - e.stopPropagation() - console.log('Short tap detected, toggling delete button visibility') - // 切换删除按钮的显示状态 - if (deleteBtn) { - console.log('Current delete button display style:', deleteBtn.style.display) - // 检查删除按钮当前是否可见 - const isCurrentlyVisible = deleteBtn.classList.contains('visible') - - console.log('Delete button current styles - inline:', deleteBtn.style.display) - - if (isCurrentlyVisible) { - deleteBtn.classList.remove('visible') - console.log('Delete button hidden') - } else { - deleteBtn.classList.add('visible') - console.log('Delete button displayed') - } - } else { - console.log('Delete button not found') - } - } else { - console.log('Not a short tap or isLongPress is true') - } - } - - imgContainer.addEventListener('touchstart', touchStartHandler) - imgContainer.addEventListener('touchend', touchEndHandler) - - // 保存事件处理函数的引用，以便后续移除 - imgContainer._touchStartHandler = touchStartHandler - imgContainer._touchEndHandler = touchEndHandler - - console.log('Added touch event listeners') + // 调整图片尺寸 + adjustImageSize(img) // 插入图片容器到当前光标位置 range.insertNode(imgContainer) - console.log('Inserted image container into editor') - - // 调试信息 - console.log('Image container inserted:', imgContainer) - console.log('Next sibling (should be drag handle):', imgContainer.nextSibling) // 添加换行 const br = document.createElement('br') imgContainer.parentNode.insertBefore(br, imgContainer.nextSibling) - console.log('Added line break after image container') // 修正选区位置，避免嵌套插入 // 使用setTimeout确保DOM更新完成后再设置选区 @@ -1009,13 +807,11 @@ const insertImage = () => { // 重新聚焦到编辑器 if (editorRef.value) { editorRef.value.focus() - console.log('Focused editor') } }, 0) // 触发输入事件更新内容 handleInput() - console.log('Handled input event') } } reader.readAsDataURL(file) @@ -1023,12 +819,10 @@ const insertImage = () => { // 清理文件输入元素 document.body.removeChild(fileInput) - console.log('Removed file input') }) // 触发文件选择对话框 fileInput.click() - console.log('Clicked file input') } // 处理键盘事件 @@ -1186,8 +980,6 @@ const handleTouchMove = e => { if (!dragState.value.isLongPress || !img) return - e.preventDefault() // 阻止页面滚动 - dragState.value.currentY = currentY // 计算位移 @@ -1201,10 +993,6 @@ const handleTouchMove = e => { }) // 使用节流优化，避免过于频繁的检查 - if (!dragState.value.lastMoveTime) { - dragState.value.lastMoveTime = 0 - } - const now = Date.now() // 限制检查频率为每16ms一次（约60fps），提高响应速度 if (now - dragState.value.lastMoveTime >= 16) { @@ -1213,6 +1001,35 @@ const handleTouchMove = e => { } } +// 重置拖拽动画 +const resetDragAnimation = img => { + // 添加释放动画 + img.style.transition = 'all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)' + img.style.transform = 'translateY(0) scale(1)' + img.style.opacity = '1' + + // 移除拖拽指示器 + if (dragState.value.indicator) { + const indicator = dragState.value.indicator + indicator.style.transition = 'opacity 0.1s ease-out' + indicator.style.opacity = '0' + setTimeout(() => { + if (indicator.parentNode) { + indicator.parentNode.removeChild(indicator) + } + }, 100) + } + + // 延迟重置样式以显示动画 + setTimeout(() => { + if (img) { + img.classList.remove('dragging') + img.style.zIndex = '' + img.style.transition = '' + } + }, 150) +} + // 处理触摸结束事件 const handleTouchEnd = e => { // 清除长按定时器 @@ -1229,37 +1046,14 @@ const handleTouchEnd = e => { // 重置拖拽状态 const img = dragState.value.draggedImage - // 添加更流畅的释放动画 - img.style.transition = 'all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)' - img.style.transform = 'translateY(0) scale(1)' - img.style.opacity = '1' - - // 移除拖拽指示器 - if (dragState.value.indicator) { - const indicator = dragState.value.indicator - indicator.style.transition = 'opacity 0.1s ease-out' - indicator.style.opacity = '0' - setTimeout(() => { - if (indicator.parentNode) { - indicator.parentNode.removeChild(indicator) - } - }, 100) - } + // 重置拖拽动画 + resetDragAnimation(img) // 添加震动反馈（如果设备支持） if (navigator.vibrate) { navigator.vibrate(8) } - // 延迟重置样式以显示动画 - setTimeout(() => { - if (img) { - img.classList.remove('dragging') - img.style.zIndex = '' - img.style.transition = '' - } - }, 150) - // 重置状态 dragState.value.isLongPress = false dragState.value.draggedImage = null @@ -1287,31 +1081,8 @@ const handleTouchCancel = e => { // 重置拖拽状态 const img = dragState.value.draggedImage - // 添加取消动画 - img.style.transition = 'all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)' - img.style.transform = 'translateY(0) scale(1)' - img.style.opacity = '1' - - // 移除拖拽指示器 - if (dragState.value.indicator) { - const indicator = dragState.value.indicator - indicator.style.transition = 'opacity 0.1s ease-out' - indicator.style.opacity = '0' - setTimeout(() => { - if (indicator.parentNode) { - indicator.parentNode.removeChild(indicator) - } - }, 100) - } - - // 延迟重置样式以显示动画 - setTimeout(() => { - if (img) { - img.classList.remove('dragging') - img.style.zIndex = '' - img.style.transition = '' - } - }, 150) + // 重置拖拽动画 + resetDragAnimation(img) // 重置状态 dragState.value.isLongPress = false @@ -1547,15 +1318,10 @@ const handleToolClick = (action, event) => { editorRef.value.focus() } }, 0) - } else { - // 对于待办事项，确保工具栏保持可见 - isToolbarVisible.value = true } - // 确保工具栏在虚拟键盘可见时保持显示 - if (isKeyboardVisible.value) { - isToolbarVisible.value = true - } + // 确保工具栏保持可见 + isToolbarVisible.value = true } // 保持工具栏可见 @@ -1597,265 +1363,60 @@ const wrapOrphanedImages = () => { // 查找所有没有被.image-container包装的图片 const images = editorRef.value.querySelectorAll('img:not(.editor-image)') - console.log('Found orphaned images:', images.length) images.forEach(img => { // 检查图片是否已经在.image-container中 if (img.closest('.image-container')) return - console.log('Wrapping orphaned image') - // 检查图片的父元素是否是.image-container，避免嵌套 if (img.parentNode && img.parentNode.classList && img.parentNode.classList.contains('image-container')) { - console.log('Image is already in image-container, checking for delete button') // 确保图片有正确的类名 img.className = 'editor-image' img.setAttribute('data-draggable', 'true') // 为已存在的图片容器添加删除按钮事件监听器 const imgContainer = img.parentNode - const deleteBtn = imgContainer.querySelector('.image-delete-btn') - if (deleteBtn) { - console.log('Found existing delete button, adding event listeners') - // 先移除可能已有的事件监听器，避免重复 - deleteBtn.removeEventListener('click', null) - - // 添加延时检查，确保删除按钮是可见的才执行删除操作 - setTimeout(() => { - deleteBtn.addEventListener('click', function (e) { - e.stopPropagation() - if (deleteBtn.classList.contains('visible')) { - imgContainer.remove() - handleInput() - } - }) - }, DELETE_BUTTON_DELAY) // 使用全局常量延时，确保删除按钮状态已正确设置 - - // 为图片容器添加短按事件以显示/隐藏删除按钮 - // 先移除可能已有的事件监听器，避免重复 - const touchStartHandler = imgContainer._touchStartHandler - const touchEndHandler = imgContainer._touchEndHandler - - if (touchStartHandler) { - imgContainer.removeEventListener('touchstart', touchStartHandler) - } - - if (touchEndHandler) { - imgContainer.removeEventListener('touchend', touchEndHandler) - } - - let touchStartTime = 0 - const newTouchStartHandler = function (e) { - touchStartTime = Date.now() - } - - const newTouchEndHandler = function (e) { - const touchDuration = Date.now() - touchStartTime - console.log('Touch end event triggered for existing image, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress) - // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 - if (touchDuration < 200 && !dragState.value.isLongPress) { - e.stopPropagation() - console.log('Short tap detected for existing image, toggling delete button visibility') - // 切换删除按钮的显示状态 - if (deleteBtn) { - console.log('Current delete button display style for existing image:', deleteBtn.style.display) - // 检查删除按钮当前是否可见 - const isCurrentlyVisible = deleteBtn.classList.contains('visible') - - console.log('Delete button current styles for existing image - inline:', deleteBtn.style.display) - - if (isCurrentlyVisible) { - deleteBtn.classList.remove('visible') - console.log('Delete button hidden for existing image') - } else { - deleteBtn.classList.add('visible') - console.log('Delete button displayed for existing image') - } - } else { - console.log('Delete button not found for existing image') - } - } else { - console.log('Not a short tap or isLongPress is true for existing image') - } - } - - imgContainer.addEventListener('touchstart', newTouchStartHandler) - imgContainer.addEventListener('touchend', newTouchEndHandler) - - // 保存事件处理函数的引用，以便后续移除 - imgContainer._touchStartHandler = newTouchStartHandler - imgContainer._touchEndHandler = newTouchEndHandler + let deleteBtn = imgContainer.querySelector('.image-delete-btn') + if (!deleteBtn) { + // 如果删除按钮不存在，创建它 + deleteBtn = document.createElement('div') + deleteBtn.className = 'image-delete-btn' + container.appendChild(deleteBtn) } + + // 使用事件管理器添加事件监听器 + eventManager.addImageContainerListeners(imgContainer, deleteBtn) return } // 创建图片容器 - const imgContainer = document.createElement('div') - imgContainer.className = 'image-container' - imgContainer.style.position = 'relative' - imgContainer.style.display = 'inline-block' - - // 设置图片样式 - img.className = 'editor-image' - img.setAttribute('data-draggable', 'true') - img.style.maxWidth = '100%' - img.style.height = 'auto' - img.style.display = 'block' - img.style.objectFit = 'cover' - img.style.boxSizing = 'border-box' - img.style.border = '0.625rem solid white' - img.style.borderRadius = '0.2rem' - img.style.boxShadow = '0 1px 5px rgba(0, 0, 0, 0.18)' - img.style.background = 'var(--background-secondary)' - img.style.position = 'relative' - img.style.outline = 'none' - img.style.userSelect = 'none' // 防止选中 - img.style.webkitUserSelect = 'none' // 防止选中 - img.style.mozUserSelect = 'none' // 防止选中 - img.style.msUserSelect = 'none' // 防止选中 - img.style.webkitTouchCallout = 'none' // 防止长按弹出菜单 - img.style.webkitTapHighlightColor = 'transparent' // 防止点击高亮 - img.draggable = true - - // 创建删除按钮 - const deleteBtn = document.createElement('div') - deleteBtn.className = 'image-delete-btn' - - // 将图片和删除按钮添加到容器中 - imgContainer.appendChild(img) - imgContainer.appendChild(deleteBtn) + const { imgContainer, img: editorImg, deleteBtn } = createImageContainer(img.src) // 替换原来的图片 img.parentNode.replaceChild(imgContainer, img) - // 为新包装的图片添加事件监听器 - // 先移除可能已有的事件监听器，避免重复 - imgContainer.removeEventListener('touchstart', handleTouchStart) - imgContainer.removeEventListener('touchmove', handleTouchMove) - imgContainer.removeEventListener('touchend', handleTouchEnd) - imgContainer.removeEventListener('touchcancel', handleTouchCancel) - - // 重新添加事件监听器 - imgContainer.addEventListener('touchstart', handleTouchStart) - imgContainer.addEventListener('touchmove', handleTouchMove) - imgContainer.addEventListener('touchend', handleTouchEnd) - imgContainer.addEventListener('touchcancel', handleTouchCancel) - - // 为删除按钮添加点击事件 - // 先移除可能已有的事件监听器，避免重复 - deleteBtn.removeEventListener('click', null) - - // 添加延时检查，确保删除按钮是可见的才执行删除操作 - setTimeout(() => { - deleteBtn.addEventListener('click', function (e) { - e.stopPropagation() - if (deleteBtn.classList.contains('visible')) { - imgContainer.remove() - handleInput() - } - }) - }, DELETE_BUTTON_DELAY) // 使用全局常量延时，确保删除按钮状态已正确设置 - - // 为图片容器添加短按事件以显示/隐藏删除按钮 - let touchStartTime = 0 - const touchStartHandler = function (e) { - touchStartTime = Date.now() - } - - const touchEndHandler = function (e) { - const touchDuration = Date.now() - touchStartTime - console.log('Touch end event triggered in wrapOrphanedImages, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress) - // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 - if (touchDuration < 200 && !dragState.value.isLongPress) { - e.stopPropagation() - console.log('Short tap detected in wrapOrphanedImages, toggling delete button visibility') - // 切换删除按钮的显示状态 - if (deleteBtn) { - console.log('Current delete button display style in wrapOrphanedImages:', deleteBtn.style.display) - // 检查删除按钮当前是否可见 - const isCurrentlyVisible = deleteBtn.classList.contains('visible') - - console.log('Delete button current styles - inline:', deleteBtn.style.display) - - if (isCurrentlyVisible) { - deleteBtn.classList.remove('visible') - console.log('Delete button hidden in wrapOrphanedImages') - } else { - deleteBtn.classList.add('visible') - console.log('Delete button displayed in wrapOrphanedImages') - } - } else { - console.log('Delete button not found in wrapOrphanedImages') - } - } else { - console.log('Not a short tap or isLongPress is true in wrapOrphanedImages') - } - } - - imgContainer.addEventListener('touchstart', touchStartHandler) - imgContainer.addEventListener('touchend', touchEndHandler) - - // 保存事件处理函数的引用，以便后续移除 - imgContainer._touchStartHandler = touchStartHandler - imgContainer._touchEndHandler = touchEndHandler + // 调整图片尺寸 + adjustImageSize(editorImg) }) } // 调整已有图片的高度 const adjustExistingImages = () => { - console.log('Adjusting existing images') // 等待DOM更新完成 setTimeout(() => { if (editorRef.value) { const imageContainers = editorRef.value.querySelectorAll('.image-container') - console.log('Found image containers:', imageContainers.length) imageContainers.forEach(container => { const img = container.querySelector('img.editor-image') if (!img) return - console.log('Processing image:', img) // 只处理还没有调整过高度的图片 if (!img.dataset.heightAdjusted) { - console.log('Adjusting height for image') - // 创建一个临时图片来获取原始尺寸 - const tempImg = new Image() - tempImg.onload = function () { - // 获取CSS变量 - const editorFontSize = getComputedStyle(document.documentElement).getPropertyValue('--editor-font-size').trim() || '16px' - const editorLineHeight = getComputedStyle(document.documentElement).getPropertyValue('--editor-line-height').trim() || '1.6' - const fontSize = parseInt(editorFontSize) - const lineHeight = parseFloat(editorLineHeight) + // 调整图片尺寸 + adjustImageSize(img) - // 计算行高 - const computedLineHeight = fontSize * lineHeight - - // 获取编辑器的宽度（减去一些内边距） - const editorWidth = editorRef.value.offsetWidth - 20 // 20px为左右内边距 - - // 按宽度撑满计算调整后的尺寸 - const originalHeight = tempImg.height - const originalWidth = tempImg.width - const scaleRatio = editorWidth / originalWidth - const scaledHeight = originalHeight * scaleRatio - - // 计算调整后的高度，使其为行高的整数倍 - const scaleFactor = Math.max(1, Math.round(scaledHeight / computedLineHeight)) - const adjustedHeight = scaleFactor * computedLineHeight - - // 按比例调整宽度 - const adjustedWidth = (originalWidth * adjustedHeight) / originalHeight - - img.style.height = `${adjustedHeight}px` - img.style.width = `${adjustedWidth}px` - - // 确保图片与基准线对齐 - img.style.verticalAlign = 'top' - - // 标记图片已调整过高度 - img.dataset.heightAdjusted = 'true' - console.log('Adjusted image dimensions:', adjustedWidth, adjustedHeight) - } - tempImg.src = img.src + // 标记图片已调整过高度 + img.dataset.heightAdjusted = 'true' } }) @@ -1864,103 +1425,19 @@ const adjustExistingImages = () => { const img = container.querySelector('img.editor-image') if (!img) return - console.log('Adding drag functionality to image:', img) - // 为图片容器添加事件监听器（总是添加，确保功能正常） - // 先移除可能已有的事件监听器，避免重复 - container.removeEventListener('touchstart', handleTouchStart) - container.removeEventListener('touchmove', handleTouchMove) - container.removeEventListener('touchend', handleTouchEnd) - container.removeEventListener('touchcancel', handleTouchCancel) - - // 重新添加事件监听器 - container.addEventListener('touchstart', handleTouchStart) - container.addEventListener('touchmove', handleTouchMove) - container.addEventListener('touchend', handleTouchEnd) - container.addEventListener('touchcancel', handleTouchCancel) - // 为删除按钮添加点击事件 let deleteBtn = container.querySelector('.image-delete-btn') if (!deleteBtn) { // 如果删除按钮不存在，创建它 - console.log('Delete button not found, creating new one') deleteBtn = document.createElement('div') deleteBtn.className = 'image-delete-btn' container.appendChild(deleteBtn) } - if (deleteBtn) { - // 先移除可能已有的事件监听器，避免重复 - deleteBtn.removeEventListener('click', null) - - // 添加延时检查，确保删除按钮是可见的才执行删除操作 - setTimeout(() => { - deleteBtn.addEventListener('click', function (e) { - e.stopPropagation() - if (deleteBtn.classList.contains('visible')) { - imgContainer.remove() - handleInput() - } - }) - }, DELETE_BUTTON_DELAY) // 使用全局常量延时，确保删除按钮状态已正确设置 - } - - // 为图片容器添加短按事件以显示/隐藏删除按钮 - // 先移除可能已有的事件监听器，避免重复 - const touchStartHandler = container._touchStartHandler - const touchEndHandler = container._touchEndHandler - - if (touchStartHandler) { - container.removeEventListener('touchstart', touchStartHandler) - } - - if (touchEndHandler) { - container.removeEventListener('touchend', touchEndHandler) - } - - let touchStartTime = 0 - const newTouchStartHandler = function (e) { - touchStartTime = Date.now() - } - - const newTouchEndHandler = function (e) { - const touchDuration = Date.now() - touchStartTime - console.log('Touch end event triggered in adjustExistingImages, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress) - // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 - if (touchDuration < 200 && !dragState.value.isLongPress) { - e.stopPropagation() - console.log('Short tap detected in adjustExistingImages, toggling delete button visibility') - // 切换删除按钮的显示状态 - if (deleteBtn) { - console.log('Current delete button display style in adjustExistingImages:', deleteBtn.style.display) - // 检查删除按钮当前是否可见 - const isCurrentlyVisible = deleteBtn.classList.contains('visible') - - console.log('Delete button current styles - inline:', deleteBtn.style.display) - - if (isCurrentlyVisible) { - deleteBtn.classList.remove('visible') - console.log('Delete button hidden in adjustExistingImages') - } else { - deleteBtn.classList.add('visible') - console.log('Delete button displayed in adjustExistingImages') - } - } else { - console.log('Delete button not found in adjustExistingImages') - } - } else { - console.log('Not a short tap or isLongPress is true in adjustExistingImages') - } - } - - container.addEventListener('touchstart', newTouchStartHandler) - container.addEventListener('touchend', newTouchEndHandler) - - // 保存事件处理函数的引用，以便后续移除 - container._touchStartHandler = newTouchStartHandler - container._touchEndHandler = newTouchEndHandler + // 使用事件管理器添加事件监听器 + eventManager.addImageContainerListeners(container, deleteBtn) img.setAttribute('data-touch-listeners', 'true') - console.log('Added touch event listeners') }) } }, 0) @@ -2011,12 +1488,10 @@ const cleanContentForSave = () => { defineExpose({ getContent: () => cleanContentForSave(), setContent: newContent => { - console.log('Setting content:', newContent) content.value = newContent || '' if (editorRef.value) { try { editorRef.value.innerHTML = content.value - console.log('Content set successfully in editorRef') // 重置拖拽状态，确保isLongPress为false dragState.value.isLongPress = false dragState.value.draggedImage = null @@ -2027,128 +1502,21 @@ defineExpose({ wrapOrphanedImages() // 调整已有图片的高度并添加拖拽功能 adjustExistingImages() - // 为图片添加拖拽事件监听器 - setTimeout(() => { - console.log('Adding drag event listeners to images in setContent') - const imageContainers = editorRef.value.querySelectorAll('.image-container') - console.log('Found image containers in setContent:', imageContainers.length) - imageContainers.forEach(container => { - const img = container.querySelector('img.editor-image') - if (!img) return - - console.log('Adding touch listeners to image in setContent:', img) - // 先移除可能已有的事件监听器，避免重复 - container.removeEventListener('touchstart', handleTouchStart) - container.removeEventListener('touchmove', handleTouchMove) - container.removeEventListener('touchend', handleTouchEnd) - container.removeEventListener('touchcancel', handleTouchCancel) - - // 重新添加事件监听器 - container.addEventListener('touchstart', handleTouchStart) - container.addEventListener('touchmove', handleTouchMove) - container.addEventListener('touchend', handleTouchEnd) - container.addEventListener('touchcancel', handleTouchCancel) - - // 为删除按钮添加点击事件 - const deleteBtn = container.querySelector('.image-delete-btn') - if (deleteBtn) { - // 先移除可能已有的事件监听器，避免重复 - deleteBtn.removeEventListener('click', null) - - // 添加延时检查，确保删除按钮是可见的才执行删除操作 - setTimeout(() => { - deleteBtn.addEventListener('click', function (e) { - e.stopPropagation() - if (deleteBtn.classList.contains('visible')) { - imgContainer.remove() - handleInput() - } - }) - }, DELETE_BUTTON_DELAY) // 使用全局常量延时，确保删除按钮状态已正确设置 - } - - // 为图片容器添加短按事件以显示/隐藏删除按钮 - // 先移除可能已有的事件监听器，避免重复 - const touchStartHandler = container._touchStartHandler - const touchEndHandler = container._touchEndHandler - - if (touchStartHandler) { - container.removeEventListener('touchstart', touchStartHandler) - } - - if (touchEndHandler) { - container.removeEventListener('touchend', touchEndHandler) - } - - let touchStartTime = 0 - const newTouchStartHandler = function (e) { - touchStartTime = Date.now() - } - - const newTouchEndHandler = function (e) { - const touchDuration = Date.now() - touchStartTime - console.log('Touch end event triggered in setContent, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress) - // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 - if (touchDuration < 200 && !dragState.value.isLongPress) { - e.stopPropagation() - console.log('Short tap detected in setContent, toggling delete button visibility') - // 切换删除按钮的显示状态 - if (deleteBtn) { - console.log('Current delete button display style in setContent:', deleteBtn.style.display) - // 检查删除按钮当前是否可见 - const computedStyle = getComputedStyle(deleteBtn) - const isCurrentlyVisible = deleteBtn.classList.contains('visible') - - console.log('Delete button current styles - inline:', deleteBtn.style.display, 'computed:', computedStyle.display) - console.log('Delete button background image:', computedStyle.backgroundImage) - console.log('Delete button width:', computedStyle.width, 'height:', computedStyle.height) - console.log('Delete button position:', computedStyle.position) - console.log('Delete button z-index:', computedStyle.zIndex) - - if (isCurrentlyVisible) { - deleteBtn.classList.remove('visible') - console.log('Delete button hidden in setContent') - } else { - deleteBtn.classList.add('visible') - console.log('Delete button displayed in setContent') - } - } else { - console.log('Delete button not found in setContent') - } - } else { - console.log('Not a short tap or isLongPress is true in setContent') - } - } - - container.addEventListener('touchstart', newTouchStartHandler) - container.addEventListener('touchend', newTouchEndHandler) - - // 保存事件处理函数的引用，以便后续移除 - container._touchStartHandler = newTouchStartHandler - container._touchEndHandler = newTouchEndHandler - - img.setAttribute('data-touch-listeners', 'true') - console.log('Added touch event listeners') - }) - }, 0) } catch (error) { console.error('Failed to set innerHTML:', error) // 备选方案：使用textContent try { editorRef.value.textContent = content.value - console.log('Content set using textContent') } catch (textContentError) { console.error('Failed to set textContent:', textContentError) } } } else { // 如果editorRef还不可用，延迟设置 - console.log('Editor ref is not available, will retry when mounted') setTimeout(() => { if (editorRef.value) { try { editorRef.value.innerHTML = content.value - console.log('Content set successfully after delay') // 重置拖拽状态，确保isLongPress为false dragState.value.isLongPress = false dragState.value.draggedImage = null @@ -2159,105 +1527,6 @@ defineExpose({ wrapOrphanedImages() // 调整已有图片的高度并添加拖拽功能 adjustExistingImages() - // 为图片添加拖拽事件监听器 - setTimeout(() => { - console.log('Adding drag event listeners to images in delayed setContent') - const imageContainers = editorRef.value.querySelectorAll('.image-container') - console.log('Found image containers in delayed setContent:', imageContainers.length) - imageContainers.forEach(container => { - const img = container.querySelector('img.editor-image') - if (!img) return - - console.log('Adding touch listeners to image in delayed setContent:', img) - // 先移除可能已有的事件监听器，避免重复 - container.removeEventListener('touchstart', handleTouchStart) - container.removeEventListener('touchmove', handleTouchMove) - container.removeEventListener('touchend', handleTouchEnd) - container.removeEventListener('touchcancel', handleTouchCancel) - - // 重新添加事件监听器 - container.addEventListener('touchstart', handleTouchStart) - container.addEventListener('touchmove', handleTouchMove) - container.addEventListener('touchend', handleTouchEnd) - container.addEventListener('touchcancel', handleTouchCancel) - - // 为删除按钮添加点击事件 - const deleteBtn = container.querySelector('.image-delete-btn') - if (deleteBtn) { - // 先移除可能已有的事件监听器，避免重复 - deleteBtn.removeEventListener('click', null) - - // 添加延时检查，确保删除按钮是可见的才执行删除操作 - setTimeout(() => { - deleteBtn.addEventListener('click', function (e) { - e.stopPropagation() - if (deleteBtn.classList.contains('visible')) { - imgContainer.remove() - handleInput() - } - }) - }, DELETE_BUTTON_DELAY) // 使用全局常量延时，确保删除按钮状态已正确设置 - } - - // 为图片容器添加短按事件以显示/隐藏删除按钮 - // 先移除可能已有的事件监听器，避免重复 - const touchStartHandler = container._touchStartHandler - const touchEndHandler = container._touchEndHandler - - if (touchStartHandler) { - container.removeEventListener('touchstart', touchStartHandler) - } - - if (touchEndHandler) { - container.removeEventListener('touchend', touchEndHandler) - } - - let touchStartTime = 0 - const newTouchStartHandler = function (e) { - touchStartTime = Date.now() - } - - const newTouchEndHandler = function (e) { - const touchDuration = Date.now() - touchStartTime - console.log('Touch end event triggered in delayed setContent, duration:', touchDuration, 'isLongPress:', dragState.value.isLongPress) - // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 - if (touchDuration < 200 && !dragState.value.isLongPress) { - e.stopPropagation() - console.log('Short tap detected in delayed setContent, toggling delete按钮visibility') - // 切换删除按钮的显示状态 - if (deleteBtn) { - console.log('Current delete button display style in delayed setContent:', deleteBtn.style.display) - // 检查删除按钮当前是否可见 - const isCurrentlyVisible = deleteBtn.classList.contains('visible') - - console.log('Delete button current styles - inline:', deleteBtn.style.display, 'computed:', computedStyle.display) - - if (isCurrentlyVisible) { - deleteBtn.classList.remove('visible') - console.log('Delete button hidden in delayed setContent') - } else { - deleteBtn.classList.add('visible') - console.log('Delete button displayed in delayed setContent') - } - } else { - console.log('Delete button not found in delayed setContent') - } - } else { - console.log('Not a short tap or isLongPress is true in delayed setContent') - } - } - - container.addEventListener('touchstart', newTouchStartHandler) - container.addEventListener('touchend', newTouchEndHandler) - - // 保存事件处理函数的引用，以便后续移除 - container._touchStartHandler = newTouchStartHandler - container._touchEndHandler = newTouchEndHandler - - img.setAttribute('data-touch-listeners', 'true') - console.log('Added touch event listeners') - }) - }, 0) } catch (error) { console.error('Failed to set innerHTML after delay:', error) } @@ -2518,13 +1787,11 @@ defineExpose({ background-color: transparent; /* 确保背景透明 */ pointer-events: none; opacity: 0; - display: none; } :deep(.editor-content .image-delete-btn.visible) { - pointer-events: all; + pointer-events: auto; opacity: 1; - display: block; } :deep(.editor-content .editor-image.draggable) { From 915fd00268e930e5d9f9a9f635790cef9c985935 Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 18:13:21 +0800 Subject: [PATCH 26/37] =?UTF-8?q?\"=E6=8F=90=E4=BA=A4=E4=BF=A1=E6=81=AF:?= =?UTF-8?q?=20fix:=20resolve=20image=20delete=20button=20click=20issue\"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/RichTextEditor.vue | 69 +++++++++++++++++++++++-------- 1 file changed, 51 insertions(+), 18 deletions(-) diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue index 8e0130d..ba4fba2 100644 --- a/src/components/RichTextEditor.vue +++ b/src/components/RichTextEditor.vue @@ -60,32 +60,48 @@ const eventManager = { // 为删除按钮添加点击事件 if (deleteBtn) { - // 添加延时检查，确保删除按钮是可见的才执行删除操作 - setTimeout(() => { - // 保存事件处理函数的引用，以便后续移除 - const deleteHandler = function (e) { - e.stopPropagation() - if (deleteBtn.classList.contains('visible')) { - container.remove() - handleInput() - } - } + // 保存事件处理函数的引用，以便后续移除 + const deleteHandler = function (e) { + e.stopPropagation() + e.preventDefault() + // 添加延时确保不是由短按触发的切换显示操作 + setTimeout(() => { + container.remove() + handleInput() + }, 50) + } - deleteBtn.addEventListener('click', deleteHandler) - deleteBtn._deleteHandler = deleteHandler - }, DELETE_BUTTON_DELAY) + deleteBtn.addEventListener('click', deleteHandler) + deleteBtn._deleteHandler = deleteHandler } // 为图片容器添加短按事件以显示/隐藏删除按钮 let touchStartTime = 0 + let isDeleteButtonClicked = false + + // 标记删除按钮被点击 + const markDeleteButtonClicked = function () { + isDeleteButtonClicked = true + // 重置标记 + setTimeout(() => { + isDeleteButtonClicked = false + }, 300) + } + + // 如果删除按钮存在，为其添加标记事件 + if (deleteBtn) { + deleteBtn._markClickHandler = markDeleteButtonClicked + deleteBtn.addEventListener('touchstart', markDeleteButtonClicked) + } + const touchStartHandler = function (e) { touchStartTime = Date.now() } const touchEndHandler = function (e) { const touchDuration = Date.now() - touchStartTime - // 短按（小于200ms）且非长按拖拽状态时切换删除按钮显示 - if (touchDuration < 200 && !dragState.value.isLongPress) { + // 短按（小于200ms）且非长按拖拽状态且不是删除按钮点击时切换删除按钮显示 + if (touchDuration < 200 && !dragState.value.isLongPress && !isDeleteButtonClicked) { e.stopPropagation() // 切换删除按钮的显示状态 if (deleteBtn) { @@ -97,6 +113,10 @@ const eventManager = { } } } + // 重置删除按钮点击标记 + setTimeout(() => { + isDeleteButtonClicked = false + }, 50) } container.addEventListener('touchstart', touchStartHandler) @@ -105,6 +125,7 @@ const eventManager = { // 保存事件处理函数的引用，以便后续移除 container._touchStartHandler = touchStartHandler container._touchEndHandler = touchEndHandler + container._markDeleteButtonClicked = markDeleteButtonClicked }, // 移除图片容器的事件监听器 @@ -118,6 +139,7 @@ const eventManager = { // 移除短按事件监听器 const touchStartHandler = container._touchStartHandler const touchEndHandler = container._touchEndHandler + const markDeleteButtonClicked = container._markDeleteButtonClicked if (touchStartHandler) { container.removeEventListener('touchstart', touchStartHandler) @@ -128,12 +150,23 @@ const eventManager = { container.removeEventListener('touchend', touchEndHandler) delete container._touchEndHandler } + + if (markDeleteButtonClicked) { + delete container._markDeleteButtonClicked + } // 移除删除按钮事件监听器 const deleteBtn = container.querySelector('.image-delete-btn') - if (deleteBtn && deleteBtn._deleteHandler) { - deleteBtn.removeEventListener('click', deleteBtn._deleteHandler) - delete deleteBtn._deleteHandler + if (deleteBtn) { + if (deleteBtn._deleteHandler) { + deleteBtn.removeEventListener('click', deleteBtn._deleteHandler) + delete deleteBtn._deleteHandler + } + + if (deleteBtn._markClickHandler) { + deleteBtn.removeEventListener('touchstart', deleteBtn._markClickHandler) + delete deleteBtn._markClickHandler + } } }, } From 5858c6c16396028a3836d32f0d9c3974a3d8b3be Mon Sep 17 00:00:00 2001 From: yuantao Date: Thu, 16 Oct 2025 18:35:39 +0800 Subject: [PATCH 27/37] =?UTF-8?q?\"fix:=20resolve=20image=20deletion=20con?= =?UTF-8?q?flict=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) From f2f3756cc0797c885ec766e4bacc97c76d31fbaa Mon Sep 17 00:00:00 2001 From: yuantao Date: Fri, 17 Oct 2025 09:09:32 +0800 Subject: [PATCH 28/37] =?UTF-8?q?fix:=20=E6=90=9C=E7=B4=A2=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E7=A9=BA=E5=80=BC=E6=A3=80=E6=9F=A5=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- console.txt | 465 ++++++++++++++++++++++++------------- src/pages/NoteListPage.vue | 6 +- 2 files changed, 314 insertions(+), 157 deletions(-) diff --git a/console.txt b/console.txt index 0c20ede..e465495 100644 --- a/console.txt +++ b/console.txt @@ -1,155 +1,310 @@ -RichTextEditor.vue:35 Editor mounted -RichTextEditor.vue:37 Editor ref available -RichTextEditor.vue:39 Setting initial content -RichTextEditor.vue:43 Initial content set successfully -RichTextEditor.vue:1183 Adjusting existing images -RichTextEditor.vue:58 Initial viewport height: 667 -RichTextEditor.vue:62 Set viewport height CSS variable -RichTextEditor.vue:66 Adding viewport resize listener - Setting content: dasdasdsadad​ -RichTextEditor.vue:1257 Creating drag handle -RichTextEditor.vue:1276 Creating drag handle for existing image -RichTextEditor.vue:1280 Added drag handle -RichTextEditor.vue:1238 Adding drag functionality to image: ​ -RichTextEditor.vue:1241 Setting draggable attribute -RichTextEditor.vue:1250 Added drag event listeners -RichTextEditor.vue:1255 Existing handle: null -RichTextEditor.vue:1257 Creating drag handle -RichTextEditor.vue:1276 Creating drag handle for existing image -RichTextEditor.vue:1280 Added drag handle -RichTextEditor.vue:75 Adding drag event listeners to existing images -RichTextEditor.vue:77 Found existing images: 2 -RichTextEditor.vue:79 Adding drag listeners to image: ​ -RichTextEditor.vue:79 Adding drag listeners to image: ​ -RichTextEditor.vue:1188 Found image elements: 2 -RichTextEditor.vue:1190 Processing image: ​ -RichTextEditor.vue:1193 Adjusting height for image -RichTextEditor.vue:1190 Processing image: ​ -RichTextEditor.vue:1193 Adjusting height for image -RichTextEditor.vue:1238 Adding drag functionality to image: ​ -RichTextEditor.vue:1255 Existing handle:

​
​ -RichTextEditor.vue:1238 Adding drag functionality to image: ​ -RichTextEditor.vue:1255 Existing handle:
​
​ -RichTextEditor.vue:1354 Adding drag event listeners to images in setContent -RichTextEditor.vue:1356 Found images in setContent: 2 -RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ -RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ -RichTextEditor.vue:1188 Found image elements: 2 -RichTextEditor.vue:1190 Processing image: ​ -RichTextEditor.vue:1193 Adjusting height for image -RichTextEditor.vue:1190 Processing image: ​ -RichTextEditor.vue:1193 Adjusting height for image -RichTextEditor.vue:1238 Adding drag functionality to image: ​ -RichTextEditor.vue:1255 Existing handle:
​
​ -RichTextEditor.vue:1238 Adding drag functionality to image: ​ -RichTextEditor.vue:1255 Existing handle:
​
​ -RichTextEditor.vue:1354 Adding drag event listeners to images in setContent -RichTextEditor.vue:1356 Found images in setContent: 2 -RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ -RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ -RichTextEditor.vue:1188 Found image elements: 2 -RichTextEditor.vue:1190 Processing image: ​ -RichTextEditor.vue:1193 Adjusting height for image -RichTextEditor.vue:1190 Processing image: ​ -RichTextEditor.vue:1193 Adjusting height for image -RichTextEditor.vue:1238 Adding drag functionality to image: ​ -RichTextEditor.vue:1255 Existing handle:
​
​ -RichTextEditor.vue:1238 Adding drag functionality to image: ​ -RichTextEditor.vue:1255 Existing handle:
​
​ -RichTextEditor.vue:1354 Adding drag event listeners to images in setContent -RichTextEditor.vue:1356 Found images in setContent: 2 -RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ -RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ -RichTextEditor.vue:1188 Found image elements: 2 -RichTextEditor.vue:1190 Processing image: ​ -RichTextEditor.vue:1193 Adjusting height for image -RichTextEditor.vue:1190 Processing image: ​ -RichTextEditor.vue:1193 Adjusting height for image -RichTextEditor.vue:1238 Adding drag functionality to image: ​ -RichTextEditor.vue:1255 Existing handle:
​
​ -RichTextEditor.vue:1238 Adding drag functionality to image: ​ -RichTextEditor.vue:1255 Existing handle:
​
​ -RichTextEditor.vue:1354 Adding drag event listeners to images in setContent -RichTextEditor.vue:1356 Found images in setContent: 2 -RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ -RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ -RichTextEditor.vue:1188 Found image elements: 2 -RichTextEditor.vue:1190 Processing image: ​ -RichTextEditor.vue:1193 Adjusting height for image -RichTextEditor.vue:1190 Processing image: ​ -RichTextEditor.vue:1193 Adjusting height for image -RichTextEditor.vue:1238 Adding drag functionality to image: ​ -RichTextEditor.vue:1255 Existing handle:
​
​ -RichTextEditor.vue:1238 Adding drag functionality to image: ​ -RichTextEditor.vue:1255 Existing handle:
​
​ -RichTextEditor.vue:1354 Adding drag event listeners to images in setContent -RichTextEditor.vue:1356 Found images in setContent: 2 -RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ -RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ -RichTextEditor.vue:1188 Found image elements: 2 -RichTextEditor.vue:1190 Processing image: ​ -RichTextEditor.vue:1193 Adjusting height for image -RichTextEditor.vue:1190 Processing image: ​ -RichTextEditor.vue:1193 Adjusting height for image -RichTextEditor.vue:1238 Adding drag functionality to image: ​ -RichTextEditor.vue:1255 Existing handle:
​
​ -RichTextEditor.vue:1238 Adding drag functionality to image: ​ -RichTextEditor.vue:1255 Existing handle:
​
​ -RichTextEditor.vue:1354 Adding drag event listeners to images in setContent -RichTextEditor.vue:1356 Found images in setContent: 2 -RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ -RichTextEditor.vue:1358 Adding drag listeners to image in setContent: ​ -RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 -RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 -RichTextEditor.vue:1287 Adding event listeners to drag handle -RichTextEditor.vue:1287 Adding event listeners to drag handle -RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 -RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 -RichTextEditor.vue:1287 Adding event listeners to drag handle -RichTextEditor.vue:1287 Adding event listeners to drag handle -RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 -RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 -RichTextEditor.vue:1287 Adding event listeners to drag handle -RichTextEditor.vue:1287 Adding event listeners to drag handle -RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 -RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 -RichTextEditor.vue:1287 Adding event listeners to drag handle -RichTextEditor.vue:1287 Adding event listeners to drag handle -RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 -RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 -RichTextEditor.vue:1287 Adding event listeners to drag handle -RichTextEditor.vue:1287 Adding event listeners to drag handle -RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 -RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 -RichTextEditor.vue:1287 Adding event listeners to drag handle -RichTextEditor.vue:1287 Adding event listeners to drag handle -RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 -RichTextEditor.vue:1230 Adjusted image dimensions: 355.3 355.3 -RichTextEditor.vue:1287 Adding event listeners to drag handle -RichTextEditor.vue:1287 Adding event listeners to drag handle +prepare.js:1 🍍 "app" store installed 🆕 +NoteListPage.vue:291 搜索栏获得焦点 +NoteListPage.vue:296 搜索栏失去焦点 +NoteListPage.vue:291 搜索栏获得焦点 +NoteListPage.vue:104 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toLowerCase') + at NoteListPage.vue:104:57 + at wrappedFn (reactivity.esm-bundler.js:878:19) + at Array.filter () + at apply (reactivity.esm-bundler.js:886:27) + at Proxy.filter (reactivity.esm-bundler.js:778:12) + at ComputedRefImpl.fn (NoteListPage.vue:102:22) + at refreshComputed (reactivity.esm-bundler.js:391:28) + at isDirty (reactivity.esm-bundler.js:362:68) + at refreshComputed (reactivity.esm-bundler.js:380:90) + at get value (reactivity.esm-bundler.js:1655:5) +(匿名) @ NoteListPage.vue:104 +wrappedFn @ reactivity.esm-bundler.js:878 +apply @ reactivity.esm-bundler.js:886 +filter @ reactivity.esm-bundler.js:778 +(匿名) @ NoteListPage.vue:102 +refreshComputed @ reactivity.esm-bundler.js:391 +isDirty @ reactivity.esm-bundler.js:362 +refreshComputed @ reactivity.esm-bundler.js:380 +get value @ reactivity.esm-bundler.js:1655 +unref @ reactivity.esm-bundler.js:1500 +get @ reactivity.esm-bundler.js:1506 +(匿名) @ NoteListPage.vue:35 +renderFnWithContext @ runtime-core.esm-bundler.js:695 +(匿名) @ runtime.js:286 +renderComponentRoot @ runtime-core.esm-bundler.js:6590 +componentUpdateFn @ runtime-core.esm-bundler.js:5468 +run @ reactivity.esm-bundler.js:237 +runIfDirty @ reactivity.esm-bundler.js:275 +callWithErrorHandling @ runtime-core.esm-bundler.js:199 +flushJobs @ runtime-core.esm-bundler.js:408 +Promise.then +queueFlush @ runtime-core.esm-bundler.js:322 +queueJob @ runtime-core.esm-bundler.js:317 +effect2.scheduler @ runtime-core.esm-bundler.js:5519 +trigger @ reactivity.esm-bundler.js:265 +endBatch @ reactivity.esm-bundler.js:323 +notify @ reactivity.esm-bundler.js:614 +trigger @ reactivity.esm-bundler.js:588 +set value @ reactivity.esm-bundler.js:1472 +set @ reactivity.esm-bundler.js:1510 +_createVNode.onUpdate:modelValue._cache.._cache. @ NoteListPage.vue:31 +callWithErrorHandling @ runtime-core.esm-bundler.js:199 +callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 +emit @ runtime-core.esm-bundler.js:6473 +(匿名) @ runtime-core.esm-bundler.js:8188 +handleInput @ Search.vue:31 +callWithErrorHandling @ runtime-core.esm-bundler.js:199 +callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 +invoker @ runtime-dom.esm-bundler.js:730 +NoteListPage.vue:104 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toLowerCase') + at NoteListPage.vue:104:57 + at wrappedFn (reactivity.esm-bundler.js:878:19) + at Array.filter () + at apply (reactivity.esm-bundler.js:886:27) + at Proxy.filter (reactivity.esm-bundler.js:778:12) + at ComputedRefImpl.fn (NoteListPage.vue:102:22) + at refreshComputed (reactivity.esm-bundler.js:391:28) + at get value (reactivity.esm-bundler.js:1655:5) + at ComputedRefImpl.fn (NoteListPage.vue:130:28) + at refreshComputed (reactivity.esm-bundler.js:391:28) +(匿名) @ NoteListPage.vue:104 +wrappedFn @ reactivity.esm-bundler.js:878 +apply @ reactivity.esm-bundler.js:886 +filter @ reactivity.esm-bundler.js:778 +(匿名) @ NoteListPage.vue:102 +refreshComputed @ reactivity.esm-bundler.js:391 +get value @ reactivity.esm-bundler.js:1655 +(匿名) @ NoteListPage.vue:130 +refreshComputed @ reactivity.esm-bundler.js:391 +get value @ reactivity.esm-bundler.js:1655 +unref @ reactivity.esm-bundler.js:1500 +get @ reactivity.esm-bundler.js:1506 +(匿名) @ NoteListPage.vue:35 +renderFnWithContext @ runtime-core.esm-bundler.js:695 +(匿名) @ runtime.js:286 +renderComponentRoot @ runtime-core.esm-bundler.js:6590 +componentUpdateFn @ runtime-core.esm-bundler.js:5468 +run @ reactivity.esm-bundler.js:237 +runIfDirty @ reactivity.esm-bundler.js:275 +callWithErrorHandling @ runtime-core.esm-bundler.js:199 +flushJobs @ runtime-core.esm-bundler.js:408 +Promise.then +queueFlush @ runtime-core.esm-bundler.js:322 +queueJob @ runtime-core.esm-bundler.js:317 +effect2.scheduler @ runtime-core.esm-bundler.js:5519 +trigger @ reactivity.esm-bundler.js:265 +endBatch @ reactivity.esm-bundler.js:323 +notify @ reactivity.esm-bundler.js:614 +trigger @ reactivity.esm-bundler.js:588 +set value @ reactivity.esm-bundler.js:1472 +set @ reactivity.esm-bundler.js:1510 +_createVNode.onUpdate:modelValue._cache.._cache. @ NoteListPage.vue:31 +callWithErrorHandling @ runtime-core.esm-bundler.js:199 +callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 +emit @ runtime-core.esm-bundler.js:6473 +(匿名) @ runtime-core.esm-bundler.js:8188 +handleInput @ Search.vue:31 +callWithErrorHandling @ runtime-core.esm-bundler.js:199 +callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 +invoker @ runtime-dom.esm-bundler.js:730 +NoteListPage.vue:104 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toLowerCase') + at NoteListPage.vue:104:57 + at wrappedFn (reactivity.esm-bundler.js:878:19) + at Array.filter () + at apply (reactivity.esm-bundler.js:886:27) + at Proxy.filter (reactivity.esm-bundler.js:778:12) + at ComputedRefImpl.fn (NoteListPage.vue:102:22) + at refreshComputed (reactivity.esm-bundler.js:391:28) + at get value (reactivity.esm-bundler.js:1655:5) + at ComputedRefImpl.fn (NoteListPage.vue:130:28) + at refreshComputed (reactivity.esm-bundler.js:391:28) +(匿名) @ NoteListPage.vue:104 +wrappedFn @ reactivity.esm-bundler.js:878 +apply @ reactivity.esm-bundler.js:886 +filter @ reactivity.esm-bundler.js:778 +(匿名) @ NoteListPage.vue:102 +refreshComputed @ reactivity.esm-bundler.js:391 +get value @ reactivity.esm-bundler.js:1655 +(匿名) @ NoteListPage.vue:130 +refreshComputed @ reactivity.esm-bundler.js:391 +get value @ reactivity.esm-bundler.js:1655 +unref @ reactivity.esm-bundler.js:1500 +get @ reactivity.esm-bundler.js:1506 +(匿名) @ NoteListPage.vue:35 +renderFnWithContext @ runtime-core.esm-bundler.js:695 +(匿名) @ runtime.js:286 +renderComponentRoot @ runtime-core.esm-bundler.js:6590 +componentUpdateFn @ runtime-core.esm-bundler.js:5468 +run @ reactivity.esm-bundler.js:237 +runIfDirty @ reactivity.esm-bundler.js:275 +callWithErrorHandling @ runtime-core.esm-bundler.js:199 +flushJobs @ runtime-core.esm-bundler.js:408 +Promise.then +queueFlush @ runtime-core.esm-bundler.js:322 +queueJob @ runtime-core.esm-bundler.js:317 +effect2.scheduler @ runtime-core.esm-bundler.js:5519 +trigger @ reactivity.esm-bundler.js:265 +endBatch @ reactivity.esm-bundler.js:323 +notify @ reactivity.esm-bundler.js:614 +trigger @ reactivity.esm-bundler.js:588 +set value @ reactivity.esm-bundler.js:1472 +set @ reactivity.esm-bundler.js:1510 +_createVNode.onUpdate:modelValue._cache.._cache. @ NoteListPage.vue:31 +callWithErrorHandling @ runtime-core.esm-bundler.js:199 +callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 +emit @ runtime-core.esm-bundler.js:6473 +(匿名) @ runtime-core.esm-bundler.js:8188 +handleInput @ Search.vue:31 +callWithErrorHandling @ runtime-core.esm-bundler.js:199 +callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 +invoker @ runtime-dom.esm-bundler.js:730 +NoteListPage.vue:104 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toLowerCase') + at NoteListPage.vue:104:57 + at wrappedFn (reactivity.esm-bundler.js:878:19) + at Array.filter () + at apply (reactivity.esm-bundler.js:886:27) + at Proxy.filter (reactivity.esm-bundler.js:778:12) + at ComputedRefImpl.fn (NoteListPage.vue:102:22) + at refreshComputed (reactivity.esm-bundler.js:391:28) + at get value (reactivity.esm-bundler.js:1655:5) + at ComputedRefImpl.fn (NoteListPage.vue:130:28) + at refreshComputed (reactivity.esm-bundler.js:391:28) +(匿名) @ NoteListPage.vue:104 +wrappedFn @ reactivity.esm-bundler.js:878 +apply @ reactivity.esm-bundler.js:886 +filter @ reactivity.esm-bundler.js:778 +(匿名) @ NoteListPage.vue:102 +refreshComputed @ reactivity.esm-bundler.js:391 +get value @ reactivity.esm-bundler.js:1655 +(匿名) @ NoteListPage.vue:130 +refreshComputed @ reactivity.esm-bundler.js:391 +get value @ reactivity.esm-bundler.js:1655 +unref @ reactivity.esm-bundler.js:1500 +get @ reactivity.esm-bundler.js:1506 +(匿名) @ NoteListPage.vue:35 +renderFnWithContext @ runtime-core.esm-bundler.js:695 +(匿名) @ runtime.js:286 +renderComponentRoot @ runtime-core.esm-bundler.js:6590 +componentUpdateFn @ runtime-core.esm-bundler.js:5468 +run @ reactivity.esm-bundler.js:237 +runIfDirty @ reactivity.esm-bundler.js:275 +callWithErrorHandling @ runtime-core.esm-bundler.js:199 +flushJobs @ runtime-core.esm-bundler.js:408 +Promise.then +queueFlush @ runtime-core.esm-bundler.js:322 +queueJob @ runtime-core.esm-bundler.js:317 +effect2.scheduler @ runtime-core.esm-bundler.js:5519 +trigger @ reactivity.esm-bundler.js:265 +endBatch @ reactivity.esm-bundler.js:323 +notify @ reactivity.esm-bundler.js:614 +trigger @ reactivity.esm-bundler.js:588 +set value @ reactivity.esm-bundler.js:1472 +set @ reactivity.esm-bundler.js:1510 +_createVNode.onUpdate:modelValue._cache.._cache. @ NoteListPage.vue:31 +callWithErrorHandling @ runtime-core.esm-bundler.js:199 +callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 +emit @ runtime-core.esm-bundler.js:6473 +(匿名) @ runtime-core.esm-bundler.js:8188 +handleInput @ Search.vue:31 +callWithErrorHandling @ runtime-core.esm-bundler.js:199 +callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 +invoker @ runtime-dom.esm-bundler.js:730 +NoteListPage.vue:104 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toLowerCase') + at NoteListPage.vue:104:57 + at wrappedFn (reactivity.esm-bundler.js:878:19) + at Array.filter () + at apply (reactivity.esm-bundler.js:886:27) + at Proxy.filter (reactivity.esm-bundler.js:778:12) + at ComputedRefImpl.fn (NoteListPage.vue:102:22) + at refreshComputed (reactivity.esm-bundler.js:391:28) + at get value (reactivity.esm-bundler.js:1655:5) + at ComputedRefImpl.fn (NoteListPage.vue:130:28) + at refreshComputed (reactivity.esm-bundler.js:391:28) +(匿名) @ NoteListPage.vue:104 +wrappedFn @ reactivity.esm-bundler.js:878 +apply @ reactivity.esm-bundler.js:886 +filter @ reactivity.esm-bundler.js:778 +(匿名) @ NoteListPage.vue:102 +refreshComputed @ reactivity.esm-bundler.js:391 +get value @ reactivity.esm-bundler.js:1655 +(匿名) @ NoteListPage.vue:130 +refreshComputed @ reactivity.esm-bundler.js:391 +get value @ reactivity.esm-bundler.js:1655 +unref @ reactivity.esm-bundler.js:1500 +get @ reactivity.esm-bundler.js:1506 +(匿名) @ NoteListPage.vue:35 +renderFnWithContext @ runtime-core.esm-bundler.js:695 +(匿名) @ runtime.js:286 +renderComponentRoot @ runtime-core.esm-bundler.js:6590 +componentUpdateFn @ runtime-core.esm-bundler.js:5468 +run @ reactivity.esm-bundler.js:237 +runIfDirty @ reactivity.esm-bundler.js:275 +callWithErrorHandling @ runtime-core.esm-bundler.js:199 +flushJobs @ runtime-core.esm-bundler.js:408 +Promise.then +queueFlush @ runtime-core.esm-bundler.js:322 +queueJob @ runtime-core.esm-bundler.js:317 +effect2.scheduler @ runtime-core.esm-bundler.js:5519 +trigger @ reactivity.esm-bundler.js:265 +endBatch @ reactivity.esm-bundler.js:323 +notify @ reactivity.esm-bundler.js:614 +trigger @ reactivity.esm-bundler.js:588 +set value @ reactivity.esm-bundler.js:1472 +set @ reactivity.esm-bundler.js:1510 +_createVNode.onUpdate:modelValue._cache.._cache. @ NoteListPage.vue:31 +callWithErrorHandling @ runtime-core.esm-bundler.js:199 +callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 +emit @ runtime-core.esm-bundler.js:6473 +(匿名) @ runtime-core.esm-bundler.js:8188 +handleInput @ Search.vue:31 +callWithErrorHandling @ runtime-core.esm-bundler.js:199 +callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 +invoker @ runtime-dom.esm-bundler.js:730 +NoteListPage.vue:104 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toLowerCase') + at NoteListPage.vue:104:57 + at wrappedFn (reactivity.esm-bundler.js:878:19) + at Array.filter () + at apply (reactivity.esm-bundler.js:886:27) + at Proxy.filter (reactivity.esm-bundler.js:778:12) + at ComputedRefImpl.fn (NoteListPage.vue:102:22) + at refreshComputed (reactivity.esm-bundler.js:391:28) + at get value (reactivity.esm-bundler.js:1655:5) + at ComputedRefImpl.fn (NoteListPage.vue:130:28) + at refreshComputed (reactivity.esm-bundler.js:391:28) +(匿名) @ NoteListPage.vue:104 +wrappedFn @ reactivity.esm-bundler.js:878 +apply @ reactivity.esm-bundler.js:886 +filter @ reactivity.esm-bundler.js:778 +(匿名) @ NoteListPage.vue:102 +refreshComputed @ reactivity.esm-bundler.js:391 +get value @ reactivity.esm-bundler.js:1655 +(匿名) @ NoteListPage.vue:130 +refreshComputed @ reactivity.esm-bundler.js:391 +get value @ reactivity.esm-bundler.js:1655 +unref @ reactivity.esm-bundler.js:1500 +get @ reactivity.esm-bundler.js:1506 +(匿名) @ NoteListPage.vue:35 +renderFnWithContext @ runtime-core.esm-bundler.js:695 +(匿名) @ runtime.js:286 +renderComponentRoot @ runtime-core.esm-bundler.js:6590 +componentUpdateFn @ runtime-core.esm-bundler.js:5468 +run @ reactivity.esm-bundler.js:237 +runIfDirty @ reactivity.esm-bundler.js:275 +callWithErrorHandling @ runtime-core.esm-bundler.js:199 +flushJobs @ runtime-core.esm-bundler.js:408 +Promise.then +queueFlush @ runtime-core.esm-bundler.js:322 +queueJob @ runtime-core.esm-bundler.js:317 +effect2.scheduler @ runtime-core.esm-bundler.js:5519 +trigger @ reactivity.esm-bundler.js:265 +endBatch @ reactivity.esm-bundler.js:323 +notify @ reactivity.esm-bundler.js:614 +trigger @ reactivity.esm-bundler.js:588 +set value @ reactivity.esm-bundler.js:1472 +set @ reactivity.esm-bundler.js:1510 +_createVNode.onUpdate:modelValue._cache.._cache. @ NoteListPage.vue:31 +callWithErrorHandling @ runtime-core.esm-bundler.js:199 +callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 +emit @ runtime-core.esm-bundler.js:6473 +(匿名) @ runtime-core.esm-bundler.js:8188 +handleInput @ Search.vue:31 +callWithErrorHandling @ runtime-core.esm-bundler.js:199 +callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 +invoker @ runtime-dom.esm-bundler.js:730 +NoteListPage.vue:296 搜索栏失去焦点 diff --git a/src/pages/NoteListPage.vue b/src/pages/NoteListPage.vue index 543b8b3..87e81e7 100644 --- a/src/pages/NoteListPage.vue +++ b/src/pages/NoteListPage.vue @@ -97,11 +97,13 @@ const trashNotesCount = computed(() => { // 根据当前文件夹过滤便签 const filteredNotes = computed(() => { // 预处理搜索查询，提高性能 - const lowerCaseQuery = searchQuery.value.toLowerCase().trim() + const lowerCaseQuery = searchQuery.value?.toLowerCase().trim() || '' return store.notes.filter(note => { // 先检查搜索条件 - const matchesSearch = !lowerCaseQuery || note.title.toLowerCase().includes(lowerCaseQuery) || note.content.toLowerCase().includes(lowerCaseQuery) + const matchesSearch = !lowerCaseQuery || + (note.title && note.title.toLowerCase().includes(lowerCaseQuery)) || + (note.content && note.content.toLowerCase().includes(lowerCaseQuery)) if (!matchesSearch) return false From 52852332f7ba2c49acbbf79422a0050545900ed6 Mon Sep 17 00:00:00 2001 From: yuantao Date: Fri, 17 Oct 2025 09:19:33 +0800 Subject: [PATCH 29/37] =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E4=B8=8A=E4=B8=8B?= =?UTF-8?q?=E6=96=87=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- IFLOW.md | 279 +++++++++++++++++----------------------------------- README.md | 103 ------------------- history.txt | 80 --------------- update.txt | 0 4 files changed, 92 insertions(+), 370 deletions(-) delete mode 100644 README.md delete mode 100644 history.txt create mode 100644 update.txt diff --git a/IFLOW.md b/IFLOW.md index 2329ba7..5c51019 100644 --- a/IFLOW.md +++ b/IFLOW.md @@ -1,216 +1,121 @@ -# SmartisanNote.vue 项目概览 +# SmartisanNote.Remake - IFLOW 上下文 ## 项目简介 -这是一个基于 Vue 3 和 Vite 构建的单页 Web 应用（SPA），旨在模仿锤子科技（Smartisan）的便签应用。该项目使用 localStorage 进行本地数据持久化，支持便签的增删改查、文件夹管理、便签置顶、星标标记、基础设置（如云同步、深色模式）以及丰富的交互功能。 +这是一个基于 Vue 3 (Composition API) 和 Ionic Vue 的移动端便签应用，仿照锤子便签的设计风格。该应用支持富文本编辑、图片插入、便签管理（加星、置顶、删除至回收站）、文件夹分类以及 PWA 离线功能。 -## 技术栈 +## 核心技术栈 -* **核心框架**: Vue 3 (Composition API) -* **构建工具**: Vite -* **路由管理**: vue-router -* **状态管理**: Pinia (Vue 3 状态管理库) -* **UI 库**: 原生 CSS，使用了锤子便签的经典配色方案（定义在 `index.html` 的 CSS 变量中） -* **移动端支持**: Capacitor (用于构建 Android/iOS 应用) -* **样式预处理器**: Less -* **代码语言**: JavaScript (ES6+) -* **UI 组件库**: Ionic Framework -* **日期处理**: moment.js +- **Vue 3**: 使用 Composition API 构建用户界面。 +- **Vue Router**: 实现页面路由管理，采用 Hash 模式以支持静态部署。 +- **Pinia**: 用于全局状态管理（便签、文件夹、设置）。 +- **Vite**: 作为构建工具，提供快速的开发和构建体验。 +- **Vite Plugin PWA**: 支持将应用打包为 PWA，实现离线使用。 +- **Ionic Vue**: 提供移动端 UI 组件。 +- **localStorage**: 用于本地数据存储。 ## 项目结构 ``` -. -├── android/ # Capacitor Android 项目文件 -├── dist/ # 构建后的生产文件 -├── node_modules/ # 项目依赖 -├── public/ # 静态资源目录 -├── src/ -│ ├── common/ # 全局样式和通用工具 -│ ├── components/ # 可复用的 Vue 组件 (Header, NoteItem, FolderItem) -│ ├── pages/ # 页面级别的 Vue 组件 (NoteList, NoteEditor, Folder, Settings) -│ ├── stores/ # Pinia 状态管理 stores -│ │ └── useAppStore.js # 全局状态管理 store -│ ├── utils/ # 工具函数 -│ │ ├── dateUtils.js # 日期处理工具，基于 moment.js -│ │ └── storage.js # localStorage 封装，负责数据的读写 +SmartisanNote.Remake/ +├── android/ # Android 原生项目 (Capacitor) +├── public/ # 静态资源 +│ ├── assets/ # 应用图标、图片等资源 +│ └── icons/ # PWA 图标 +├── src/ # 源代码目录 │ ├── App.vue # 根组件 -│ └── main.js # 应用入口，初始化路由、Pinia 和挂载 -├── index.html # HTML 模板，包含 CSS 变量定义 -├── package.json # 项目元数据和脚本命令 -├── vite.config.js # Vite 构建配置 +│ ├── main.js # 应用入口文件 +│ ├── common/ # 公共样式 +│ ├── components/ # 可复用的 UI 组件 +│ ├── pages/ # 页面组件 +│ ├── stores/ # Pinia 状态管理 +│ └── utils/ # 工具函数 (日期处理、本地存储) +├── index.html # 主页面模板 +├── package.json # 项目依赖和脚本 +├── vite.config.js # Vite 配置文件 └── capacitor.config.json # Capacitor 配置文件 ``` -## 开发与构建命令 +## 核心功能模块 -* **安装依赖**: `npm install` -* **启动开发服务器**: `npm run dev` - * 默认端口: 3000 - * 基于 Vite，支持热更新。 -* **构建生产版本**: `npm run build` - * 使用 Vite 构建，并同步到 Capacitor 项目 (`npx cap sync`)。 -* **构建所有版本**: `npm run build:all` - * 构建标准版本和 PWA 版本 -* **部署PWA版本**: `npm run deploy:pwa` - * 构建并部署PWA版本到FTP服务器 -* **在 Android 设备上运行**: `npm run android` - * 需要预先配置好 Android 开发环境。 +1. **便签列表页 (`NoteListPage.vue`)**: + * 展示所有便签，支持按全部、加星、回收站分类查看。 + * 支持搜索便签标题和内容。 + * 支持对便签进行加星、置顶、删除操作。 + * 点击便签可进入编辑页面。 + * 点击创建按钮可进入新建便签页面。 +2. **便签编辑页 (`NoteEditorPage.vue`)**: + * 使用自定义富文本编辑器 (`RichTextEditor.vue`) 进行内容编辑。 + * 支持加粗、居中、待办事项、列表、标题、引用等格式。 + * 支持插入和拖拽排序图片。 + * 支持删除图片。 +3. **富文本编辑器 (`RichTextEditor.vue`)**: + * 核心功能组件，提供富文本编辑能力。 + * 工具栏包含加粗、居中、待办事项、列表、标题、引用等按钮。 + * 支持插入图片并调整尺寸。 + * 支持长按拖拽图片进行排序。 + * 支持点击图片右上角按钮删除图片。 + * 支持待办事项的添加、完成/未完成状态切换。 +4. **文件夹管理页 (`FolderPage.vue`)**: + * 管理自定义文件夹。 + * 可创建、重命名、删除文件夹。 +5. **设置页 (`SettingsPage.vue`)**: + * 应用设置，如云同步开关（目前仅是 UI，未实现逻辑）、深色模式开关（目前仅是 UI，未实现逻辑）。 +6. **状态管理 (`stores/useAppStore.js`)**: + * 使用 Pinia 管理应用所有状态（便签数据、文件夹数据、设置）。 + * 提供操作便签、文件夹和设置的 actions。 + * 负责与 `localStorage` 进行数据交互。 +7. **工具函数 (`utils/`)**: + * `dateUtils.js`: 处理日期格式化。 + * `storage.js`: 封装 `localStorage` 操作。 -## 核心功能 +## 开发与构建 -### 便签管理 -* **增删改查**: 支持创建、查看、编辑和删除便签 -* **星标标记**: 可以将重要便签标记为星标便签 -* **置顶功能**: 支持将便签置顶显示在列表顶部 -* **图片标记**: 可以标记便签中是否包含图片 -* **滑动删除**: 支持右滑显示删除按钮，带有阻尼效果的交互体验 -* **富文本编辑**: 支持加粗、居中、待办事项、列表、标题、引用等格式 +### 前置条件 -### 文件夹管理 -* **分类组织**: 支持创建文件夹对便签进行分类管理 -* **默认文件夹**: 提供"全部便签"、"加星便签"、"回收站"等默认文件夹 +- Node.js (推荐 LTS 版本) +- npm 或 yarn -### 搜索功能 -* **全文搜索**: 支持按标题和内容搜索便签 -* **实时过滤**: 搜索结果实时更新 +### 安装依赖 -### 设置功能 -* **云同步**: 支持云同步设置（待实现） -* **深色模式**: 支持深色模式切换（待完善） +```bash +npm install +``` -### 日期时间处理 -* **智能格式化**: 根据时间范围自动格式化日期显示 -* **多场景适配**: 不同页面使用不同的日期格式化规则 -* **本地化支持**: 支持中文日期格式显示 +### 启动开发服务器 -## 代码规范与开发约定 +```bash +npm run dev +``` +这将在 `http://localhost:3000` 启动开发服务器。 -* **状态管理**: 使用 Pinia 进行全局状态管理，通过 `useAppStore` composable 函数访问状态。 -* **数据持久化**: 所有数据（便签、文件夹、设置）均通过 `src/utils/storage.js` 与 `localStorage` 进行交互。 -* **路由**: 使用 `vue-router` 和 `createWebHashHistory` 进行前端路由管理。 -* **UI 风格**: 颜色方案严格遵循 `index.html` 中定义的 CSS 变量，以保持锤子便签的视觉风格。 -* **组件组织**: 页面组件 (`pages/`) 和可复用组件 (`components/`) 分离，结构清晰。 -* **代码风格**: 采用标准的 Vue 3 Composition API 写法，使用 ES6 模块系统 (`import`/`export`)。 -* **日期处理**: 使用 moment.js 进行日期处理，通过 `src/utils/dateUtils.js` 统一管理日期格式化逻辑。 +### 构建标准版本 -## 样式 +```bash +npm run build +``` +构建产物位于 `dist/standard` 目录。 -* 全局样式文件是位于 `common/` 目录下的 `base.css`。 -* 使用 Codefun 原子类样式，用于快速布局。 -* 样式规范应遵循项目中已有的风格。 -* 使用 Less 作为 CSS 预处理器。 +### 构建 PWA 离线版本 -## JavaScript +```bash +npm run build:all +# 或者只构建 PWA +npm run deploy:pwa +``` +PWA 构建产物位于 `dist/offline` 目录。 -* 严格遵循ES6规范。 -* 遵循JavaScript函数式编程范式。 -* 方法类函数应该使用 `function` 进行定义。 -* 避免出现超过4个以上的 `ref`，超过4个则使用 `reactive`。 -* 全局变量都集中放置于代码顶部。 -* 变量名使用小驼峰命名法。 -* 常量名使用全大写。 -* 状态类变量命名参考 `isLogin`、`isOpen`。 -* 事件类方法命名参考 `onClick`、`onSelect`。 -* 变量都应该写有注释说明、类型说明。 -* `Promise` 方法使用 `async` `await` 写法，并进行容错处理。 -* 字符串拼接使用ES6的模板语法。 -* JavaScript规范应遵循项目中已有的风格。 +### 在 Android 设备上运行 -## 组件 +```bash +npm run android +``` +这需要配置好 Android 开发环境 (Android Studio, SDK 等)。 -* 全局组件放在 `components/` 目录下。 -* 页面独立组件放在页面根目录下的 `components/`。 -* 每个组件应该附带 `README.MD` 文档。 -* 组件编写应遵循项目中已有的风格。 +## 代码规范与约定 -### Header 组件 -* **动态按钮**: 根据页面状态显示不同的操作按钮（新建、保存、插入图片） -* **文件夹管理**: 支持文件夹展开/收起功能 - -### NoteItem 组件 -* **滑动交互**: 支持右滑显示删除按钮，带有阻尼效果 -* **状态切换**: 支持星标和置顶状态的切换 -* **视觉反馈**: 滑动时便签夹会切换状态，提供直观的交互反馈 -* **日期显示**: 显示格式化后的便签更新时间 - -### RichTextEditor 组件 -* **富文本编辑**: 支持多种文本格式（加粗、居中、待办事项、列表、标题、引用） -* **图片插入**: 支持插入图片功能 -* **图片删除**: 支持通过短按图片显示删除按钮，二次点击删除按钮执行删除操作 -* **图片拖拽排序**: 支持长按图片进行拖拽排序 -* **工具栏**: 提供浮动工具栏，支持格式化操作 - -## 页面 - -* 页面使用 Composition API (setup语法糖) 编写。 -* 注释、结构规范应遵循项目中已有的风格。 - -### NoteListPage -* **便签列表**: 显示所有便签，支持置顶便签优先显示 -* **文件夹管理**: 支持文件夹的展开和切换 -* **搜索功能**: 提供便签搜索功能 -* **交互反馈**: 显示便签总数和置顶便签数量 -* **智能日期显示**: 根据时间范围显示不同的日期格式 - * 今天：显示为 "今天 下午 4:00" - * 昨天：显示为 "昨天 下午 4:00" - * 超过两天但小于一周：显示为 "星期一 10/8 上午 3:00" - * 超过一周但小于一年：显示为 "10天前 9/20 下午 2:00" - * 超过一年：显示为 "635天前 2024/8/10 上午 9:00" - -### NoteEditorPage -* **编辑模式**: 支持新建和编辑便签 -* **富文本编辑**: 集成RichTextEditor组件，支持丰富的文本格式 -* **图片插入**: 支持通过工具栏插入图片 -* **图片删除**: 支持通过短按图片显示删除按钮，二次点击删除按钮执行删除操作 -* **状态管理**: 根据路由参数判断是新建还是编辑模式 -* **智能日期显示**: 根据时间范围显示不同的日期格式 - * 今天：显示为 "今天 下午 4:00" - * 昨天：显示为 "昨天 下午 4:00" - * 超过两天但小于一个月：显示为 "10/8 上午 3:00" - * 超过一个月：显示为 "2024/8/10 上午 9:00" - -## 状态管理 (Pinia) - -项目现在使用 Pinia 作为状态管理解决方案，主要特点包括： - -* **Store 定义**: 在 `src/stores/useAppStore.js` 中定义了全局状态 store -* **状态结构**: 包含 notes、folders 和 settings 三个主要状态 -* **Getters**: 提供了计算属性如 starredNotesCount 和 allNotesCount -* **Actions**: 包含所有状态变更操作，如 addNote、updateNote、deleteNote 等 -* **数据持久化**: 通过 storage.js 工具函数与 localStorage 进行数据交互 -* **Mock 数据**: 支持加载预设的 mock 数据用于开发和演示 -* **使用方式**: 在组件中通过 `const store = useAppStore()` 来访问状态和方法 - -## 新增功能特性 - -### 滑动交互 -* **阻尼效果**: 右滑超过阈值后提供阻尼效果，增强交互体验 -* **状态切换**: 滑动时便签夹会切换到展开状态，松开后根据位置决定是否保持展开 -* **视觉反馈**: 滑动过程中提供实时视觉反馈 - -### Mock 数据 -* **自动加载**: 当检测到无数据时自动加载预设的 mock 数据 -* **手动加载**: 可通过 URL 参数 `?mock=true` 强制加载 mock 数据 -* **丰富内容**: 包含多种类型的便签、文件夹和设置示例 -* **固定日期**: 使用固定的日期值确保数据一致性 - -### 增强的便签功能 -* **置顶支持**: 便签可以置顶显示在列表顶部 -* **图片标记**: 可以标记便签是否包含图片 -* **排序优化**: 置顶便签优先显示，按更新时间排序 - -### PWA 支持 -* **离线使用**: 支持构建PWA版本，可离线使用 -* **自动部署**: 支持一键构建并部署到FTP服务器 - -### 智能日期处理 -* **统一管理**: 通过 `dateUtils.js` 统一管理所有日期处理逻辑 -* **多格式支持**: 支持多种日期格式化方式以适应不同场景 -* **本地化显示**: 支持中文友好的日期时间显示 -* **场景适配**: 不同页面使用最适合的日期格式化规则 - -### 图片处理增强 -* **图片删除优化**: 通过二次点击机制避免误删，提升用户体验 -* **图片拖拽排序**: 支持长按图片进行拖拽排序，操作更直观 -* **事件冲突解决**: 优化了图片删除按钮与容器短按事件的冲突问题 \ No newline at end of file +- **组件化**: 应用遵循组件化开发模式，将 UI 拆分为可复用的组件。 +- **状态管理**: 使用 Pinia 进行全局状态管理，确保数据流清晰。 +- **本地存储**: 便签、文件夹和设置数据存储在浏览器的 `localStorage` 中。 +- **样式**: 使用 CSS 变量定义主题色和尺寸，便于维护和主题切换。 +- **路由**: 使用 Vue Router 管理页面导航。 \ No newline at end of file diff --git a/README.md b/README.md deleted file mode 100644 index b13a210..0000000 --- a/README.md +++ /dev/null @@ -1,103 +0,0 @@ -# 锤子便签（重制版） - -![项目截图](public/icons/icon-192.png) - -这是一个基于 Vue 3 和 Vite 构建的单页 Web 应用（SPA），旨在模仿锤子科技（Smartisan）的便签应用。该项目使用 localStorage 进行本地数据持久化，支持便签的增删改查、文件夹管理、便签置顶、星标标记等丰富的交互功能。 - -## 功能特性 - -### 核心功能 -- ✅ 便签的增删改查操作 -- ✅ 便签置顶和星标标记 -- ✅ 便签滑动删除交互（带阻尼效果） -- ✅ 文件夹分类管理 -- ✅ 便签全文搜索 -- ✅ 富文本编辑（支持加粗、居中、待办事项、列表、标题、引用等格式） -- ✅ 图片插入功能 -- ✅ 响应式设计，适配移动端设备 -- ✅ 刘海屏兼容 - -### 技术亮点 -- ⚡ 基于 Vite 构建，开发体验流畅 -- 🖼️ 使用原生 CSS 和锤子便签经典配色方案 -- 📦 状态管理采用 Pinia -- 🔄 路由管理使用 vue-router -- 📱 支持构建为 PWA 应用 -- 🚀 支持一键部署到 FTP 服务器 - -## 快速开始 - -### 环境要求 -- Node.js >= 16.0.0 -- npm >= 7.0.0 - -### 安装依赖 -```bash -npm install -``` - -### 启动开发服务器 -```bash -npm run dev -``` -默认访问地址：http://localhost:3000 - -### 构建生产版本 -```bash -# 构建标准版本 -npm run build - -# 构建 PWA 版本 -npm run build:pwa - -# 构建并部署 PWA 版本到 FTP 服务器 -npm run deploy:pwa -``` - -### 在 Android 设备上运行 -```bash -npm run android -``` - -## 项目结构 -``` -. -├── android/ # Capacitor Android 项目文件 -├── dist/ # 构建后的生产文件 -├── node_modules/ # 项目依赖 -├── public/ # 静态资源目录 -├── src/ -│ ├── common/ # 全局样式和通用工具 -│ ├── components/ # 可复用的 Vue 组件 -│ ├── pages/ # 页面级别的 Vue 组件 -│ ├── stores/ # Pinia 状态管理 stores -│ ├── utils/ # 工具函数 -│ ├── App.vue # 根组件 -│ └── main.js # 应用入口 -├── index.html # HTML 模板 -├── package.json # 项目元数据和脚本命令 -├── vite.config.js # Vite 构建配置 -└── capacitor.config.json # Capacitor 配置文件 -``` - -## 技术栈 -- **核心框架**: Vue 3 (Composition API) -- **构建工具**: Vite -- **路由管理**: vue-router -- **状态管理**: Pinia -- **UI 库**: 原生 CSS -- **移动端支持**: Capacitor -- **样式预处理器**: Less - -## 开发约定 -- 使用 Vue 3 Composition API -- 遵循 ES6 规范 -- 使用 Pinia 进行状态管理 -- 通过 localStorage 实现数据持久化 -- 组件和页面分离的目录结构 - -## 许可证 -ISC - -## 贡献 -欢迎提交 Issue 和 Pull Request 来帮助改进这个项目。 \ No newline at end of file diff --git a/history.txt b/history.txt deleted file mode 100644 index dfbeca8..0000000 --- a/history.txt +++ /dev/null @@ -1,80 +0,0 @@ -│ 1. Primary Request and Intent: │ -│ - The user explicitly requested to modify the RichTextEditor.vue component to use the vue-draggable-plus │ -│ library (https://www.npmjs.com/package/vue-draggable-plus) for implementing drag functionality for images. │ -│ - The intent was to replace the existing native HTML5 drag and drop implementation with the │ -│ vue-draggable-plus library while maintaining the same functionality. │ -│ │ -│ 2. Key Technical Concepts: │ -│ - Vue 3 Composition API │ -│ - vue-draggable-plus library for drag and drop functionality │ -│ - HTML5 native drag and drop APIs │ -│ - Contenteditable div manipulation │ -│ - Image handling in rich text editors │ -│ - Event handling for drag operations (dragstart, dragover, drop, dragend) │ -│ │ -│ 3. Files and Code Sections: │ -│ - E:\yuantao\SmartisanNote.VUE\src\components\RichTextEditor.vue │ -│ - This is the main file that was modified to implement vue-draggable-plus │ -│ - Modified the script setup section to import vDraggable from vue-draggable-plus │ -│ - Added a images ref to store image data for vue-draggable-plus │ -│ - Added draggableOptions configuration for the library │ -│ - Modified the template to use v-draggable directive │ -│ - Updated the insertImage function to add vue-draggable-plus attributes to images │ -│ - Updated the adjustExistingImages function to work with vue-draggable-plus │ -│ - Modified drag event handlers to be compatible with vue-draggable-plus │ -│ - Important code snippet for the template modification: │ -│ ```html │ -│
│ -│ ``` │ -│ - Important code snippet for the script setup modification: │ -│ ```javascript │ -│ import { vDraggable } from 'vue-draggable-plus' │ -│ const images = ref([]) // Store images for vue-draggable-plus │ -│ const draggableOptions = { │ -│ animation: 200, │ -│ group: 'images', │ -│ ghostClass: 'dragging', │ -│ dragClass: 'dragging', │ -│ onEnd: (evt) => { │ -│ console.log('Drag end event:', evt) │ -│ handleImageDragEnd(evt) │ -│ } │ -│ } │ -│ ``` │ -│ │ -│ 4. Errors and fixes: │ -│ - No specific errors were encountered during the implementation process. The vue-draggable-plus library │ -│ was already installed, and the implementation was done incrementally to maintain compatibility with │ -│ existing functionality. │ -│ │ -│ 5. Problem Solving: │ -│ - The main challenge was integrating vue-draggable-plus with an existing contenteditable div │ -│ implementation that already had native drag functionality │ -│ - The solution involved maintaining the existing drag functions while adding vue-draggable-plus │ -│ attributes and data structures │ -│ - Care was taken to ensure backward compatibility and preserve existing functionality │ -│ │ -│ 6. All user messages: │ -│ - "@src\components\RichTextEditor.vue │ -│ 把拖拽功能改为使用(https://www.npmjs.com/package/vue-draggable-plus)这个库来实现" │ -│ │ -│ 7. Pending Tasks: │ -│ - Test the drag functionality to ensure it works correctly with the vue-draggable-plus implementation │ -│ │ -│ 8. Current Work: │ -│ - The implementation of vue-draggable-plus in the RichTextEditor.vue component has been completed │ -│ - The last action was preparing to test the functionality by running the development server │ -│ - All necessary modifications to integrate vue-draggable-plus have been made: │ -│ 1. Added vDraggable import │ -│ 2. Created images ref for storing image data │ -│ 3. Added draggableOptions configuration │ -│ 4. Modified template to use v-draggable directive │ -│ 5. Updated insertImage function to work with vue-draggable-plus │ -│ 6. Updated adjustExistingImages function to work with vue-draggable-plus │ -│ 7. Modified drag event handlers for compatibility │ -│ │ -│ 9. Optional Next Step: │ -│ The next step would be to actually run the development server to test the implementation: │ -│ "Now I'll test the drag functionality by running the development server" │ \ No newline at end of file diff --git a/update.txt b/update.txt new file mode 100644 index 0000000..e69de29 From ae375aee8c9b6aee91b4de9f7db3bd292056e947 Mon Sep 17 00:00:00 2001 From: yuantao Date: Fri, 17 Oct 2025 09:49:42 +0800 Subject: [PATCH 30/37] =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E4=B8=8A=E4=B8=8B?= =?UTF-8?q?=E6=96=87=E6=9B=B4=E6=96=B0=EF=BC=9B=20=E6=96=B0=E5=A2=9E=20?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=97=A5=E5=BF=97=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .nvmdrc | 1 + IFLOW.md | 196 ++++++++++++++++++++++++++++++++------------------- package.json | 2 +- update.txt | 22 ++++++ 4 files changed, 146 insertions(+), 75 deletions(-) create mode 100644 .nvmdrc diff --git a/.nvmdrc b/.nvmdrc new file mode 100644 index 0000000..54954dc --- /dev/null +++ b/.nvmdrc @@ -0,0 +1 @@ +20.0.0 \ No newline at end of file diff --git a/IFLOW.md b/IFLOW.md index 5c51019..f324770 100644 --- a/IFLOW.md +++ b/IFLOW.md @@ -1,80 +1,59 @@ # SmartisanNote.Remake - IFLOW 上下文 -## 项目简介 +## 项目概述 -这是一个基于 Vue 3 (Composition API) 和 Ionic Vue 的移动端便签应用，仿照锤子便签的设计风格。该应用支持富文本编辑、图片插入、便签管理（加星、置顶、删除至回收站）、文件夹分类以及 PWA 离线功能。 +这是一个基于 Vue 3、Vite 和 Pinia 的移动端现代化 Web 应用，旨在重现并改进经典的锤子便签应用体验。该项目采用 PWA（渐进式 Web 应用）技术，支持离线使用和安装到主屏幕。 -## 核心技术栈 +### 主要技术栈 -- **Vue 3**: 使用 Composition API 构建用户界面。 -- **Vue Router**: 实现页面路由管理，采用 Hash 模式以支持静态部署。 -- **Pinia**: 用于全局状态管理（便签、文件夹、设置）。 -- **Vite**: 作为构建工具，提供快速的开发和构建体验。 -- **Vite Plugin PWA**: 支持将应用打包为 PWA，实现离线使用。 -- **Ionic Vue**: 提供移动端 UI 组件。 -- **localStorage**: 用于本地数据存储。 +* **框架**: Vue 3 (Composition API) +* **构建工具**: Vite +* **状态管理**: Pinia +* **路由**: Vue Router +* **UI 组件库**: Ionic Vue (部分使用) +* **PWA 支持**: vite-plugin-pwa +* **本地存储**: localStorage (通过 `src/utils/storage.js` 封装) +* **CSS 预处理器**: Less ## 项目结构 ``` -SmartisanNote.Remake/ -├── android/ # Android 原生项目 (Capacitor) -├── public/ # 静态资源 -│ ├── assets/ # 应用图标、图片等资源 -│ └── icons/ # PWA 图标 -├── src/ # 源代码目录 -│ ├── App.vue # 根组件 -│ ├── main.js # 应用入口文件 -│ ├── common/ # 公共样式 -│ ├── components/ # 可复用的 UI 组件 -│ ├── pages/ # 页面组件 -│ ├── stores/ # Pinia 状态管理 -│ └── utils/ # 工具函数 (日期处理、本地存储) -├── index.html # 主页面模板 -├── package.json # 项目依赖和脚本 -├── vite.config.js # Vite 配置文件 -└── capacitor.config.json # Capacitor 配置文件 +. +├── android/ # Capacitor Android 项目文件 +├── public/ # 静态资源目录 (图标等) +├── src/ # 源代码目录 +│ ├── App.vue # 根组件 +│ ├── main.js # 应用入口文件 +│ ├── common/ # 通用样式 +│ ├── components/ # 可复用的 UI 组件 +│ ├── pages/ # 页面组件 +│ ├── stores/ # Pinia 状态管理 +│ └── utils/ # 工具函数 +├── index.html # 应用入口 HTML 文件 +├── .nvmdrc # node.js 版本 +├── update.txt # 更新日志 +├── package.json # 项目依赖和脚本 +├── vite.config.js # Vite 配置文件 +└── capacitor.config.json # Capacitor 配置文件 ``` -## 核心功能模块 +## 核心功能 -1. **便签列表页 (`NoteListPage.vue`)**: - * 展示所有便签，支持按全部、加星、回收站分类查看。 - * 支持搜索便签标题和内容。 - * 支持对便签进行加星、置顶、删除操作。 - * 点击便签可进入编辑页面。 - * 点击创建按钮可进入新建便签页面。 -2. **便签编辑页 (`NoteEditorPage.vue`)**: - * 使用自定义富文本编辑器 (`RichTextEditor.vue`) 进行内容编辑。 - * 支持加粗、居中、待办事项、列表、标题、引用等格式。 - * 支持插入和拖拽排序图片。 - * 支持删除图片。 -3. **富文本编辑器 (`RichTextEditor.vue`)**: - * 核心功能组件，提供富文本编辑能力。 - * 工具栏包含加粗、居中、待办事项、列表、标题、引用等按钮。 - * 支持插入图片并调整尺寸。 - * 支持长按拖拽图片进行排序。 - * 支持点击图片右上角按钮删除图片。 - * 支持待办事项的添加、完成/未完成状态切换。 -4. **文件夹管理页 (`FolderPage.vue`)**: - * 管理自定义文件夹。 - * 可创建、重命名、删除文件夹。 -5. **设置页 (`SettingsPage.vue`)**: - * 应用设置，如云同步开关（目前仅是 UI，未实现逻辑）、深色模式开关（目前仅是 UI，未实现逻辑）。 -6. **状态管理 (`stores/useAppStore.js`)**: - * 使用 Pinia 管理应用所有状态（便签数据、文件夹数据、设置）。 - * 提供操作便签、文件夹和设置的 actions。 - * 负责与 `localStorage` 进行数据交互。 -7. **工具函数 (`utils/`)**: - * `dateUtils.js`: 处理日期格式化。 - * `storage.js`: 封装 `localStorage` 操作。 +* **便签管理**: 创建、编辑、删除、置顶、加星便签。 +* **文件夹管理**: 将便签分类到不同的文件夹中。 +* **搜索功能**: 按标题或内容搜索便签。 +* **回收站**: 临时存储已删除的便签，支持彻底删除。 +* **多种排序方式**: 按更新时间、标题、星标状态排序。 +* **PWA 支持**: 可安装为独立应用，支持离线使用。 +* **本地存储**: 所有数据存储在浏览器的 `localStorage` 中。 +* **深色模式**: (计划中) 支持切换深色/浅色主题。 +* **云同步**: (计划中) 支持多设备间数据同步。 ## 开发与构建 ### 前置条件 -- Node.js (推荐 LTS 版本) -- npm 或 yarn +确保已安装 Node.js (>=14) 和 npm。 ### 安装依赖 @@ -82,40 +61,109 @@ SmartisanNote.Remake/ npm install ``` -### 启动开发服务器 +### 开发 + +启动开发服务器: ```bash npm run dev ``` -这将在 `http://localhost:3000` 启动开发服务器。 -### 构建标准版本 +这将在 `http://localhost:3000` 启动应用。 + +### 构建 + +构建标准 Web 应用: ```bash npm run build ``` -构建产物位于 `dist/standard` 目录。 -### 构建 PWA 离线版本 +构建 PWA 应用: + +```bash +npm run build:pwa +``` + +构建所有版本 (标准 + PWA): ```bash npm run build:all -# 或者只构建 PWA +``` + +### 部署 PWA + +构建 PWA 并上传到服务器: + +```bash npm run deploy:pwa ``` -PWA 构建产物位于 `dist/offline` 目录。 -### 在 Android 设备上运行 +这将执行 `vite build --mode pwa` 并运行 `upload-pwa.js` 脚本。 + +### Android 应用 + +运行 Android 应用: ```bash npm run android ``` -这需要配置好 Android 开发环境 (Android Studio, SDK 等)。 ## 代码规范与约定 -- **组件化**: 应用遵循组件化开发模式，将 UI 拆分为可复用的组件。 -- **状态管理**: 使用 Pinia 进行全局状态管理，确保数据流清晰。 -- **本地存储**: 便签、文件夹和设置数据存储在浏览器的 `localStorage` 中。 -- **样式**: 使用 CSS 变量定义主题色和尺寸，便于维护和主题切换。 -- **路由**: 使用 Vue Router 管理页面导航。 \ No newline at end of file +### 代码风格与结构 + +* **框架**: Vue 3 (Composition API) 与 Pinia 状态管理 +* **构建工具**: Vite +* **路由**: Vue Router +* **UI 组件库**: Ionic Vue (部分使用) +* **PWA 支持**: vite-plugin-pwa +* **本地存储**: localStorage (通过 `src/utils/storage.js` 封装) +* **CSS 预处理器**: Less +* **CSS 命名**: 使用 BEM 命名规范，部分使用原子化 CSS 类名（以 `code-fun-` 开头） +* **响应式设计**: 使用 viewport 单位 (vw/vh) 和 CSS 变量实现响应式布局 +* **图标**: 使用 PNG 图片作为图标，存储在 `public/assets/icons/` 目录下 + +### 命名规范 + +* **文件命名**: + * 组件文件使用 PascalCase 命名法，如 `NoteItem.vue` + * 页面文件使用 PascalCase 命名法，如 `NoteListPage.vue` + * 工具文件使用 camelCase 命名法，如 `dateUtils.js` + * Store 文件使用 `use` 前缀 + PascalCase 命名法，如 `useAppStore.js` +* **组件命名**: 使用 PascalCase 命名法，如 `NoteItem` +* **变量命名**: 使用 camelCase 命名法，如 `noteToDelete` +* **常量命名**: 使用 UPPER_SNAKE_CASE 命名法，如 `NOTES_KEY` +* **函数命名**: 使用 camelCase 命名法，如 `handleNotePress` + +### 代码组织 + +* **组件结构**: + * 使用 `