fix(home): load catalog client-side

app/(main)/page.tsx

@@ -1,15 +1,54 @@
+"use client"
+
 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 { IconInput } from "@/components/ui/icon-input"
 import { listGames, listPlayers, listShops } from "@/lib/api"
+import { toApiError } from "@/lib/errors"
 import { GameIcon } from "@/lib/game-icons"
 import { ArrowRight, Search, ShoppingBag, Star } from "lucide-react"
 import Link from "next/link"
+import { useEffect, useState } from "react"
 
-export default async function HomePage() {
-  const [games, players, shops] = await Promise.all([listGames(), listPlayers(), listShops()])
+export default function HomePage() {
+  const [games, setGames] = useState<Awaited<ReturnType<typeof listGames>>>([])
+  const [players, setPlayers] = useState<Awaited<ReturnType<typeof listPlayers>>>([])
+  const [shops, setShops] = useState<Awaited<ReturnType<typeof listShops>>>([])
+  const [loading, setLoading] = useState(true)
+  const [loadingError, setLoadingError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+
+    const load = async () => {
+      try {
+        const [nextGames, nextPlayers, nextShops] = await Promise.all([
+          listGames(),
+          listPlayers(),
+          listShops(),
+        ])
+
+        if (cancelled) return
+
+        setGames(nextGames)
+        setPlayers(nextPlayers)
+        setShops(nextShops)
+        setLoading(false)
+      } catch (err: unknown) {
+        if (cancelled) return
+        setLoading(false)
+        setLoadingError(toApiError(err).msg)
+      }
+    }
+
+    void load()
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
 
   return (
     <div className="container mx-auto py-8 px-4 space-y-12">
@@ -42,6 +81,11 @@ export default async function HomePage() {
         </div>
       </section>
 
+      {loading && <p className="text-sm text-muted-foreground text-center">加载中...</p>}
+      {!loading && loadingError && (
+        <p className="text-sm text-muted-foreground text-center">{loadingError}</p>
+      )}
+
       <section>
         <div className="flex items-center justify-between mb-4">
           <h2 className="text-xl font-semibold">游戏分类</h2>
@@ -57,14 +101,16 @@ export default async function HomePage() {
           </Button>
         </div>
         <div className="flex flex-wrap gap-3">
-          {games.map((game) => (
-            <Button key={game.id} variant="secondary" className="rounded-full" asChild>
-              <Link href={`/search?game=${encodeURIComponent(game.name)}`}>
-                <GameIcon name={game.icon} className="h-5 w-5" />
-                {game.name}
-              </Link>
-            </Button>
-          ))}
+          {!loading && !loadingError
+            ? games.map((game) => (
+                <Button key={game.id} variant="secondary" className="rounded-full" asChild>
+                  <Link href={`/search?game=${encodeURIComponent(game.name)}`}>
+                    <GameIcon name={game.icon} className="h-5 w-5" />
+                    {game.name}
+                  </Link>
+                </Button>
+              ))
+            : null}
         </div>
       </section>
 
@@ -92,68 +138,74 @@ export default async function HomePage() {
 
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
           {/* Players */}
-          {players.map((player) => (
-            <Card
-              key={player.id}
-              className="hover:shadow-md transition-shadow flex flex-col h-full border-muted/60"
-            >
-              <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-primary text-primary mr-0.5" />
-                      {player.rating}
+          {!loading && !loadingError
+            ? players.map((player) => (
+                <Card
+                  key={player.id}
+                  className="hover:shadow-md transition-shadow flex flex-col h-full border-muted/60"
+                >
+                  <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-primary text-primary 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 font-normal"
+                        >
+                          {player.status === "available"
+                            ? "可接单"
+                            : player.status === "busy"
+                              ? "忙碌"
+                              : "离线"}
+                        </Badge>
+                      </div>
                     </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 font-normal"
-                    >
-                      {player.status === "available"
-                        ? "可接单"
-                        : player.status === "busy"
-                          ? "忙碌"
-                          : "离线"}
-                    </Badge>
-                  </div>
-                </div>
-              </CardHeader>
-              <CardContent className="pb-3 flex-grow">
-                <div className="flex flex-wrap gap-1.5">
-                  {player.tags.map((tag) => (
-                    <Badge
-                      key={tag}
-                      variant="secondary"
-                      className="text-xs bg-muted/50 text-muted-foreground font-normal"
-                    >
-                      {tag}
-                    </Badge>
-                  ))}
-                </div>
-                {player.shopName && (
-                  <p className="text-xs text-muted-foreground mt-3">所属店铺: {player.shopName}</p>
-                )}
-              </CardContent>
-              <CardFooter className="pt-0 flex items-end justify-between">
-                <div className="flex items-baseline gap-1">
-                  <span className="text-lg font-bold leading-none">
-                    {player.services?.[0]?.price ?? 35}
-                  </span>
-                  <span className="text-xs text-muted-foreground">
-                    元/{player.services?.[0]?.unit ?? "时"}
-                  </span>
-                </div>
-                <Button variant="outline" size="sm" asChild>
-                  <Link href={`/player/${player.id}`}>查看详情</Link>
-                </Button>
-              </CardFooter>
-            </Card>
-          ))}
+                  </CardHeader>
+                  <CardContent className="pb-3 flex-grow">
+                    <div className="flex flex-wrap gap-1.5">
+                      {player.tags.map((tag) => (
+                        <Badge
+                          key={tag}
+                          variant="secondary"
+                          className="text-xs bg-muted/50 text-muted-foreground font-normal"
+                        >
+                          {tag}
+                        </Badge>
+                      ))}
+                    </div>
+                    {player.shopName && (
+                      <p className="text-xs text-muted-foreground mt-3">
+                        所属店铺: {player.shopName}
+                      </p>
+                    )}
+                  </CardContent>
+                  <CardFooter className="pt-0 flex items-end justify-between">
+                    <div className="flex items-baseline gap-1">
+                      <span className="text-lg font-bold leading-none">
+                        {player.services?.[0]?.price ?? 35}
+                      </span>
+                      <span className="text-xs text-muted-foreground">
+                        元/{player.services?.[0]?.unit ?? "时"}
+                      </span>
+                    </div>
+                    <Button variant="outline" size="sm" asChild>
+                      <Link href={`/player/${player.id}`}>查看详情</Link>
+                    </Button>
+                  </CardFooter>
+                </Card>
+              ))
+            : null}
 
           {/* Community Teaser */}
           <Card className="hover:shadow-md transition-shadow flex flex-col h-full border-muted/60">
@@ -174,35 +226,37 @@ export default async function HomePage() {
           </Card>
 
           {/* Shops */}
-          {shops.map((shop) => (
-            <Card
-              key={shop.id}
-              className="hover:shadow-md transition-shadow flex flex-col h-full border-muted/60"
-            >
-              <CardHeader>
-                <CardTitle className="text-lg">{shop.name}</CardTitle>
-                <p className="text-sm text-muted-foreground">{shop.description}</p>
-              </CardHeader>
-              <CardContent className="flex-grow">
-                <div className="flex items-center gap-4 text-sm">
-                  <div className="flex items-center">
-                    <Star className="h-3.5 w-3.5 fill-primary text-primary 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" className="w-full" asChild>
-                  <Link href={`/shop/${shop.id}`}>进入店铺</Link>
-                </Button>
-              </CardFooter>
-            </Card>
-          ))}
+          {!loading && !loadingError
+            ? shops.map((shop) => (
+                <Card
+                  key={shop.id}
+                  className="hover:shadow-md transition-shadow flex flex-col h-full border-muted/60"
+                >
+                  <CardHeader>
+                    <CardTitle className="text-lg">{shop.name}</CardTitle>
+                    <p className="text-sm text-muted-foreground">{shop.description}</p>
+                  </CardHeader>
+                  <CardContent className="flex-grow">
+                    <div className="flex items-center gap-4 text-sm">
+                      <div className="flex items-center">
+                        <Star className="h-3.5 w-3.5 fill-primary text-primary 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" className="w-full" asChild>
+                      <Link href={`/shop/${shop.id}`}>进入店铺</Link>
+                    </Button>
+                  </CardFooter>
+                </Card>
+              ))
+            : null}
         </div>
       </section>
     </div>