chore(account): separate payment methods into tabs and fix noWallet copy

frontend/components/account/AccountCenter.tsx

@@ -752,7 +752,7 @@ export function AccountCenter() {
       paymentHost: isEn ? "Payment Host" : "支付域名",
       primary: "Primary",
       polygonChain: "Polygon Chain",
-      noWallet: isEn ? "No payout wallet bound yet." : "未绑定任何收件钱包",
+      noWallet: isEn ? "No payment wallet bound yet." : "未绑定任何付款钱包",
       bindExt: isEn
         ? "Bind Browser Wallet (EVM Extension)"
         : "绑定浏览器钱包（EVM扩展）",
@@ -878,6 +878,7 @@ export function AccountCenter() {
     CreatedIntent["direct_payment"] | null
   >(null);
   const [manualTxHash, setManualTxHash] = useState("");
+  const [paymentMethodTab, setPaymentMethodTab] = useState<"wallet" | "manual">("wallet");
   const [lastPaymentStartedAt, setLastPaymentStartedAt] = useState(0);
   const [showSecondarySections, setShowSecondarySections] = useState(false);
   const [reconcileBusy, setReconcileBusy] = useState(false);
@@ -2518,6 +2519,7 @@ export function AccountCenter() {
       }
       setLastIntentId(intentId);
       setManualPayment(direct);
+      setPaymentMethodTab("manual");
       setShowOverlay(false);
       setPaymentInfo(
         `手动转账订单已创建：请在 Polygon 网络转 ${direct.amount_usdc} ${direct.token_symbol || selectedTokenLabel} 到 ${shortAddress(direct.receiver_address)}，完成后提交 tx hash。`,
@@ -3159,93 +3161,62 @@ export function AccountCenter() {
                     </div>
                   </div>
                 )}
-                <div className="mb-5 rounded-2xl border border-emerald-400/25 bg-emerald-500/8 p-4">
+
-                  <div className="mb-2 flex items-center justify-between gap-3">
+                {/* 支付方式选择 Tabs */}
-                    <div>
+                <div className="mt-6 border-t border-white/10 pt-6">
-                      <p className="text-xs font-bold text-emerald-200">
+                  <p className="text-[10px] uppercase tracking-widest text-slate-500 mb-3 font-semibold">
-                        手动转账（无需绑定钱包）
+                    请选择支付方式 (Payment Method)
                   </p>
-                      <p className="mt-1 text-[11px] leading-5 text-emerald-100/75">
+                  <div className="grid grid-cols-2 gap-2 p-1 rounded-xl bg-black/40 border border-white/5 mb-5">
-                        先创建订单，向唯一收款地址转账，完成后提交 tx hash
-                        自动开通。请不要和钱包支付同时使用。
-                      </p>
-                    </div>
                     <button
                       type="button"
-                      onClick={() => void createManualPaymentIntent()}
+                      onClick={() => setPaymentMethodTab("wallet")}
-                      disabled={paymentBusy || !isAuthenticated}
+                      className={`py-2 rounded-lg text-xs font-bold transition-all flex items-center justify-center gap-1.5 ${
-                      className="shrink-0 rounded-xl border border-emerald-400/35 bg-emerald-500/15 px-3 py-2 text-[11px] font-bold text-emerald-100 transition-all hover:bg-emerald-500/25 disabled:opacity-50"
+                        paymentMethodTab === "wallet"
+                          ? "bg-blue-600/95 text-white shadow-lg"
+                          : "text-slate-400 hover:text-slate-200 hover:bg-white/5"
+                      }`}
                     >
-                      创建转账订单
+                      <Wallet size={12} />
+                      钱包快捷支付
                     </button>
-                  </div>
-                  {manualPayment ? (
-                    <div className="mt-3 space-y-3 rounded-xl border border-white/10 bg-black/25 p-3">
-                      <div>
-                        <p className="text-[10px] uppercase tracking-widest text-slate-500">
-                          Amount
-                        </p>
-                        <p className="font-mono text-sm font-bold text-white">
-                          {manualPayment.amount_usdc}{" "}
-                          {manualPayment.token_symbol || selectedTokenLabel}
-                        </p>
-                      </div>
-                      <div>
-                        <p className="text-[10px] uppercase tracking-widest text-slate-500">
-                          Receiver
-                        </p>
-                        <div className="mt-1 flex gap-2">
-                          <code className="min-w-0 flex-1 truncate rounded-lg bg-black/40 px-2 py-2 font-mono text-[11px] text-blue-200">
-                            {manualPayment.receiver_address}
-                          </code>
                     <button
                       type="button"
-                            onClick={() =>
+                      onClick={() => setPaymentMethodTab("manual")}
-                              handleCopy(manualPayment.receiver_address)
+                      className={`py-2 rounded-lg text-xs font-bold transition-all flex items-center justify-center gap-1.5 ${
-                            }
+                        paymentMethodTab === "manual"
-                            className="rounded-lg bg-blue-600 px-2 text-xs font-bold text-white"
+                          ? "bg-emerald-600/95 text-white shadow-lg"
+                          : "text-slate-400 hover:text-slate-200 hover:bg-white/5"
+                      }`}
                     >
-                            复制
+                      <ExternalLink size={12} />
+                      手动链上转账
                     </button>
                   </div>
-                      </div>
+
-                      <div>
+                  {paymentMethodTab === "wallet" ? (
-                        <p className="text-[10px] uppercase tracking-widest text-slate-500">
+                    <div className="space-y-4">
-                          Tx Hash
+                      <p className="text-[11px] leading-relaxed text-slate-400">
+                        方式一：绑定您的 EVM 钱包（如 MetaMask 扩展或 WalletConnect 扫码），通过智能合约自动签名付款，额度即时到账。
                       </p>
-                        <input
+                      
-                          value={manualTxHash}
-                          onChange={(event) =>
-                            setManualTxHash(event.target.value)
-                          }
-                          placeholder="0x..."
-                          className="mt-1 w-full rounded-xl border border-white/10 bg-black/30 px-3 py-2 font-mono text-xs text-slate-100 outline-none focus:border-emerald-400/50"
-                        />
-                      </div>
-                      <button
-                        type="button"
-                        onClick={() => void submitManualPaymentTx()}
-                        disabled={paymentBusy}
-                        className="w-full rounded-xl bg-emerald-600 px-3 py-2 text-xs font-bold text-white transition-all hover:bg-emerald-500 disabled:opacity-50"
-                      >
-                        提交 tx hash 并自动确认
-                      </button>
-                    </div>
-                  ) : null}
-                </div>
                       {boundWallets.length ? (
                         <div className="space-y-3">
                           {boundWallets.map((w) => (
                             <div
                               key={w.address}
-                        className={`p-3 rounded-xl border transition-all ${selectedWallet === w.address ? "bg-blue-500/10 border-blue-500/30 text-white" : "bg-white/5 border-white/5 text-slate-400"}`}
+                              className={`p-3 rounded-xl border transition-all ${
+                                selectedWallet === w.address
+                                  ? "bg-blue-500/10 border-blue-500/30 text-white"
+                                  : "bg-white/5 border-white/5 text-slate-400"
+                              }`}
                             >
                               <div className="flex items-center justify-between mb-1">
                                 <span className="text-[10px] font-mono">
                                   {shortAddress(w.address)}
                                 </span>
                                 {w.is_primary && (
-                            <span className="text-[8px] bg-blue-500 px-1 rounded">
+                                  <span className="text-[8px] bg-blue-500 px-1 rounded text-white font-semibold">
                                     {copy.primary}
                                   </span>
                                 )}
@@ -3266,13 +3237,14 @@ export function AccountCenter() {
                           ))}
                         </div>
                       ) : (
-                  <p className="text-xs text-slate-500 italic">
+                        <div className="p-4 rounded-xl border border-white/5 bg-white/5 text-center">
+                          <p className="text-xs text-slate-400 italic">
                             {copy.noWallet}
                           </p>
-                )}
                         </div>
+                      )}
 
-              <div className="mt-6 grid grid-cols-1 gap-2">
+                      <div className="grid grid-cols-1 gap-2 pt-2">
                         {injectedProviderOptions.length > 1 && (
                           <label className="mb-2 block">
                             <span className="mb-2 block text-[11px] uppercase tracking-widest text-slate-500">
@@ -3321,7 +3293,7 @@ export function AccountCenter() {
                           <CreditCard className="w-4 h-4" /> {copy.bindQr}
                         </button>
                         {!walletConnectEnabled && (
-                  <p className="text-[11px] text-slate-500">
+                          <p className="text-[11px] text-slate-500 text-center mt-1">
                             {copy.walletConnectMissing}
                             <code className="mx-1">
                               NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID
@@ -3329,6 +3301,90 @@ export function AccountCenter() {
                           </p>
                         )}
                       </div>
+                    </div>
+                  ) : (
+                    <div className="space-y-4">
+                      <p className="text-[11px] leading-relaxed text-slate-400">
+                        方式二：无需将钱包绑定到账号，直接向平台收款合约转账。转账完成后提交交易哈希（Tx Hash）系统会自动验签并开通 Pro。
+                      </p>
+                      
+                      <div className="rounded-2xl border border-emerald-400/25 bg-emerald-500/8 p-4">
+                        <div className="flex flex-col gap-3">
+                          <div>
+                            <p className="text-xs font-bold text-emerald-200">
+                              手动转账（无需绑定钱包）
+                            </p>
+                            <p className="mt-1 text-[11px] leading-relaxed text-emerald-100/75">
+                              先创建订单，向指定收款地址转账，完成后在此处提交 tx hash。请勿与钱包付款通道重复混用。
+                            </p>
+                          </div>
+                          <button
+                            type="button"
+                            onClick={() => void createManualPaymentIntent()}
+                            disabled={paymentBusy || !isAuthenticated}
+                            className="w-full rounded-xl border border-emerald-400/35 bg-emerald-500/15 py-2.5 text-xs font-bold text-emerald-100 transition-all hover:bg-emerald-500/25 disabled:opacity-50"
+                          >
+                            创建转账订单
+                          </button>
+                        </div>
+                        {manualPayment ? (
+                          <div className="mt-4 space-y-3 rounded-xl border border-white/10 bg-black/25 p-3">
+                            <div>
+                              <p className="text-[10px] uppercase tracking-widest text-slate-500">
+                                Amount
+                              </p>
+                              <p className="font-mono text-sm font-bold text-white">
+                                {manualPayment.amount_usdc}{" "}
+                                {manualPayment.token_symbol || selectedTokenLabel}
+                              </p>
+                            </div>
+                            <div>
+                              <p className="text-[10px] uppercase tracking-widest text-slate-500">
+                                Receiver
+                              </p>
+                              <div className="mt-1 flex gap-2">
+                                <code className="min-w-0 flex-1 truncate rounded-lg bg-black/40 px-2 py-2 font-mono text-[11px] text-blue-200">
+                                  {manualPayment.receiver_address}
+                                </code>
+                                <button
+                                  type="button"
+                                  onClick={() =>
+                                    handleCopy(manualPayment.receiver_address)
+                                  }
+                                  className="rounded-lg bg-blue-600 px-2 text-xs font-bold text-white transition-colors hover:bg-blue-500"
+                                >
+                                  复制
+                                </button>
+                              </div>
+                            </div>
+                            <div>
+                              <p className="text-[10px] uppercase tracking-widest text-slate-500">
+                                Tx Hash
+                              </p>
+                              <input
+                                value={manualTxHash}
+                                onChange={(event) =>
+                                  setManualTxHash(event.target.value)
+                                }
+                                placeholder="0x..."
+                                className="mt-1 w-full rounded-xl border border-white/10 bg-black/30 px-3 py-2 font-mono text-xs text-slate-100 outline-none focus:border-emerald-400/50"
+                              />
+                            </div>
+                            <button
+                              type="button"
+                              onClick={() => void submitManualPaymentTx()}
+                              disabled={paymentBusy}
+                              className="w-full rounded-xl bg-emerald-600 px-3 py-2 text-xs font-bold text-white transition-all hover:bg-emerald-500 disabled:opacity-50"
+                            >
+                              提交 tx hash 并自动确认
+                            </button>
+                          </div>
+                        ) : null}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
             </section>
           </div>
         ) : (