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

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

@@ -1,26 +1,95 @@
 "use client"
+import { format } from "date-fns"
+import { CreditCard } from "lucide-react"
 import { Suspense } from "react"
 import { getPageBill } from "@/actions/bill"
 import { DataTable, useDataTable } from "@/components/data-table"
-import type { User } from "@/models/user"
+import type { Billing } from "@/models/billing"
 
-export default function UserPage() {
-  const table = useDataTable<User>((page, size) => getPageBill({ page, size }))
+export default function BillingPage() {
+  const table = useDataTable<Billing>((page, size) =>
+    getPageBill({ page, size }),
+  )
   console.log(table, "table")
 
   return (
     <Suspense>
-      <DataTable<User>
+      <DataTable<Billing>
         {...table}
         columns={[
           { header: "ID", accessorKey: "id" },
           { header: "账单号", accessorKey: "bill_no" },
-          { header: "信息", accessorKey: "info" },
-          { header: "金额", accessorKey: "amount" },
-          { header: "可用资源", accessorKey: "resource_id" },
-          { header: "类型", accessorKey: "type" },
-          { header: "创建时间", accessorKey: "created_at" },
-          { header: "更新时间", accessorKey: "updated_at" },
+          {
+            header: "账单详情",
+            accessorKey: "info",
+            cell: ({ row }) => {
+              const bill = row.original
+              console.log(bill, "bill")
+
+              return (
+                <div className="flex items-center gap-2">
+                  {/* 类型展示 */}
+                  <div className="shrink-0">
+                    {bill.type === 1 && (
+                      <div className="flex gap-2 items-center bg-orange-50 w-fit px-2 py-1 rounded-md">
+                        <CreditCard size={16} />
+                        <span>消费</span>
+                      </div>
+                    )}
+                    {bill.type === 2 && (
+                      <div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
+                        <CreditCard size={16} />
+                        <span>退款</span>
+                      </div>
+                    )}
+                    {bill.type === 3 && (
+                      <div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
+                        <CreditCard size={16} />
+                        <span>充值</span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* 账单详情 */}
+                  <div className="text-sm">{bill.info}</div>
+                </div>
+              )
+            },
+          },
+          {
+            header: "支付信息",
+            accessorKey: "amount",
+            cell: ({ row }) => {
+              const amount =
+                typeof row.original.amount === "string"
+                  ? parseFloat(row.original.amount)
+                  : row.original.amount || 0
+              return (
+                <div className="flex gap-1">
+                  <span
+                    className={
+                      amount > 0 ? "text-green-500" : "text-orange-500"
+                    }
+                  >
+                    ￥{amount.toFixed(2)}
+                  </span>
+                </div>
+              )
+            },
+          },
+          // { header: "资源数量", accessorKey: "resource_id" },
+          {
+            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>