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

fix: 前端暗色模式补全、Unicode 可读化、UI 优化 12 项

Browse Source 
- PaymentQRCode 13 处 Unicode 转义替换为可读中文
- RefundDialog 完整暗色模式 + Escape 键关闭
- PayResult 页面添加暗色模式支持
- OrderStatus 使用 dark prop 调整样式
- PaymentForm 选中态暗色对比度修复
- OrderDetail 英文标签改中文 + Escape 键
- Pay 页面错误提示暗色适配
- 倒计时最后 60 秒脉动提醒
- 全局 CSS 添加中文字体栈
- MobileOrderList HTML 实体替换

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
erio
2026-03-07 04:16:01 +08:00
parent a5e07edda6
commit d43b04cb5c
10 changed files with 132 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
'use client';
import { useEffect } from 'react';
import { getPaymentDisplayInfo } from '@/lib/pay-utils';
interface AuditLog {
@@ -45,6 +46,14 @@ interface OrderDetailProps {
}
export default function OrderDetail({ order, onClose, dark }: OrderDetailProps) {
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose();
};
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, [onClose]);
const fields = [
{ label: '订单号', value: order.id },
{ label: '用户ID', value: order.userId },
@@ -52,9 +61,9 @@ export default function OrderDetail({ order, onClose, dark }: OrderDetailProps)
{ label: '邮箱', value: order.userEmail || '-' },
{ label: '金额', value: `¥${order.amount.toFixed(2)}` },
{ label: '状态', value: order.status },
{ label: 'Payment OK', value: order.paymentSuccess ? 'yes' : 'no' },
{ label: 'Recharge OK', value: order.rechargeSuccess ? 'yes' : 'no' },
{ label: 'Recharge Status', value: order.rechargeStatus || '-' },
{ label: '支付成功', value: order.paymentSuccess ? 'yes' : 'no' },
{ label: '充值成功', value: order.rechargeSuccess ? 'yes' : 'no' },
{ label: '充值状态', value: order.rechargeStatus || '-' },
{ label: '支付渠道', value: getPaymentDisplayInfo(order.paymentType).channel },
{ label: '提供商', value: getPaymentDisplayInfo(order.paymentType).provider || '-' },
{ label: '充值码', value: order.rechargeCode },

59
src/components/admin/RefundDialog.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import { useState } from 'react';
import { useState, useEffect } from 'react';
interface RefundDialogProps {
orderId: string;
@@ -9,6 +9,7 @@ interface RefundDialogProps {
onCancel: () => void;
warning?: string;
requireForce?: boolean;
dark?: boolean;
}
export default function RefundDialog({
@@ -18,11 +19,20 @@ export default function RefundDialog({
onCancel,
warning,
requireForce,
dark = false,
}: RefundDialogProps) {
const [reason, setReason] = useState('');
const [force, setForce] = useState(false);
const [loading, setLoading] = useState(false);
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') onCancel();
};
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, [onCancel]);
const handleConfirm = async () => {
setLoading(true);
try {
@@ -34,30 +44,50 @@ export default function RefundDialog({
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onCancel}>
<div className="w-full max-w-md rounded-xl bg-white p-6 shadow-xl" onClick={(e) => e.stopPropagation()}>
<h3 className="text-lg font-bold text-gray-900">确认退款</h3>
<div
className={[
'w-full max-w-md rounded-xl p-6 shadow-xl',
dark ? 'bg-slate-900' : 'bg-white',
].join(' ')}
onClick={(e) => e.stopPropagation()}
>
<h3 className={['text-lg font-bold', dark ? 'text-slate-100' : 'text-gray-900'].join(' ')}>确认退款</h3>
<div className="mt-4 space-y-3">
<div className="rounded-lg bg-gray-50 p-3">
<div className="text-sm text-gray-500">订单号</div>
<div className={['rounded-lg p-3', dark ? 'bg-slate-800' : 'bg-gray-50'].join(' ')}>
<div className={['text-sm', dark ? 'text-slate-400' : 'text-gray-500'].join(' ')}>订单号</div>
<div className="text-sm font-mono">{orderId}</div>
</div>
<div className="rounded-lg bg-gray-50 p-3">
<div className="text-sm text-gray-500">退款金额</div>
<div className={['rounded-lg p-3', dark ? 'bg-slate-800' : 'bg-gray-50'].join(' ')}>
<div className={['text-sm', dark ? 'text-slate-400' : 'text-gray-500'].join(' ')}>退款金额</div>
<div className="text-lg font-bold text-red-600">¥{amount.toFixed(2)}</div>
</div>
{warning && <div className="rounded-lg bg-yellow-50 p-3 text-sm text-yellow-700">{warning}</div>}
{warning && (
<div
className={[
'rounded-lg p-3 text-sm',
dark ? 'bg-yellow-900/30 text-yellow-300' : 'bg-yellow-50 text-yellow-700',
].join(' ')}
>
{warning}
</div>
)}
<div>
<label className="mb-1 block text-sm font-medium text-gray-700">退款原因</label>
<label className={['mb-1 block text-sm font-medium', dark ? 'text-slate-300' : 'text-gray-700'].join(' ')}>
退款原因
</label>
<input
type="text"
value={reason}
onChange={(e) => setReason(e.target.value)}
placeholder="请输入退款原因（可选）"
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
className={[
'w-full rounded-lg border px-3 py-2 text-sm focus:border-blue-500 focus:outline-none',
dark ? 'border-slate-600 bg-slate-800 text-slate-100' : 'border-gray-300 bg-white text-gray-900',
].join(' ')}
/>
</div>
@@ -67,7 +97,7 @@ export default function RefundDialog({
type="checkbox"
checked={force}
onChange={(e) => setForce(e.target.checked)}
className="rounded border-gray-300"
className={['rounded', dark ? 'border-slate-600' : 'border-gray-300'].join(' ')}
/>
<span className="text-red-600">强制退款（余额可能扣为负数）</span>
</label>
@@ -77,7 +107,12 @@ export default function RefundDialog({
<div className="mt-6 flex gap-3">
<button
onClick={onCancel}
className="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-600 hover:bg-gray-50"
className={[
'flex-1 rounded-lg border py-2 text-sm',
dark
? 'border-slate-600 text-slate-300 hover:bg-slate-800'
: 'border-gray-300 text-gray-600 hover:bg-gray-50',
].join(' ')}
>
取消
</button>