// main.js - 前端增强脚本 document.addEventListener("DOMContentLoaded", function () { // 卡片悬停效果(桌面端) const cards = document.querySelectorAll(".card"); cards.forEach((card) => { card.addEventListener("mouseenter", function () { this.style.transform = "translateY(-4px)"; }); card.addEventListener("mouseleave", function () { this.style.transform = "translateY(0)"; }); }); // 图片懒加载(浏览器原生支持,这里作为后备) if ("loading" in HTMLImageElement.prototype) { const images = document.querySelectorAll('img[loading="lazy"]'); images.forEach((img) => { img.src = img.src; // 触发加载 }); } else { // 降级方案:使用 IntersectionObserver const lazyImages = document.querySelectorAll('img[loading="lazy"]'); if ("IntersectionObserver" in window) { const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src || img.src; observer.unobserve(img); } }); }); lazyImages.forEach((img) => observer.observe(img)); } } // 删除确认弹窗(已在模板中使用 confirm,这里作为补充) const deleteForms = document.querySelectorAll('form[action*="delete"]'); deleteForms.forEach((form) => { form.addEventListener("submit", function (e) { if (!confirm("确定要删除吗?此操作不可恢复。")) { e.preventDefault(); } }); }); });