Sun Mar 8 09:35:08 AM CST 2026

src/app/(auth)/login/page.tsx

@@ -1,66 +1,99 @@
 "use client";
 
+import { useState } from "react";
 import { authClient } from "@/lib/auth-client";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 import { toast } from "sonner";
+import { Card, CardBody } from "@/design-system/base/card";
+import { Input } from "@/design-system/base/input";
+import { PrimaryButton } from "@/design-system/base/button";
+import { VStack } from "@/design-system/layout/stack";
 
 export default function LoginPage() {
-    const searchParams = useSearchParams();
-    const redirectTo = searchParams.get("redirect");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
 
-    const session = authClient.useSession().data;
-    const router = useRouter();
+  const searchParams = useSearchParams();
+  const redirectTo = searchParams.get("redirect");
 
-    useEffect(() => {
-        if (session) {
-            router.push(redirectTo ?? "/profile");
-        }
-    });
+  const session = authClient.useSession().data;
+  const router = useRouter();
 
-    function login() {
-        const username = (document.getElementById("username") as HTMLInputElement).value;
-        const password = (document.getElementById("password") as HTMLInputElement).value;
-        console.log(username, password);
-        if (username.includes("@")) {
-            authClient.signIn.email({
-                email: username,
-                password: username
-            });
-        } else {
-            authClient.signIn.username({
-                username: username,
-                password: password,
-                fetchOptions: {
-                    onError: (ctx) => {
-                        toast.error(ctx.error.message);
-                    }
-                }
-            });
-        }
+  useEffect(() => {
+    if (session) {
+      router.push(redirectTo ?? "/profile");
+    }
+  }, [session, router, redirectTo]);
+
+  const handleLogin = async () => {
+    if (!username || !password) {
+      toast.error("请输入用户名和密码");
+      return;
     }
 
-    return (
-        <div className="flex justify-center items-center h-screen w-screen">
-            <div className="rounded shadow-lg w-96 flex flex-col py-4">
-                <h1 className="text-6xl m-16 text-center">登录</h1>
-                <input type="text"
-                    id="username"
-                    placeholder="用户名或邮箱地址"
-                    className="mx-auto mb-8 pb-2 w-60 border-b-2 outline-none" />
-                <input type="password"
-                    id="password"
-                    placeholder="密码"
-                    className="mx-auto mb-8 pb-2 w-60 border-b-2 outline-none" />
-                <button
-                    onClick={login}
-                    className="text-xl rounded shadow w-16 mx-auto p-2 my-4">
-                    确认</button>
-                <Link href={"/signup" + (redirectTo ? `?redirect=${redirectTo}` : "")}
-                    className="text-center text-blue-800"
-                >没有账号？去注册</Link>
-            </div>
-        </div>
-    );
+    setLoading(true);
+    try {
+      if (username.includes("@")) {
+        await authClient.signIn.email({
+          email: username,
+          password: username
+        });
+      } else {
+        await authClient.signIn.username({
+          username: username,
+          password: password,
+        });
+      }
+      router.push(redirectTo ?? "/profile");
+    } catch (error) {
+      toast.error("登录失败");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex justify-center items-center min-h-screen">
+      <Card className="w-80">
+        <CardBody>
+          <VStack gap={4} align="center" justify="center">
+            <h1 className="text-3xl font-bold text-center w-full">登录</h1>
+            
+            <VStack gap={0} align="center" justify="center" className="w-full">
+              <Input
+                placeholder="用户名或邮箱地址"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+              />
+              
+              <Input
+                type="password"
+                placeholder="密码"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </VStack>
+            
+            <PrimaryButton 
+              onClick={handleLogin} 
+              loading={loading}
+              fullWidth
+            >
+              确认
+            </PrimaryButton>
+            
+            <Link 
+              href={"/signup" + (redirectTo ? `?redirect=${redirectTo}` : "")}
+              className="text-center text-primary-500 hover:underline"
+            >
+              没有账号？去注册
+            </Link>
+          </VStack>
+        </CardBody>
+      </Card>
+    </div>
+  );
 }

src/app/(auth)/signup/page.tsx

@@ -1,67 +1,102 @@
 "use client";
 
+import { useState } from "react";
 import { authClient } from "@/lib/auth-client";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 import { toast } from "sonner";
+import { Card, CardBody } from "@/design-system/base/card";
+import { Input } from "@/design-system/base/input";
+import { PrimaryButton } from "@/design-system/base/button";
+import { VStack } from "@/design-system/layout/stack";
 
 export default function SignUpPage() {
-    const searchParams = useSearchParams();
-    const redirectTo = searchParams.get("redirect");
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
 
-    const session = authClient.useSession().data;
-    const router = useRouter();
+  const searchParams = useSearchParams();
+  const redirectTo = searchParams.get("redirect");
 
-    console.log(JSON.stringify({ re: redirectTo }));
+  const session = authClient.useSession().data;
+  const router = useRouter();
 
-    useEffect(() => {
-        if (session) {
-            router.push(redirectTo ?? "/profile");
-        }
-    });
+  useEffect(() => {
+    if (session) {
+      router.push(redirectTo ?? "/profile");
+    }
+  }, [session, router, redirectTo]);
 
-    function login() {
-        const username = (document.getElementById("username") as HTMLInputElement).value;
-        const email = (document.getElementById("email") as HTMLInputElement).value;
-        const password = (document.getElementById("password") as HTMLInputElement).value;
-        authClient.signUp.email({
-            email: email,
-            name: username,
-            username: username,
-            password: password,
-            fetchOptions: {
-                onError: (ctx) => {
-                    toast.error(ctx.error.message);
-                }
-            }
-        });
+  const handleSignUp = async () => {
+    if (!username || !email || !password) {
+      toast.error("请填写所有字段");
+      return;
     }
 
-    return (
-        <div className="flex justify-center items-center h-screen w-screen">
-            <div className="rounded shadow-lg w-96 flex flex-col py-4">
-                <h1 className="text-6xl m-16 text-center">注册</h1>
-                <input type="text"
-                    id="username"
-                    placeholder="用户名"
-                    className="mx-auto mb-8 pb-2 w-60 border-b-2 outline-none" />
-                <input type="email"
-                    id="email"
-                    placeholder="邮箱地址"
-                    className="mx-auto mb-8 pb-2 w-60 border-b-2 outline-none" />
-                <input type="password"
-                    id="password"
-                    placeholder="密码"
-                    className="mx-auto mb-8 pb-2 w-60 border-b-2 outline-none" />
-                <button
-                    onClick={login}
-                    className="text-xl rounded shadow w-16 mx-auto p-2 my-4">
-                    确认</button>
-                <Link href={"/login" + (redirectTo ? `?redirect=${redirectTo}` : "")}
-                    className="text-center text-blue-800"
-                >已有账号？去登录</Link>
-            </div>
-        </div>
-    );
+    setLoading(true);
+    try {
+      await authClient.signUp.email({
+        email: email,
+        name: username,
+        username: username,
+        password: password,
+      });
+      router.push(redirectTo ?? "/profile");
+    } catch (error) {
+      toast.error("注册失败");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex justify-center items-center min-h-screen">
+      <Card className="w-80">
+        <CardBody>
+          <VStack gap={4} align="center" justify="center">
+            <h1 className="text-3xl font-bold text-center w-full">注册</h1>
+            
+            <VStack gap={0} align="center" justify="center" className="w-full">
+              <Input
+                placeholder="用户名"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+              />
+              
+              <Input
+                type="email"
+                placeholder="邮箱地址"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+              
+              <Input
+                type="password"
+                placeholder="密码"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </VStack>
+            
+            <PrimaryButton 
+              onClick={handleSignUp} 
+              loading={loading}
+              fullWidth
+            >
+              确认
+            </PrimaryButton>
+            
+            <Link 
+              href={"/login" + (redirectTo ? `?redirect=${redirectTo}` : "")}
+              className="text-center text-primary-500 hover:underline"
+            >
+              已有账号？去登录
+            </Link>
+          </VStack>
+        </CardBody>
+      </Card>
+    </div>
+  );
 }

src/app/(features)/memorize/page.tsx

@@ -24,7 +24,7 @@ export default async function MemorizePage({
 
   if (!folder_id) {
     const session = await auth.api.getSession({ headers: await headers() });
-    if (!session) redirect("/auth?redirect=/memorize");
+    if (!session) redirect("/login?redirect=/memorize");
 
     return (
       <FolderSelector

src/app/folders/page.tsx

@@ -7,6 +7,6 @@ export default async function FoldersPage() {
   const session = await auth.api.getSession(
     { headers: await headers() }
   );
-  if (!session) redirect(`/auth?redirect=/folders`);
+  if (!session) redirect(`/login?redirect=/folders`);
   return <FoldersClient userId={session.user.id} />;
 }

src/modules/auth/auth-action.ts

@@ -139,13 +139,13 @@ export async function signOutAction() {
             headers: await headers()
         });
 
-        redirect("/auth");
+        redirect("/login");
     } catch (e) {
         if (e instanceof Error && e.message.includes('NEXT_REDIRECT')) {
             throw e;
         }
         console.error("Sign out error:", e);
-        redirect("/auth");
+        redirect("/login");
     }
 }