From 4ee95df7923894491ecd1b8430be497af77e589e Mon Sep 17 00:00:00 2001
From: Zhukj <3262118957>
Date: Sat, 25 Apr 2026 17:53:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BA=8C=E7=BB=B4=E7=A0=81):=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=88=A0=E9=99=A4=E6=8C=89=E9=92=AE=E5=B9=B6=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E4=BA=8C=E7=BB=B4=E7=A0=81=E5=85=83=E7=B4=A0=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为二维码元素添加删除按钮，仅在选中时显示
- 重构二维码元素结构，将图片包裹在容器div中
- 调整透明度设置逻辑以匹配新结构
- 防止删除按钮触发拖拽事件
---
 css/qr.css | 30 ++++++++++++++++++++
 js/qr.js   | 80 +++++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 97 insertions(+), 13 deletions(-)

diff --git a/css/qr.css b/css/qr.css
index 900b6a9..776dfe5 100644
--- a/css/qr.css
+++ b/css/qr.css
@@ -142,6 +142,36 @@
     outline-offset: 2px;
 }
 
+/* 删除按钮 */
+.qr-delete-btn {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    width: 20px;
+    height: 20px;
+    background: #ff4444;
+    color: #fff;
+    border: none;
+    border-radius: 50%;
+    font-size: 16px;
+    line-height: 20px;
+    cursor: pointer;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    padding: 0;
+    margin: 0;
+}
+
+.qr-item.qr-selected .qr-delete-btn {
+    display: flex;
+}
+
+.qr-delete-btn:hover {
+    background: #cc0000;
+}
+
 /* ========== 二维码工具栏 - 与背景图工具栏保持一致 ========== */
 .qr-tools {
     display: none;
diff --git a/js/qr.js b/js/qr.js
index 8fac91c..0846e72 100644
--- a/js/qr.js
+++ b/js/qr.js
@@ -119,21 +119,63 @@
         const container = document.getElementById('imageContainer');
         const rect = container.getBoundingClientRect();
 
-        const img = document.createElement('img');
-        img.src = canvas.toDataURL('image/png');
-        img.className = 'qr-item';
-        img.dataset.type = 'qrcode';
-        img.style.cssText = `
+        // 创建二维码容器
+        const wrapper = document.createElement('div');
+        wrapper.className = 'qr-item';
+        wrapper.dataset.type = 'qrcode';
+        wrapper.style.cssText = `
+            position: absolute;
             width: ${CONFIG.DEFAULT_SIZE}px;
             height: ${CONFIG.DEFAULT_SIZE}px;
-            opacity: 1;
             left: ${(rect.width / 2 - CONFIG.DEFAULT_SIZE / 2)}px;
             top: ${(rect.height / 2 - CONFIG.DEFAULT_SIZE / 2)}px;
         `;
 
-        container.appendChild(img);
-        makeDraggable(img);
-        selectQR(img);
+        // 创建二维码图片
+        const img = document.createElement('img');
+        img.src = canvas.toDataURL('image/png');
+        img.style.cssText = `
+            width: 100%;
+            height: 100%;
+            opacity: 1;
+            display: block;
+        `;
+
+        // 创建删除按钮
+        const deleteBtn = document.createElement('button');
+        deleteBtn.className = 'qr-delete-btn';
+        deleteBtn.innerHTML = '×';
+        deleteBtn.title = '删除二维码';
+        deleteBtn.type = 'button';
+        
+        // 删除按钮点击事件
+        deleteBtn.onclick = function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            // 删除二维码元素
+            wrapper.remove();
+            
+            // 清除选中状态
+            if (state.selectedQR === wrapper) {
+                state.selectedQR = null;
+                hideQRTools();
+                if (elements.editorToolbar) {
+                    elements.editorToolbar.classList.remove('active');
+                }
+            }
+            
+            // 保存状态
+            saveState();
+            
+            return false;
+        };
+
+        wrapper.appendChild(img);
+        wrapper.appendChild(deleteBtn);
+        container.appendChild(wrapper);
+        makeDraggable(wrapper);
+        selectQR(wrapper);
         closeModal();
 
         saveState();
@@ -187,7 +229,8 @@
     function syncToolbarValues() {
         if (!state.selectedQR) return;
 
-        const opacity = parseFloat(state.selectedQR.style.opacity) || 1;
+        const img = state.selectedQR.querySelector('img');
+        const opacity = img ? (parseFloat(img.style.opacity) || 1) : 1;
         const size = parseInt(state.selectedQR.style.width) || CONFIG.DEFAULT_SIZE;
 
         if (elements.qrOpacitySlider) {
@@ -222,7 +265,10 @@
     function updateOpacity(value) {
         if (!state.selectedQR) return;
 
-        state.selectedQR.style.opacity = value / 100;
+        const img = state.selectedQR.querySelector('img');
+        if (img) {
+            img.style.opacity = value / 100;
+        }
         elements.qrOpacityValue.textContent = value + '%';
     }
 
@@ -278,16 +324,24 @@
             }
         }
 
-        // 鼠标事件
+        // 鼠标事件 - 排除删除按钮
         el.addEventListener('mousedown', (e) => {
+            // 如果点击的是删除按钮，不处理拖拽
+            if (e.target.closest('.qr-delete-btn')) {
+                return;
+            }
             e.preventDefault();
             e.stopPropagation();
             selectQR(el);
             startDrag(e.clientX, e.clientY);
         });
 
-        // 触摸事件
+        // 触摸事件 - 排除删除按钮
         el.addEventListener('touchstart', (e) => {
+            // 如果触摸的是删除按钮，不处理拖拽
+            if (e.target.closest('.qr-delete-btn')) {
+                return;
+            }
             e.preventDefault();
             e.stopPropagation();
             selectQR(el);