feat(catalog): fetch players, services, shops

app/(order)/order/new/page.tsx

@@ -10,6 +10,7 @@ import { Textarea } from "@/components/ui/textarea"
 import type { Actor } from "@/lib/actor"
 import { getPlayerById, getServiceById } from "@/lib/api"
 import { notifySuccess } from "@/lib/toast"
+import type { Player, PlayerService } from "@/lib/types"
 import { useRequireAuth } from "@/lib/use-require-auth"
 import { useAuthStore } from "@/store/auth"
 import { useOrderStore } from "@/store/orders"
@@ -17,7 +18,7 @@ import { useWalletStore } from "@/store/wallet"
 import { ArrowLeft, CheckCircle, CreditCard, ShieldCheck } from "lucide-react"
 import Link from "next/link"
 import { useRouter, useSearchParams } from "next/navigation"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 
 export default function NewOrderPage() {
   const router = useRouter()
@@ -27,13 +28,60 @@ export default function NewOrderPage() {
   const balance = useWalletStore((state) => state.balance)
   const serviceId = searchParams.get("serviceId")
 
-  const service = serviceId ? getServiceById(serviceId) : undefined
-  const player = service ? getPlayerById(service.playerId) : undefined
+  const [service, setService] = useState<PlayerService | null>(null)
+  const [player, setPlayer] = useState<Player | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+
+    if (!serviceId) {
+      setService(null)
+      setPlayer(null)
+      setLoading(false)
+      return
+    }
+
+    ;(async () => {
+      try {
+        const s = await getServiceById(serviceId)
+        if (cancelled) return
+        if (!s) {
+          setService(null)
+          setPlayer(null)
+          setLoading(false)
+          return
+        }
+
+        setService(s)
+        const p = await getPlayerById(s.playerId)
+        if (cancelled) return
+        setPlayer(p ?? null)
+        setLoading(false)
+      } catch {
+        if (cancelled) return
+        setService(null)
+        setPlayer(null)
+        setLoading(false)
+      }
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [serviceId])
 
   const [quantity, setQuantity] = useState(1)
   const [note, setNote] = useState("")
   const [submitted, setSubmitted] = useState(false)
 
+  if (loading) {
+    return (
+      <div className="container mx-auto py-8 px-4 text-center text-muted-foreground">加载中...</div>
+    )
+  }
+
   if (!service || !player) {
     return (
       <div className="container mx-auto py-8 px-4 text-center text-muted-foreground">