From 047ace5ebedc284db91ca8ccf3ccc4a3cb0fdb8e Mon Sep 17 00:00:00 2001
From: shenlan <xzerolab@gmail.com>
Date: Fri, 21 Nov 2025 22:58:58 +0800
Subject: [PATCH] Polish scan payment layout (#690)

---
 .../account/BillingOptionsPanel.tsx           | 187 +++++++++---------
 .../user-center/routes/subscription.tsx       |  19 +-
 2 files changed, 113 insertions(+), 93 deletions(-)

diff --git a/dashboard/src/modules/extensions/builtin/user-center/account/BillingOptionsPanel.tsx b/dashboard/src/modules/extensions/builtin/user-center/account/BillingOptionsPanel.tsx
index 2c33e61..d2f07a5 100644
--- a/dashboard/src/modules/extensions/builtin/user-center/account/BillingOptionsPanel.tsx
+++ b/dashboard/src/modules/extensions/builtin/user-center/account/BillingOptionsPanel.tsx
@@ -45,6 +45,11 @@ const methodHints: Record<BillingPaymentMethod['type'], string> = {
 export default function BillingOptionsPanel() {
   const [statusMessage, setStatusMessage] = useState<string | null>(null)
   const [selected, setSelected] = useState<ProductOption | null>(null)
+  const primaryButtonClass =
+    'inline-flex w-full items-center justify-center rounded-md bg-[var(--color-primary)] px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-[var(--color-primary-strong)]'
+  const qrClassName = 'mx-auto h-56 w-56 object-contain'
+  const paymentCardClass =
+    'flex h-full flex-col gap-4 rounded-2xl border border-[color:var(--color-surface-border)] bg-[color:var(--color-surface)] p-5 shadow-sm'
 
   const products = useMemo(
     () => PRODUCT_LIST.filter((item) => item.billing && (item.billing.paygo || item.billing.saas)),
@@ -150,32 +155,33 @@ export default function BillingOptionsPanel() {
     const qrCode = method.qrCode?.trim()
 
     return (
-      <div
-        key={`${selected?.plan.planId}-${method.type}`}
-        className="flex flex-col gap-4 rounded-2xl border border-[color:var(--color-surface-border)] bg-[color:var(--color-surface)] p-4 shadow-sm"
-      >
+      <div key={`${selected?.plan.planId}-${method.type}`} className={paymentCardClass}>
         <div className="space-y-1">
           <p className="text-xs font-semibold uppercase tracking-wide text-[var(--color-primary)]">{method.label || method.type}</p>
-          <p className="text-sm font-semibold text-[var(--color-heading)]">{method.type === 'ethereum' ? 'ETH 扫码支付' : 'USDT（TRC20）扫码'}</p>
-          <p className="text-xs text-[var(--color-text-subtle)]">{methodHints[method.type]}</p>
+          <p className="text-lg font-semibold text-[var(--color-heading)]">{method.type === 'ethereum' ? 'ETH（ERC20）' : 'USDT（TRC20）'}</p>
+          <p className="text-sm text-[var(--color-text-subtle)]">{methodHints[method.type]}</p>
         </div>
 
         {qrCode ? (
-          <div className="rounded-xl bg-white p-3 text-center">
-            <img src={qrCode} alt={`${method.label || method.type} QR`} className="mx-auto h-44 w-44 object-contain" />
+          <div className="rounded-xl bg-white p-4 text-center">
+            <img src={qrCode} alt={`${method.label || method.type} QR`} className={qrClassName} />
           </div>
         ) : null}
 
         {address ? (
-          <div className="space-y-1 rounded-xl bg-white p-3 text-xs text-[var(--color-text)]">
-            <div className="flex items-center justify-between gap-2">
-              <div className="flex flex-col">
-                <span className="font-semibold text-[var(--color-heading)]">钱包地址</span>
-                <span className="truncate font-mono" title={address}>
-                  {address}
+          <div className="space-y-2 rounded-xl bg-[color:var(--color-surface-muted)] p-3 text-xs text-[var(--color-text)]">
+            <div className="flex items-center justify-between">
+              <span className="font-semibold text-[color:var(--color-heading)]">钱包地址</span>
+              {network ? (
+                <span className="rounded-full bg-white px-3 py-1 text-[11px] font-semibold text-[color:var(--color-heading)]">
+                  {network}
                 </span>
-                {network ? <span className="text-[11px] text-[var(--color-text-subtle)]">网络 / Network：{network}</span> : null}
-              </div>
+              ) : null}
+            </div>
+            <div className="flex items-center gap-2 rounded-lg bg-white/60 p-2">
+              <span className="flex-1 truncate font-mono" title={address}>
+                {address}
+              </span>
               <button
                 type="button"
                 onClick={async () => {
@@ -183,7 +189,7 @@ export default function BillingOptionsPanel() {
                   await navigator.clipboard.writeText(address)
                   setStatusMessage('已复制钱包地址，完成支付后订单将自动识别。')
                 }}
-                className="inline-flex items-center rounded-md bg-[var(--color-heading)] px-3 py-1 text-[11px] font-semibold text-white shadow-sm transition-colors hover:bg-[var(--color-primary)]"
+                className="inline-flex items-center rounded-md bg-white px-3 py-1 text-[11px] font-semibold text-[color:var(--color-heading)] shadow-sm transition-colors hover:bg-[color:var(--color-surface)]"
               >
                 复制
               </button>
@@ -192,11 +198,7 @@ export default function BillingOptionsPanel() {
         ) : null}
 
         <div className="mt-auto flex flex-wrap gap-2">
-          <button
-            type="button"
-            onClick={() => handleCryptoRecord(method)}
-            className="inline-flex w-full items-center justify-center rounded-md bg-[var(--color-primary)] px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-[var(--color-primary-strong)]"
-          >
+          <button type="button" onClick={() => handleCryptoRecord(method)} className={primaryButtonClass}>
             使用此方式支付
           </button>
         </div>
@@ -208,16 +210,16 @@ export default function BillingOptionsPanel() {
     if (!selected) return null
 
     return (
-      <div className="flex flex-col gap-4 rounded-2xl border border-[color:var(--color-surface-border)] bg-[color:var(--color-surface)] p-4 shadow-sm">
+      <div className={paymentCardClass}>
         <div className="space-y-1">
           <p className="text-xs font-semibold uppercase tracking-wide text-[var(--color-primary)]">PayPal</p>
-          <p className="text-sm font-semibold text-[var(--color-heading)]">PayPal 扫码</p>
-          <p className="text-xs text-[var(--color-text-subtle)]">{methodHints.paypal}</p>
+          <p className="text-lg font-semibold text-[var(--color-heading)]">PayPal 扫码</p>
+          <p className="text-sm text-[var(--color-text-subtle)]">{methodHints.paypal}</p>
         </div>
 
         {method.qrCode ? (
-          <div className="rounded-xl bg-white p-3 text-center">
-            <img src={method.qrCode} alt="PayPal QR" className="mx-auto h-44 w-44 object-contain" />
+          <div className="rounded-xl bg-white p-4 text-center">
+            <img src={method.qrCode} alt="PayPal QR" className={qrClassName} />
           </div>
         ) : null}
 
@@ -265,7 +267,7 @@ export default function BillingOptionsPanel() {
           </div>
           <button
             type="button"
-            className="inline-flex w-full items-center justify-center rounded-md bg-[var(--color-primary)] px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-[var(--color-primary-strong)]"
+            className={primaryButtonClass}
             onClick={() => setStatusMessage('正在使用 PayPal 支付，完成后系统会自动同步订单。')}
           >
             使用此方式支付
@@ -277,82 +279,89 @@ export default function BillingOptionsPanel() {
 
   return (
     <Card>
-      <div className="flex flex-col gap-3">
-        <div>
-          <p className="text-sm font-semibold text-[var(--color-primary)]">支付与订阅</p>
-          <h2 className="text-xl font-semibold text-[var(--color-heading)]">扫码支付，自动识别到账</h2>
-          <p className="text-sm text-[var(--color-text-subtle)]">
-            支持 PayPal / 以太坊 ETH / USDT（TRC20）扫码支付。完成后系统会自动识别订单并开通或续订服务。
-          </p>
+      <div className="flex flex-col gap-5">
+        <div className="flex items-start justify-between gap-3 flex-col md:flex-row md:items-center">
+          <div className="space-y-1">
+            <p className="text-xs font-semibold uppercase tracking-wide text-[var(--color-primary)]">Product Mode</p>
+            <h2 className="text-xl font-semibold text-[color:var(--color-heading)]">先选产品模式，再挑支付方式</h2>
+            <p className="text-sm text-[var(--color-text-subtle)]">
+              PAY-AS-YOU-GO（流量包）与 SaaS 订阅并排展示，信息分层更清晰，避免混淆。
+            </p>
+            <p className="text-xs font-semibold text-[var(--color-heading)]">
+              扫码支付 → 系统自动识别付款 → 自动激活 / 续订订单。
+            </p>
+          </div>
+          {selected?.clientId ? (
+            <p className="rounded-full bg-[color:var(--color-surface-muted)] px-4 py-2 text-xs font-semibold text-[var(--color-heading)]">
+              PayPal / 加密货币均已启用
+            </p>
+          ) : (
+            <p className="rounded-full bg-[color:var(--color-surface-muted)] px-4 py-2 text-xs font-semibold text-[var(--color-heading)]">
+              尚未配置 PayPal Client ID
+            </p>
+          )}
         </div>
 
-        <div className="mt-2 space-y-3">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-wide text-[var(--color-primary)]">选择产品</p>
-              <h3 className="text-lg font-semibold text-[var(--color-heading)]">先确认购买或订阅的方案</h3>
-              <p className="text-sm text-[var(--color-text-subtle)]">PAYG 与 SaaS 分离展示，避免二维码混在一起。</p>
-            </div>
-            {selected?.clientId ? (
-              <p className="text-xs text-[var(--color-text-subtle)]">已启用 PayPal / 加密货币结算</p>
-            ) : (
-              <p className="text-xs text-[var(--color-text-subtle)]">尚未配置 PayPal Client ID</p>
-            )}
-          </div>
-          <div className="grid gap-4 md:grid-cols-2">
-            {productOptions.map((option) => {
-              const isActive =
-                selected !== null && selected.plan.planId === option.plan.planId && selected.kind === option.kind
-              return (
-                <div
-                  key={`${option.product.slug}-${option.kind}`}
-                  className={`flex h-full flex-col rounded-2xl border p-4 shadow-sm transition-colors ${
-                    isActive
-                      ? 'border-[color:var(--color-primary)] bg-[color:var(--color-surface)]'
-                      : 'border-[color:var(--color-surface-border)] bg-[color:var(--color-surface-muted)] hover:border-[color:var(--color-primary)]'
-                  }`}
-                >
-                  <div className="flex items-start justify-between gap-3">
+        <div className="grid gap-4 md:grid-cols-2">
+          {productOptions.map((option) => {
+            const isActive =
+              selected !== null && selected.plan.planId === option.plan.planId && selected.kind === option.kind
+            const isSubscription = option.kind === 'subscription'
+            const description = isSubscription
+              ? '全节点加速 + AI 网络优化。自动续费，可随时取消。'
+              : '一次购买可叠加，不自动续费。'
+            return (
+              <div
+                key={`${option.product.slug}-${option.kind}`}
+                className={`flex h-full flex-col gap-3 rounded-2xl border p-5 shadow-sm transition-colors ${
+                  isActive
+                    ? 'border-[color:var(--color-primary)] bg-[color:var(--color-surface)]'
+                    : 'border-[color:var(--color-surface-border)] bg-[color:var(--color-surface-muted)] hover:border-[color:var(--color-primary)]'
+                }`}
+              >
+                <div className="space-y-2">
+                  <div className="flex items-start justify-between gap-2">
                     <div className="space-y-1">
                       <p className="text-xs font-semibold uppercase tracking-wide text-[var(--color-primary)]">
                         {kindLabel[option.kind]}
                       </p>
                       <h4 className="text-lg font-semibold text-[var(--color-heading)]">{option.plan.name}</h4>
-                      {option.plan.description ? (
-                        <p className="text-sm text-[var(--color-text-subtle)]">{option.plan.description}</p>
-                      ) : null}
-                      <p className="text-xl font-bold text-[var(--color-heading)]">
-                        {option.plan.currency} {option.plan.price.toFixed(2)}
-                        {option.kind === 'subscription' && option.plan.interval ? ` / ${option.plan.interval}` : null}
-                      </p>
                     </div>
+                    <span className="rounded-full bg-white px-3 py-1 text-[11px] font-semibold text-[color:var(--color-heading)]">
+                      {isSubscription ? '自动续费' : '一次性购买'}
+                    </span>
                   </div>
-                  <div className="mt-auto flex flex-wrap gap-2">
-                    <button
-                      type="button"
-                      onClick={() => setSelected(option)}
-                      className={`inline-flex w-full items-center justify-center rounded-md px-4 py-2 text-sm font-semibold shadow-sm transition-colors ${
-                        isActive
-                          ? 'bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-strong)]'
-                          : 'bg-white text-[var(--color-heading)] hover:bg-[var(--color-surface)]'
-                      }`}
-                    >
-                      {actionLabel[option.kind]}
-                    </button>
-                  </div>
+                  <p className="text-sm text-[var(--color-text-subtle)]">{description}</p>
+                  <p className="text-2xl font-bold text-[var(--color-heading)]">
+                    {option.plan.currency} {option.plan.price.toFixed(0)}
+                    {isSubscription && option.plan.interval ? ` / ${option.plan.interval}` : ''}
+                  </p>
                 </div>
-              )
-            })}
-          </div>
+                <div className="mt-auto">
+                  <button
+                    type="button"
+                    onClick={() => setSelected(option)}
+                    className={`${
+                      isActive
+                        ? 'bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-strong)]'
+                        : 'bg-white text-[var(--color-heading)] hover:bg-[color:var(--color-surface)]'
+                    } inline-flex w-full items-center justify-center rounded-md px-4 py-2 text-sm font-semibold shadow-sm transition-colors`}
+                  >
+                    {actionLabel[option.kind]}
+                  </button>
+                </div>
+              </div>
+            )
+          })}
         </div>
 
         {selected ? (
-          <div className="space-y-3 rounded-2xl border border-[color:var(--color-surface-border)] bg-[color:var(--color-surface-muted)] p-4">
+          <div className="space-y-4 rounded-2xl border border-[color:var(--color-surface-border)] bg-[color:var(--color-surface-muted)] p-5">
             <div className="flex flex-col gap-1">
-              <p className="text-xs font-semibold uppercase tracking-wide text-[var(--color-primary)]">选择支付方式</p>
-              <h3 className="text-lg font-semibold text-[var(--color-heading)]">支付后系统自动识别并开通</h3>
+              <p className="text-xs font-semibold uppercase tracking-wide text-[var(--color-primary)]">Payment</p>
+              <h3 className="text-lg font-semibold text-[var(--color-heading)]">三种扫码支付并列，统一卡片结构</h3>
               <p className="text-sm text-[var(--color-text-subtle)]">
-                扫码支付 → 系统识别付款 → 订单自动激活或续订。PayPal 无需地址，ETH/USDT 展示钱包地址与复制按钮。
+                标准流程：扫码支付 → 系统自动识别付款 → 自动激活 / 续订订单。二维码统一尺寸，地址区使用等宽字体并提供复制按钮。
               </p>
             </div>
 
diff --git a/dashboard/src/modules/extensions/builtin/user-center/routes/subscription.tsx b/dashboard/src/modules/extensions/builtin/user-center/routes/subscription.tsx
index 01bee33..a8e39bf 100644
--- a/dashboard/src/modules/extensions/builtin/user-center/routes/subscription.tsx
+++ b/dashboard/src/modules/extensions/builtin/user-center/routes/subscription.tsx
@@ -8,11 +8,22 @@ export default function UserCenterSubscriptionRoute() {
       <Card>
         <h1 className="text-2xl font-semibold text-gray-900">支付与订阅</h1>
         <p className="mt-2 text-sm text-gray-600">
-          支持 PayPal / 以太坊 ETH / USDT（TRC20）扫码支付。完成后系统会自动识别订单并开通或续订。
-        </p>
-        <p className="mt-1 text-sm text-gray-600">
-          流程：先选择产品模式（PAYG / SaaS），再选择支付方式，扫码支付 → 自动识别到账。
+          支持 PayPal / ETH（ERC20）/ USDT（TRC20）扫码支付。支付成功后系统将自动识别并开通或续订服务。
         </p>
+        <div className="mt-3 grid gap-3 md:grid-cols-3">
+          <div className="rounded-xl bg-[color:var(--color-surface-muted)] p-3 text-sm text-gray-700 shadow-sm">
+            <p className="font-semibold text-[color:var(--color-heading)]">步骤 1：选择产品模式</p>
+            <p className="text-gray-600">PAYG（流量包）或 SaaS（订阅），两种模式分区展示，避免混淆。</p>
+          </div>
+          <div className="rounded-xl bg-[color:var(--color-surface-muted)] p-3 text-sm text-gray-700 shadow-sm">
+            <p className="font-semibold text-[color:var(--color-heading)]">步骤 2：选择支付方式</p>
+            <p className="text-gray-600">PayPal / ETH / USDT 三种扫码方式并列，二维码统一尺寸，信息层级一致。</p>
+          </div>
+          <div className="rounded-xl bg-[color:var(--color-surface-muted)] p-3 text-sm text-gray-700 shadow-sm">
+            <p className="font-semibold text-[color:var(--color-heading)]">步骤 3：自动识别到账</p>
+            <p className="text-gray-600">扫码支付 → 系统自动识别付款 → 自动激活或续订订单，全程无需手工确认。</p>
+          </div>
+        </div>
       </Card>
       <BillingOptionsPanel />
       <SubscriptionPanel />