调整列表字段和枚举值转换

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

@@ -1,30 +1,128 @@
 "use client"
+import { format } from "date-fns"
+import { CheckCircle, Clock, XCircle } from "lucide-react"
 import { Suspense } from "react"
 import { getPageTrade } from "@/actions/trade"
 import { DataTable, useDataTable } from "@/components/data-table"
-import type { User } from "@/models/user"
+import type { Trade } from "@/models/trade"
 
-export default function UserPage() {
-  const table = useDataTable<User>((page, size) => getPageTrade({ page, size }))
+export default function TradePage() {
+  const table = useDataTable<Trade>((page, size) =>
+    getPageTrade({ page, size }),
+  )
   console.log(table, "table")
 
   return (
     <Suspense>
-      <DataTable<User>
+      <DataTable<Trade>
         {...table}
         columns={[
           { header: "ID", accessorKey: "id" },
           { header: "套餐号", accessorKey: "inner_no" },
-          { header: "支付方式", accessorKey: "method" },
-          { header: "支付金额", accessorKey: "payment" },
-          { header: "支付平台", accessorKey: "platform" },
-          { header: "已退款", accessorKey: "refunded" },
-          { header: "支付状态", accessorKey: "status" },
+          {
+            header: "支付方式",
+            accessorKey: "method",
+            cell: ({ row }) => {
+              const methodMap: Record<number, string> = {
+                1: "支付宝",
+                2: "微信",
+                3: "其他",
+                4: "支付宝",
+                5: "微信",
+              }
+              return (
+                <div>{methodMap[row.original.method as number] || "未知"}</div>
+              )
+            },
+          },
+          {
+            header: "支付金额",
+            accessorKey: "payment",
+            cell: ({ row }) => {
+              const payment =
+                typeof row.original.payment === "string"
+                  ? parseFloat(row.original.payment)
+                  : row.original.payment || 0
+              return (
+                <div className="flex gap-1">
+                  <span
+                    className={
+                      payment > 0 ? "text-green-500" : "text-orange-500"
+                    }
+                  >
+                    ￥{payment.toFixed(2)}
+                  </span>
+                </div>
+              )
+            },
+          },
+          {
+            header: "支付平台",
+            accessorKey: "platform",
+            cell: ({ row }) => {
+              const platform = row.original.platform
+              if (!platform) return <span>-</span>
+              return (
+                <div className="flex items-center gap-2">
+                  {platform === 1 ? (
+                    <span>电脑网站</span>
+                  ) : platform === 2 ? (
+                    <span>手机网站</span>
+                  ) : (
+                    <span>-</span>
+                  )}
+                </div>
+              )
+            },
+          },
+          // { header: "已退款", accessorKey: "refunded" },
+          {
+            header: "支付状态",
+            accessorKey: "status",
+            cell: ({ row }) => {
+              const status = row.original.status
+
+              switch (status) {
+                case 0:
+                  return (
+                    <div className="flex items-center gap-2 text-yellow-600">
+                      <Clock className="h-4 w-4" />
+                      <span>待支付</span>
+                    </div>
+                  )
+                case 1:
+                  return (
+                    <div className="flex items-center gap-2 text-green-600">
+                      <CheckCircle className="h-4 w-4" />
+                      <span>支付成功</span>
+                    </div>
+                  )
+                case 2:
+                  return (
+                    <div className="flex items-center gap-2 text-gray-500">
+                      <XCircle className="h-4 w-4" />
+                      <span>取消支付</span>
+                    </div>
+                  )
+                default:
+                  return <span className="text-gray-400">-</span>
+              }
+            },
+          },
           { header: "购买套餐", accessorKey: "subject" },
           { header: "类型", accessorKey: "type" },
-          { header: "创建时间", accessorKey: "created_at" },
-          { header: "更新时间", accessorKey: "updated_at" },
-          { header: "过期时间", accessorKey: "canceled_at" },
+          {
+            header: "创建时间",
+            accessorKey: "created_at",
+            cell: ({ row }) =>
+              format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
+          },
+          {
+            header: "更新时间",
+            accessorKey: "updated_at",
+            cell: ({ row }) =>
+              format(new Date(row.original.updated_at), "yyyy-MM-dd HH:mm"),
+          },
         ]}
       />
     </Suspense>