feat: 支持官方支付宝与易支付支付宝同时展示

- PaymentType 改为 string 类型，支持复合 key（如 alipay_direct）
- 官方支付宝注册为 alipay_direct，易支付保持 alipay/wxpay
- 前端按 PAYMENT_TYPE_META 展示标签区分（官方直连/易支付）
- 管理后台显示统一改为 getPaymentTypeLabel 通用映射
- 修复 admin/OrderTable 中 wechat 拼写错误

src/components/PaymentForm.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { PAYMENT_TYPE_META } from '@/lib/pay-utils';
+import { PAYMENT_TYPE_META, getPaymentIconType } from '@/lib/pay-utils';
 
 export interface MethodLimitInfo {
   available: boolean;
@@ -99,14 +99,15 @@ export default function PaymentForm({
   };
 
   const renderPaymentIcon = (type: string) => {
-    if (type === 'alipay') {
+    const iconType = getPaymentIconType(type);
+    if (iconType === 'alipay') {
       return (
         <span className="flex h-8 w-8 items-center justify-center rounded-md bg-[#00AEEF] text-xl font-bold leading-none text-white">
           支
         </span>
       );
     }
-    if (type === 'wxpay') {
+    if (iconType === 'wxpay') {
       return (
         <span className="flex h-8 w-8 items-center justify-center rounded-full bg-[#2BB741] text-white">
           <svg viewBox="0 0 24 24" className="h-5 w-5" fill="currentColor">
@@ -116,7 +117,7 @@ export default function PaymentForm({
         </span>
       );
     }
-    if (type === 'stripe') {
+    if (iconType === 'stripe') {
       return (
         <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-[#635bff] text-white">
           <svg
@@ -326,7 +327,7 @@ export default function PaymentForm({
         disabled={!isValid || loading}
         className={`w-full rounded-lg py-3 text-center font-medium text-white transition-colors ${
           isValid && !loading
-            ? effectivePaymentType === 'stripe'
+            ? effectivePaymentType.startsWith('stripe')
               ? 'bg-[#635bff] hover:bg-[#5851db] active:bg-[#4b44c7]'
               : 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800'
             : dark

src/components/PaymentQRCode.tsx

@@ -10,7 +10,7 @@ interface PaymentQRCodeProps {
   qrCode?: string | null;
   clientSecret?: string | null;
   stripePublishableKey?: string | null;
-  paymentType?: 'alipay' | 'wxpay' | 'stripe';
+  paymentType?: string;
   amount: number;
   payAmount?: number;
   expiresAt: string;
@@ -110,7 +110,7 @@ export default function PaymentQRCode({
   }, [qrPayload]);
 
   // Initialize Stripe Payment Element
-  const isStripe = paymentType === 'stripe';
+  const isStripe = paymentType?.startsWith('stripe');
 
   useEffect(() => {
     if (!isStripe || !clientSecret || !stripePublishableKey) return;
@@ -313,7 +313,7 @@ export default function PaymentQRCode({
     }
   };
 
-  const isWx = paymentType === 'wxpay';
+  const isWx = paymentType?.startsWith('wxpay');
   const iconSrc = isStripe ? '' : isWx ? '/icons/wxpay.svg' : '/icons/alipay.svg';
   const channelLabel = isStripe ? 'Stripe' : isWx ? '\u5FAE\u4FE1' : '\u652F\u4ED8\u5B9D';
   const iconBgClass = isStripe ? 'bg-[#635bff]' : isWx ? 'bg-[#07C160]' : 'bg-[#1677FF]';

src/components/admin/OrderDetail.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { getPaymentTypeLabel } from '@/lib/pay-utils';
+
 interface AuditLog {
   id: string;
   action: string;
@@ -53,7 +55,7 @@ export default function OrderDetail({ order, onClose, dark }: OrderDetailProps)
     { 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.paymentType === 'alipay' ? '支付宝' : '微信支付' },
+    { label: '支付方式', value: getPaymentTypeLabel(order.paymentType) },
     { label: '充值码', value: order.rechargeCode },
     { label: '支付单号', value: order.paymentTradeNo || '-' },
     { label: '客户端IP', value: order.clientIp || '-' },

src/components/admin/OrderTable.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { getPaymentTypeLabel } from '@/lib/pay-utils';
+
 interface Order {
   id: string;
   userId: number;
@@ -92,15 +94,7 @@ export default function OrderTable({ orders, onRetry, onCancel, onViewDetail, da
                     {statusInfo.label}
                   </span>
                 </td>
-                <td className={tdMuted}>
-                  {order.paymentType === 'alipay'
-                    ? '支付宝'
-                    : order.paymentType === 'wechat'
-                      ? '微信支付'
-                      : order.paymentType === 'stripe'
-                        ? 'Stripe'
-                        : order.paymentType}
-                </td>
+                <td className={tdMuted}>{getPaymentTypeLabel(order.paymentType)}</td>
                 <td className={tdMuted}>{order.srcHost || '-'}</td>
                 <td className={tdMuted}>{new Date(order.createdAt).toLocaleString('zh-CN')}</td>
                 <td className="whitespace-nowrap px-4 py-3 text-sm">

src/components/admin/PaymentMethodChart.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { getPaymentTypeLabel } from '@/lib/pay-utils';
+
 interface PaymentMethod {
   paymentType: string;
   amount: number;
@@ -13,8 +15,10 @@ interface PaymentMethodChartProps {
 }
 
 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' },
+  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' },
 };
 
@@ -48,7 +52,7 @@ export default function PaymentMethodChart({ data, dark }: PaymentMethodChartPro
       <div className="space-y-4">
         {data.map((method) => {
           const config = TYPE_CONFIG[method.paymentType] || {
-            label: method.paymentType,
+            label: getPaymentTypeLabel(method.paymentType),
             light: 'bg-gray-500',
             dark: 'bg-gray-400',
           };