62 lines
2.4 KiB
TypeScript
62 lines
2.4 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
interface PaymentMethod {
|
||
|
|
paymentType: string;
|
||
|
|
amount: number;
|
||
|
|
count: number;
|
||
|
|
percentage: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface PaymentMethodChartProps {
|
||
|
|
data: PaymentMethod[];
|
||
|
|
dark?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const TYPE_CONFIG: Record<string, { label: string; light: string; dark: string }> = {
|
||
|
|
alipay: { label: '支付宝', light: 'bg-blue-500', dark: 'bg-blue-400' },
|
||
|
|
wechat: { label: '微信支付', light: 'bg-green-500', dark: 'bg-green-400' },
|
||
|
|
stripe: { label: 'Stripe', light: 'bg-purple-500', dark: 'bg-purple-400' },
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function PaymentMethodChart({ data, dark }: PaymentMethodChartProps) {
|
||
|
|
if (data.length === 0) {
|
||
|
|
return (
|
||
|
|
<div className={['rounded-xl border p-6', dark ? 'border-slate-700 bg-slate-800/60' : 'border-slate-200 bg-white shadow-sm'].join(' ')}>
|
||
|
|
<h3 className={['mb-4 text-sm font-semibold', dark ? 'text-slate-200' : 'text-slate-800'].join(' ')}>支付方式分布</h3>
|
||
|
|
<p className={['text-center text-sm py-8', dark ? 'text-slate-500' : 'text-gray-400'].join(' ')}>暂无数据</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={['rounded-xl border p-6', dark ? 'border-slate-700 bg-slate-800/60' : 'border-slate-200 bg-white shadow-sm'].join(' ')}>
|
||
|
|
<h3 className={['mb-4 text-sm font-semibold', dark ? 'text-slate-200' : 'text-slate-800'].join(' ')}>支付方式分布</h3>
|
||
|
|
<div className="space-y-4">
|
||
|
|
{data.map((method) => {
|
||
|
|
const config = TYPE_CONFIG[method.paymentType] || {
|
||
|
|
label: method.paymentType,
|
||
|
|
light: 'bg-gray-500',
|
||
|
|
dark: 'bg-gray-400',
|
||
|
|
};
|
||
|
|
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-400' : 'text-slate-500'}>
|
||
|
|
¥{method.amount.toLocaleString()} · {method.percentage}%
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className={['h-3 w-full overflow-hidden rounded-full', dark ? 'bg-slate-700' : 'bg-slate-100'].join(' ')}>
|
||
|
|
<div
|
||
|
|
className={['h-full rounded-full transition-all', dark ? config.dark : config.light].join(' ')}
|
||
|
|
style={{ width: `${method.percentage}%` }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|