From cb6b88d455b8ec0a536c9cf8420a02f59a777b55 Mon Sep 17 00:00:00 2001
From: Zhukj <3262118957>
Date: Sat, 18 Apr 2026 10:48:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=96=87=E6=9C=AC?=
 =?UTF-8?q?=E6=A1=86=E5=88=A0=E9=99=A4=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

---
 css/style.css | 23 +++++++++++++++++++++++
 index.html    |  6 +++---
 js/script.js  | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/css/style.css b/css/style.css
index 0e40faf..3a5053a 100644
--- a/css/style.css
+++ b/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;
diff --git a/index.html b/index.html
index e8f83b8..105d03c 100644
--- a/index.html
+++ b/index.html
@@ -10,9 +10,9 @@
     <div class="app">
         <!-- 顶部工具栏 -->
         <div class="toolbar">
-            <button class="btn" id="addImageBtn">添加背景图</button>
-            <button class="btn" id="addOverlayBtn">添加层叠图</button>
-            <button class="btn" id="addTextBtn">添加文本</button>
+            <button class="btn" id="addImageBtn">背景图</button>
+            <button class="btn" id="addOverlayBtn">层叠图</button>
+            <button class="btn" id="addTextBtn">文本</button>
             <button class="btn btn-primary" id="saveBtn">保存/预览</button>
         </div>
 
diff --git a/js/script.js b/js/script.js
index a5b4d8e..7ab1712 100644
--- a/js/script.js
+++ b/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;