优化复制提示为居中弹窗并增加蒙层

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
fish
2026-07-27 10:44:20 +08:00
parent c291f331fc
commit d5648e0b2c
+23 -14
View File
@@ -210,21 +210,30 @@ function copyPrompt() {
}); });
} }
function showToast(msg) { function showToast(msg) {
var t = document.getElementById('toast'); var m = document.getElementById('toastMask');
if (!t) { if (!m) {
t = document.createElement('div'); m = document.createElement('div');
t.id = 'toast'; m.id = 'toastMask';
t.style.cssText = 'position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;padding:10px 24px;border-radius:8px;font-size:0.88rem;z-index:999;transition:opacity .3s,transform .3s;opacity:0;pointer-events:none;'; m.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:999;display:flex;align-items:center;justify-content:center;transition:opacity .25s;opacity:0;';
document.body.appendChild(t); m.onclick = function() { hideToast(); };
var b = document.createElement('div');
b.id = 'toastBox';
b.style.cssText = 'background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:32px 40px;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.18);';
m.appendChild(b);
document.body.appendChild(m);
} }
t.textContent = msg; var box = document.getElementById('toastBox');
t.style.opacity = '1'; box.innerHTML = '<div style="font-size:2rem;margin-bottom:12px;">&#9989;</div><p style="font-size:1rem;font-weight:600;color:var(--fg);">' + msg + '</p>';
t.style.transform = 'translateX(-50%) translateY(0)'; m.style.display = 'flex';
clearTimeout(t._tid); requestAnimationFrame(function() { m.style.opacity = '1'; });
t._tid = setTimeout(function() { clearTimeout(m._tid);
t.style.opacity = '0'; m._tid = setTimeout(hideToast, 1800);
t.style.transform = 'translateX(-50%) translateY(-10px)'; }
}, 1500); function hideToast() {
var m = document.getElementById('toastMask');
if (!m) return;
m.style.opacity = '0';
setTimeout(function() { m.style.display = 'none'; }, 250);
} }
</script> </script>
{% endblock %} {% endblock %}