feat(图层管理): 为二维码添加图层支持并实现相关功能

- 在状态管理中新增 qrCounter 用于生成唯一图层 ID
- 为二维码元素添加 dataset.layerId 属性
- 实现二维码图层更新事件机制
- 在图层列表中显示二维码元素并支持选中操作
- 完善二维码的绘制逻辑，支持透明度设置

js/qr.js

@@ -40,7 +40,8 @@
         currentQR: null,
         selectedQR: null,
         previewTimer: null,
-        isDragging: false
+        isDragging: false,
+        qrCounter: 0
     };
 
     // ========== 核心功能 ==========
@@ -119,10 +120,15 @@
         const container = document.getElementById('imageContainer');
         const rect = container.getBoundingClientRect();
 
+        // 生成图层 ID
+        state.qrCounter++;
+        const layerId = `qr_${state.qrCounter}`;
+
         // 创建二维码容器
         const wrapper = document.createElement('div');
         wrapper.className = 'qr-item';
         wrapper.dataset.type = 'qrcode';
+        wrapper.dataset.layerId = layerId;
         wrapper.style.cssText = `
             position: absolute;
             width: ${CONFIG.DEFAULT_SIZE}px;
@@ -168,6 +174,9 @@
             // 保存状态
             saveState();
             
+            // 更新图层列表
+            updateLayersList();
+            
             return false;
         };
 
@@ -179,6 +188,9 @@
         closeModal();
 
         saveState();
+        
+        // 更新图层列表
+        updateLayersList();
     }
 
     /**
@@ -292,6 +304,15 @@
         }
     }
 
+    /**
+     * 更新图层列表
+     */
+    function updateLayersList() {
+        // 触发图层更新事件
+        const event = new CustomEvent('updateLayers');
+        document.dispatchEvent(event);
+    }
+
     // ========== 拖拽功能 ==========
 
     /**