feat(frontend): T1.1 前端登录页对接 — AuthProvider + 登录表单

- AuthProvider：管理 token 和用户状态，自动恢复登录态 - 登录页：邮箱密码表单，对接后端 /auth/login API - 根布局包裹 AuthProvider - 前端构建 8 路由全部成功
2026-07-18 21:55:12 +08:00
parent 2be0778ec7
commit a95f63c24c
3 changed files with 203 additions and 4 deletions
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { AuthProvider } from "@/lib/auth-context";
 import "./globals.css";

 export const metadata: Metadata = {
@@ -13,7 +14,9 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="zh-CN" className="h-full antialiased">
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col">
+        <AuthProvider>{children}</AuthProvider>
+      </body>
    </html>
  );
 }
@@ -1,8 +1,35 @@
-/** 登录页 — 占位页面。 */
+"use client";

-import { Lock } from "lucide-react";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Lock, Mail, Loader2 } from "lucide-react";
+import { useAuth } from "@/lib/auth-context";

+/**
+ * 登录页 — 对接后端 auth API。
+ */
 export default function LoginPage() {
+  const router = useRouter();
+  const { login } = useAuth();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+    try {
+      await login(email, password);
+      router.push("/dashboard");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "登录失败");
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
  return (
    <div className="flex min-h-screen items-center justify-center bg-gradient-to-b from-indigo-50 to-white">
      <div className="w-full max-w-sm rounded-lg border bg-white p-8 shadow-sm">
@@ -13,7 +40,68 @@ export default function LoginPage() {
          <h1 className="text-xl font-bold">AIPortPilot</h1>
          <p className="mt-1 text-sm text-muted-foreground">AI+ 投后管理平台</p>
        </div>
-        <p className="text-center text-sm text-muted-foreground">登录功能开发中</p>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="email" className="mb-1 block text-sm font-medium text-foreground">
+              邮箱
+            </label>
+            <div className="relative">
+              <Mail
+                className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+                size={16}
+                aria-hidden="true"
+              />
+              <input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                placeholder="you@example.com"
+                className="w-full rounded-md border bg-background py-2 pl-9 pr-3 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--founder-primary)]"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label htmlFor="password" className="mb-1 block text-sm font-medium text-foreground">
+              密码
+            </label>
+            <div className="relative">
+              <Lock
+                className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+                size={16}
+                aria-hidden="true"
+              />
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                minLength={6}
+                placeholder="至少 6 位"
+                className="w-full rounded-md border bg-background py-2 pl-9 pr-3 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--founder-primary)]"
+              />
+            </div>
+          </div>
+
+          {error && (
+            <p className="rounded-md bg-[var(--destructive)]/10 px-3 py-2 text-sm text-[var(--destructive)]">
+              {error}
+            </p>
+          )}
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="flex w-full items-center justify-center gap-2 rounded-md bg-[var(--founder-primary)] py-2 text-sm font-medium text-white transition-colors hover:opacity-90 disabled:opacity-50"
+          >
+            {isLoading && <Loader2 className="animate-spin" size={16} aria-hidden="true" />}
+            {isLoading ? "登录中..." : "登录"}
+          </button>
+        </form>
      </div>
    </div>
  );