WeWork/invitation-maker
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(qr): 添加二维码工具栏并优化交互体验

Browse Source 
添加二维码编辑工具栏，支持透明度和缩放调整
优化选中状态和拖拽交互，增强用户体验
重构代码结构，提高可维护性
This commit is contained in:
Zhukj
2026-04-25 16:51:27 +08:00
parent 37aaec1e42
commit c7963cec6e
4 changed files with 363 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
js/script.js
View File

@@ -381,9 +381,10 @@
e.target === document.getElementById('emptyTip');
const isOverlayImage = e.target.closest('.overlay-image');
const isTextInput = e.target.closest('.text-input');
const isQRCode = e.target.closest('.qr-item');
// 点击背景/空白区域
if (isBackground && !isOverlayImage) {
// 点击背景/空白区域（排除二维码）
if (isBackground && !isOverlayImage && !isQRCode) {
// 如果正在编辑，先结束编辑
if (editingInput) {
endEdit(editingInput);
@@ -398,18 +399,26 @@
selectedOverlay.classList.remove('selected');
selectedOverlay = null;
}
// 隐藏二维码工具栏
if (window.QRCodeAPI) {
window.QRCodeAPI.hideTools();
}
// 隐藏辅助线
hideGuides();
// 隐藏编辑器工具栏
editorToolbar.classList.remove('active');
}
// 点击空白区域（不是层叠图和输入框）
if (!isOverlayImage && !isTextInput && !isBackground) {
// 点击空白区域（不是层叠图、输入框和二维码）
if (!isOverlayImage && !isTextInput && !isBackground && !isQRCode) {
if (selectedOverlay) {
selectedOverlay.classList.remove('selected');
selectedOverlay = null;
}
// 隐藏二维码工具栏
if (window.QRCodeAPI) {
window.QRCodeAPI.hideTools();
}
}
}
@@ -1198,6 +1207,9 @@
textTools.classList.remove('active');
imageTools.classList.add('active');
bgTools.classList.remove('active');
// 隐藏二维码工具栏
const qrTools = document.getElementById('qrTools');
if (qrTools) qrTools.classList.remove('active');
// 更新透明度滑块为当前层叠图的透明度
const currentOpacity = overlayEl.style.opacity || '1';
@@ -1371,6 +1383,9 @@
textTools.classList.remove('active');
imageTools.classList.remove('active');
bgTools.classList.add('active');
// 隐藏二维码工具栏
const qrTools = document.getElementById('qrTools');
if (qrTools) qrTools.classList.remove('active');
// 同步滑块值
bgScaleSlider.value = bgImageScale * 100;
@@ -1394,6 +1409,9 @@
textTools.classList.remove('active');
imageTools.classList.remove('active');
bgTools.classList.add('active');
// 隐藏二维码工具栏
const qrTools = document.getElementById('qrTools');
if (qrTools) qrTools.classList.remove('active');
// 同步滑块值
bgScaleSlider.value = bgImageScale * 100;
@@ -1444,6 +1462,9 @@
textTools.classList.remove('active');
imageTools.classList.remove('active');
bgTools.classList.add('active');
// 隐藏二维码工具栏
const qrTools = document.getElementById('qrTools');
if (qrTools) qrTools.classList.remove('active');
// 同步滑块值
bgScaleSlider.value = bgImageScale * 100;
@@ -1701,6 +1722,9 @@
textTools.classList.add('active');
imageTools.classList.remove('active');
bgTools.classList.remove('active');
// 隐藏二维码工具栏
const qrTools = document.getElementById('qrTools');
if (qrTools) qrTools.classList.remove('active');
// 更新工具栏状态
updateToolbarState(element);
@@ -1724,6 +1748,9 @@
textTools.classList.add('active');
imageTools.classList.remove('active');
bgTools.classList.remove('active');
// 隐藏二维码工具栏
const qrTools = document.getElementById('qrTools');
if (qrTools) qrTools.classList.remove('active');
// 移动端/编辑模式：固定在顶部始终可见
if (window.innerWidth <= 768 || 'ontouchstart' in window) {
@@ -2666,6 +2693,9 @@
textTools.classList.remove('active');
imageTools.classList.remove('active');
bgTools.classList.add('active');
// 隐藏二维码工具栏
const qrTools = document.getElementById('qrTools');
if (qrTools) qrTools.classList.remove('active');
}
}