更新充值和购买支付宝接口和传参，我的账单列表更新&解决banner拉伸&更新登录的访问令牌

src/app/admin/(dashboard)/page.tsx

@@ -43,7 +43,7 @@ export default async function DashboardPage(props: DashboardPageProps) {
     >
       {/* banner */}
       <section className="md:row-start-1 md:col-start-1 md:col-span-3 relative md:rounded-lg overflow-hidden hidden md:block">
-        <Image src={banner} alt="banner image" className="w-full h-full inset-0 absolute "/>
+        <Image src={banner} alt="banner image" className="w-full h-full inset-0 absolute object-cover "/>
         <div className="flex flex-col absolute inset-0 justify-center px-8 gap-1">
           <h3 className="text-2xl text-balance text-primary font-medium">代理IP资源，先测后买</h3>
           <p className="text-primary text-balance font-medium">短效/长效/固定IP代理，一站式服务</p>

src/app/admin/bills/page.tsx

@@ -16,12 +16,14 @@ import zod from 'zod'
 import {zodResolver} from '@hookform/resolvers/zod'
 import {Label} from '@/components/ui/label'
 import Page from '@/components/page'
-import {PaymentStatusCell} from './payment'
+import {CheckCircle, AlertCircle} from 'lucide-react'
+import {Input} from '@/components/ui/input'
 
 const filterSchema = zod.object({
   type: zod.enum(['all', '3', '1', '2']).default('all'),
   create_after: zod.date().optional(),
   create_before: zod.date().optional(),
+  trade_id: zod.string().optional(),
 })
 
 type FilterSchema = zod.infer<typeof filterSchema>
@@ -44,9 +46,10 @@ export default function BillsPage(props: BillsPageProps) {
       const type = typeValue === 'all' ? undefined : parseInt(typeValue)
       const create_after = form.getValues('create_after')
       const create_before = form.getValues('create_before')
+      const trade_id = form.getValues('trade_id')
 
       const res = await listBills({
-        page, size, type, create_after, create_before,
+        page, size, type, create_after, create_before, trade_id,
       })
 
       if (res.success) {
@@ -70,6 +73,9 @@ export default function BillsPage(props: BillsPageProps) {
     resolver: zodResolver(filterSchema),
     defaultValues: {
       type: 'all',
+      trade_id: '',
+      create_after: undefined,
+      create_before: undefined,
     },
   })
 
@@ -85,6 +91,16 @@ export default function BillsPage(props: BillsPageProps) {
         </div>
 
         <Form form={form} onSubmit={onSubmit} className="flex items-end gap-4 flex-wrap">
+          <FormField name="trade_id" label={<span className="text-sm">订单号</span>}>
+            {({id, field}) => (
+              <Input
+                {...field}
+                id={id}
+                className="h-9 text-sm"
+                placeholder="输入订单号"
+              />
+            )}
+          </FormField>
           <FormField name="type" label={<span className="text-sm">账单类型</span>}>
             {({id, field}) => (
               <Select value={field.value} onValueChange={field.onChange}>
@@ -154,42 +170,67 @@ export default function BillsPage(props: BillsPageProps) {
         columns={[
           {
             accessorKey: 'bill_no', header: `账单编号`,
-          }, {
-            accessorKey: 'type', header: `类型`, cell: ({row}) => (
-              <div className="flex gap-2 items-center">
-                {row.original.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>
-                )}
-                {row.original.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>
-                )}
-                {row.original.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>
-            ),
           },
           {
-            accessorKey: 'info', header: `账单详情`,
+            accessorKey: 'info',
+            header: `账单详情`,
+            cell: ({row}) => {
+              const bill = row.original
+              return (
+                <div className="flex items-center gap-2">
+                  {/* 类型展示 */}
+                  <div className="flex-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>
+              )
+            },
           },
           {
             accessorKey: 'status',
             header: `状态`,
-            cell: ({row}) => (
-              <PaymentStatusCell trade={{
-                ...row.original.trade,
-                amount: row.original.amount,
-              }}/>
-            ),
+            cell: ({row}) => {
+              const trade = row.original.trade
+              if (!trade) return <span>-</span>
+              return (
+                <div className="flex items-center gap-2">
+                  {trade?.status === 1 ? (
+                    <CheckCircle size={16} className="text-done"/>
+                  ) : trade?.status === 2 ? (
+                    <AlertCircle size={16} className="text-weak"/>
+                  ) : trade?.status === 3 ? (
+                    <AlertCircle size={16} className="text-fail"/>
+                  ) : null}
+                  <span>
+                    {trade?.status === 1 ? '已完成'
+                      : trade?.status === 2 ? '已取消'
+                        : trade?.status === 3 ? '已退款' : '-'}
+                  </span>
+                </div>
+              )
+            },
           },
           {
             accessorKey: 'amount',
@@ -198,17 +239,25 @@ export default function BillsPage(props: BillsPageProps) {
               const amount = typeof row.original.amount === 'string'
                 ? parseFloat(row.original.amount)
                 : row.original.amount || 0
+              const trade = row.original.trade
               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 className="flex flex-col gap-1">
+                  <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>
+                  {trade?.inner_no && (
+                    <div className="text-xs text-gray-500">
+                      订单号: {trade.inner_no}
+                    </div>
+                  )}
                 </div>
               )
             },

src/app/admin/bills/payment-dialog.tsx

@@ -1,161 +0,0 @@
-'use client'
-import {useEffect, useRef, useState, useMemo} from 'react'
-import * as qrcode from 'qrcode'
-import {Dialog, DialogContent, DialogHeader, DialogTitle} from '@/components/ui/dialog'
-import {Button} from '@/components/ui/button'
-import {Loader, CheckCircle} from 'lucide-react'
-import {toast} from 'sonner'
-import wechat from '@/components/composites/purchase/_assets/wechat.svg'
-import alipay from '@/components/composites/purchase/_assets/alipay.svg'
-import Image from 'next/image'
-import {completeResource} from '@/actions/resource'
-
-export function PaymentDialog({trade, open, onOpenChange}: {
-  trade: {
-    inner_no: string
-    method: number
-    pay_url?: string
-    amount?: number
-  }
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}) {
-  const [loading, setLoading] = useState(false)
-  const [paymentVerified, setPaymentVerified] = useState(false)
-
-  const paymentInfo = useMemo(() => {
-    return trade.method === 1 ? {
-      icon: alipay,
-      name: '支付宝',
-    } : {
-      icon: wechat,
-      name: '微信支付',
-    }
-  }, [trade.method])
-
-  const canvas = useRef<HTMLCanvasElement>(null)
-  // 生成微信二维码
-  useEffect(() => {
-    if (!open || !canvas.current || trade.method === 1 || !trade.pay_url) return
-    qrcode.toCanvas(canvas.current, trade.pay_url, {
-      width: 200,
-      margin: 0,
-    }).catch((err) => {
-      console.error('生成二维码失败:', err)
-      toast.error('生成支付二维码失败')
-    })
-  }, [open, trade.method, trade.pay_url])
-
-  // 支付成功后自动关闭
-  useEffect(() => {
-    if (paymentVerified) {
-      const timer = setTimeout(() => {
-        onOpenChange(false)
-        setPaymentVerified(false)
-      }, 2000)
-      return () => clearTimeout(timer)
-    }
-  }, [paymentVerified, onOpenChange])
-
-  const handleComplete = async () => {
-    setLoading(true)
-    try {
-      const resp = await completeResource({
-        trade_no: trade.inner_no,
-      })
-      if (!resp.success) {
-        throw new Error(resp.message)
-      }
-      toast.success('支付成功')
-      setPaymentVerified(true)
-    }
-    catch (e) {
-      toast.error('支付验证失败', {
-        description: (e as Error).message,
-      })
-    }
-    finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent onOpenAutoFocus={() => {
-        if (canvas.current && trade.pay_url) {
-          qrcode.toCanvas(canvas.current, trade.pay_url, {width: 200})
-        }
-      }}>
-        <DialogHeader>
-          <DialogTitle className="flex gap-2 items-center">
-            {paymentInfo.icon && (
-              <Image
-                src={paymentInfo.icon}
-                alt={`${paymentInfo.name} logo`}
-                width={24}
-                height={24}
-                className="rounded-md"
-              />
-            )}
-            <span>{paymentInfo.name}</span>
-          </DialogTitle>
-        </DialogHeader>
-
-        <div className="flex flex-col items-center gap-4">
-          {paymentVerified ? (
-            <div className="text-center py-8">
-              <CheckCircle className="mx-auto text-green-500 w-12 h-12"/>
-              <p className="mt-4 text-lg font-medium">支付验证成功</p>
-            </div>
-          ) : (
-            <>
-              <div className="flex flex-col items-center gap-3">
-                <div className="bg-gray-100 size-50 flex items-center justify-center">
-                  {trade.method === 1 ? (
-                    trade.pay_url ? (
-                      <iframe src={trade.pay_url} className="w-full h-full"/>
-                    ) : (
-                      <div className="text-center text-gray-500">支付链接无效</div>
-                    )
-                  ) : (
-                    <canvas ref={canvas} className="w-full h-full"/>
-                  )}
-                </div>
-                <p className="text-sm text-gray-600 text-center">
-                  请使用
-                  {trade.method === 1 ? '支付宝' : '微信'}
-                  扫码支付
-                </p>
-              </div>
-              <div className="text-center space-y-2 w-full">
-                <p className="text-sm font-medium">
-                  支付金额:
-                  <span className="text-accent">
-                    {typeof trade.amount === 'number'
-                      ? trade.amount.toFixed(2)
-                      : '0.00'}
-                    元
-                  </span>
-                </p>
-                <p className="text-xs text-gray-500">
-                  订单号:
-                  {trade.inner_no}
-                </p>
-              </div>
-            </>
-          )}
-        </div>
-
-        {!paymentVerified && (
-          <div className="flex justify-center gap-4">
-            <Button onClick={handleComplete} disabled={loading}>
-              {loading && <Loader className="animate-spin mr-2"/>}
-              已完成支付
-            </Button>
-            <Button theme="outline" onClick={() => onOpenChange(false)}>关闭</Button>
-          </div>
-        )}
-      </DialogContent>
-    </Dialog>
-  )
-}

src/app/admin/bills/payment.tsx

@@ -1,153 +0,0 @@
-'use client'
-import {useState, MouseEvent} from 'react'
-import {Dialog, DialogContent} from '@/components/ui/dialog'
-import {Button} from '@/components/ui/button'
-import {CheckCircle, AlertCircle, ClockIcon} from 'lucide-react'
-import {format} from 'date-fns'
-import Link from 'next/link'
-import Image from 'next/image'
-import wechat from '@/components/composites/purchase/_assets/wechat.svg'
-import alipay from '@/components/composites/purchase/_assets/alipay.svg'
-import {usePlatformType, TradePlatform} from '@/lib/models/trade'
-import {PaymentDialog} from './payment-dialog'
-import {PaymentProps} from '@/components/composites/payment/type'
-
-export function PaymentStatusCell({trade}: {
-  trade?: {
-    inner_no: string
-    method: number
-    pay_url?: string
-    status?: number
-    amount?: number | string
-  }
-}) {
-  const [open, setOpen] = useState(false)
-  const [confirmOpen, setConfirmOpen] = useState(false)
-  const [paymentFailed, setPaymentFailed] = useState(false)
-  const platform = usePlatformType()
-
-  const handleClick = (e: MouseEvent) => {
-    e.preventDefault()
-    if (!trade?.pay_url) return
-
-    if (platform === TradePlatform.Desktop) {
-      setOpen(true)
-    }
-    else {
-      setConfirmOpen(true)
-    }
-  }
-
-  const handleConfirmPayment = () => {
-    setConfirmOpen(false)
-    if (!trade?.pay_url) return
-    const redirectTime = Date.now()
-    window.location.href = trade.pay_url
-    const checkPaymentStatus = () => {
-      if (Date.now() - redirectTime > 3000) {
-        setPaymentFailed(true)
-      }
-    }
-    setTimeout(checkPaymentStatus, 3000)
-  }
-
-  if (!trade || trade.status !== 0) {
-    return (
-      <div className="flex items-center gap-2">
-        {trade?.status === 1 ? (
-          <CheckCircle size={16} className="text-done"/>
-        ) : trade?.status === 2 ? (
-          <AlertCircle size={16} className="text-weak"/>
-        ) : trade?.status === 3 ? (
-          <AlertCircle size={16} className="text-fail"/>
-        ) : null}
-        <span>
-          {trade?.status === 1 ? '已完成'
-            : trade?.status === 2 ? '已取消'
-              : trade?.status === 3 ? '已退款' : '-'}
-        </span>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex items-center gap-2">
-      <ClockIcon size={16} className="text-warn"/>
-      <span>订单待支付</span>
-      <Link
-        href="#"
-        onClick={handleClick}
-        className="text-sm underline text-blue-500"
-        passHref
-      >
-        {trade.inner_no}
-      </Link>
-      <PaymentDialog
-        trade={{
-          inner_no: trade.inner_no,
-          method: trade.method,
-          pay_url: trade.pay_url,
-          amount: typeof trade.amount === 'string'
-            ? parseFloat(trade.amount)
-            : trade.amount || 0,
-        }}
-        open={open}
-        onOpenChange={setOpen}
-      />
-
-      <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
-        <DialogContent>
-          <div className="text-center mb-6">
-            <div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-primary/10 text-primary mb-4">
-              <i className="fa fa-credit-card text-2xl"></i>
-            </div>
-            <h3 className="text-xl font-bold text-neutral-700 mb-2">确认支付</h3>
-            <p className="text-neutral-500">请确认以下支付信息</p>
-          </div>
-          <div className="space-y-2 text-sm">
-            <div className="flex justify-between">
-              <span className="text-gray-500">订单号</span>
-              <span>{trade.inner_no}</span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-gray-500">支付方式</span>
-              <span className="flex items-center gap-1">
-                {trade.method === 1 ? (
-                  <Image
-                    src={alipay}
-                    alt="支付宝"
-                    width={16}
-                    height={16}
-                    className="rounded-md"
-                  />
-                ) : (
-                  <Image
-                    src={wechat}
-                    alt="微信支付"
-                    width={16}
-                    height={16}
-                    className="rounded-md"
-                  />
-                )}
-                {trade.method === 1 ? '支付宝' : '微信支付'}
-              </span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-gray-500">支付金额</span>
-              <span className="font-medium">
-                ¥
-                {typeof trade.amount === 'string'
-                  ? parseFloat(trade.amount).toFixed(2)
-                  : (trade.amount || 0).toFixed(2)}
-              </span>
-            </div>
-          </div>
-          <div className="flex justify-between gap-4">
-            <Button theme="outline" className="flex-1" onClick={() => setConfirmOpen(false)}> 取消 </Button>
-            <Button className="flex-1" onClick={handleConfirmPayment}> 确认并支付 </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </div>
-  )
-}