feat:项目完成

2025-06-17 19:55:10 +08:00
commit e166ec615b
21 changed files with 1548 additions and 0 deletions
--- a/templates/login.html
+++ b/templates/login.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>登录 - 订单管理后台</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap" rel="stylesheet">
+  <style>
+    body {
+      font-family: 'Poppins', sans-serif;
+      height: 100vh;
+      height: 100vh;
+      background: linear-gradient(-45deg, #1e3c72, #2a5298, #1e3c72, #2a5298); 
+      background-size: 400% 400%;
+      animation: gradientBG 15s ease infinite;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+    }
+
+    @keyframes gradientBG {
+      0% { background-position: 0% 50%; }
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+
+    .login-container {
+      background-color: rgba(255, 255, 255, 0.08);
+      backdrop-filter: blur(10px);
+      padding: 40px 30px;
+      border-radius: 16px;
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+      width: 100%;
+      max-width: 400px;
+      transition: transform 0.3s ease;
+    }
+
+    .login-container:hover {
+      transform: translateY(-5px);
+    }
+
+    .login-container h2 {
+      text-align: center;
+      margin-bottom: 24px;
+      font-weight: 600;
+      letter-spacing: 1px;
+    }
+
+    form {
+      display: flex;
+      flex-direction: column;
+    }
+
+    label {
+      position: relative;
+      margin-bottom: 20px;
+      font-size: 14px;
+    }
+
+    input {
+      width: 100%;
+      padding: 12px 40px 12px 12px;
+      border: none;
+      border-radius: 8px;
+      background-color: rgba(255, 255, 255, 0.2);
+      color: rgb(12, 12, 12);
+      font-size: 1rem;
+      transition: all 0.3s ease;
+    }
+
+    input:focus {
+      outline: none;
+      background-color: rgba(255, 255, 255, 0.3);
+    }
+
+    label::before {
+      content: attr(data-icon);
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 18px;
+      opacity: 0.7;
+    }
+
+    button {
+      margin-top: 10px;
+      padding: 12px;
+      background-color: #ffffff;
+      color: #1e3c72;
+      border: none;
+      border-radius: 8px;
+      font-size: 1rem;
+      font-weight: bold;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      position: relative;
+    }
+
+    button:hover {
+      background-color: #f0f0f0;
+      transform: scale(1.03);
+    }
+
+    button:active {
+      transform: scale(0.98);
+    }
+
+    #msg {
+      margin-top: 16px;
+      color: #ffdddd;
+      font-size: 0.9rem;
+      text-align: center;
+    }
+
+    @media (max-width: 500px) {
+      .login-container {
+        padding: 30px 20px;
+      }
+    }
+  </style>
+</head>
+<body>
+
+<div class="login-container">
+  <h2>订单管理系统</h2>
+  <form id="loginForm">
+    <label data-icon="👤">
+      <input type="text" name="username" required placeholder="用户名" class="w-full px-4 py-2 rounded-lg bg-white/10 backdrop-blur-sm text-white placeholder:text-white/70 focus:outline-none focus:ring-2 focus:ring-white/50">
+    </label>
+    <label data-icon="🔒">
+      <input type="password" name="password" required placeholder="密码" class="w-full px-4 py-2 rounded-lg bg-white/10 backdrop-blur-sm text-white placeholder:text-white/70 focus:outline-none focus:ring-2 focus:ring-white/50">
+    </label>
+    <button type="submit" class="w-full mt-2 py-2 bg-white text-blue-900 font-bold rounded-lg hover:bg-gray-100/90 hover:shadow-lg transition-all duration-300">登 录</button>
+  </form>
+  <div id="msg"></div>
+</div>
+
+<script>
+  document.getElementById('loginForm').onsubmit = async function(e) {
+    e.preventDefault();
+    const username = this.username.value;
+    const password = this.password.value;
+
+    try {
+      const res = await fetch('/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password })
+      });
+
+      const data = await res.json();
+
+      if (data.token) {
+        localStorage.setItem('jwt', data.token);
+        window.location.href = '/orders/panel';
+      } else {
+        document.getElementById('msg').innerText = data.msg || '登录失败，请重试';
+      }
+    } catch (error) {
+      document.getElementById('msg').innerText = '网络错误，请检查连接';
+    }
+  };
+</script>
+
+</body>
+</html>