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.

app/(auth)/login/page.tsx

@@ -1,8 +1,66 @@
+"use client"
+
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
+import { Gamepad2 } from "lucide-react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { Button } from "@/components/ui/button"
+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位"),
+})
+
 export default function LoginPage() {
+  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()
+    router.push("/")
+  }
+
   return (
-    <div>
+    <div className="space-y-6">
-      <h1 className="text-2xl font-bold">登录</h1>
+      <div className="flex flex-col items-center gap-2">
-      <p className="mt-2 text-sm text-muted-foreground">登录你的聚玩账号</p>
+        <Gamepad2 className="h-8 w-8" />
+        <h1 className="text-2xl font-bold">登录聚玩</h1>
+        <p className="text-sm text-muted-foreground">输入你的账号信息</p>
+      </div>
+      <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">
+          <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>
+        <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>
     </div>
   )
 }

app/(auth)/register/page.tsx

@@ -1,8 +1,90 @@
+"use client"
+
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
+import { Gamepad2 } from "lucide-react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { useAuthStore } from "@/store/auth"
+
+const registerSchema = z
+  .object({
+    nickname: z.string().min(2, "昵称至少2个字符"),
+    phone: z.string().min(11, "请输入正确的手机号"),
+    password: z.string().min(6, "密码至少6位"),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "两次密码不一致",
+    path: ["confirmPassword"],
+  })
+
 export default function RegisterPage() {
+  const router = useRouter()
+  const { login } = useAuthStore()
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm({
+    resolver: standardSchemaResolver(registerSchema),
+  })
+
+  const onSubmit = async (_data: z.infer<typeof registerSchema>) => {
+    await new Promise((r) => setTimeout(r, 500))
+    login()
+    router.push("/")
+  }
+
   return (
-    <div>
+    <div className="space-y-6">
-      <h1 className="text-2xl font-bold">注册</h1>
+      <div className="flex flex-col items-center gap-2">
-      <p className="mt-2 text-sm text-muted-foreground">创建你的聚玩账号</p>
+        <Gamepad2 className="h-8 w-8" />
+        <h1 className="text-2xl font-bold">注册聚玩</h1>
+        <p className="text-sm text-muted-foreground">创建你的聚玩账号</p>
+      </div>
+      <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>
+        <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>
     </div>
   )
 }

app/(main)/page.tsx

@@ -1,22 +1,153 @@
+import { ArrowRight, Search, ShoppingBag, Star } from "lucide-react"
+import Link from "next/link"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { mockGames, mockPlayers, mockShops } from "@/lib/mock-data"
+
 export default function HomePage() {
   return (
-    <div className="container mx-auto py-8 px-4">
+    <div className="container mx-auto py-8 px-4 space-y-12">
-      <h1 className="text-3xl font-bold">聚玩</h1>
+      <section className="text-center space-y-4 py-8">
-      <p className="mt-2 text-lg text-muted-foreground">游戏陪玩服务平台</p>
+        <h1 className="text-4xl font-bold tracking-tight">找到你的游戏搭档</h1>
-      <div className="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <p className="text-lg text-muted-foreground max-w-xl mx-auto">
-        <div className="rounded-lg border p-6">
+          专业陪玩、代练、上分，覆盖主流游戏，安全可靠
-          <h2 className="font-semibold">游戏分类</h2>
+        </p>
-          <p className="mt-1 text-sm text-muted-foreground">按游戏浏览陪玩服务</p>
+        <div className="flex justify-center gap-2 pt-2">
+          <Button size="lg" asChild>
+            <Link href="/search">
+              <Search className="mr-2 h-4 w-4" />
+              搜索打手
+            </Link>
+          </Button>
+          <Button size="lg" variant="outline" asChild>
+            <Link href="/community">逛逛社区</Link>
+          </Button>
         </div>
-        <div className="rounded-lg border p-6">
+      </section>
-          <h2 className="font-semibold">推荐打手</h2>
+
-          <p className="mt-1 text-sm text-muted-foreground">热门打手推荐</p>
+      <section>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-xl font-semibold">游戏分类</h2>
+          <Button variant="ghost" size="sm" asChild>
+            <Link href="/search">
+              查看全部 <ArrowRight className="ml-1 h-4 w-4" />
+            </Link>
+          </Button>
         </div>
-        <div className="rounded-lg border p-6">
+        <div className="grid grid-cols-4 md:grid-cols-8 gap-3">
-          <h2 className="font-semibold">热门店铺</h2>
+          {mockGames.map((game) => (
-          <p className="mt-1 text-sm text-muted-foreground">优质店铺推荐</p>
+            <Link
+              key={game.id}
+              href={`/search?game=${encodeURIComponent(game.name)}`}
+              className="flex flex-col items-center gap-2 rounded-lg border p-3 hover:bg-accent/50 transition-colors"
+            >
+              <span className="text-2xl">{game.icon}</span>
+              <span className="text-xs font-medium text-center">{game.name}</span>
+            </Link>
+          ))}
+        </div>
+      </section>
+
+      <section>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-xl font-semibold">推荐打手</h2>
+          <Button variant="ghost" size="sm" asChild>
+            <Link href="/search">
+              查看全部 <ArrowRight className="ml-1 h-4 w-4" />
+            </Link>
+          </Button>
+        </div>
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {mockPlayers.map((player) => (
+            <Card key={player.id} className="hover:shadow-md transition-shadow">
+              <CardHeader className="flex flex-row items-center gap-3 space-y-0 pb-3">
+                <Avatar className="h-12 w-12">
+                  <AvatarImage src={player.user.avatar} />
+                  <AvatarFallback>{player.user.nickname[0]}</AvatarFallback>
+                </Avatar>
+                <div className="flex-1 min-w-0">
+                  <CardTitle className="text-base">{player.user.nickname}</CardTitle>
+                  <div className="flex items-center gap-2 mt-1">
+                    <div className="flex items-center text-sm">
+                      <Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400 mr-0.5" />
+                      {player.rating}
+                    </div>
+                    <span className="text-xs text-muted-foreground">{player.totalOrders} 单</span>
+                    <Badge
+                      variant={player.status === "available" ? "default" : "secondary"}
+                      className="text-[10px] px-1.5 py-0"
+                    >
+                      {player.status === "available"
+                        ? "可接单"
+                        : player.status === "busy"
+                          ? "忙碌"
+                          : "离线"}
+                    </Badge>
                   </div>
                 </div>
+              </CardHeader>
+              <CardContent className="pb-3">
+                <div className="flex flex-wrap gap-1">
+                  {player.tags.map((tag) => (
+                    <Badge key={tag} variant="outline" className="text-xs">
+                      {tag}
+                    </Badge>
+                  ))}
+                </div>
+                {player.shopName && (
+                  <p className="text-xs text-muted-foreground mt-2">所属店铺: {player.shopName}</p>
+                )}
+              </CardContent>
+              <CardFooter className="pt-0">
+                <Button variant="outline" size="sm" className="w-full" asChild>
+                  <Link href={`/player/${player.id}`}>查看详情</Link>
+                </Button>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      <section>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-xl font-semibold">热门店铺</h2>
+          <Button variant="ghost" size="sm" asChild>
+            <Link href="/search">
+              查看全部 <ArrowRight className="ml-1 h-4 w-4" />
+            </Link>
+          </Button>
+        </div>
+        <div className="grid gap-4 md:grid-cols-2">
+          {mockShops.map((shop) => (
+            <Card key={shop.id} className="hover:shadow-md transition-shadow">
+              <CardHeader>
+                <CardTitle className="text-lg">{shop.name}</CardTitle>
+                <p className="text-sm text-muted-foreground">{shop.description}</p>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-center gap-4 text-sm">
+                  <div className="flex items-center">
+                    <Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400 mr-0.5" />
+                    {shop.rating}
+                  </div>
+                  <div className="flex items-center text-muted-foreground">
+                    <ShoppingBag className="h-3.5 w-3.5 mr-0.5" />
+                    {shop.totalOrders} 单
+                  </div>
+                  <span className="text-muted-foreground">{shop.playerCount} 名打手</span>
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Button variant="outline" size="sm" asChild>
+                  <Link href={`/shop/${shop.id}`}>进入店铺</Link>
+                </Button>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      </section>
     </div>
   )
 }

components/login-dialog.tsx

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

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/types/routes.d.ts"
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
+    "@standard-schema/spec": "^1.1.0",
     "@tanstack/react-query": "^5.90.21",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@hookform/resolvers':
         specifier: ^5.2.2
         version: 5.2.2(react-hook-form@7.71.1(react@19.2.3))
+      '@standard-schema/spec':
+        specifier: ^1.1.0
+        version: 1.1.0
       '@tanstack/react-query':
         specifier: ^5.90.21
         version: 5.90.21(react@19.2.3)
@@ -1317,6 +1320,9 @@ packages:
     resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
     engines: {node: '>=18'}
 
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
   '@standard-schema/utils@0.3.0':
     resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
 
@@ -4111,6 +4117,8 @@ snapshots:
 
   '@sindresorhus/merge-streams@4.0.0': {}
 
+  '@standard-schema/spec@1.1.0': {}
+
   '@standard-schema/utils@0.3.0': {}
 
   '@swc/helpers@0.5.15':