ux: Toast 提示替代 alert,自动消失无需手动点击

This commit is contained in:
2026-04-16 13:41:46 +08:00
parent 974ccc6b24
commit 49b6f7aafe
2 changed files with 57 additions and 10 deletions

View File

@@ -10,6 +10,22 @@ document.addEventListener('DOMContentLoaded', function() {
refreshAll();
});
// Toast 提示(自动消失)
function showToast(message, duration) {
duration = duration || 2000;
var toast = document.createElement('div');
toast.className = 'toast';
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(function() {
toast.classList.add('fade-out');
setTimeout(function() {
toast.remove();
}, 300);
}, duration);
}
// 点击模态框背景关闭
function closeModalOnBackground(event, modalId) {
if (event.target.id === modalId) {
@@ -92,13 +108,13 @@ function startScheduler() {
.then(function(res) { return res.json(); })
.then(function(data) {
if (data.success) {
alert('Started!');
showToast('Started!', 1500);
refreshAll();
} else {
alert('Failed: ' + data.error);
showToast('Failed: ' + data.error, 3000);
}
})
.catch(function(e) { alert('Error: ' + e.message); });
.catch(function(e) { showToast('Error: ' + e.message, 3000); });
}
function stopScheduler() {
@@ -106,11 +122,11 @@ function stopScheduler() {
.then(function(res) { return res.json(); })
.then(function(data) {
if (data.success) {
alert('Stopped!');
showToast('Stopped!', 1500);
refreshAll();
}
})
.catch(function(e) { alert('Error: ' + e.message); });
.catch(function(e) { showToast('Error: ' + e.message, 3000); });
}
function captureNow() {
@@ -118,23 +134,23 @@ function captureNow() {
.then(function(res) { return res.json(); })
.then(function(data) {
if (data.success) {
alert('Capture success! Image ID: ' + data.image_id);
showToast('Captured! ID: ' + data.image_id, 1500);
refreshAll();
} else {
alert('Capture failed: ' + data.error);
showToast('Failed: ' + data.error, 3000);
}
})
.catch(function(e) { alert('Error: ' + e.message); });
.catch(function(e) { showToast('Error: ' + e.message, 3000); });
}
function analyzeUnanalyzed() {
fetch(API_BASE + '/api/analyze/unanalyzed', {method: 'POST'})
.then(function(res) { return res.json(); })
.then(function(data) {
alert('Analyzed ' + data.results.length + ' images');
showToast('Analyzed ' + data.results.length + ' images', 1500);
refreshAll();
})
.catch(function(e) { alert('Error: ' + e.message); });
.catch(function(e) { showToast('Error: ' + e.message, 3000); });
}
// Images