feat: 新增右键/长按预览功能,保留原有操作样式

This commit is contained in:
Zhukj
2026-04-16 09:11:17 +08:00
parent e0d5c3857e
commit 09e2716de4

View File

@@ -522,6 +522,14 @@
menu.style.left = x + 'px'; menu.style.left = x + 'px';
menu.style.top = y + 'px'; menu.style.top = y + 'px';
const previewItem = document.createElement('div');
previewItem.className = 'context-menu-item';
previewItem.textContent = '预览图片';
previewItem.addEventListener('click', () => {
showPreview();
hideContextMenu();
});
const copyItem = document.createElement('div'); const copyItem = document.createElement('div');
copyItem.className = 'context-menu-item'; copyItem.className = 'context-menu-item';
copyItem.textContent = '复制图片'; copyItem.textContent = '复制图片';
@@ -538,11 +546,72 @@
hideContextMenu(); hideContextMenu();
}); });
menu.appendChild(previewItem);
menu.appendChild(copyItem); menu.appendChild(copyItem);
menu.appendChild(saveItem); menu.appendChild(saveItem);
document.body.appendChild(menu); document.body.appendChild(menu);
} }
// 显示预览
async function showPreview() {
const canvas = await generateCanvas();
const dataUrl = canvas.toDataURL('image/png');
const tipOverlay = document.createElement('div');
tipOverlay.id = 'previewTip';
tipOverlay.style.cssText = `
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10000;
padding: 20px;
`;
const tipText = document.createElement('p');
tipText.textContent = '预览图片';
tipText.style.cssText = `
color: #fff;
font-size: 18px;
margin-bottom: 20px;
text-align: center;
`;
const img = document.createElement('img');
img.src = dataUrl;
img.style.cssText = `
max-width: 100%;
max-height: 80vh;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(255,255,255,0.2);
`;
const closeBtn = document.createElement('button');
closeBtn.textContent = '关闭';
closeBtn.style.cssText = `
margin-top: 20px;
padding: 12px 40px;
font-size: 16px;
background: #fff;
color: #333;
border: none;
border-radius: 25px;
cursor: pointer;
`;
closeBtn.onclick = () => tipOverlay.remove();
tipOverlay.appendChild(tipText);
tipOverlay.appendChild(img);
tipOverlay.appendChild(closeBtn);
document.body.appendChild(tipOverlay);
}
// 隐藏右键菜单 // 隐藏右键菜单
function hideContextMenu() { function hideContextMenu() {
const existingMenu = document.getElementById('contextMenu'); const existingMenu = document.getElementById('contextMenu');
@@ -741,6 +810,28 @@
savePanel.appendChild(cancelBtn); savePanel.appendChild(cancelBtn);
tipOverlay.appendChild(savePanel); tipOverlay.appendChild(savePanel);
document.body.appendChild(tipOverlay); document.body.appendChild(tipOverlay);
// 添加预览按钮
const previewBtn = document.createElement('button');
previewBtn.textContent = '预览图片';
previewBtn.style.cssText = `
width: 100%;
padding: 16px;
font-size: 16px;
background: #34C759;
color: #fff;
border: none;
border-radius: 10px;
cursor: pointer;
margin-bottom: 12px;
`;
previewBtn.onclick = () => {
tipOverlay.remove();
showPreview();
};
// 插入到标题后面
savePanel.insertBefore(previewBtn, saveBtn);
} }
// 窗口大小改变时更新图片位置和边界 // 窗口大小改变时更新图片位置和边界