feat: 添加 Toast 通知系统，替换所有 alert() 调用

2026-06-20 00:05:56 +08:00
parent a66074e49c
commit 4eaf89219d
5 changed files with 55 additions and 13 deletions
@@ -6,6 +6,48 @@
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="/static/js/htmx.min.js"></script>
+    <style>
+        .toast-enter { transform: translateX(100%); opacity: 0; }
+        .toast-active { transform: translateX(0); opacity: 1; transition: transform 0.3s ease, opacity 0.3s ease; }
+        .toast-exit { transform: translateX(100%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }
+    </style>
+    <script>
+        // Global toast notification system
+        (function() {
+            function ensureContainer() {
+                var c = document.getElementById('toast-container');
+                if (!c) {
+                    c = document.createElement('div');
+                    c.id = 'toast-container';
+                    c.className = 'fixed top-4 right-4 z-50 flex flex-col items-end space-y-2';
+                    document.body.appendChild(c);
+                }
+                return c;
+            }
+            window.showToast = function(message, type) {
+                type = type || 'info';
+                var colors = {
+                    success: 'bg-green-50 border-green-200 text-green-800',
+                    error:   'bg-red-50 border-red-200 text-red-800',
+                    info:    'bg-blue-50 border-blue-200 text-blue-800',
+                    warning: 'bg-yellow-50 border-yellow-200 text-yellow-800'
+                };
+                var icons = { success: '✓', error: '✗', info: 'ℹ', warning: '⚠' };
+                var container = ensureContainer();
+                var el = document.createElement('div');
+                el.className = 'px-4 py-3 rounded-md border text-sm shadow-lg max-w-sm toast-enter ' + (colors[type] || colors.info);
+                el.innerHTML = '<span class="mr-2 font-bold">' + (icons[type] || icons.info) + '</span>' +
+                    '<span>' + message + '</span>' +
+                    '<button onclick="this.parentElement.remove()" class="ml-3 text-current opacity-50 hover:opacity-100">&times;</button>';
+                container.appendChild(el);
+                requestAnimationFrame(function() { el.className = el.className.replace('toast-enter', 'toast-active'); });
+                setTimeout(function() {
+                    el.className = el.className.replace('toast-active', 'toast-exit');
+                    setTimeout(function() { el.remove(); }, 300);
+                }, 4000);
+            };
+        })();
+    </script>
 </head>
 {{end}}