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

- 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>

src/app/globals.css

@@ -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;
 }

src/app/pay/page.tsx

@@ -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

src/app/pay/result/page.tsx

@@ -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={`flex min-h-screen items-center justify-center ${isDark ? 'bg-slate-950' : 'bg-slate-50'}`}>
-        <div className="text-gray-500">查询支付结果中...</div>
+        <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={`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 bg-white p-8 text-center shadow-lg">
+      <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>
   );

src/app/pay/stripe-popup/page.tsx

@@ -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}

src/components/MobileOrderList.tsx

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

src/components/OrderStatus.tsx

@@ -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>

src/components/PaymentForm.tsx

@@ -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>

src/components/PaymentQRCode.tsx

@@ -28,14 +28,13 @@ interface PaymentQRCodeProps {
   isMobile?: boolean;
 }
 
-const TEXT_EXPIRED = '\u8BA2\u5355\u5DF2\u8D85\u65F6';
+const TEXT_EXPIRED = '订单已超时';
-const TEXT_REMAINING = '\u5269\u4F59\u652F\u4ED8\u65F6\u95F4';
+const TEXT_REMAINING = '剩余支付时间';
-const TEXT_GO_PAY = '\u70B9\u51FB\u524D\u5F80\u652F\u4ED8';
+const TEXT_GO_PAY = '点击前往支付';
-const TEXT_SCAN_PAY = '\u8BF7\u4F7F\u7528\u652F\u4ED8\u5E94\u7528\u626B\u7801\u652F\u4ED8';
+const TEXT_SCAN_PAY = '请使用支付应用扫码支付';
-const TEXT_BACK = '\u8FD4\u56DE';
+const TEXT_BACK = '返回';
-const TEXT_CANCEL_ORDER = '\u53D6\u6D88\u8BA2\u5355';
+const TEXT_CANCEL_ORDER = '取消订单';
-const TEXT_H5_HINT =
+const TEXT_H5_HINT = '支付完成后请返回此页面，系统将自动确认';
-  '\u652F\u4ED8\u5B8C\u6210\u540E\u8BF7\u8FD4\u56DE\u6B64\u9875\u9762\uFF0C\u7CFB\u7EDF\u5C06\u81EA\u52A8\u786E\u8BA4';
 
 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>
+        <div className="text-6xl text-green-600">{'✓'}</div>
-        <h2 className="text-xl font-bold text-green-600">{'\u8BA2\u5355\u5DF2\u652F\u4ED8'}</h2>
+        <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>

src/components/admin/OrderDetail.tsx

@@ -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: '支付成功', value: order.paymentSuccess ? 'yes' : 'no' },
-    { label: 'Recharge OK', value: order.rechargeSuccess ? 'yes' : 'no' },
+    { label: '充值成功', value: order.rechargeSuccess ? 'yes' : 'no' },
-    { label: 'Recharge Status', value: order.rechargeStatus || '-' },
+    { label: '充值状态', value: order.rechargeStatus || '-' },
     { label: '支付渠道', value: getPaymentDisplayInfo(order.paymentType).channel },
     { label: '提供商', value: getPaymentDisplayInfo(order.paymentType).provider || '-' },
     { label: '充值码', value: order.rechargeCode },

src/components/admin/RefundDialog.tsx

@@ -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()}>
+      <div
-        <h3 className="text-lg font-bold text-gray-900">确认退款</h3>
+        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={['rounded-lg p-3', dark ? 'bg-slate-800' : 'bg-gray-50'].join(' ')}>
-            <div className="text-sm text-gray-500">订单号</div>
+            <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={['rounded-lg p-3', dark ? 'bg-slate-800' : 'bg-gray-50'].join(' ')}>
-            <div className="text-sm text-gray-500">退款金额</div>
+            <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>