feat(gateway): 实现用户退出功能并优化登录页面

- 添加用户退出路由 (/logout)，清除会话信息并重定向到登录页 - 重新设计登录页面，增加样式和布局，提升用户体验 - 更新登录表单，添加占位符和错误消息显示 - 修改服务器端口为 7070
2025-02-15 13:40:04 +08:00 · 2025-02-15 13:40:04 +08:00 · b1e31d86ed
commit b1e31d86ed
parent 01d7d4bc28
2 changed files with 136 additions and 14 deletions
--- a/gateway/main.go
+++ b/gateway/main.go
@ -88,8 +88,20 @@ func main() {
 		http.ServeFile(c.Writer, c.Request, fmt.Sprintf("./static/guide/%s.html", page))
 	})

+	// 在权限校验中间件后添加退出路由
+	r.GET("/logout", func(c *gin.Context) {
+		session := sessions.Default(c)
+		session.Clear()
+		if err := session.Save(); err != nil {
+			logger.Errorf("退出登录失败: %v", err)
+			c.HTML(http.StatusInternalServerError, "error.html", gin.H{"error": "退出登录失败"})
+			return
+		}
+		c.Redirect(http.StatusSeeOther, "/login")
+	})
+
 	// 启动服务
-	r.Run(":8080")
+	r.Run(":7070")
 }

 // 记录访问痕迹
--- a/gateway/templates/login.html
+++ b/gateway/templates/login.html
@ -1,21 +1,131 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login</title>
+    <title>登录 - 余氏族谱</title>
+    <style>
+        :root {
+            --primary-color: #2c3e50;
+            --accent-color: #42b983;
+            --error-color: #e74c3c;
+        }
+
+        body {
+            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+            background: #f5f5f5;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 2rem;
+        }
+
+        .login-container {
+            background: white;
+            padding: 2.5rem;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 400px;
+            margin-top: 4rem;
+        }
+
+        h1 {
+            color: var(--primary-color);
+            text-align: center;
+            margin-bottom: 2rem;
+            font-size: 1.8rem;
+        }
+
+        form {
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+        }
+
+        .form-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        label {
+            color: var(--primary-color);
+            font-weight: 500;
+        }
+
+        input {
+            padding: 0.8rem;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 1rem;
+            transition: border-color 0.3s ease;
+        }
+
+        input:focus {
+            outline: none;
+            border-color: var(--accent-color);
+            box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
+        }
+
+        button {
+            background: var(--accent-color);
+            color: white;
+            padding: 0.8rem;
+            border: none;
+            border-radius: 6px;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background 0.3s ease;
+        }
+
+        button:hover {
+            background: #3aa876;
+        }
+
+        .error-message {
+            background: #fee;
+            color: var(--error-color);
+            padding: 1rem;
+            border-radius: 6px;
+            border: 1px solid #ffd6d6;
+            margin-top: 1rem;
+            text-align: center;
+        }
+
+        @media (max-width: 480px) {
+            .login-container {
+                padding: 1.5rem;
+                margin-top: 2rem;
+            }
+            
+            body {
+                padding: 1rem;
+            }
+        }
+    </style>
 </head>
 <body>
-<h1>Login</h1>
-<form action="/login" method="post">
-    <label for="username">Username:</label>
-    <input type="text" id="username" name="username" required><br>
-    <label for="password">Password:</label>
-    <input type="password" id="password" name="password" required><br>
-    <button type="submit">Login</button>
-</form>
-{{ if .error }}
-<p style="color: red;">{{ .error }}</p>
-{{ end }}
+    <div class="login-container">
+        <h1>余氏族谱管理系统</h1>
+        <form action="/login" method="post">
+            <div class="form-group">
+                <label for="username">用户名</label>
+                <input type="text" id="username" name="username" required 
+                       placeholder="请输入用户名">
+            </div>
+            <div class="form-group">
+                <label for="password">密码</label>
+                <input type="password" id="password" name="password" required 
+                       placeholder="请输入密码">
+            </div>
+            <button type="submit">立即登录</button>
+        </form>
+        {{ if .error }}
+        <p class="error-message">{{ .error }}</p>
+        {{ end }}
+    </div>
 </body>
 </html>