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

1
src/app/globals.css
View File

@@ -8,4 +8,5 @@
body {
background: var(--background);
color: var(--foreground);
font-family: system-ui, -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

11
src/app/pay/page.tsx
View File

@@ -346,7 +346,16 @@ function PayContent() {
) : undefined
}
>
{error && <div className="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600">{error}</div>}
{error && (
<div
className={[
'mb-4 rounded-lg border p-3 text-sm',
isDark ? 'border-red-700 bg-red-900/30 text-red-400' : 'border-red-200 bg-red-50 text-red-600',
].join(' ')}
>
{error}
</div>
)}
{step === 'form' && isMobile && (
<div

29
src/app/pay/result/page.tsx
View File

@@ -9,6 +9,8 @@ function ResultContent() {
const outTradeNo = searchParams.get('out_trade_no') || searchParams.get('order_id');
const tradeStatus = searchParams.get('trade_status') || searchParams.get('status');
const isPopup = searchParams.get('popup') === '1';
const theme = searchParams.get('theme') === 'dark' ? 'dark' : 'light';
const isDark = theme === 'dark';
const [status, setStatus] = useState<string | null>(null);
const [loading, setLoading] = useState(true);
@@ -64,8 +66,8 @@ function ResultContent() {
if (loading) {
return (
<div className="flex min-h-screen items-center justify-center bg-slate-50">
<div className="text-gray-500">查询支付结果中...</div>
<div className={`flex min-h-screen items-center justify-center ${isDark ? 'bg-slate-950' : 'bg-slate-50'}`}>
<div className={isDark ? 'text-slate-400' : 'text-gray-500'}>查询支付结果中...</div>
</div>
);
}
@@ -73,20 +75,27 @@ function ResultContent() {
const isPending = status === 'PENDING';
return (
<div className="flex min-h-screen items-center justify-center bg-slate-50 p-4">
<div className="w-full max-w-md rounded-xl bg-white p-8 text-center shadow-lg">
<div className={`flex min-h-screen items-center justify-center p-4 ${isDark ? 'bg-slate-950' : 'bg-slate-50'}`}>
<div
className={[
'w-full max-w-md rounded-xl p-8 text-center shadow-lg',
isDark ? 'bg-slate-900 text-slate-100' : 'bg-white',
].join(' ')}
>
{isSuccess ? (
<>
<div className="text-6xl text-green-500">✓</div>
<h1 className="mt-4 text-xl font-bold text-green-600">
{status === 'COMPLETED' ? '充值成功' : '充值处理中'}
</h1>
<p className="mt-2 text-gray-500">
<p className={isDark ? 'mt-2 text-slate-400' : 'mt-2 text-gray-500'}>
{status === 'COMPLETED' ? '余额已成功到账！' : '支付成功，余额正在充值中...'}
</p>
{isInPopup && (
<div className="mt-4 space-y-2">
<p className="text-sm text-gray-400">此窗口将在 3 秒后自动关闭</p>
<p className={isDark ? 'text-sm text-slate-500' : 'text-sm text-gray-400'}>
此窗口将在 3 秒后自动关闭
</p>
<button
type="button"
onClick={() => window.close()}
@@ -101,7 +110,7 @@ function ResultContent() {
<>
<div className="text-6xl text-yellow-500">⏳</div>
<h1 className="mt-4 text-xl font-bold text-yellow-600">等待支付</h1>
<p className="mt-2 text-gray-500">订单尚未完成支付</p>
<p className={isDark ? 'mt-2 text-slate-400' : 'mt-2 text-gray-500'}>订单尚未完成支付</p>
{isInPopup && (
<button
type="button"
@@ -118,7 +127,7 @@ function ResultContent() {
<h1 className="mt-4 text-xl font-bold text-red-600">
{status === 'EXPIRED' ? '订单已超时' : status === 'CANCELLED' ? '订单已取消' : '支付异常'}
</h1>
<p className="mt-2 text-gray-500">
<p className={isDark ? 'mt-2 text-slate-400' : 'mt-2 text-gray-500'}>
{status === 'EXPIRED'
? '订单已超时，请重新充值'
: status === 'CANCELLED'
@@ -137,7 +146,9 @@ function ResultContent() {
</>
)}
<p className="mt-4 text-xs text-gray-400">订单号: {outTradeNo || '未知'}</p>
<p className={isDark ? 'mt-4 text-xs text-slate-500' : 'mt-4 text-xs text-gray-400'}>
订单号: {outTradeNo || '未知'}
</p>
</div>
</div>
);

10
src/app/pay/stripe-popup/page.tsx
View File

@@ -177,14 +177,14 @@ function StripePopupContent() {
>
<div className="text-center">
<div className="text-3xl font-bold text-blue-600">
{'\u00A5'}
{'¥'}
{amount.toFixed(2)}
</div>
<p className={`mt-1 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>订单号: {orderId}</p>
</div>
{stripeError ? (
<div className="space-y-3">
<div className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600">{stripeError}</div>
<div className={`rounded-lg border p-3 text-sm ${isDark ? 'border-red-700 bg-red-900/30 text-red-400' : 'border-red-200 bg-red-50 text-red-600'}`}>{stripeError}</div>
<button
type="button"
onClick={() => window.close()}
@@ -213,7 +213,7 @@ function StripePopupContent() {
>
<div className="text-center">
<div className="text-3xl font-bold text-blue-600">
{'\u00A5'}
{'¥'}
{amount.toFixed(2)}
</div>
<p className={`mt-1 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>订单号: {orderId}</p>
@@ -226,7 +226,7 @@ function StripePopupContent() {
</div>
) : stripeSuccess ? (
<div className="py-6 text-center">
<div className="text-5xl text-green-600">{'\u2713'}</div>
<div className="text-5xl text-green-600">{'✓'}</div>
<p className={`mt-3 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
支付成功，窗口即将自动关闭...
</p>
@@ -241,7 +241,7 @@ function StripePopupContent() {
) : (
<>
{stripeError && (
<div className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600">{stripeError}</div>
<div className={`rounded-lg border p-3 text-sm ${isDark ? 'border-red-700 bg-red-900/30 text-red-400' : 'border-red-200 bg-red-50 text-red-600'}`}>{stripeError}</div>
)}
<div
ref={stripeContainerRef}

2
src/components/MobileOrderList.tsx
View File

@@ -84,7 +84,7 @@ export default function MobileOrderList({
isDark ? 'border-amber-500/40 text-amber-200' : 'border-amber-300 text-amber-700',
].join(' ')}
>
当前链接未携带登录 token，无法查询&ldquo;我的订单&rdquo;。
当前链接未携带登录 token，无法查询"我的订单"。
</div>
) : filteredOrders.length === 0 ? (
<div

7
src/components/OrderStatus.tsx
View File

@@ -57,10 +57,13 @@ export default function OrderStatus({ status, onBack, dark = false }: OrderStatu
<div className="flex flex-col items-center space-y-4 py-8">
<div className={`text-6xl ${config.color}`}>{config.icon}</div>
<h2 className={`text-xl font-bold ${config.color}`}>{config.label}</h2>
<p className="text-center text-gray-500">{config.message}</p>
<p className={['text-center', dark ? 'text-slate-400' : 'text-gray-500'].join(' ')}>{config.message}</p>
<button
onClick={onBack}
className="mt-4 w-full rounded-lg bg-blue-600 py-3 font-medium text-white hover:bg-blue-700"
className={[
'mt-4 w-full rounded-lg py-3 font-medium text-white',
dark ? 'bg-blue-600 hover:bg-blue-500' : 'bg-blue-600 hover:bg-blue-700',
].join(' ')}
>
{status === 'COMPLETED' ? '完成' : '返回充值'}
</button>

4
src/components/PaymentForm.tsx
View File

@@ -258,7 +258,7 @@ export default function PaymentForm({
? 'cursor-not-allowed border-slate-700 bg-slate-800/50 opacity-50'
: 'cursor-not-allowed border-gray-200 bg-gray-50 opacity-50'
: isSelected
? `${meta?.selectedBorder || 'border-blue-500'} ${meta?.selectedBg || 'bg-blue-50'} text-slate-900 shadow-sm`
? `${meta?.selectedBorder || 'border-blue-500'} ${meta?.selectedBg || 'bg-blue-50'} ${dark ? 'text-slate-100' : 'text-slate-900'} shadow-sm`
: dark
? 'border-slate-700 bg-slate-900 text-slate-200 hover:border-slate-500'
: 'border-gray-300 bg-white text-slate-700 hover:border-gray-400',
@@ -272,7 +272,7 @@ export default function PaymentForm({
<span className="text-[10px] tracking-wide text-red-400">今日额度已满</span>
) : meta?.sublabel ? (
<span
className={`text-[10px] tracking-wide ${dark && !isSelected ? 'text-slate-400' : 'text-slate-600'}`}
className={`text-[10px] tracking-wide ${dark ? (isSelected ? 'text-slate-300' : 'text-slate-400') : 'text-slate-600'}`}
>
{meta.sublabel}
</span>

49
src/components/PaymentQRCode.tsx
View File

@@ -28,14 +28,13 @@ interface PaymentQRCodeProps {
isMobile?: boolean;
}
const TEXT_EXPIRED = '\u8BA2\u5355\u5DF2\u8D85\u65F6';
const TEXT_REMAINING = '\u5269\u4F59\u652F\u4ED8\u65F6\u95F4';
const TEXT_GO_PAY = '\u70B9\u51FB\u524D\u5F80\u652F\u4ED8';
const TEXT_SCAN_PAY = '\u8BF7\u4F7F\u7528\u652F\u4ED8\u5E94\u7528\u626B\u7801\u652F\u4ED8';
const TEXT_BACK = '\u8FD4\u56DE';
const TEXT_CANCEL_ORDER = '\u53D6\u6D88\u8BA2\u5355';
const TEXT_H5_HINT =
'\u652F\u4ED8\u5B8C\u6210\u540E\u8BF7\u8FD4\u56DE\u6B64\u9875\u9762\uFF0C\u7CFB\u7EDF\u5C06\u81EA\u52A8\u786E\u8BA4';
const TEXT_EXPIRED = '订单已超时';
const TEXT_REMAINING = '剩余支付时间';
const TEXT_GO_PAY = '点击前往支付';
const TEXT_SCAN_PAY = '请使用支付应用扫码支付';
const TEXT_BACK = '返回';
const TEXT_CANCEL_ORDER = '取消订单';
const TEXT_H5_HINT = '支付完成后请返回此页面，系统将自动确认';
export default function PaymentQRCode({
orderId,
@@ -57,6 +56,7 @@ export default function PaymentQRCode({
const displayAmount = payAmountProp ?? amount;
const hasFeeDiff = payAmountProp !== undefined && payAmountProp !== amount;
const [timeLeft, setTimeLeft] = useState('');
const [timeLeftSeconds, setTimeLeftSeconds] = useState(Infinity);
const [expired, setExpired] = useState(false);
const [qrDataUrl, setQrDataUrl] = useState('');
const [imageLoading, setImageLoading] = useState(false);
@@ -264,13 +264,16 @@ export default function PaymentQRCode({
if (diff <= 0) {
setTimeLeft(TEXT_EXPIRED);
setTimeLeftSeconds(0);
setExpired(true);
return;
}
const totalSeconds = Math.floor(diff / 1000);
const minutes = Math.floor(diff / 60000);
const seconds = Math.floor((diff % 60000) / 1000);
setTimeLeft(`${minutes}:${seconds.toString().padStart(2, '0')}`);
setTimeLeftSeconds(totalSeconds);
};
updateTimer();
@@ -340,18 +343,16 @@ export default function PaymentQRCode({
if (cancelBlocked) {
return (
<div className="flex flex-col items-center space-y-4 py-8">
<div className="text-6xl text-green-600">{'\u2713'}</div>
<h2 className="text-xl font-bold text-green-600">{'\u8BA2\u5355\u5DF2\u652F\u4ED8'}</h2>
<div className="text-6xl text-green-600">{'✓'}</div>
<h2 className="text-xl font-bold text-green-600">{'订单已支付'}</h2>
<p className={['text-center text-sm', dark ? 'text-slate-400' : 'text-gray-500'].join(' ')}>
{
'\u8BE5\u8BA2\u5355\u5DF2\u652F\u4ED8\u5B8C\u6210\uFF0C\u65E0\u6CD5\u53D6\u6D88\u3002\u5145\u503C\u5C06\u81EA\u52A8\u5230\u8D26\u3002'
}
{'该订单已支付完成，无法取消。充值将自动到账。'}
</p>
<button
onClick={onBack}
className="mt-4 w-full rounded-lg bg-blue-600 py-3 font-medium text-white hover:bg-blue-700"
>
{'\u8FD4\u56DE\u5145\u503C'}
{'返回充值'}
</button>
</div>
);
@@ -361,7 +362,7 @@ export default function PaymentQRCode({
<div className="flex flex-col items-center space-y-4">
<div className="text-center">
<div className="text-4xl font-bold text-blue-600">
{'\u00A5'}
{'¥'}
{displayAmount.toFixed(2)}
</div>
{hasFeeDiff && (
@@ -369,7 +370,7 @@ export default function PaymentQRCode({
到账 ¥{amount.toFixed(2)}
</div>
)}
<div className={`mt-1 text-sm ${expired ? 'text-red-500' : dark ? 'text-slate-400' : 'text-gray-500'}`}>
<div className={`mt-1 text-sm ${expired ? 'text-red-500' : !expired && timeLeftSeconds <= 60 ? 'text-red-500 animate-pulse' : dark ? 'text-slate-400' : 'text-gray-500'}`}>
{expired ? TEXT_EXPIRED : `${TEXT_REMAINING}: ${timeLeft}`}
</div>
</div>
@@ -397,7 +398,10 @@ export default function PaymentQRCode({
</span>
</div>
) : stripeError && !stripeLib ? (
<div className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600">{stripeError}</div>
<div className={[
'rounded-lg border p-3 text-sm',
dark ? 'border-red-700 bg-red-900/30 text-red-400' : 'border-red-200 bg-red-50 text-red-600',
].join(' ')}>{stripeError}</div>
) : (
<>
<div
@@ -414,7 +418,7 @@ export default function PaymentQRCode({
)}
{stripeSuccess ? (
<div className="text-center">
<div className="text-4xl text-green-600">{'\u2713'}</div>
<div className="text-4xl text-green-600">{'✓'}</div>
<p className={['mt-2 text-sm', dark ? 'text-slate-400' : 'text-gray-500'].join(' ')}>
支付成功，正在处理订单...
</p>
@@ -514,7 +518,7 @@ export default function PaymentQRCode({
)}
<p className={['text-center text-sm', dark ? 'text-slate-400' : 'text-gray-500'].join(' ')}>
{`\u8BF7\u6253\u5F00${channelLabel}\u626B\u4E00\u626B\u5B8C\u6210\u652F\u4ED8`}
{`请打开${channelLabel}扫一扫完成支付`}
</p>
</>
)}
@@ -536,7 +540,12 @@ export default function PaymentQRCode({
{!expired && token && (
<button
onClick={handleCancel}
className="flex-1 rounded-lg border border-red-300 py-2 text-sm text-red-600 hover:bg-red-50"
className={[
'flex-1 rounded-lg border py-2 text-sm',
dark
? 'border-red-700 text-red-400 hover:bg-red-900/30'
: 'border-red-300 text-red-600 hover:bg-red-50',
].join(' ')}
>
{TEXT_CANCEL_ORDER}
</button>

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>