1.login

src/main/resources/static/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login~</title>
+    <link href="./js/daisyui.css" rel="stylesheet" type="text/css" />
     <style>
         :root {
             /* COLORS */
@@ -200,6 +201,37 @@
                 z-index: 5;
             }
         }
+        .toast {
+            background-color: #f7f7f7;
+            padding: 10px;
+            border-radius: 5px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            top: 0;
+            z-index: 9999;
+        }
+
+        .success {
+            background-color: green;
+        }
+
+        .error {
+            background-color: #e81010;
+        }
+
+        .info {
+            background-color: blue;
+        }
+
+        @keyframes fadeIn {
+            0% { opacity: 0; }
+            100% { opacity: 1; }
+        }
     </style>
 </head>
 
@@ -232,6 +264,31 @@
 
     const fistForm = document.getElementById("form1");
 
+    function showToast(message, type) {
+        const toast = document.createElement('div');
+        toast.textContent = message;
+        toast.classList.add('toast', type);
+        toast.style.position = 'fixed';
+        toast.style.bottom = '16px';
+        toast.style.left = '50%';
+        toast.style.transform = 'translateX(-50%) ';
+        toast.style.width = '100%';
+        toast.style.height = '45px';
+        toast.style.lineHeight = '45px';
+        toast.style.textAlign = 'center';
+        toast.style.borderRadius = '4px';
+        toast.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1)';
+        toast.style.color = 'black';
+        toast.style.zIndex = '9999';
+        toast.style.animation = 'fadeIn 0.5s ease-in-out';
+        document.body.appendChild(toast);
+        setTimeout(function() {
+            toast.remove();
+        }, 2000);
+
+    }
+
+
     function getRootPath()
     {
         const curWwwPath=window.document.location.href;
@@ -263,7 +320,8 @@
                     }
                 })
             }else{
-                alert("用户名或密码错误")
+                // 调用 showErrorToast 函数来展示错误信息
+                showToast("用户名或密码错误.", "error")
             }
         })