From 5fb16f0ccf2e24145a412167f541d4f8b1fdc39e Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Mon, 9 Mar 2026 10:12:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9A=97=E8=89=B2=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E4=B8=8B=E6=94=AF=E4=BB=98=E6=96=B9=E5=BC=8F=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E6=97=B6=E6=96=87=E5=AD=97=E4=B8=8E=E8=83=8C=E6=99=AF=E8=89=B2?=
 =?UTF-8?q?=E5=86=B2=E7=AA=81=E4=B8=8D=E5=8F=AF=E8=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PaymentForm.tsx | 2 +-
 src/lib/pay-utils.ts           | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/PaymentForm.tsx b/src/components/PaymentForm.tsx
index 0a72c89..540d0b8 100644
--- a/src/components/PaymentForm.tsx
+++ b/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'} ${dark ? 'text-slate-100' : 'text-slate-900'} shadow-sm`
+                        ? `${meta?.selectedBorder || 'border-blue-500'} ${dark ? (meta?.selectedBgDark || 'bg-blue-950') : (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',
diff --git a/src/lib/pay-utils.ts b/src/lib/pay-utils.ts
index 80680ef..f852fc6 100644
--- a/src/lib/pay-utils.ts
+++ b/src/lib/pay-utils.ts
@@ -80,6 +80,8 @@ export interface PaymentTypeMeta {
   color: string;
   selectedBorder: string;
   selectedBg: string;
+  /** 暗色模式选中背景 */
+  selectedBgDark: string;
   iconBg: string;
   /** 图标路径（Stripe 不使用外部图标） */
   iconSrc?: string;
@@ -96,6 +98,7 @@ export const PAYMENT_TYPE_META: Record<string, PaymentTypeMeta> = {
     color: '#00AEEF',
     selectedBorder: 'border-cyan-400',
     selectedBg: 'bg-cyan-50',
+    selectedBgDark: 'bg-cyan-950',
     iconBg: 'bg-[#00AEEF]',
     iconSrc: '/icons/alipay.svg',
     chartBar: { light: 'bg-cyan-500', dark: 'bg-cyan-400' },
@@ -107,6 +110,7 @@ export const PAYMENT_TYPE_META: Record<string, PaymentTypeMeta> = {
     color: '#1677FF',
     selectedBorder: 'border-blue-500',
     selectedBg: 'bg-blue-50',
+    selectedBgDark: 'bg-blue-950',
     iconBg: 'bg-[#1677FF]',
     iconSrc: '/icons/alipay.svg',
     chartBar: { light: 'bg-blue-500', dark: 'bg-blue-400' },
@@ -118,6 +122,7 @@ export const PAYMENT_TYPE_META: Record<string, PaymentTypeMeta> = {
     color: '#2BB741',
     selectedBorder: 'border-green-500',
     selectedBg: 'bg-green-50',
+    selectedBgDark: 'bg-green-950',
     iconBg: 'bg-[#2BB741]',
     iconSrc: '/icons/wxpay.svg',
     chartBar: { light: 'bg-green-500', dark: 'bg-green-400' },
@@ -129,6 +134,7 @@ export const PAYMENT_TYPE_META: Record<string, PaymentTypeMeta> = {
     color: '#07C160',
     selectedBorder: 'border-green-600',
     selectedBg: 'bg-green-50',
+    selectedBgDark: 'bg-green-950',
     iconBg: 'bg-[#07C160]',
     iconSrc: '/icons/wxpay.svg',
     chartBar: { light: 'bg-emerald-500', dark: 'bg-emerald-400' },
@@ -140,6 +146,7 @@ export const PAYMENT_TYPE_META: Record<string, PaymentTypeMeta> = {
     color: '#635bff',
     selectedBorder: 'border-[#635bff]',
     selectedBg: 'bg-[#635bff]/10',
+    selectedBgDark: 'bg-[#635bff]/20',
     iconBg: 'bg-[#635bff]',
     chartBar: { light: 'bg-purple-500', dark: 'bg-purple-400' },
     buttonClass: 'bg-[#635bff] hover:bg-[#5249d9] active:bg-[#4840c4]',