新增余额明细页面,修复页面useId不更新的问题

src/app/(root)/trade/page.tsx

@@ -2,10 +2,12 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { format } from "date-fns"
 import { CheckCircle, Clock, XCircle } from "lucide-react"
-import { Suspense, useState } from "react"
+import { Suspense, useCallback, useState } from "react"
 import { Controller, useForm } from "react-hook-form"
+import { toast } from "sonner"
 import { z } from "zod"
-import { getPageTrade } from "@/actions/trade"
+import { getPageTrade, getTradeComplete } from "@/actions/trade"
+import { Auth } from "@/components/auth"
 import { DataTable, useDataTable } from "@/components/data-table"
 import { Button } from "@/components/ui/button"
 import {
@@ -22,6 +24,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
+import { ScopeTradeWriteComplete } from "@/lib/scopes"
 import type { Trade } from "@/models/trade"
 
 type FilterValues = {
@@ -82,9 +85,14 @@ export default function TradePage() {
     },
   })
 
-  const table = useDataTable<Trade>((page, size) =>
-    getPageTrade({ page, size, ...filters }),
+  const fetchTrades = useCallback(
+    (page: number, size: number) => {
+      return getPageTrade({ page, size, ...filters })
+    },
+    [filters],
   )
+
+  const table = useDataTable<Trade>(fetchTrades)
   const onFilter = handleSubmit(data => {
     const result: FilterValues = {}
 
@@ -105,6 +113,27 @@ export default function TradePage() {
     table.pagination.onPageChange(1)
   })
 
+  const [completingId, setCompletingId] = useState<string | null>(null)
+
+  const handleComplete = async (trade: Trade) => {
+    if (completingId) return
+    setCompletingId(trade.inner_no)
+    try {
+      const result = await getTradeComplete({
+        user_id: Number(trade.user_id),
+        trade_no: trade.inner_no,
+        method: trade.method,
+      })
+      if (result.success) {
+        toast.success("订单已完成")
+      } else {
+        toast.error(result.message || "操作失败")
+      }
+    } catch (error) {
+      console.error("完成订单失败:", error)
+      toast.error("网络错误，请稍后重试")
+    }
+  }
   return (
     <div className="space-y-3">
       {/* 筛选表单 */}
@@ -260,7 +289,7 @@ export default function TradePage() {
           columns={[
             {
               header: "会员号",
-              accessorFn: row => row.user?.phone || "-",
+              accessorFn: row => row.user?.phone || "",
             },
             {
               header: "订单号",
@@ -368,6 +397,30 @@ export default function TradePage() {
               cell: ({ row }) =>
                 format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
             },
+            {
+              id: "action",
+              meta: { pin: "right" },
+              header: "操作",
+              cell: ({ row }) => {
+                const isPending = row.original.status === 0
+                const isLoading = completingId === row.original.inner_no
+                return (
+                  <div className="flex  gap-2">
+                    <Auth scope={ScopeTradeWriteComplete}>
+                      {isPending && (
+                        <Button
+                          size="sm"
+                          onClick={() => handleComplete(row.original)}
+                          disabled={isLoading}
+                        >
+                          {isLoading ? "处理中..." : "完成订单"}
+                        </Button>
+                      )}
+                    </Auth>
+                  </div>
+                )
+              },
+            },
           ]}
         />
       </Suspense>