feat: 新增文本框删除按钮功能

css/style.css

@@ -56,6 +56,29 @@ html, body {
     background: #3a7bc8;
 }
 
+/* 文本输入框删除按钮 */
+.text-input .text-delete-btn {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    width: 20px;
+    height: 20px;
+    background: #e74c3c;
+    color: #fff;
+    border: none;
+    border-radius: 50%;
+    font-size: 12px;
+    line-height: 20px;
+    text-align: center;
+    cursor: pointer;
+    display: none;
+    z-index: 10;
+}
+
+.text-input.selected:not(.editing) .text-delete-btn {
+    display: block;
+}
+
 /* 文本编辑器工具栏 */
 .text-editor-toolbar {
     display: flex;

index.html

@@ -10,9 +10,9 @@
     <div class="app">
         <!-- 顶部工具栏 -->
         <div class="toolbar">
-            <button class="btn" id="addImageBtn">添加背景图</button>
+            <button class="btn" id="addImageBtn">背景图</button>
-            <button class="btn" id="addOverlayBtn">添加层叠图</button>
+            <button class="btn" id="addOverlayBtn">层叠图</button>
-            <button class="btn" id="addTextBtn">添加文本</button>
+            <button class="btn" id="addTextBtn">文本</button>
             <button class="btn btn-primary" id="saveBtn">保存/预览</button>
         </div>
 

js/script.js

@@ -86,6 +86,18 @@
         initInput(input1);
         initInput(input2);
 
+        // 为原有两个输入框添加删除按钮
+        [input1, input2].forEach(inputEl => {
+            const deleteBtn = document.createElement('button');
+            deleteBtn.className = 'text-delete-btn';
+            deleteBtn.innerHTML = '×';
+            deleteBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                inputEl.remove();
+            });
+            inputEl.appendChild(deleteBtn);
+        });
+
         // 初始化图片滑动
         initImageDrag();
 
@@ -201,6 +213,16 @@
         textEl.style.left = (left / containerWidth * 100) + '%';
         textEl.style.top = (top / containerHeight * 100) + '%';
 
+        // 删除按钮
+        const deleteBtn = document.createElement('button');
+        deleteBtn.className = 'text-delete-btn';
+        deleteBtn.innerHTML = '×';
+        deleteBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            textEl.remove();
+        });
+        textEl.appendChild(deleteBtn);
+
         const inputLayer = container.querySelector('.preview-input-layer');
         inputLayer.appendChild(textEl);
 
@@ -773,6 +795,15 @@
         element.addEventListener('dblclick', (e) => {
             e.stopPropagation();
             startEdit(element);
+            element.dataset.justEdited = 'true';
+            setTimeout(() => { element.dataset.justEdited = 'false'; }, 200);
+        });
+
+        // 单击选中显示删除按钮
+        element.addEventListener('click', (e) => {
+            if (hasMoved) return;
+            if (element.dataset.justEdited === 'true') return;
+            element.classList.add('selected');
         });
 
         // 触摸双击检测（移动端双击进入编辑）
@@ -853,6 +884,7 @@
     // 结束编辑
     function endEdit(element) {
         element.classList.remove('editing');
+        element.classList.add('selected');
         element.contentEditable = 'false';
         element.blur();
         editingInput = null;