feat(auth): redesign auth pages with brand panel, IconInput and forgot-password

2026-02-25 15:49:37 +08:00
parent 7c4c2798a7
commit 5812b7b0ed
6 changed files with 344 additions and 122 deletions
@@ -0,0 +1,64 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { IconInput } from "@/components/ui/icon-input"
+import { Label } from "@/components/ui/label"
+import { notifySuccess } from "@/lib/toast"
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
+import { Mail } from "lucide-react"
+import Link from "next/link"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+const forgotSchema = z.object({
+  email: z.string().email("请输入正确的邮箱地址"),
+})
+
+export default function ForgotPasswordPage() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm({
+    resolver: standardSchemaResolver(forgotSchema),
+  })
+
+  const onSubmit = async (_data: z.infer<typeof forgotSchema>) => {
+    await new Promise((r) => setTimeout(r, 500))
+    notifySuccess("重置链接已发送到你的邮箱")
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <h2 className="text-2xl font-bold">找回密码</h2>
+        <p className="mt-2 text-sm text-muted-foreground">输入注册邮箱，我们将发送重置链接</p>
+      </div>
+
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+        <div className="space-y-1.5">
+          <Label htmlFor="email">邮箱地址</Label>
+          <IconInput
+            id="email"
+            icon={<Mail />}
+            type="email"
+            placeholder="输入注册邮箱"
+            {...register("email")}
+          />
+          {errors.email && <p className="text-xs text-destructive">{errors.email.message}</p>}
+        </div>
+
+        <Button type="submit" className="mt-2 w-full" size="lg" disabled={isSubmitting}>
+          {isSubmitting ? "发送中..." : "发送重置链接"}
+        </Button>
+      </form>
+
+      <p className="mt-8 text-center text-sm text-muted-foreground">
+        想起密码了？{" "}
+        <Link href="/login" className="font-medium text-primary hover:underline">
+          返回登录
+        </Link>
+      </p>
+    </>
+  )
+}
@@ -1,27 +1,67 @@
-import { Gamepad2 } from "lucide-react"
+import { ArrowLeft, Gamepad2 } from "lucide-react"
+import Link from "next/link"
+
+const stats = [
+  { value: "12,000+", label: "认证打手" },
+  { value: "98.6%", label: "好评率" },
+  { value: "50,000+", label: "完成订单" },
+]

 export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return (
-    <div className="flex min-h-screen">
-      <div className="hidden md:flex w-1/2 relative overflow-hidden bg-primary items-center justify-center p-12 text-primary-foreground">
-        <div className="absolute inset-0 bg-linear-to-br from-primary via-primary/90 to-primary/80" />
-        <div className="absolute top-[-10%] left-[-10%] w-[60%] h-[60%] rounded-full bg-primary-foreground/10 blur-[120px]" />
-        <div className="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] rounded-full bg-primary-foreground/10 blur-[120px]" />
-        <div className="relative z-10 max-w-md space-y-6">
-          <div className="flex items-center gap-3">
-            <div className="rounded-2xl bg-primary-foreground/20 p-3 backdrop-blur-sm">
-              <Gamepad2 className="h-10 w-10" />
-            </div>
-            <span className="text-3xl font-bold tracking-tighter">聚玩 JuWan</span>
+    <div className="flex min-h-screen bg-background">
+      {/* Left: Brand Panel */}
+      <div className="hidden w-1/2 flex-col justify-between bg-card p-12 lg:flex">
+        <Link href="/" className="flex items-center gap-2">
+          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary">
+            <Gamepad2 className="h-4 w-4 text-primary-foreground" />
          </div>
-          <div className="space-y-2">
-            <h2 className="text-4xl font-bold leading-tight">找到你的游戏搭档</h2>
-            <p className="text-lg text-primary-foreground/80">找人一起打游戏，从这里开始</p>
+          <span className="text-xl font-bold tracking-tight">聚玩</span>
+        </Link>
+
+        <div className="max-w-md">
+          <h1 className="text-4xl font-bold leading-tight">
+            发现你的
+            <br />
+            <span className="text-gradient-brand">专属游戏搭档</span>
+          </h1>
+          <p className="mt-4 text-base leading-relaxed text-muted-foreground">
+            聚玩连接玩家与专业打手，提供安全、透明、高效的游戏陪玩服务。无论你是寻找搭档还是展示技能，这里都是你的舞台。
+          </p>
+
+          <div className="mt-10 grid grid-cols-3 gap-6">
+            {stats.map((stat) => (
+              <div key={stat.label}>
+                <div className="text-2xl font-bold">{stat.value}</div>
+                <div className="mt-1 text-xs text-muted-foreground">{stat.label}</div>
+              </div>
+            ))}
          </div>
        </div>
+
+        <div className="text-xs text-muted-foreground">&copy; 2025 聚玩. All rights reserved.</div>
      </div>
-      <div className="flex-1 flex items-center justify-center p-6 bg-muted/30">
-        <div className="w-full max-w-md">{children}</div>
+
+      {/* Right: Auth Form */}
+      <div className="flex w-full flex-col items-center justify-center px-6 py-12 lg:w-1/2 lg:px-16">
+        {/* Mobile header */}
+        <div className="mb-8 flex w-full max-w-sm items-center justify-between lg:hidden">
+          <Link
+            href="/"
+            className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            返回首页
+          </Link>
+          <div className="flex items-center gap-2">
+            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-primary">
+              <Gamepad2 className="h-3.5 w-3.5 text-primary-foreground" />
+            </div>
+            <span className="text-lg font-bold">聚玩</span>
+          </div>
+        </div>
+
+        <div className="w-full max-w-sm">{children}</div>
      </div>
    </div>
  )
@@ -1,15 +1,16 @@
 "use client"

 import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
+import { Checkbox } from "@/components/ui/checkbox"
+import { IconInput } from "@/components/ui/icon-input"
 import { Label } from "@/components/ui/label"
 import { getCurrentUserForLogin } from "@/lib/api"
 import { useAuthStore } from "@/store/auth"
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
-import { Gamepad2 } from "lucide-react"
+import { Eye, EyeOff, Lock, Phone } from "lucide-react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
+import { useState } from "react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"

@@ -21,6 +22,7 @@ const loginSchema = z.object({
 export default function LoginPage() {
  const router = useRouter()
  const { login } = useAuthStore()
+  const [showPassword, setShowPassword] = useState(false)
  const {
    register,
    handleSubmit,
@@ -36,47 +38,68 @@ export default function LoginPage() {
  }

  return (
-    <Card className="hover:shadow-[var(--shadow-card)]">
-      <CardHeader className="space-y-2">
-        <div className="flex items-center gap-2 md:hidden mb-4">
-          <div className="rounded-lg bg-primary/10 p-2">
-            <Gamepad2 className="h-6 w-6 text-primary" />
-          </div>
-          <span className="text-xl font-bold">聚玩</span>
+    <>
+      <div className="mb-8">
+        <h2 className="text-2xl font-bold">欢迎回来</h2>
+        <p className="mt-2 text-sm text-muted-foreground">登录你的聚玩账号，继续游戏之旅</p>
+      </div>
+
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+        <div className="space-y-1.5">
+          <Label htmlFor="phone">手机号</Label>
+          <IconInput id="phone" icon={<Phone />} placeholder="输入手机号" {...register("phone")} />
+          {errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
        </div>
-        <CardTitle className="text-2xl font-bold tracking-tight">欢迎回来</CardTitle>
-        <CardDescription>登录你的账号以继续</CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-6">
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="phone">手机号</Label>
-            <Input id="phone" placeholder="请输入手机号" {...register("phone")} />
-            {errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
-          </div>
-          <div className="space-y-2">
+
+        <div className="space-y-1.5">
+          <div className="flex items-center justify-between">
            <Label htmlFor="password">密码</Label>
-            <Input
-              id="password"
-              type="password"
-              placeholder="请输入密码"
-              {...register("password")}
-            />
-            {errors.password && (
-              <p className="text-xs text-destructive">{errors.password.message}</p>
-            )}
+            <Link
+              href="/forgot-password"
+              className="text-xs text-primary hover:underline"
+              tabIndex={-1}
+            >
+              忘记密码?
+            </Link>
          </div>
-          <Button type="submit" className="w-full" disabled={isSubmitting}>
-            {isSubmitting ? "登录中..." : "登录"}
-          </Button>
-        </form>
-        <p className="text-center text-sm text-muted-foreground">
-          还没有账号？{" "}
-          <Link href="/register" className="text-primary underline-offset-4 hover:underline">
-            立即注册
-          </Link>
-        </p>
-      </CardContent>
-    </Card>
+          <IconInput
+            id="password"
+            icon={<Lock />}
+            type={showPassword ? "text" : "password"}
+            placeholder="输入密码"
+            rightElement={
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="text-muted-foreground hover:text-foreground"
+                tabIndex={-1}
+              >
+                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            }
+            {...register("password")}
+          />
+          {errors.password && <p className="text-xs text-destructive">{errors.password.message}</p>}
+        </div>
+
+        <div className="flex items-center gap-2 pt-1">
+          <Checkbox id="remember" />
+          <label htmlFor="remember" className="text-xs text-muted-foreground">
+            记住登录状态
+          </label>
+        </div>
+
+        <Button type="submit" className="mt-2 w-full" size="lg" disabled={isSubmitting}>
+          {isSubmitting ? "登录中..." : "登录"}
+        </Button>
+      </form>
+
+      <p className="mt-8 text-center text-sm text-muted-foreground">
+        还没有账号？{" "}
+        <Link href="/register" className="font-medium text-primary hover:underline">
+          立即注册
+        </Link>
+      </p>
+    </>
  )
 }
@@ -1,16 +1,17 @@
 "use client"

 import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
+import { Checkbox } from "@/components/ui/checkbox"
+import { IconInput } from "@/components/ui/icon-input"
 import { Label } from "@/components/ui/label"
 import { getCurrentUserForLogin } from "@/lib/api"
 import { useAuthStore } from "@/store/auth"
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
-import { Gamepad2 } from "lucide-react"
+import { Eye, EyeOff, Lock, Phone, User } from "lucide-react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
-import { useForm } from "react-hook-form"
+import { useState } from "react"
+import { Controller, useForm } from "react-hook-form"
 import { z } from "zod"

 const registerSchema = z
@@ -19,21 +20,30 @@ const registerSchema = z
    phone: z.string().min(11, "请输入正确的手机号"),
    password: z.string().min(6, "密码至少6位"),
    confirmPassword: z.string(),
+    agreeTerms: z.boolean(),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: "两次密码不一致",
    path: ["confirmPassword"],
  })
+  .refine((data) => data.agreeTerms, {
+    message: "请同意用户协议和隐私政策",
+    path: ["agreeTerms"],
+  })

 export default function RegisterPage() {
  const router = useRouter()
  const { login } = useAuthStore()
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const {
    register,
    handleSubmit,
+    control,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: standardSchemaResolver(registerSchema),
+    defaultValues: { agreeTerms: false },
  })

  const onSubmit = async (_data: z.infer<typeof registerSchema>) => {
@@ -43,66 +53,115 @@ export default function RegisterPage() {
  }

  return (
-    <Card className="hover:shadow-[var(--shadow-card)]">
-      <CardHeader className="space-y-2">
-        <div className="flex items-center gap-2 md:hidden mb-4">
-          <div className="rounded-lg bg-primary/10 p-2">
-            <Gamepad2 className="h-6 w-6 text-primary" />
-          </div>
-          <span className="text-xl font-bold">聚玩</span>
+    <>
+      <div className="mb-8">
+        <h2 className="text-2xl font-bold">创建账号</h2>
+        <p className="mt-2 text-sm text-muted-foreground">注册成为聚玩用户，开始探索</p>
+      </div>
+
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+        <div className="space-y-1.5">
+          <Label htmlFor="nickname">昵称</Label>
+          <IconInput
+            id="nickname"
+            icon={<User />}
+            placeholder="输入你的昵称"
+            {...register("nickname")}
+          />
+          {errors.nickname && <p className="text-xs text-destructive">{errors.nickname.message}</p>}
        </div>
-        <CardTitle className="text-2xl font-bold tracking-tight">创建账号</CardTitle>
-        <CardDescription>创建你的聚玩账号</CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-6">
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="nickname">昵称</Label>
-            <Input id="nickname" placeholder="请输入昵称" {...register("nickname")} />
-            {errors.nickname && (
-              <p className="text-xs text-destructive">{errors.nickname.message}</p>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="phone">手机号</Label>
+          <IconInput id="phone" icon={<Phone />} placeholder="输入手机号" {...register("phone")} />
+          {errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="password">密码</Label>
+          <IconInput
+            id="password"
+            icon={<Lock />}
+            type={showPassword ? "text" : "password"}
+            placeholder="设置密码 (至少6位)"
+            rightElement={
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="text-muted-foreground hover:text-foreground"
+                tabIndex={-1}
+              >
+                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            }
+            {...register("password")}
+          />
+          {errors.password && <p className="text-xs text-destructive">{errors.password.message}</p>}
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="confirmPassword">确认密码</Label>
+          <IconInput
+            id="confirmPassword"
+            icon={<Lock />}
+            type={showConfirmPassword ? "text" : "password"}
+            placeholder="再次输入密码"
+            rightElement={
+              <button
+                type="button"
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                className="text-muted-foreground hover:text-foreground"
+                tabIndex={-1}
+              >
+                {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            }
+            {...register("confirmPassword")}
+          />
+          {errors.confirmPassword && (
+            <p className="text-xs text-destructive">{errors.confirmPassword.message}</p>
+          )}
+        </div>
+
+        <div className="flex items-start gap-2 pt-1">
+          <Controller
+            name="agreeTerms"
+            control={control}
+            render={({ field }) => (
+              <Checkbox
+                id="terms"
+                checked={field.value}
+                onCheckedChange={(v) => field.onChange(v === true)}
+                className="mt-0.5"
+              />
            )}
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="phone">手机号</Label>
-            <Input id="phone" placeholder="请输入手机号" {...register("phone")} />
-            {errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="password">密码</Label>
-            <Input
-              id="password"
-              type="password"
-              placeholder="请输入密码"
-              {...register("password")}
-            />
-            {errors.password && (
-              <p className="text-xs text-destructive">{errors.password.message}</p>
-            )}
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="confirmPassword">确认密码</Label>
-            <Input
-              id="confirmPassword"
-              type="password"
-              placeholder="请再次输入密码"
-              {...register("confirmPassword")}
-            />
-            {errors.confirmPassword && (
-              <p className="text-xs text-destructive">{errors.confirmPassword.message}</p>
-            )}
-          </div>
-          <Button type="submit" className="w-full" disabled={isSubmitting}>
-            {isSubmitting ? "注册中..." : "注册"}
-          </Button>
-        </form>
-        <p className="text-center text-sm text-muted-foreground">
-          已有账号？{" "}
-          <Link href="/login" className="text-primary underline-offset-4 hover:underline">
-            立即登录
-          </Link>
-        </p>
-      </CardContent>
-    </Card>
+          />
+          <label htmlFor="terms" className="text-xs leading-relaxed text-muted-foreground">
+            我已阅读并同意{" "}
+            <Link href="/terms" className="text-primary hover:underline">
+              用户协议
+            </Link>{" "}
+            和{" "}
+            <Link href="/privacy" className="text-primary hover:underline">
+              隐私政策
+            </Link>
+          </label>
+        </div>
+        {errors.agreeTerms && (
+          <p className="text-xs text-destructive">{errors.agreeTerms.message}</p>
+        )}
+
+        <Button type="submit" className="mt-2 w-full" size="lg" disabled={isSubmitting}>
+          {isSubmitting ? "注册中..." : "注册"}
+        </Button>
+      </form>
+
+      <p className="mt-8 text-center text-sm text-muted-foreground">
+        已有账号？{" "}
+        <Link href="/login" className="font-medium text-primary hover:underline">
+          立即登录
+        </Link>
+      </p>
+    </>
  )
 }
@@ -131,3 +131,12 @@
    @apply bg-background text-foreground;
  }
 }
+
+@layer utilities {
+  .text-gradient-brand {
+    background: linear-gradient(135deg, oklch(0.701 0.189 46.65), oklch(0.78 0.16 55));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+}