feat: login/register pages, login dialog, homepage with game categories and player/shop cards

Use standardSchemaResolver instead of zodResolver to work around Zod v4 type incompatibility with @hookform/resolvers.
2026-02-20 14:17:26 +08:00
parent f7c76db00f
commit e2b47681a3
7 changed files with 392 additions and 21 deletions
@@ -0,0 +1,91 @@
+"use client"
+
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
+import { useRouter } from "next/navigation"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { useAuthStore } from "@/store/auth"
+
+const loginSchema = z.object({
+  phone: z.string().min(11, "请输入正确的手机号"),
+  password: z.string().min(6, "密码至少6位"),
+})
+
+interface LoginDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function LoginDialog({ open, onOpenChange }: LoginDialogProps) {
+  const router = useRouter()
+  const { login } = useAuthStore()
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm({
+    resolver: standardSchemaResolver(loginSchema),
+  })
+
+  const onSubmit = async (_data: z.infer<typeof loginSchema>) => {
+    await new Promise((r) => setTimeout(r, 500))
+    login()
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>登录聚玩</DialogTitle>
+          <DialogDescription>请先登录以继续操作</DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="dialog-phone">手机号</Label>
+            <Input id="dialog-phone" placeholder="请输入手机号" {...register("phone")} />
+            {errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="dialog-password">密码</Label>
+            <Input
+              id="dialog-password"
+              type="password"
+              placeholder="请输入密码"
+              {...register("password")}
+            />
+            {errors.password && (
+              <p className="text-xs text-destructive">{errors.password.message}</p>
+            )}
+          </div>
+          <div className="flex gap-2">
+            <Button type="submit" className="flex-1" disabled={isSubmitting}>
+              {isSubmitting ? "登录中..." : "登录"}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              className="flex-1"
+              onClick={() => {
+                onOpenChange(false)
+                router.push("/register")
+              }}
+            >
+              注册
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}