feat(admin): collapsible gateway credential forms on payment page

Hide channel config cards until enabled; open expanded on enable and allow manual collapse via group header.

assets/admin/src/schema/sections/payment/gateway.js

@@ -2,7 +2,7 @@ export const gatewaySchema = {
   key: 'payment.gateway',
   title: '收款接口',
   icon: 'fas fa-credit-card',
-  description: '配置支付网关凭据、回调校验口令与运行模式。填写凭据后对应网关即变为”可用”。',
+  description: '配置支付网关凭据、回调校验口令与运行模式。开启渠道后展开填写配置，可随时收起。',
   defaults: {
     payment_gateway_mode: 'manual_review',
     payment_gateway_test_enabled: true,
@@ -66,27 +66,32 @@ export const gatewaySchema = {
     },
     {
       key: 'gateways',
-      title: '支付网关',
+      title: '支付渠道开关',
       icon: 'fas fa-toggle-on',
+      description: '先开启渠道，下方对应配置卡片会展开；填写凭据后网关状态变为可用。无凭据的内置渠道（余额/卡密）仅开关即可。',
       fields: [
         { key: 'payment_wechat_enabled', label: '微信支付', type: 'switch', default: false },
         { key: 'payment_alipay_enabled', label: '支付宝', type: 'switch', default: false },
         { key: 'payment_paypal_enabled', label: 'PayPal', type: 'switch', default: false },
         { key: 'payment_stripe_enabled', label: 'Stripe', type: 'switch', default: false },
-        { key: 'payment_balance_enabled', label: '余额支付', type: 'switch', default: true, help: '需同时在「余额充值」启用余额功能。关闭后用户中心仍可有钱包，但结账不可用余额支付。' },
-        { key: 'payment_card_pass_enabled', label: '卡密充值', type: 'switch', default: false },
         { key: 'payment_xunhupay_enabled', label: '虎皮椒', type: 'switch', default: false },
         { key: 'payment_xhpay_enabled', label: '小火付', type: 'switch', default: false },
         { key: 'payment_payjs_enabled', label: 'PayJS', type: 'switch', default: false },
         { key: 'payment_epay_enabled', label: '易支付', type: 'switch', default: false },
-        { key: 'payment_vmq_enabled', label: 'V免签', type: 'switch', default: false },
-        { key: 'payment_codepay_enabled', label: 'Codepay', type: 'switch', default: false },
+        { key: 'payment_vmq_enabled', label: 'V免签', type: 'switch', default: false, help: '当前仅开关占位，凭据接入后补齐。' },
+        { key: 'payment_codepay_enabled', label: 'Codepay', type: 'switch', default: false, help: '当前仅开关占位，凭据接入后补齐。' },
+        { key: 'payment_balance_enabled', label: '余额支付', type: 'switch', default: true, help: '需同时在「余额充值」启用余额功能。关闭后用户中心仍可有钱包，但结账不可用余额支付。' },
+        { key: 'payment_card_pass_enabled', label: '卡密充值', type: 'switch', default: false, help: '卡密规则在「卡密设置」；此处仅控制是否作为收款渠道展示。' },
       ],
     },
     {
       key: 'wechat',
       title: '微信支付配置',
       icon: 'fab fa-weixin',
+      description: '开启「微信支付」后填写商户号与密钥。',
+      collapsible: true,
+      expandWhen: 'payment_wechat_enabled',
+      dependsOn: { key: 'payment_wechat_enabled', value: true },
       fields: [
         { key: 'wechat_merchantid', label: '商户号', type: 'input', default: '' },
         { key: 'wechat_jsapi', label: 'JSAPI密钥', type: 'input', default: '' },
@@ -99,6 +104,10 @@ export const gatewaySchema = {
       key: 'alipay',
       title: '支付宝配置',
       icon: 'fab fa-alipay',
+      description: '开启「支付宝」后填写应用与回调地址。',
+      collapsible: true,
+      expandWhen: 'payment_alipay_enabled',
+      dependsOn: { key: 'payment_alipay_enabled', value: true },
       fields: [
         { key: 'alipay_appid', label: 'AppID', type: 'input', default: '' },
         { key: 'alipay_privatekey', label: '应用私钥', type: 'textarea', rows: 3, default: '' },
@@ -111,6 +120,10 @@ export const gatewaySchema = {
       key: 'paypal',
       title: 'PayPal 配置',
       icon: 'fab fa-paypal',
+      description: '开启「PayPal」后填写 Client 凭据。',
+      collapsible: true,
+      expandWhen: 'payment_paypal_enabled',
+      dependsOn: { key: 'payment_paypal_enabled', value: true },
       fields: [
         { key: 'paypal_client_id', label: 'Client ID', type: 'input', default: '' },
         { key: 'paypal_client_secret', label: 'Client Secret', type: 'input', default: '' },
@@ -118,10 +131,30 @@ export const gatewaySchema = {
         { key: 'paypal_sandbox', label: '沙箱模式', type: 'switch', default: true },
       ],
     },
+    {
+      key: 'stripe',
+      title: 'Stripe 配置',
+      icon: 'fab fa-stripe',
+      description: '开启「Stripe」后填写 API Key 与 Webhook。',
+      collapsible: true,
+      expandWhen: 'payment_stripe_enabled',
+      dependsOn: { key: 'payment_stripe_enabled', value: true },
+      fields: [
+        { key: 'stripe_secret_key', label: 'Secret Key', type: 'input', default: '' },
+        { key: 'stripe_publishable_key', label: 'Publishable Key', type: 'input', default: '' },
+        { key: 'stripe_webhook_secret', label: 'Webhook Secret', type: 'input', default: '', help: 'Stripe Dashboard 配置 Webhook 后获得，用于验签。' },
+        { key: 'stripe_currency', label: '货币', type: 'input', default: 'usd' },
+        { key: 'stripe_test_mode', label: '测试模式', type: 'switch', default: true },
+      ],
+    },
     {
       key: 'xunhupay',
       title: '虎皮椒配置',
       icon: 'fas fa-pepper-hot',
+      description: '开启「虎皮椒」后填写 App 凭据。',
+      collapsible: true,
+      expandWhen: 'payment_xunhupay_enabled',
+      dependsOn: { key: 'payment_xunhupay_enabled', value: true },
       fields: [
         { key: 'xunhupay_appid', label: 'AppID', type: 'input', default: '' },
         { key: 'xunhupay_appsecret', label: 'AppSecret', type: 'input', default: '' },
@@ -131,6 +164,10 @@ export const gatewaySchema = {
       key: 'xhpay',
       title: '小火付配置',
       icon: 'fas fa-fire',
+      description: '开启「小火付」后填写商户与通道参数。',
+      collapsible: true,
+      expandWhen: 'payment_xhpay_enabled',
+      dependsOn: { key: 'payment_xhpay_enabled', value: true },
       fields: [
         { key: 'xhpay_mchid', label: '商户号', type: 'input', default: '' },
         { key: 'xhpay_alipay_v2', label: '支付宝V2', type: 'input', default: '' },
@@ -141,6 +178,10 @@ export const gatewaySchema = {
       key: 'payjs',
       title: 'PayJS 配置',
       icon: 'fab fa-js',
+      description: '开启「PayJS」后填写商户号与通信密钥。',
+      collapsible: true,
+      expandWhen: 'payment_payjs_enabled',
+      dependsOn: { key: 'payment_payjs_enabled', value: true },
       fields: [
         { key: 'payjs_mchid', label: '商户号', type: 'input', default: '' },
         { key: 'payjs_key', label: '通信密钥', type: 'input', default: '' },
@@ -150,23 +191,15 @@ export const gatewaySchema = {
       key: 'epay',
       title: '易支付配置',
       icon: 'fas fa-university',
+      description: '开启「易支付」后填写接口与商户信息。',
+      collapsible: true,
+      expandWhen: 'payment_epay_enabled',
+      dependsOn: { key: 'payment_epay_enabled', value: true },
       fields: [
         { key: 'epay_apiurl', label: '接口地址', type: 'input', default: '' },
         { key: 'epay_pid', label: '商户ID', type: 'input', default: '' },
         { key: 'epay_key', label: '商户密钥', type: 'input', default: '' },
       ],
     },
-    {
-      key: 'stripe',
-      title: 'Stripe 配置',
-      icon: 'fab fa-stripe',
-      fields: [
-        { key: 'stripe_secret_key', label: 'Secret Key', type: 'input', default: '' },
-        { key: 'stripe_publishable_key', label: 'Publishable Key', type: 'input', default: '' },
-        { key: 'stripe_webhook_secret', label: 'Webhook Secret', type: 'input', default: '', help: 'Stripe Dashboard 配置 Webhook 后获得，用于验签。' },
-        { key: 'stripe_currency', label: '货币', type: 'input', default: 'usd' },
-        { key: 'stripe_test_mode', label: '测试模式', type: 'switch', default: true },
-      ],
-    },
   ],
 }