feat(disputes): migrate disputes and reviews to backend API

2026-03-01 16:25:33 +08:00
parent 9739c94bdc
commit f189ec9846
7 changed files with 437 additions and 120 deletions
@@ -25,7 +25,7 @@ export default async function PlayerDetailPage({ params }: { params: Promise<{ i
    notFound()
  }

-  const playerReviews = listReviewsByTargetUser(player.id)
+  const playerReviews = await listReviewsByTargetUser(player.id)
  const playerServices =
    player.services && player.services.length > 0
      ? player.services
@@ -25,7 +25,7 @@ export default async function ShopPage({ params }: PageProps) {
  const [shopPlayers, allServices] = await Promise.all([listPlayersByShop(shop.id), listServices()])
  const playerIds = shopPlayers.map((p) => p.id)
  const shopServices = allServices.filter((s) => playerIds.includes(s.playerId))
-  const shopReviews = listReviews().filter((r) => playerIds.includes(r.toUserId))
+  const shopReviews = (await listReviews()).filter((r) => playerIds.includes(r.toUserId))
  const sortedSections = [...shop.templateConfig.sections]
    .filter((s) => s.enabled)
    .sort((a, b) => a.order - b.order)
@@ -6,12 +6,16 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
 import { Textarea } from "@/components/ui/textarea"
-import { submitDispute, submitDisputeAppeal, submitDisputeResponse } from "@/lib/api/disputes"
+import { getOrderById } from "@/lib/api"
+import {
+  getDisputeByOrderId,
+  submitDispute,
+  submitDisputeAppeal,
+  submitDisputeResponse,
+} from "@/lib/api/disputes"
 import { DISPUTE_TO_RESOLVED_MS } from "@/lib/config/demo-timers"
 import { notifyInfo } from "@/lib/toast"
 import { useAuthStore } from "@/store/auth"
-import { useDisputeStore } from "@/store/disputes"
-import { useOrderStore } from "@/store/orders"
 import { AlertTriangle, ArrowLeft, Clock, FileText, Upload, X } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
@@ -33,13 +37,42 @@ const disputeStatusLabels: Record<string, string> = {
  appealed: "申诉中",
 }

+function deriveMinimalTimeline<TCreatedAt>(dispute: {
+  id: string
+  status: string
+  createdAt: TCreatedAt
+  timeline?: { id: string; content: string; createdAt: TCreatedAt }[]
+}) {
+  const existing = dispute.timeline
+  if (existing?.length) return existing
+
+  const steps = [
+    { status: "open", content: "争议已提交" },
+    { status: "reviewing", content: "平台审核中" },
+    { status: "resolved", content: "争议已解决" },
+    { status: "appealed", content: "已发起申诉" },
+  ]
+
+  const currentIndex = steps.findIndex((step) => step.status === dispute.status)
+  const lastIndex = currentIndex >= 0 ? currentIndex : 0
+  return steps.slice(0, lastIndex + 1).map((step) => ({
+    id: `${dispute.id}-${step.status}`,
+    content: step.content,
+    createdAt: dispute.createdAt,
+  }))
+}
+
 export default function DisputePage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params)
  const router = useRouter()
  const searchParams = useSearchParams()
-  const order = useOrderStore((state) => state.orders.find((item) => item.id === id))
  const userId = useAuthStore((state) => state.user?.id)
-  const existingDispute = useDisputeStore((state) => state.getDisputeByOrderId(id))
+
+  const [loading, setLoading] = useState(true)
+  const [order, setOrder] = useState<Awaited<ReturnType<typeof getOrderById>> | null>(null)
+  const [existingDispute, setExistingDispute] = useState<Awaited<
+    ReturnType<typeof getDisputeByOrderId>
+  > | null>(null)

  const [reason, setReason] = useState("")
  const [files, setFiles] = useState<string[]>([])
@@ -52,6 +85,28 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
  const filesRef = useRef<string[]>([])
  const responseFilesRef = useRef<string[]>([])

+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    setOrder(null)
+    setExistingDispute(null)
+
+    Promise.all([Promise.resolve(getOrderById(id)), Promise.resolve(getDisputeByOrderId(id))])
+      .then(([nextOrder, nextDispute]) => {
+        if (cancelled) return
+        setOrder(nextOrder ?? null)
+        setExistingDispute(nextDispute ?? null)
+      })
+      .finally(() => {
+        if (cancelled) return
+        setLoading(false)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [id])
+
  useEffect(() => {
    filesRef.current = files
  }, [files])
@@ -106,19 +161,29 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }

  const handleSubmit = () => {
    if (!userId || !reason.trim()) return
-    const result = submitDispute({
+
+    Promise.resolve(
+      submitDispute({
        orderId: id,
        reason,
        evidence: files,
-    })
+      }),
+    ).then((result) => {
      if (!result.decision.ok) {
        notifyInfo(result.decision.error.msg)
        return
      }
      router.replace(`/dispute/${id}?submitted=1`)
+    })
  }

-  const showSubmitted = searchParams.get("submitted") === "1" && !existingDispute
+  const showSubmitted = !loading && searchParams.get("submitted") === "1" && !existingDispute
+
+  if (loading) {
+    return (
+      <div className="container mx-auto py-8 px-4 text-center text-muted-foreground">加载中...</div>
+    )
+  }

  if (!order) {
    return (
@@ -149,6 +214,8 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
    const canAppeal =
      isParticipant && existingDispute.status === "resolved" && !existingDispute.appealedAt

+    const timeline = deriveMinimalTimeline(existingDispute)
+
    return (
      <div className="container mx-auto max-w-2xl px-4 py-8 space-y-4">
        <Link
@@ -282,14 +349,17 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
                  <Button
                    onClick={() => {
                      if (!userId) return
-                      const decision = submitDisputeResponse({
+                      Promise.resolve(
+                        submitDisputeResponse({
                          disputeId: existingDispute.id,
                          reason: responseReason,
                          evidence: responseFiles,
-                      })
+                        }),
+                      ).then((decision) => {
                        if (!decision.ok) {
                          notifyInfo(decision.error.msg)
                        }
+                      })
                    }}
                    disabled={!responseReason.trim()}
                  >
@@ -331,13 +401,16 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
                    variant="outline"
                    onClick={() => {
                      if (!userId) return
-                      const decision = submitDisputeAppeal({
+                      Promise.resolve(
+                        submitDisputeAppeal({
                          disputeId: existingDispute.id,
                          reason: appealReason,
-                      })
+                        }),
+                      ).then((decision) => {
                        if (!decision.ok) {
                          notifyInfo(decision.error.msg)
                        }
+                      })
                    }}
                    disabled={!appealReason.trim()}
                  >
@@ -352,7 +425,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
            <div className="space-y-2">
              <Label className="text-muted-foreground">处理时间线</Label>
              <div className="space-y-2">
-                {existingDispute.timeline.map((item) => (
+                {timeline.map((item) => (
                  <div key={item.id} className="text-sm flex items-start justify-between gap-3">
                    <span>{item.content}</span>
                    <span className="text-xs text-muted-foreground shrink-0">
@@ -4,15 +4,14 @@ 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 { getOrderById, listReviewsByOrder } 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 { useReviewStore } from "@/store/reviews"
 import { ArrowLeft, CheckCircle, Clock, Star } from "lucide-react"
 import Link from "next/link"
-import { use, useEffect, useMemo, useState } from "react"
+import { use, useEffect, useState } from "react"

 const normalStatusSteps: OrderStatus[] = [
  "pending_payment",
@@ -36,12 +35,7 @@ const cancelledStatusSteps: OrderStatus[] = ["pending_payment", "pending_accept"
 export default function OrderDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params)
  const sessions = useChatStore((state) => state.sessions)
-  const allReviews = useReviewStore((state) => state.reviews)
-  // Filtering is deferred to useMemo after reading the raw store array.
-  // Zustand v5 compares selector outputs by reference stability.
-  // 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 [reviews, setReviews] = useState<Awaited<ReturnType<typeof listReviewsByOrder>>>([])
  const [order, setOrder] = useState<Awaited<ReturnType<typeof getOrderById>> | undefined>(
    undefined,
  )
@@ -70,6 +64,25 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
    }
  }, [id])

+  useEffect(() => {
+    let cancelled = false
+
+    ;(async () => {
+      try {
+        const reviews = await Promise.resolve(listReviewsByOrder(id))
+        if (cancelled) return
+        setReviews(reviews)
+      } catch {
+        if (cancelled) return
+        setReviews([])
+      }
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [id])
+
  useEffect(() => {
    if (!order) return
    if (order.status !== "pending_accept" && order.status !== "pending_close") return
@@ -4,29 +4,56 @@ import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Label } from "@/components/ui/label"
 import { Textarea } from "@/components/ui/textarea"
+import { getOrderById, listReviewsByOrder } from "@/lib/api"
 import { submitReview } from "@/lib/api/reviews"
 import { notifyInfo, notifySuccess } from "@/lib/toast"
 import { useAuthStore } from "@/store/auth"
-import { useOrderStore } from "@/store/orders"
-import { useReviewStore } from "@/store/reviews"
 import { ArrowLeft, Lock, Star } from "lucide-react"
 import Link from "next/link"
-import { use, useMemo, useState } from "react"
+import { use, useEffect, useState } from "react"

 export default function ReviewPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params)
-  const order = useOrderStore((state) => state.orders.find((item) => item.id === id))
  const userId = useAuthStore((state) => state.user?.id)
-  const allReviews = useReviewStore((state) => state.reviews)
-  // The selector returns the raw store array and useMemo derives the subset.
-  // This keeps useSyncExternalStore snapshots stable across render checks.
-  // Inline filter inside the selector creates a new array reference each call
-  // and can cause infinite re-render loops in Zustand v5 (pmndrs/zustand#3155).
-  const reviews = useMemo(() => allReviews.filter((item) => item.orderId === id), [allReviews, id])
+
+  const [order, setOrder] = useState<Awaited<ReturnType<typeof getOrderById>>>()
+  const [reviews, setReviews] = useState<Awaited<ReturnType<typeof listReviewsByOrder>>>([])
+  const [loading, setLoading] = useState(true)
  const [rating, setRating] = useState(0)
  const [hoverRating, setHoverRating] = useState(0)
  const [content, setContent] = useState("")

+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+
+    Promise.all([getOrderById(id), Promise.resolve(listReviewsByOrder(id))])
+      .then(([nextOrder, nextReviews]) => {
+        if (cancelled) return
+        setOrder(nextOrder)
+        setReviews(nextReviews)
+      })
+      .catch(() => {
+        if (cancelled) return
+        setOrder(undefined)
+        setReviews([])
+      })
+      .finally(() => {
+        if (cancelled) return
+        setLoading(false)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [id])
+
+  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">
@@ -143,18 +170,23 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
                return
              }

-              const decision = submitReview({
+              Promise.resolve(
+                submitReview({
                  orderId: id,
                  rating,
                  content,
-              })
-
+                }),
+              ).then((decision) => {
                if (decision.ok) {
                  notifySuccess("评价已提交")
+                  Promise.resolve(listReviewsByOrder(id)).then((nextReviews) => {
+                    setReviews(nextReviews)
+                  })
                  return
                }

                notifyInfo(decision.error.msg)
+              })
            }}
          >
            提交评价
@@ -1,50 +1,189 @@
-import { deny } from "@/lib/decision"
-import { useAuthStore } from "@/store/auth"
-import { useDisputeStore } from "@/store/disputes"
+import { allow, deny } from "@/lib/decision"
+import { isApiError, toApiError, type ApiDecision } from "@/lib/errors"
+import type { Dispute } from "@/lib/types"

-export function listDisputes() {
-  return useDisputeStore.getState().disputes
+import { httpJson } from "./http"
+
+export type DisputeTimelineItem = {
+  id: string
+  content: string
+  createdAt: string
 }

-export function getDisputeByOrderId(orderId: string) {
-  return useDisputeStore.getState().disputes.find((dispute) => dispute.orderId === orderId)
+export type DisputeRecord = Dispute & {
+  respondentReason?: string
+  respondentEvidence: string[]
+  appealReason?: string
+  appealedAt?: string
+  timeline: DisputeTimelineItem[]
 }

-export function submitDispute(input: { orderId: string; reason: string; evidence: string[] }) {
-  const user = useAuthStore.getState().user
-  if (!user?.id || !user.nickname) {
-    return { decision: deny(401, "请先登录") }
+export type ListDisputesOptions = {
+  offset?: number
+  limit?: number
 }

-  return useDisputeStore.getState().submitDispute({
-    orderId: input.orderId,
-    initiatorId: user.id,
-    initiatorName: user.nickname,
-    reason: input.reason,
-    evidence: input.evidence,
+type Paginated<T> = {
+  items: T[]
+  meta?: {
+    total: number
+    offset: number
+    limit: number
+  }
+}
+
+function withOffsetLimit(path: string, options?: ListDisputesOptions): string {
+  const offset = options?.offset ?? 0
+  const limit = options?.limit ?? 1000
+
+  const searchParams = new URLSearchParams({
+    offset: String(offset),
+    limit: String(limit),
  })
+
+  return `${path}?${searchParams.toString()}`
 }

-export function submitDisputeResponse(input: {
+function unwrapItems<T>(value: unknown): T[] {
+  if (Array.isArray(value)) return value as T[]
+  if (typeof value !== "object" || value === null) throw new Error("Invalid response")
+  if ("items" in value) {
+    const envelope = value as { items?: unknown }
+    if (Array.isArray(envelope.items)) return envelope.items as T[]
+  }
+  throw new Error("Invalid response")
+}
+
+function unwrapDispute(value: unknown): unknown {
+  if (typeof value !== "object" || value === null) return value
+  if ("dispute" in value) {
+    const envelope = value as { dispute?: unknown }
+    return envelope.dispute
+  }
+  return value
+}
+
+function deriveMinimalTimeline(dispute: {
+  id: string
+  status: string
+  createdAt: string
+  timeline?: DisputeTimelineItem[]
+}): DisputeTimelineItem[] {
+  const existing = dispute.timeline
+  if (existing?.length) return existing
+
+  const steps = [
+    { status: "open", content: "争议已提交" },
+    { status: "reviewing", content: "平台审核中" },
+    { status: "resolved", content: "争议已解决" },
+    { status: "appealed", content: "已发起申诉" },
+  ]
+
+  const currentIndex = steps.findIndex((step) => step.status === dispute.status)
+  const lastIndex = currentIndex >= 0 ? currentIndex : 0
+  return steps.slice(0, lastIndex + 1).map((step) => ({
+    id: `${dispute.id}-${step.status}`,
+    content: step.content,
+    createdAt: dispute.createdAt,
+  }))
+}
+
+function normalizeDisputeRecord(value: unknown): DisputeRecord {
+  const dispute = unwrapDispute(value) as DisputeRecord
+  const respondentEvidence = Array.isArray(dispute.respondentEvidence)
+    ? dispute.respondentEvidence
+    : []
+  const evidence = Array.isArray(dispute.evidence) ? dispute.evidence : []
+  const timeline = deriveMinimalTimeline({
+    id: dispute.id,
+    status: dispute.status,
+    createdAt: dispute.createdAt,
+    timeline: dispute.timeline,
+  })
+
+  return {
+    ...dispute,
+    evidence,
+    respondentEvidence,
+    timeline,
+  }
+}
+
+function denyFromError(error: unknown): ApiDecision {
+  if (error instanceof Error && error.message === "UNAUTHORIZED") {
+    return deny(401, "请先登录")
+  }
+  const apiError = toApiError(error)
+  return deny(apiError.code, apiError.msg)
+}
+
+export async function listDisputes(options?: ListDisputesOptions): Promise<DisputeRecord[]> {
+  const res = await httpJson<Paginated<DisputeRecord> | DisputeRecord[]>(
+    withOffsetLimit("/api/v1/disputes", options),
+    { cache: "no-store" },
+  )
+  return unwrapItems<DisputeRecord>(res).map((item) => normalizeDisputeRecord(item))
+}
+
+export async function getDisputeByOrderId(orderId: string): Promise<DisputeRecord | undefined> {
+  try {
+    const res = await httpJson<unknown>(`/api/v1/orders/${encodeURIComponent(orderId)}/dispute`, {
+      cache: "no-store",
+    })
+    return normalizeDisputeRecord(res)
+  } catch (error) {
+    const apiError = isApiError(error) ? error : toApiError(error)
+    if (apiError.code === 404) return undefined
+    throw error
+  }
+}
+
+export async function submitDispute(input: {
+  orderId: string
+  reason: string
+  evidence: string[]
+}): Promise<{ decision: ApiDecision }> {
+  try {
+    await httpJson<unknown>(`/api/v1/orders/${encodeURIComponent(input.orderId)}/dispute`, {
+      method: "POST",
+      cache: "no-store",
+      json: { reason: input.reason, evidence: input.evidence },
+    })
+    return { decision: allow() }
+  } catch (error) {
+    return { decision: denyFromError(error) }
+  }
+}
+
+export async function submitDisputeResponse(input: {
  disputeId: string
  reason: string
  evidence: string[]
-}) {
-  const userId = useAuthStore.getState().user?.id
-  if (!userId) {
-    return deny(401, "请先登录")
+}): Promise<ApiDecision> {
+  try {
+    await httpJson<unknown>(`/api/v1/disputes/${encodeURIComponent(input.disputeId)}/response`, {
+      method: "POST",
+      cache: "no-store",
+      json: { reason: input.reason, evidence: input.evidence },
+    })
+    return allow()
+  } catch (error) {
+    return denyFromError(error)
+  }
 }

-  return useDisputeStore
-    .getState()
-    .submitResponse(input.disputeId, userId, input.reason, input.evidence)
+export async function submitDisputeAppeal(input: {
+  disputeId: string
+  reason: string
+}): Promise<ApiDecision> {
+  try {
+    await httpJson<unknown>(`/api/v1/disputes/${encodeURIComponent(input.disputeId)}/appeal`, {
+      method: "POST",
+      cache: "no-store",
+      json: { reason: input.reason },
+    })
+    return allow()
+  } catch (error) {
+    return denyFromError(error)
  }
-
-export function submitDisputeAppeal(input: { disputeId: string; reason: string }) {
-  const userId = useAuthStore.getState().user?.id
-  if (!userId) {
-    return deny(401, "请先登录")
-  }
-
-  return useDisputeStore.getState().submitAppeal(input.disputeId, userId, input.reason)
 }
@@ -1,29 +1,89 @@
-import { deny } from "@/lib/decision"
-import { useAuthStore } from "@/store/auth"
-import { useReviewStore } from "@/store/reviews"
+import { allow, deny } from "@/lib/decision"
+import { toApiError, type ApiDecision } from "@/lib/errors"
+import type { Review } from "@/lib/types"

-export function listReviews() {
-  return useReviewStore.getState().reviews
+import { httpJson } from "./http"
+
+type Paginated<T> = {
+  items: T[]
+  meta: {
+    total: number
+    offset: number
+    limit: number
+  }
 }

-export function listReviewsByOrder(orderId: string) {
-  return useReviewStore.getState().reviews.filter((review) => review.orderId === orderId)
+export type ListReviewsOptions = {
+  offset?: number
+  limit?: number
 }

-export function listReviewsByTargetUser(userId: string) {
-  return useReviewStore.getState().reviews.filter((review) => review.toUserId === userId)
+function withOffsetLimit(path: string, options?: ListReviewsOptions): string {
+  const offset = options?.offset ?? 0
+  const limit = options?.limit ?? 1000
+
+  const searchParams = new URLSearchParams({
+    offset: String(offset),
+    limit: String(limit),
+  })
+  return `${path}?${searchParams.toString()}`
 }

-export function submitReview(input: { orderId: string; rating: number; content?: string }) {
-  const userId = useAuthStore.getState().user?.id
-  if (!userId) {
+function unwrapItems<T>(value: unknown): T[] {
+  if (Array.isArray(value)) return value as T[]
+  if (typeof value !== "object" || value === null) {
+    throw new Error("Invalid response")
+  }
+  if ("items" in value) {
+    const envelope = value as { items?: unknown }
+    if (Array.isArray(envelope.items)) return envelope.items as T[]
+  }
+  throw new Error("Invalid response")
+}
+
+export async function listReviews(options?: ListReviewsOptions): Promise<Review[]> {
+  const res = await httpJson<Paginated<Review> | Review[]>(
+    withOffsetLimit("/api/v1/reviews", options),
+    {
+      cache: "no-store",
+    },
+  )
+  return unwrapItems<Review>(res)
+}
+
+export async function listReviewsByOrder(orderId: string): Promise<Review[]> {
+  const res = await httpJson<Paginated<Review> | Review[]>(
+    `/api/v1/orders/${encodeURIComponent(orderId)}/reviews`,
+    { cache: "no-store" },
+  )
+  return unwrapItems<Review>(res)
+}
+
+export async function listReviewsByTargetUser(userId: string): Promise<Review[]> {
+  const res = await httpJson<Paginated<Review> | Review[]>(
+    `/api/v1/users/${encodeURIComponent(userId)}/reviews`,
+    { cache: "no-store" },
+  )
+  return unwrapItems<Review>(res)
+}
+
+export async function submitReview(input: {
+  orderId: string
+  rating: number
+  content?: string
+}): Promise<ApiDecision> {
+  try {
+    await httpJson<unknown>(`/api/v1/orders/${encodeURIComponent(input.orderId)}/review`, {
+      method: "POST",
+      cache: "no-store",
+      json: { rating: input.rating, content: input.content },
+    })
+    return allow()
+  } catch (error) {
+    if (error instanceof Error && error.message === "UNAUTHORIZED") {
      return deny(401, "请先登录")
    }
-
-  return useReviewStore.getState().submitReview({
-    orderId: input.orderId,
-    fromUserId: userId,
-    rating: input.rating,
-    content: input.content,
-  })
+    const apiError = toApiError(error)
+    return deny(apiError.code, apiError.msg)
+  }
 }