Sun Mar 8 09:35:08 AM CST 2026

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

@@ -1,12 +1,21 @@
 "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 [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
   const searchParams = useSearchParams();
   const redirectTo = searchParams.get("redirect");
 
@@ -17,50 +26,74 @@ export default function LoginPage() {
     if (session) {
       router.push(redirectTo ?? "/profile");
     }
-    });
+  }, [session, router, redirectTo]);
 
-    function login() {
+  const handleLogin = async () => {
-        const username = (document.getElementById("username") as HTMLInputElement).value;
+    if (!username || !password) {
-        const password = (document.getElementById("password") as HTMLInputElement).value;
+      toast.error("请输入用户名和密码");
-        console.log(username, password);
+      return;
+    }
+
+    setLoading(true);
+    try {
       if (username.includes("@")) {
-            authClient.signIn.email({
+        await authClient.signIn.email({
           email: username,
           password: username
         });
       } else {
-            authClient.signIn.username({
+        await authClient.signIn.username({
           username: username,
           password: password,
-                fetchOptions: {
-                    onError: (ctx) => {
-                        toast.error(ctx.error.message);
-                    }
-                }
         });
       }
+      router.push(redirectTo ?? "/profile");
+    } catch (error) {
+      toast.error("登录失败");
+    } finally {
+      setLoading(false);
     }
+  };
 
   return (
-        <div className="flex justify-center items-center h-screen w-screen">
+    <div className="flex justify-center items-center min-h-screen">
-            <div className="rounded shadow-lg w-96 flex flex-col py-4">
+      <Card className="w-80">
-                <h1 className="text-6xl m-16 text-center">登录</h1>
+        <CardBody>
-                <input type="text"
+          <VStack gap={4} align="center" justify="center">
-                    id="username"
+            <h1 className="text-3xl font-bold text-center w-full">登录</h1>
+            
+            <VStack gap={0} align="center" justify="center" className="w-full">
+              <Input
                 placeholder="用户名或邮箱地址"
-                    className="mx-auto mb-8 pb-2 w-60 border-b-2 outline-none" />
+                value={username}
-                <input type="password"
+                onChange={(e) => setUsername(e.target.value)}
-                    id="password"
+              />
+              
+              <Input
+                type="password"
                 placeholder="密码"
-                    className="mx-auto mb-8 pb-2 w-60 border-b-2 outline-none" />
+                value={password}
-                <button
+                onChange={(e) => setPassword(e.target.value)}
-                    onClick={login}
+              />
-                    className="text-xl rounded shadow w-16 mx-auto p-2 my-4">
+            </VStack>
-                    确认</button>
+            
-                <Link href={"/signup" + (redirectTo ? `?redirect=${redirectTo}` : "")}
+            <PrimaryButton 
-                    className="text-center text-blue-800"
+              onClick={handleLogin} 
-                >没有账号？去注册</Link>
+              loading={loading}
-            </div>
+              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 [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
   const searchParams = useSearchParams();
   const redirectTo = searchParams.get("redirect");
 
   const session = authClient.useSession().data;
   const router = useRouter();
 
-    console.log(JSON.stringify({ re: redirectTo }));
-
   useEffect(() => {
     if (session) {
       router.push(redirectTo ?? "/profile");
     }
-    });
+  }, [session, router, redirectTo]);
 
-    function login() {
+  const handleSignUp = async () => {
-        const username = (document.getElementById("username") as HTMLInputElement).value;
+    if (!username || !email || !password) {
-        const email = (document.getElementById("email") as HTMLInputElement).value;
+      toast.error("请填写所有字段");
-        const password = (document.getElementById("password") as HTMLInputElement).value;
+      return;
-        authClient.signUp.email({
+    }
+
+    setLoading(true);
+    try {
+      await authClient.signUp.email({
         email: email,
         name: username,
         username: username,
         password: password,
-            fetchOptions: {
-                onError: (ctx) => {
-                    toast.error(ctx.error.message);
-                }
-            }
       });
+      router.push(redirectTo ?? "/profile");
+    } catch (error) {
+      toast.error("注册失败");
+    } finally {
+      setLoading(false);
     }
+  };
 
   return (
-        <div className="flex justify-center items-center h-screen w-screen">
+    <div className="flex justify-center items-center min-h-screen">
-            <div className="rounded shadow-lg w-96 flex flex-col py-4">
+      <Card className="w-80">
-                <h1 className="text-6xl m-16 text-center">注册</h1>
+        <CardBody>
-                <input type="text"
+          <VStack gap={4} align="center" justify="center">
-                    id="username"
+            <h1 className="text-3xl font-bold text-center w-full">注册</h1>
+            
+            <VStack gap={0} align="center" justify="center" className="w-full">
+              <Input
                 placeholder="用户名"
-                    className="mx-auto mb-8 pb-2 w-60 border-b-2 outline-none" />
+                value={username}
-                <input type="email"
+                onChange={(e) => setUsername(e.target.value)}
-                    id="email"
+              />
+              
+              <Input
+                type="email"
                 placeholder="邮箱地址"
-                    className="mx-auto mb-8 pb-2 w-60 border-b-2 outline-none" />
+                value={email}
-                <input type="password"
+                onChange={(e) => setEmail(e.target.value)}
-                    id="password"
+              />
+              
+              <Input
+                type="password"
                 placeholder="密码"
-                    className="mx-auto mb-8 pb-2 w-60 border-b-2 outline-none" />
+                value={password}
-                <button
+                onChange={(e) => setPassword(e.target.value)}
-                    onClick={login}
+              />
-                    className="text-xl rounded shadow w-16 mx-auto p-2 my-4">
+            </VStack>
-                    确认</button>
+            
-                <Link href={"/login" + (redirectTo ? `?redirect=${redirectTo}` : "")}
+            <PrimaryButton 
-                    className="text-center text-blue-800"
+              onClick={handleSignUp} 
-                >已有账号？去登录</Link>
+              loading={loading}
-            </div>
+              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");
     }
 }