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

refactor: 将支付类型硬编码抽取到 pay-utils 统一管理

Browse Source 
- PaymentTypeMeta 新增 iconSrc、chartBar、buttonClass 字段
- 新增工具函数: getPaymentMeta、getPaymentIconSrc、
  getPaymentChannelLabel、isStripeType、isRedirectPayment 等
- PaymentQRCode: 用 meta/工具函数替换散落的颜色和类型判断
- PaymentForm: 提交按钮颜色改用 meta.buttonClass
- PaymentMethodChart: 删除重复的 TYPE_CONFIG，改用 getPaymentMeta
- stripe-popup: 按钮颜色改用 meta.buttonClass

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
erio
2026-03-06 16:46:36 +08:00
parent cee24c3afb
commit 3829d0e52e
5 changed files with 83 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/admin/PaymentMethodChart.tsx
View File

@@ -1,6 +1,6 @@
'use client';
import { getPaymentTypeLabel } from '@/lib/pay-utils';
import { getPaymentTypeLabel, getPaymentMeta } from '@/lib/pay-utils';
interface PaymentMethod {
paymentType: string;
@@ -14,14 +14,6 @@ interface PaymentMethodChartProps {
dark?: boolean;
}
const TYPE_CONFIG: Record<string, { label: string; light: string; dark: string }> = {
alipay: { label: '支付宝（易支付）', light: 'bg-cyan-500', dark: 'bg-cyan-400' },
alipay_direct: { label: '支付宝（官方）', light: 'bg-blue-500', dark: 'bg-blue-400' },
wxpay: { label: '微信支付（易支付）', light: 'bg-green-500', dark: 'bg-green-400' },
wxpay_direct: { label: '微信支付（官方）', light: 'bg-emerald-500', dark: 'bg-emerald-400' },
stripe: { label: 'Stripe', light: 'bg-purple-500', dark: 'bg-purple-400' },
};
export default function PaymentMethodChart({ data, dark }: PaymentMethodChartProps) {
if (data.length === 0) {
return (
@@ -51,15 +43,12 @@ export default function PaymentMethodChart({ data, dark }: PaymentMethodChartPro
</h3>
<div className="space-y-4">
{data.map((method) => {
const config = TYPE_CONFIG[method.paymentType] || {
label: getPaymentTypeLabel(method.paymentType),
light: 'bg-gray-500',
dark: 'bg-gray-400',
};
const meta = getPaymentMeta(method.paymentType);
const label = getPaymentTypeLabel(method.paymentType);
return (
<div key={method.paymentType}>
<div className="mb-1.5 flex items-center justify-between text-sm">
<span className={dark ? 'text-slate-300' : 'text-slate-700'}>{config.label}</span>
<span className={dark ? 'text-slate-300' : 'text-slate-700'}>{label}</span>
<span className={dark ? 'text-slate-400' : 'text-slate-500'}>
¥{method.amount.toLocaleString()} · {method.percentage}%
</span>
@@ -70,7 +59,7 @@ export default function PaymentMethodChart({ data, dark }: PaymentMethodChartPro
)}
>
<div
className={['h-full rounded-full transition-all', dark ? config.dark : config.light].join(' ')}
className={['h-full rounded-full transition-all', dark ? meta.chartBar.dark : meta.chartBar.light].join(' ')}
style={{ width: `${method.percentage}%` }}
/>
</div>