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

27
src/components/admin/OrderDetail.tsx
View File

@@ -39,9 +39,10 @@ interface OrderDetailProps {
auditLogs: AuditLog[];
};
onClose: () => void;
dark?: boolean;
}
export default function OrderDetail({ order, onClose }: OrderDetailProps) {
export default function OrderDetail({ order, onClose, dark }: OrderDetailProps) {
const fields = [
{ label: '订单号', value: order.id },
{ label: '用户ID', value: order.userId },
@@ -78,46 +79,46 @@ export default function OrderDetail({ order, onClose }: OrderDetailProps) {
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
<div
className="max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-xl bg-white p-6 shadow-xl"
className={`max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-xl p-6 shadow-xl ${dark ? 'bg-slate-800 text-slate-100' : 'bg-white'}`}
onClick={(e) => e.stopPropagation()}
>
<div className="mb-4 flex items-center justify-between">
<h3 className="text-lg font-bold">订单详情</h3>
<button onClick={onClose} className="text-gray-400 hover:text-gray-600">
<button onClick={onClose} className={dark ? 'text-slate-400 hover:text-slate-200' : 'text-gray-400 hover:text-gray-600'}>
✕
</button>
</div>
<div className="grid grid-cols-2 gap-3">
{fields.map(({ label, value }) => (
<div key={label} className="rounded-lg bg-gray-50 p-3">
<div className="text-xs text-gray-500">{label}</div>
<div className="mt-1 break-all text-sm font-medium">{value}</div>
<div key={label} className={`rounded-lg p-3 ${dark ? 'bg-slate-700/60' : 'bg-gray-50'}`}>
<div className={`text-xs ${dark ? 'text-slate-400' : 'text-gray-500'}`}>{label}</div>
<div className={`mt-1 break-all text-sm font-medium ${dark ? 'text-slate-200' : ''}`}>{value}</div>
</div>
))}
</div>
{/* Audit Logs */}
<div className="mt-6">
<h4 className="mb-3 font-medium text-gray-900">审计日志</h4>
<h4 className={`mb-3 font-medium ${dark ? 'text-slate-100' : 'text-gray-900'}`}>审计日志</h4>
<div className="space-y-2">
{order.auditLogs.map((log) => (
<div key={log.id} className="rounded-lg border border-gray-100 bg-gray-50 p-3">
<div key={log.id} className={`rounded-lg border p-3 ${dark ? 'border-slate-600 bg-slate-700/60' : 'border-gray-100 bg-gray-50'}`}>
<div className="flex items-center justify-between">
<span className="text-sm font-medium">{log.action}</span>
<span className="text-xs text-gray-400">{new Date(log.createdAt).toLocaleString('zh-CN')}</span>
<span className={`text-xs ${dark ? 'text-slate-500' : 'text-gray-400'}`}>{new Date(log.createdAt).toLocaleString('zh-CN')}</span>
</div>
{log.detail && <div className="mt-1 break-all text-xs text-gray-500">{log.detail}</div>}
{log.operator && <div className="mt-1 text-xs text-gray-400">操作者: {log.operator}</div>}
{log.detail && <div className={`mt-1 break-all text-xs ${dark ? 'text-slate-400' : 'text-gray-500'}`}>{log.detail}</div>}
{log.operator && <div className={`mt-1 text-xs ${dark ? 'text-slate-500' : 'text-gray-400'}`}>操作者: {log.operator}</div>}
</div>
))}
{order.auditLogs.length === 0 && <div className="text-center text-sm text-gray-400">暂无日志</div>}
{order.auditLogs.length === 0 && <div className={`text-center text-sm ${dark ? 'text-slate-500' : 'text-gray-400'}`}>暂无日志</div>}
</div>
</div>
<button
onClick={onClose}
className="mt-6 w-full rounded-lg border border-gray-300 py-2 text-sm text-gray-600 hover:bg-gray-50"
className={`mt-6 w-full rounded-lg border py-2 text-sm ${dark ? 'border-slate-600 text-slate-300 hover:bg-slate-700' : 'border-gray-300 text-gray-600 hover:bg-gray-50'}`}
>
关闭
</button>