添加获取价格响应异常显示loading & 时间显示到秒

src/app/admin/balance/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import {useCallback, useEffect, useState} from 'react'
+import {Suspense, useCallback, useEffect, useState} from 'react'
 import {PageRecord} from '@/lib/api'
 import {Balance} from '@/lib/models'
 import {useStatus} from '@/lib/states'
@@ -136,100 +136,101 @@ export default function BalancePage(props: BalancePageProps) {
           </Button>
         </Form>
       </section>
-
-      <DataTable
-        data={data.list}
-        status={status}
-        pagination={{
-          total: data.total,
-          page: data.page,
-          size: data.size,
-          onPageChange: async (page: number) => {
-            await refresh(page, data.size)
-          },
-          onSizeChange: async (size: number) => {
-            await refresh(data.page, size)
-          },
-        }}
-        columns={[
-          {accessorKey: 'bill_no', header: `账单编号`,
-            accessorFn: row => row.bill?.bill_no || '',
-          },
-          {
-            accessorKey: 'status',
-            header: `状态`,
-            cell: ({row}) => {
-              const trade = row.original.trade
-              if (![1, 2, 3, 4, 5].includes(trade?.method)) {
+      <Suspense>
+        <DataTable
+          data={data.list}
+          status={status}
+          pagination={{
+            total: data.total,
+            page: data.page,
+            size: data.size,
+            onPageChange: async (page: number) => {
+              await refresh(page, data.size)
+            },
+            onSizeChange: async (size: number) => {
+              await refresh(data.page, size)
+            },
+          }}
+          columns={[
+            {accessorKey: 'bill_no', header: `账单编号`,
+              accessorFn: row => row.bill?.bill_no || '',
+            },
+            {
+              accessorKey: 'status',
+              header: `状态`,
+              cell: ({row}) => {
+                const trade = row.original.trade
+                if (![1, 2, 3, 4, 5].includes(trade?.method)) {
+                  return (
+                    <div className="flex items-center gap-2">
+                      <CheckCircle size={16} className="text-done"/>
+                      <span>已完成</span>
+                    </div>
+                  )
+                }
+                if (!trade) return <span>-</span>
                 return (
                   <div className="flex items-center gap-2">
-                    <CheckCircle size={16} className="text-done"/>
-                    <span>已完成</span>
+                    {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>
                 )
-              }
-              if (!trade) return <span>-</span>
-              return (
+              },
+            },
+            {
+              accessorKey: 'amount',
+              header: '变动金额',
+              cell: ({row}) => {
+                const amount = row.original.amount
+                const isPositive = Number(amount) > 0
+                return (
+                  <div className="flex items-center gap-1">
+                    <span
+                      className={`font-semibold ${
+                        isPositive ? 'text-green-600' : 'text-red-600'
+                      }`}
+                    >
+                      {isPositive ? '+' : ''}
+                      {Number(amount).toFixed(2)}
+                    </span>
+                  </div>
+                )
+              },
+            },
+            {
+              header: '余额变化',
+              accessorKey: 'balance_prev',
+              cell: ({row}) => (
                 <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>
+                  <span className="text-gray-500 text-sm">¥{Number(row.original.balance_prev).toFixed(2)}</span>
+                  <span className="text-muted-foreground">→</span>
+                  <span>¥{Number(row.original.balance_curr).toFixed(2)}</span>
                 </div>
-              )
+              ),
             },
-          },
-          {
-            accessorKey: 'amount',
-            header: '变动金额',
-            cell: ({row}) => {
-              const amount = row.original.amount
-              const isPositive = Number(amount) > 0
-              return (
-                <div className="flex items-center gap-1">
-                  <span
-                    className={`font-semibold ${
-                      isPositive ? 'text-green-600' : 'text-red-600'
-                    }`}
-                  >
-                    {isPositive ? '+' : ''}
-                    {Number(amount).toFixed(2)}
-                  </span>
-                </div>
-              )
+            {
+              header: '备注',
+              accessorKey: 'remark',
             },
-          },
-          {
-            header: '余额变化',
-            accessorKey: 'balance_prev',
-            cell: ({row}) => (
-              <div className="flex items-center gap-2">
-                <span className="text-gray-500 text-sm">¥{Number(row.original.balance_prev).toFixed(2)}</span>
-                <span className="text-muted-foreground">→</span>
-                <span>¥{Number(row.original.balance_curr).toFixed(2)}</span>
-              </div>
-            ),
-          },
-          {
-            header: '备注',
-            accessorKey: 'remark',
-          },
-          {
-            header: '创建时间',
-            accessorKey: 'created_at',
-            cell: ({row}) =>
-              format(new Date(row.original.created_at), 'yyyy-MM-dd HH:mm'),
-          },
-        ]}
-      />
+            {
+              header: '创建时间',
+              accessorKey: 'created_at',
+              cell: ({row}) =>
+                format(new Date(row.original.created_at), 'yyyy-MM-dd HH:mm:ss'),
+            },
+          ]}
+        />
+      </Suspense>
     </Page>
   )
 }