feat: 添加图片编辑器，与文本共用工具栏，选中切换编辑面板，支持图片透明度调节

js/script.js

@@ -14,7 +14,10 @@
     const exportCanvas = document.getElementById('exportCanvas');
     const longPressTip = document.getElementById('longPressTip');
     const canvasArea = document.getElementById('canvasArea');
-    const textEditorToolbar = document.getElementById('textEditorToolbar');
+    const editorToolbar = document.getElementById('editorToolbar');
+    const textTools = document.getElementById('textTools');
+    const imageTools = document.getElementById('imageTools');
+    const opacitySlider = document.getElementById('opacitySlider');
     const boldBtn = document.getElementById('boldBtn');
     const italicBtn = document.getElementById('italicBtn');
     const colorPicker = document.getElementById('colorPicker');
@@ -101,15 +104,22 @@
         // 初始化图片滑动
         initImageDrag();
 
+        // 透明度滑块
+        opacitySlider.addEventListener('input', (e) => {
+            if (selectedOverlay) {
+                selectedOverlay.style.opacity = e.target.value / 100;
+            }
+        });
+
         // 点击空白区域取消选中
         document.addEventListener('click', (e) => {
             // 只有点击真正的空白区域（不是输入框，不是图片容器，不是工具栏）才取消选中
             const isTextInput = e.target.closest('.text-input');
             const isImageContainer = e.target.closest('.image-container');
             const isToolbar = e.target.closest('.toolbar');
-            const isTextEditorToolbar = e.target.closest('.text-editor-toolbar');
+            const isEditorToolbar = e.target.closest('.editor-toolbar');
 
-            if (!isTextInput && !isImageContainer && !isToolbar && !isTextEditorToolbar) {
+            if (!isTextInput && !isImageContainer && !isToolbar && !isEditorToolbar) {
                 deselectAll();
             }
         });
@@ -142,8 +152,8 @@
                 }
                 // 隐藏辅助线
                 hideGuides();
-                // 隐藏文本编辑器工具栏
-                textEditorToolbar.classList.remove('active');
+                // 隐藏编辑器工具栏
+                editorToolbar.classList.remove('active');
             }
 
             // 点击空白区域（不是层叠图和输入框）
@@ -506,6 +516,15 @@
         }
         selectedOverlay = overlayEl;
         overlayEl.classList.add('selected');
+
+        // 显示编辑器工具栏和图片工具
+        editorToolbar.classList.add('active');
+        textTools.classList.remove('active');
+        imageTools.classList.add('active');
+
+        // 更新透明度滑块为当前层叠图的透明度
+        const currentOpacity = overlayEl.style.opacity || '1';
+        opacitySlider.value = parseFloat(currentOpacity) * 100;
     }
 
     // 计算图片滑动边界
@@ -837,8 +856,10 @@
         element.classList.remove('editing');
         element.contentEditable = 'false';
 
-        // 显示文本编辑器工具栏
-        textEditorToolbar.classList.add('active');
+        // 显示编辑器工具栏和文本工具
+        editorToolbar.classList.add('active');
+        textTools.classList.add('active');
+        imageTools.classList.remove('active');
 
         // 更新工具栏状态
         updateToolbarState(element);
@@ -857,8 +878,10 @@
         element.classList.remove('selected');
         element.contentEditable = 'true';
 
-        // 显示文本编辑器工具栏
-        textEditorToolbar.classList.add('active');
+        // 显示编辑器工具栏和文本工具
+        editorToolbar.classList.add('active');
+        textTools.classList.add('active');
+        imageTools.classList.remove('active');
 
         // 更新工具栏状态
         updateToolbarState(element);
@@ -888,8 +911,8 @@
         element.contentEditable = 'false';
         element.blur();
         editingInput = null;
-        // 隐藏文本编辑器工具栏
-        textEditorToolbar.classList.remove('active');
+        // 隐藏编辑器工具栏
+        editorToolbar.classList.remove('active');
     }
 
     // 更新工具栏状态
@@ -1314,8 +1337,8 @@
             selectedInput.classList.remove('selected');
             selectedInput = null;
         }
-        // 隐藏文本编辑器工具栏
-        textEditorToolbar.classList.remove('active');
+        // 隐藏编辑器工具栏
+        editorToolbar.classList.remove('active');
     }
 
     // 初始化长按保存（只在3:5预览区域）