From 977d19ed5c7a4a2b13418dfc211f4fb4f12c5cda Mon Sep 17 00:00:00 2001
From: zetaloop <zetaloop@outlook.com>
Date: Fri, 20 Feb 2026 22:45:38 +0800
Subject: [PATCH] feat: add executable actions to order flow

---
 app/(order)/order/[id]/page.tsx |  59 +++-------------
 app/(order)/order/new/page.tsx  |  27 ++++++-
 app/(order)/orders/page.tsx     |   8 ++-
 components/order-actions.tsx    | 121 ++++++++++++++++++++++++++++++++
 4 files changed, 158 insertions(+), 57 deletions(-)
 create mode 100644 components/order-actions.tsx

diff --git a/app/(order)/order/[id]/page.tsx b/app/(order)/order/[id]/page.tsx
index dcfdf5a..a4453f4 100644
--- a/app/(order)/order/[id]/page.tsx
+++ b/app/(order)/order/[id]/page.tsx
@@ -1,17 +1,8 @@
-import {
-  AlertTriangle,
-  ArrowLeft,
-  CheckCircle,
-  Clock,
-  MessageSquare,
-  RefreshCw,
-  Star,
-  XCircle,
-} from "lucide-react"
+import { ArrowLeft, CheckCircle, Clock, Star } from "lucide-react"
 import Link from "next/link"
 import { notFound } from "next/navigation"
+import OrderActions from "@/components/order-actions"
 import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
 import { statusLabels } from "@/lib/constants"
@@ -195,46 +186,12 @@ export default async function OrderDetailPage({ params }: { params: Promise<{ id
         </Card>
       )}
 
-      <div className="flex gap-2 flex-wrap">
-        {order.status === "pending_accept" && (
-          <Button variant="outline">
-            <XCircle className="mr-1 h-4 w-4" />
-            取消订单
-          </Button>
-        )}
-        {(order.status === "in_progress" || order.status === "pending_close") && chatSession && (
-          <Button asChild>
-            <Link href={`/chat/${chatSession.id}`}>
-              <MessageSquare className="mr-1 h-4 w-4" />
-              聊天
-            </Link>
-          </Button>
-        )}
-        {order.status === "pending_review" && (
-          <Button asChild>
-            <Link href={`/review/${order.id}`}>
-              <Star className="mr-1 h-4 w-4" />
-              评价
-            </Link>
-          </Button>
-        )}
-        {["in_progress", "pending_close"].includes(order.status) && (
-          <Button variant="destructive" asChild>
-            <Link href={`/dispute/${order.id}`}>
-              <AlertTriangle className="mr-1 h-4 w-4" />
-              发起争议
-            </Link>
-          </Button>
-        )}
-        {order.status === "completed" && (
-          <Button variant="outline" asChild>
-            <Link href={`/order/new?serviceId=${order.service.id}`}>
-              <RefreshCw className="mr-1 h-4 w-4" />
-              再来一单
-            </Link>
-          </Button>
-        )}
-      </div>
+      <OrderActions
+        orderId={order.id}
+        initialStatus={order.status}
+        chatSessionId={chatSession?.id}
+        serviceId={order.service.id}
+      />
     </div>
   )
 }
diff --git a/app/(order)/order/new/page.tsx b/app/(order)/order/new/page.tsx
index 9534859..a452b48 100644
--- a/app/(order)/order/new/page.tsx
+++ b/app/(order)/order/new/page.tsx
@@ -2,7 +2,7 @@
 
 import { ArrowLeft, CheckCircle, CreditCard, ShieldCheck } from "lucide-react"
 import Link from "next/link"
-import { useSearchParams } from "next/navigation"
+import { useRouter, useSearchParams } from "next/navigation"
 import { useState } from "react"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
@@ -11,10 +11,16 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
 import { Textarea } from "@/components/ui/textarea"
-import { mockPlayers, mockServices, walletBalance } from "@/lib/mock-data"
+import { mockOrders, mockPlayers, mockServices, walletBalance } from "@/lib/mock-data"
 import { useRequireAuth } from "@/lib/use-require-auth"
 
+function showFeedback(message: string) {
+  if (typeof window === "undefined") return
+  window.alert(message)
+}
+
 export default function NewOrderPage() {
+  const router = useRouter()
   const searchParams = useSearchParams()
   const { requireAuth } = useRequireAuth()
   const serviceId = searchParams.get("serviceId")
@@ -35,6 +41,8 @@ export default function NewOrderPage() {
   }
 
   const totalPrice = service.price * quantity
+  const redirectOrderId =
+    mockOrders.find((order) => order.service.id === service.id)?.id ?? mockOrders[0]?.id
 
   if (submitted) {
     return (
@@ -170,7 +178,20 @@ export default function NewOrderPage() {
           className="w-full"
           size="lg"
           disabled={walletBalance < totalPrice}
-          onClick={() => requireAuth(() => setSubmitted(true))}
+          onClick={() =>
+            requireAuth(async () => {
+              await new Promise((resolve) => setTimeout(resolve, 500))
+              setSubmitted(true)
+              showFeedback("下单成功")
+              if (redirectOrderId) {
+                setTimeout(() => {
+                  router.push(`/order/${redirectOrderId}`)
+                }, 800)
+                return
+              }
+              router.push("/orders")
+            })
+          }
         >
           确认支付 ¥{totalPrice}
         </Button>
diff --git a/app/(order)/orders/page.tsx b/app/(order)/orders/page.tsx
index c7749ec..668ce9f 100644
--- a/app/(order)/orders/page.tsx
+++ b/app/(order)/orders/page.tsx
@@ -145,9 +145,11 @@ export default function OrderListPage() {
                           )
                         })()}
                       {order.status === "completed" && (
-                        <Button variant="outline" size="sm">
-                          <RefreshCw className="mr-1 h-3.5 w-3.5" />
-                          再来一单
+                        <Button variant="outline" size="sm" asChild>
+                          <Link href={`/order/new?playerId=${order.playerId}`}>
+                            <RefreshCw className="mr-1 h-3.5 w-3.5" />
+                            再来一单
+                          </Link>
                         </Button>
                       )}
                       <Button size="sm" asChild>
diff --git a/components/order-actions.tsx b/components/order-actions.tsx
new file mode 100644
index 0000000..7c59c13
--- /dev/null
+++ b/components/order-actions.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import { AlertTriangle, CheckCircle2, MessageSquare, RefreshCw, Star, XCircle } from "lucide-react"
+import Link from "next/link"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import type { OrderStatus } from "@/lib/types"
+
+interface OrderActionsProps {
+  orderId: string
+  initialStatus: OrderStatus
+  chatSessionId?: string
+  serviceId: string
+}
+
+function showFeedback(message: string) {
+  if (typeof window === "undefined") return
+  window.alert(message)
+}
+
+export default function OrderActions({
+  orderId,
+  initialStatus,
+  chatSessionId,
+  serviceId,
+}: OrderActionsProps) {
+  const [status, setStatus] = useState<OrderStatus>(initialStatus)
+
+  return (
+    <div className="flex gap-2 flex-wrap">
+      {status === "pending_accept" && (
+        <>
+          <Button
+            variant="outline"
+            onClick={() => {
+              setStatus("cancelled")
+              showFeedback("订单已取消")
+            }}
+          >
+            <XCircle className="mr-1 h-4 w-4" />
+            取消订单
+          </Button>
+          <Button
+            onClick={() => {
+              setStatus("in_progress")
+              showFeedback("已接单")
+            }}
+          >
+            <CheckCircle2 className="mr-1 h-4 w-4" />
+            接单
+          </Button>
+        </>
+      )}
+
+      {(status === "in_progress" || status === "pending_close") && chatSessionId && (
+        <Button asChild>
+          <Link href={`/chat/${chatSessionId}`}>
+            <MessageSquare className="mr-1 h-4 w-4" />
+            聊天
+          </Link>
+        </Button>
+      )}
+
+      {status === "in_progress" && (
+        <>
+          <Button
+            onClick={() => {
+              setStatus("pending_close")
+              showFeedback("已发起结单")
+            }}
+          >
+            发起结单
+          </Button>
+          <Button variant="destructive" asChild>
+            <Link href={`/dispute/${orderId}`}>
+              <AlertTriangle className="mr-1 h-4 w-4" />
+              发起争议
+            </Link>
+          </Button>
+        </>
+      )}
+
+      {status === "pending_close" && (
+        <>
+          <Button
+            onClick={() => {
+              setStatus("completed")
+              showFeedback("订单已完成")
+            }}
+          >
+            确认结单
+          </Button>
+          <Button variant="destructive" asChild>
+            <Link href={`/dispute/${orderId}`}>
+              <AlertTriangle className="mr-1 h-4 w-4" />
+              发起争议
+            </Link>
+          </Button>
+        </>
+      )}
+
+      {status === "pending_review" && (
+        <Button asChild>
+          <Link href={`/review/${orderId}`}>
+            <Star className="mr-1 h-4 w-4" />
+            评价
+          </Link>
+        </Button>
+      )}
+
+      {status === "completed" && (
+        <Button variant="outline" asChild>
+          <Link href={`/order/new?serviceId=${serviceId}`}>
+            <RefreshCw className="mr-1 h-4 w-4" />
+            再来一单
+          </Link>
+        </Button>
+      )}
+    </div>
+  )
+}