wanwu/sub2apipay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 管理后台统一 PayPageLayout 布局，支持 dark mode

Browse Source 
管理后台使用与充值页面相同的 PayPageLayout 组件，OrderTable 和
OrderDetail 组件新增 dark prop，所有样式支持暗色模式切换。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
erio
2026-03-03 03:31:20 +08:00
parent 930ce60fcc
commit 880f0211f3
3 changed files with 92 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/admin/OrderTable.tsx
View File

@@ -1,7 +1,5 @@
'use client';
import { useState } from 'react';
interface Order {
id: string;
userId: number;
@@ -24,67 +22,72 @@ interface OrderTableProps {
onRetry: (orderId: string) => void;
onCancel: (orderId: string) => void;
onViewDetail: (orderId: string) => void;
dark?: boolean;
}
const STATUS_LABELS: Record<string, { label: string; className: string }> = {
PENDING: { label: '待支付', className: 'bg-yellow-100 text-yellow-800' },
PAID: { label: '已支付', className: 'bg-blue-100 text-blue-800' },
RECHARGING: { label: '充值中', className: 'bg-blue-100 text-blue-800' },
COMPLETED: { label: '已完成', className: 'bg-green-100 text-green-800' },
EXPIRED: { label: '已超时', className: 'bg-gray-100 text-gray-800' },
CANCELLED: { label: '已取消', className: 'bg-gray-100 text-gray-800' },
FAILED: { label: '充值失败', className: 'bg-red-100 text-red-800' },
REFUNDING: { label: '退款中', className: 'bg-orange-100 text-orange-800' },
REFUNDED: { label: '已退款', className: 'bg-purple-100 text-purple-800' },
REFUND_FAILED: { label: '退款失败', className: 'bg-red-100 text-red-800' },
const STATUS_LABELS: Record<string, { label: string; light: string; dark: string }> = {
PENDING: { label: '待支付', light: 'bg-yellow-100 text-yellow-800', dark: 'bg-yellow-500/20 text-yellow-300' },
PAID: { label: '已支付', light: 'bg-blue-100 text-blue-800', dark: 'bg-blue-500/20 text-blue-300' },
RECHARGING: { label: '充值中', light: 'bg-blue-100 text-blue-800', dark: 'bg-blue-500/20 text-blue-300' },
COMPLETED: { label: '已完成', light: 'bg-green-100 text-green-800', dark: 'bg-green-500/20 text-green-300' },
EXPIRED: { label: '已超时', light: 'bg-gray-100 text-gray-800', dark: 'bg-slate-600/30 text-slate-400' },
CANCELLED: { label: '已取消', light: 'bg-gray-100 text-gray-800', dark: 'bg-slate-600/30 text-slate-400' },
FAILED: { label: '充值失败', light: 'bg-red-100 text-red-800', dark: 'bg-red-500/20 text-red-300' },
REFUNDING: { label: '退款中', light: 'bg-orange-100 text-orange-800', dark: 'bg-orange-500/20 text-orange-300' },
REFUNDED: { label: '已退款', light: 'bg-purple-100 text-purple-800', dark: 'bg-purple-500/20 text-purple-300' },
REFUND_FAILED: { label: '退款失败', light: 'bg-red-100 text-red-800', dark: 'bg-red-500/20 text-red-300' },
};
export default function OrderTable({ orders, onRetry, onCancel, onViewDetail }: OrderTableProps) {
export default function OrderTable({ orders, onRetry, onCancel, onViewDetail, dark }: OrderTableProps) {
const thCls = `px-4 py-3 text-left text-xs font-medium uppercase ${dark ? 'text-slate-400' : 'text-gray-500'}`;
const tdMuted = `whitespace-nowrap px-4 py-3 text-sm ${dark ? 'text-slate-400' : 'text-gray-500'}`;
return (
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<table className={`min-w-full divide-y ${dark ? 'divide-slate-700' : 'divide-gray-200'}`}>
<thead className={dark ? 'bg-slate-800/50' : 'bg-gray-50'}>
<tr>
<th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">订单号</th>
<th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">用户</th>
<th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">金额</th>
<th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">状态</th>
<th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">支付方式</th>
<th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">来源</th>
<th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">创建时间</th>
<th className="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">操作</th>
<th className={thCls}>订单号</th>
<th className={thCls}>用户</th>
<th className={thCls}>金额</th>
<th className={thCls}>状态</th>
<th className={thCls}>支付方式</th>
<th className={thCls}>来源</th>
<th className={thCls}>创建时间</th>
<th className={thCls}>操作</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
<tbody className={`divide-y ${dark ? 'divide-slate-700/60' : 'divide-gray-200 bg-white'}`}>
{orders.map((order) => {
const statusInfo = STATUS_LABELS[order.status] || {
label: order.status,
className: 'bg-gray-100 text-gray-800',
light: 'bg-gray-100 text-gray-800',
dark: 'bg-slate-600/30 text-slate-400',
};
return (
<tr key={order.id} className="hover:bg-gray-50">
<tr key={order.id} className={dark ? 'hover:bg-slate-700/40' : 'hover:bg-gray-50'}>
<td className="whitespace-nowrap px-4 py-3 text-sm">
<button onClick={() => onViewDetail(order.id)} className="text-blue-600 hover:underline">
<button onClick={() => onViewDetail(order.id)} className={dark ? 'text-indigo-400 hover:underline' : 'text-blue-600 hover:underline'}>
{order.id.slice(0, 12)}...
</button>
</td>
<td className="whitespace-nowrap px-4 py-3 text-sm">
<div>{order.userName || '-'}</div>
<div className="text-xs text-gray-400">{order.userEmail || `ID: ${order.userId}`}</div>
<div className={dark ? 'text-slate-200' : ''}>{order.userName || '-'}</div>
<div className={`text-xs ${dark ? 'text-slate-500' : 'text-gray-400'}`}>{order.userEmail || `ID: ${order.userId}`}</div>
</td>
<td className="whitespace-nowrap px-4 py-3 text-sm font-medium">¥{order.amount.toFixed(2)}</td>
<td className={`whitespace-nowrap px-4 py-3 text-sm font-medium ${dark ? 'text-slate-200' : ''}`}>¥{order.amount.toFixed(2)}</td>
<td className="whitespace-nowrap px-4 py-3 text-sm">
<span className={`inline-flex rounded-full px-2 py-1 text-xs font-semibold ${statusInfo.className}`}>
<span className={`inline-flex rounded-full px-2 py-1 text-xs font-semibold ${dark ? statusInfo.dark : statusInfo.light}`}>
{statusInfo.label}
</span>
</td>
<td className="whitespace-nowrap px-4 py-3 text-sm text-gray-500">
<td className={tdMuted}>
{order.paymentType === 'alipay' ? '支付宝' : '微信支付'}
</td>
<td className="whitespace-nowrap px-4 py-3 text-sm text-gray-500">
<td className={tdMuted}>
{order.srcHost || '-'}
</td>
<td className="whitespace-nowrap px-4 py-3 text-sm text-gray-500">
<td className={tdMuted}>
{new Date(order.createdAt).toLocaleString('zh-CN')}
</td>
<td className="whitespace-nowrap px-4 py-3 text-sm">
@@ -92,7 +95,7 @@ export default function OrderTable({ orders, onRetry, onCancel, onViewDetail }:
{order.rechargeRetryable && (
<button
onClick={() => onRetry(order.id)}
className="rounded bg-blue-100 px-2 py-1 text-xs text-blue-700 hover:bg-blue-200"
className={`rounded px-2 py-1 text-xs ${dark ? 'bg-blue-500/20 text-blue-300 hover:bg-blue-500/30' : 'bg-blue-100 text-blue-700 hover:bg-blue-200'}`}
>
重试
</button>
@@ -100,7 +103,7 @@ export default function OrderTable({ orders, onRetry, onCancel, onViewDetail }:
{order.status === 'PENDING' && (
<button
onClick={() => onCancel(order.id)}
className="rounded bg-red-100 px-2 py-1 text-xs text-red-700 hover:bg-red-200"
className={`rounded px-2 py-1 text-xs ${dark ? 'bg-red-500/20 text-red-300 hover:bg-red-500/30' : 'bg-red-100 text-red-700 hover:bg-red-200'}`}
>
取消
</button>
@@ -112,7 +115,7 @@ export default function OrderTable({ orders, onRetry, onCancel, onViewDetail }:
})}
</tbody>
</table>
{orders.length === 0 && <div className="py-12 text-center text-gray-500">暂无订单</div>}
{orders.length === 0 && <div className={`py-12 text-center ${dark ? 'text-slate-500' : 'text-gray-500'}`}>暂无订单</div>}
</div>
);
}