feat: 新增文本框删除按钮功能（还原到）

css/style.css

@@ -17,7 +17,6 @@ html, body {
     display: flex;
     flex-direction: column;
     height: 100vh;
-    position: relative;
 }
 
 /* 顶部工具栏 */
@@ -82,10 +81,6 @@ html, body {
 
 /* 文本编辑器工具栏 */
 .text-editor-toolbar {
-    position: absolute;
-    top: 49px;
-    left: 0;
-    right: 0;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -97,7 +92,6 @@ html, body {
     visibility: hidden;
     opacity: 0;
     transition: opacity 0.2s;
-    z-index: 100;
 }
 
 .text-editor-toolbar.active {
@@ -105,31 +99,6 @@ html, body {
     opacity: 1;
 }
 
-/* 图片编辑器工具栏 - 与文本编辑器共享位置 */
-.image-editor-toolbar {
-    position: absolute;
-    top: 49px;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 16px;
-    background: #fff;
-    border-bottom: 1px solid #e0e0e0;
-    flex-shrink: 0;
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.2s;
-    z-index: 100;
-}
-
-.image-editor-toolbar.active {
-    visibility: visible;
-    opacity: 1;
-}
-
 .toolbar-btn {
     width: 40px;
     height: 40px;

index.html

@@ -46,18 +46,6 @@
             </label>
         </div>
 
-        <!-- 图片编辑器工具栏 -->
-        <div class="image-editor-toolbar" id="imageEditorToolbar">
-            <label class="toolbar-label">
-                <span>透明度</span>
-                <div class="roller-picker" id="opacityPicker">
-                    <div class="roller-arrow roller-up">▲</div>
-                    <div class="roller-value">100</div>
-                    <div class="roller-arrow roller-down">▼</div>
-                </div>
-            </label>
-        </div>
-
         <!-- 图片展示区 -->
         <div class="canvas-area" id="canvasArea">
             <div class="preview image-container empty" id="imageContainer">

js/script.js

@@ -15,13 +15,11 @@
     const longPressTip = document.getElementById('longPressTip');
     const canvasArea = document.getElementById('canvasArea');
     const textEditorToolbar = document.getElementById('textEditorToolbar');
-    const imageEditorToolbar = document.getElementById('imageEditorToolbar');
     const boldBtn = document.getElementById('boldBtn');
     const italicBtn = document.getElementById('italicBtn');
     const colorPicker = document.getElementById('colorPicker');
     const fontPicker = document.getElementById('fontPicker');
     const fontSizePicker = document.getElementById('fontSizePicker');
-    const opacityPicker = document.getElementById('opacityPicker');
     const overlayLayer = document.getElementById('overlayLayer');
     const overlayInput = document.createElement('input');
     overlayInput.type = 'file';
@@ -144,9 +142,8 @@
                 }
                 // 隐藏辅助线
                 hideGuides();
-                // 隐藏文本编辑器工具栏和图片编辑器工具栏
+                // 隐藏文本编辑器工具栏
                 textEditorToolbar.classList.remove('active');
-                imageEditorToolbar.classList.remove('active');
             }
 
             // 点击空白区域（不是层叠图和输入框）
@@ -310,16 +307,12 @@
         let isDragging = false;
         let isResizing = false;
         let startX, startY, startLeft, startTop, startWidth, startHeight;
-        let hasMoved = false;
         const minSize = 30;
 
         // 点击选中（区分点击和拖拽）
         overlayEl.addEventListener('click', (e) => {
             e.stopPropagation();
-            if (!hasMoved) {
+            selectOverlay(overlayEl);
-                selectOverlay(overlayEl);
-            }
-            hasMoved = false;
         });
 
         // 拖拽移动（不选中也可拖动）
@@ -336,7 +329,6 @@
             const clientY = isTouch ? e.touches[0].clientY : e.clientY;
 
             isDragging = true;
-            hasMoved = false;
             startX = clientX;
             startY = clientY;
             startLeft = overlayEl.offsetLeft;
@@ -344,6 +336,7 @@
 
             overlayEl.classList.add('dragging');
 
+            // 拖动时设置为选中状态
             selectOverlay(overlayEl);
 
             document.addEventListener('mousemove', handleDragMove);
@@ -364,10 +357,21 @@
 
             const moveDistance = Math.sqrt(dx * dx + dy * dy);
             if (moveDistance > 5) {
-                hasMoved = true;
                 let newLeft = startLeft + dx;
                 let newTop = startTop + dy;
 
+                // 使用吸附功能
+                const snapped = getSnapPosition(overlayEl, newLeft, newTop);
+                newLeft = snapped.left;
+                newTop = snapped.top;
+
+                // 显示对齐辅助线
+                if (snapped.showGuide) {
+                    showAlignmentGuides(overlayEl);
+                } else {
+                    hideGuides();
+                }
+
                 overlayEl.style.left = newLeft + 'px';
                 overlayEl.style.top = newTop + 'px';
             }
@@ -378,6 +382,7 @@
         function handleDragEnd() {
             isDragging = false;
             overlayEl.classList.remove('dragging');
+            hideGuides();
 
             document.removeEventListener('mousemove', handleDragMove);
             document.removeEventListener('mouseup', handleDragEnd);
@@ -501,15 +506,6 @@
         }
         selectedOverlay = overlayEl;
         overlayEl.classList.add('selected');
-
-        // 显示图片编辑器工具栏，隐藏文本编辑器工具栏
-        imageEditorToolbar.classList.add('active');
-        textEditorToolbar.classList.remove('active');
-
-        // 更新透明度值显示
-        const currentOpacity = Math.round(parseFloat(overlayEl.style.opacity || 1) * 100);
-        opacityValue = currentOpacity;
-        opacityValueEl.textContent = currentOpacity;
     }
 
     // 计算图片滑动边界
@@ -601,11 +597,6 @@
                 return;
             }
 
-            // 如果点击的是层叠图，不处理图片滑动（让层叠图的拖拽处理）
-            if (e.target.closest('.overlay-image')) {
-                return;
-            }
-
             // 如果正在编辑，先退出编辑状态
             if (editingInput) {
                 deselectAll();
@@ -846,9 +837,8 @@
         element.classList.remove('editing');
         element.contentEditable = 'false';
 
-        // 显示文本编辑器工具栏，隐藏图片编辑器工具栏
+        // 显示文本编辑器工具栏
         textEditorToolbar.classList.add('active');
-        imageEditorToolbar.classList.remove('active');
 
         // 更新工具栏状态
         updateToolbarState(element);
@@ -867,9 +857,8 @@
         element.classList.remove('selected');
         element.contentEditable = 'true';
 
-        // 显示文本编辑器工具栏，隐藏图片编辑器工具栏
+        // 显示文本编辑器工具栏
         textEditorToolbar.classList.add('active');
-        imageEditorToolbar.classList.remove('active');
 
         // 更新工具栏状态
         updateToolbarState(element);
@@ -1325,13 +1314,8 @@
             selectedInput.classList.remove('selected');
             selectedInput = null;
         }
-        if (selectedOverlay) {
+        // 隐藏文本编辑器工具栏
-            selectedOverlay.classList.remove('selected');
-            selectedOverlay = null;
-        }
-        // 隐藏所有工具栏
         textEditorToolbar.classList.remove('active');
-        imageEditorToolbar.classList.remove('active');
     }
 
     // 初始化长按保存（只在3:5预览区域）
@@ -1484,45 +1468,6 @@
                 updateFontSize(currentSize + delta, true);
             }
         }, { passive: false });
-
-        // 透明度选择器 - 密码锁式滚轮
-        let opacityValue = 100;
-        const opacityRoller = document.getElementById('opacityPicker');
-        const opacityValueEl = opacityRoller.querySelector('.roller-value');
-        const opacityUpBtn = opacityRoller.querySelector('.roller-up');
-        const opacityDownBtn = opacityRoller.querySelector('.roller-down');
-
-        function updateOpacity(newOpacity, forceUpdate = false) {
-            newOpacity = Math.max(0, Math.min(100, newOpacity));
-            if (selectedOverlay) {
-                selectedOverlay.style.opacity = newOpacity / 100;
-                opacityValue = newOpacity;
-                opacityValueEl.textContent = newOpacity;
-            } else {
-                opacityValue = newOpacity;
-                opacityValueEl.textContent = newOpacity;
-            }
-        }
-
-        opacityUpBtn.addEventListener('click', () => {
-            if (selectedOverlay) {
-                updateOpacity(opacityValue + 5, true);
-            }
-        });
-
-        opacityDownBtn.addEventListener('click', () => {
-            if (selectedOverlay) {
-                updateOpacity(opacityValue - 5, true);
-            }
-        });
-
-        opacityRoller.addEventListener('wheel', (e) => {
-            e.preventDefault();
-            if (selectedOverlay) {
-                const delta = e.deltaY > 0 ? -5 : 5;
-                updateOpacity(opacityValue + delta, true);
-            }
-        }, { passive: false });
     }
 
     // 显示右键菜单