0816de2ba2
实现二维码图片点击放大功能，重构仪表盘顶部布局将联系信息与统计卡片并排显示 添加多语言图片切换功能，根据语言显示不同的赞助和联系方式图片 优化Kiro OAuth流程，增加自动关联凭据到Pools的功能
45 lines
1.4 KiB
JavaScript
45 lines
1.4 KiB
JavaScript
/**
|
|
* 图像点击放大功能模块
|
|
*/
|
|
|
|
export function initImageZoom() {
|
|
// 创建放大图层
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'image-zoom-overlay';
|
|
overlay.innerHTML = '<img src="" alt="Zoomed Image">';
|
|
document.body.appendChild(overlay);
|
|
|
|
const zoomedImg = overlay.querySelector('img');
|
|
|
|
// 监听点击事件
|
|
document.addEventListener('click', (e) => {
|
|
const target = e.target;
|
|
|
|
// 如果点击的是可放大的二维码
|
|
if (target.classList.contains('clickable-qr')) {
|
|
zoomedImg.src = target.src;
|
|
overlay.style.display = 'flex';
|
|
setTimeout(() => {
|
|
overlay.classList.add('show');
|
|
}, 10);
|
|
}
|
|
|
|
// 如果点击的是放大图层（或者其中的图片），则关闭
|
|
if (overlay.classList.contains('show') && (target === overlay || target === zoomedImg)) {
|
|
overlay.classList.remove('show');
|
|
setTimeout(() => {
|
|
overlay.style.display = 'none';
|
|
}, 300);
|
|
}
|
|
});
|
|
|
|
// ESC 键关闭
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && overlay.classList.contains('show')) {
|
|
overlay.classList.remove('show');
|
|
setTimeout(() => {
|
|
overlay.style.display = 'none';
|
|
}, 300);
|
|
}
|
|
});
|
|
}
|