更新了购买套餐里的充值和立即支付的传参，增加我的账单模块待支付链接跳转和弹窗

src/app/admin/bills/page.tsx

@@ -4,7 +4,7 @@ import {PageRecord} from '@/lib/api'
 import {Bill} from '@/lib/models'
 import {useStatus} from '@/lib/states'
 import {listBills} from '@/actions/bill'
-import {Search, Eraser, CreditCard, AlertCircle, CheckCircle, Clock, ClockIcon} from 'lucide-react'
+import {Search, Eraser, CreditCard} from 'lucide-react'
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
 import {Button} from '@/components/ui/button'
 import DataTable from '@/components/data-table'
@@ -16,7 +16,7 @@ import zod from 'zod'
 import {zodResolver} from '@hookform/resolvers/zod'
 import {Label} from '@/components/ui/label'
 import Page from '@/components/page'
-import Link from 'next/link'
+import {PaymentStatusCell} from '@/components/composites/payment'
 
 const filterSchema = zod.object({
   type: zod.enum(['all', '3', '1', '2']).default('all'),
@@ -29,10 +29,6 @@ type FilterSchema = zod.infer<typeof filterSchema>
 export type BillsPageProps = {}
 
 export default function BillsPage(props: BillsPageProps) {
-  // ======================
-  // 查询
-  // ======================
-
   const [status, setStatus] = useStatus()
   const [data, setData] = useState<PageRecord<Bill>>({
     page: 1,
@@ -70,10 +66,6 @@ export default function BillsPage(props: BillsPageProps) {
     refresh(1, 10).then()
   }, [])
 
-  // ======================
-  // 筛选
-  // ======================
-
   const form = useForm<FilterSchema>({
     resolver: zodResolver(filterSchema),
     defaultValues: {
@@ -86,14 +78,8 @@ export default function BillsPage(props: BillsPageProps) {
     await refresh(1, data.size)
   }
 
-  // ======================
-  // render
-  // ======================
-
   return (
     <Page>
-
-      {/* 操作区 */}
       <section className="flex justify-between flex-wrap">
         <div>
         </div>
@@ -151,7 +137,6 @@ export default function BillsPage(props: BillsPageProps) {
         </Form>
       </section>
 
-      {/* 数据表 */}
       <DataTable
         data={data.list}
         status={status}
@@ -197,58 +182,36 @@ export default function BillsPage(props: BillsPageProps) {
             accessorKey: 'info', header: `账单详情`,
           },
           {
-            accessorKey: 'status', header: `状态`, cell: ({row}) => (
-              <>
-                {row.original.trade && (
-                  row.original.trade.status === 0 ? (
-                    <div className="flex flex-col gap-1">
-                      <div className="flex gap-1 items-center text-warn">
-                        <ClockIcon size={16}/>
-                        <span>订单待支付</span>
-                        <Link href="/admin/bills" className="text-sm underline text-blue-500">
-                          {row.original.trade.inner_no}
-                        </Link>
-                      </div>
-
-                    </div>
-                  ) : row.original.trade.status === 1 ? (
-                    <div className="flex gap-1 items-center text-done">
-                      <CheckCircle size={16}/>
-                      <span>已完成</span>
-                    </div>
-                  ) : row.original.trade.status === 2 ? (
-                    <div className="flex gap-1 items-center text-weak">
-                      <AlertCircle size={16}/>
-                      <span>已取消</span>
-                    </div>
-                  ) : row.original.trade.status === 3 ? (
-                    <div className="flex gap-1 items-center text-fail">
-                      <AlertCircle size={16}/>
-                      <span>已退款</span>
-                    </div>
-                  ) : (
-                    <span>-</span>
-                  )
-                )}
-              </>
+            accessorKey: 'status',
+            header: `状态`,
+            cell: ({row}) => (
+              <PaymentStatusCell trade={{
+                ...row.original.trade,
+                amount: row.original.amount,
+              }}/>
             ),
           },
           {
-            accessorKey: 'amount', header: `支付信息`, cell: ({row}) => (
-              <div className="flex gap-1">
-                <span className="text-sm">
-                  {!row.original.trade && '余额'}
-                  {row.original.trade && row.original.trade.method === 1 && '支付宝'}
-                  {row.original.trade && row.original.trade.method === 2 && '微信'}
-                </span>
-                <span className={
-                  row.original.amount > 0 ? `text-green-400` : `text-orange-400`
-                }>
-                  ￥
-                  {row.original.amount}
-                </span>
-              </div>
-            ),
+            accessorKey: 'amount',
+            header: '支付信息',
+            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="text-sm">
+                    {!row.original.trade && '余额'}
+                    {row.original.trade && row.original.trade.method === 1 && '支付宝'}
+                    {row.original.trade && row.original.trade.method === 2 && '微信'}
+                  </span>
+                  <span className={amount > 0 ? 'text-green-400' : 'text-orange-400'}>
+                    ￥
+                    {amount.toFixed(2)}
+                  </span>
+                </div>
+              )
+            },
           },
           {
             accessorKey: 'created_at', header: '创建时间', cell: ({row}) => (