feat(orders): migrate orders to backend API

app/(order)/order/[id]/page.tsx

@@ -4,11 +4,11 @@ import OrderActions from "@/components/order-actions"
 import { Badge } from "@/components/ui/badge"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
+import { getOrderById } from "@/lib/api"
 import { ORDER_ACCEPT_TIMEOUT_MS, ORDER_CLOSE_TIMEOUT_MS } from "@/lib/config/demo-timers"
 import { statusLabels } from "@/lib/constants"
 import type { OrderStatus } from "@/lib/types"
 import { useChatStore } from "@/store/chat"
-import { useOrderStore } from "@/store/orders"
 import { useReviewStore } from "@/store/reviews"
 import { ArrowLeft, CheckCircle, Clock, Star } from "lucide-react"
 import Link from "next/link"
@@ -35,7 +35,6 @@ const cancelledStatusSteps: OrderStatus[] = ["pending_payment", "pending_accept"
 
 export default function OrderDetailPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = use(params)
-  const order = useOrderStore((state) => state.orders.find((item) => item.id === id))
   const sessions = useChatStore((state) => state.sessions)
   const allReviews = useReviewStore((state) => state.reviews)
   // Filtering is deferred to useMemo after reading the raw store array.
@@ -43,8 +42,34 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
   // Returning a fresh filtered array from the selector can re-trigger updates
   // and loop under useSyncExternalStore (pmndrs/zustand#1936, #3155).
   const reviews = useMemo(() => allReviews.filter((item) => item.orderId === id), [allReviews, id])
+  const [order, setOrder] = useState<Awaited<ReturnType<typeof getOrderById>> | undefined>(
+    undefined,
+  )
+  const [loading, setLoading] = useState(true)
   const [nowTs, setNowTs] = useState(0)
 
+  useEffect(() => {
+    let cancelled = false
+
+    setLoading(true)
+    ;(async () => {
+      try {
+        const order = await Promise.resolve(getOrderById(id))
+        if (cancelled) return
+        setOrder(order)
+        setLoading(false)
+      } catch {
+        if (cancelled) return
+        setOrder(undefined)
+        setLoading(false)
+      }
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [id])
+
   useEffect(() => {
     if (!order) return
     if (order.status !== "pending_accept" && order.status !== "pending_close") return
@@ -56,6 +81,12 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
     return () => clearInterval(timer)
   }, [order])
 
+  if (loading) {
+    return (
+      <div className="container mx-auto py-8 px-4 text-center text-muted-foreground">加载中...</div>
+    )
+  }
+
   if (!order) {
     return (
       <div className="container mx-auto py-8 px-4 text-center text-muted-foreground">
@@ -257,6 +288,8 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
 
       <OrderActions
         orderId={order.id}
+        order={order}
+        onOrderChange={(next) => setOrder(next)}
         initialStatus={order.status}
         chatSessionId={chatSession?.id}
         serviceId={order.service.id}