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

app/(auth)/login/page.tsx

@@ -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>
+    </>
   )
 }