Merge pull request 'feat(admin): collapsible gateway credential forms on payment page' (#288) from worktree-fix-balance-chain into main

Reviewed-on: CYL/wordpress-theme-aksrt#288

assets/admin/src/components/form/AksFieldGroup.vue

@@ -1,6 +1,11 @@
 <template>
-  <div class="aksrt-field-group">
+  <div class="aksrt-field-group" :class="{ 'is-collapsible': collapsible, 'is-collapsed': collapsible && collapsed }">
-    <div v-if="title" class="aksrt-field-group__header">
+    <div
+      v-if="title"
+      class="aksrt-field-group__header"
+      :class="{ 'is-clickable': collapsible }"
+      @click="collapsible ? toggleCollapse() : undefined"
+    >
       <div class="aksrt-field-group__header-left">
         <FaIcon v-if="icon" :icon="icon" :size="16" class="aksrt-field-group__icon" />
         <div>
@@ -8,22 +13,27 @@
           <p v-if="description" class="aksrt-field-group__desc">{{ description }}</p>
         </div>
       </div>
-      <div v-if="$slots.actions" class="aksrt-field-group__actions">
+      <div class="aksrt-field-group__header-right">
-        <slot name="actions" />
+        <div v-if="$slots.actions" class="aksrt-field-group__actions" @click.stop>
+          <slot name="actions" />
+        </div>
+        <button
+          v-if="collapsible"
+          type="button"
+          class="aksrt-field-group__collapse-btn"
+          :aria-expanded="(!collapsed).toString()"
+          :title="collapsed ? '展开配置' : '收起配置'"
+          @click.stop="toggleCollapse"
+        >
+          <FaIcon
+            :icon="collapsed ? 'fas fa-chevron-right' : 'fas fa-chevron-down'"
+            :size="12"
+          />
+          <span>{{ collapsed ? '展开' : '收起' }}</span>
+        </button>
       </div>
     </div>
 
-    <div v-if="collapsible" class="aksrt-field-group__toggle" @click="toggleCollapse">
-      <FaIcon
-        :icon="collapsed ? 'fas fa-chevron-right' : 'fas fa-chevron-down'"
-        :size="12"
-        class="aksrt-field-group__chevron"
-      />
-      <span class="aksrt-field-group__toggle-text">
-        {{ collapsed ? '展开' : '收起' }}{{ title ? ` ${title}` : '' }}
-      </span>
-    </div>
-
     <transition name="aksrt-collapse">
       <div v-show="!collapsed" class="aksrt-field-group__body">
         <slot />
@@ -36,6 +46,9 @@
 /**
  * AksFieldGroup — card-style container for grouping related form fields.
  * Supports collapsible sections, icon headers, and description text.
+ *
+ * defaultCollapsed only seeds initial state. Parent should remount the group
+ * (e.g. via :key when a channel turns on) if it wants to force expand again.
  */
 import { ref } from 'vue'
 import FaIcon from './FaIcon.vue'
@@ -48,9 +61,10 @@ const props = defineProps({
   defaultCollapsed: { type: Boolean, default: false },
 })
 
-const collapsed = ref(props.defaultCollapsed)
+const collapsed = ref(!!props.defaultCollapsed)
 
 function toggleCollapse() {
+  if (!props.collapsible) return
   collapsed.value = !collapsed.value
 }
 </script>
@@ -69,12 +83,34 @@ function toggleCollapse() {
   align-items: flex-start;
   justify-content: space-between;
   padding: 18px 20px 0;
+  gap: 12px;
+}
+
+.aksrt-field-group__header.is-clickable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.aksrt-field-group__header.is-clickable:hover .aksrt-field-group__title {
+  color: #1890ff;
+}
+
+.aksrt-field-group.is-collapsed .aksrt-field-group__header {
+  padding-bottom: 18px;
 }
 
 .aksrt-field-group__header-left {
   display: flex;
   align-items: flex-start;
   gap: 10px;
+  min-width: 0;
+}
+
+.aksrt-field-group__header-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
 }
 
 .aksrt-field-group__icon {
@@ -87,6 +123,7 @@ function toggleCollapse() {
   font-size: 15px;
   font-weight: 600;
   color: #1a1a2e;
+  transition: color 0.15s;
 }
 
 .aksrt-field-group__desc {
@@ -102,24 +139,24 @@ function toggleCollapse() {
   gap: 8px;
 }
 
-.aksrt-field-group__toggle {
+.aksrt-field-group__collapse-btn {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 8px 20px;
+  border: 1px solid #e8ecf2;
-  cursor: pointer;
+  background: #f7f9fc;
-  color: #8a909c;
+  color: #5c6370;
+  border-radius: 999px;
+  padding: 4px 10px;
   font-size: 12px;
-  user-select: none;
+  cursor: pointer;
-  transition: color 0.15s;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
 }
 
-.aksrt-field-group__toggle:hover {
+.aksrt-field-group__collapse-btn:hover {
   color: #1890ff;
-}
+  border-color: #91caff;
-
+  background: #f0f7ff;
-.aksrt-field-group__chevron {
-  transition: transform 0.2s;
 }
 
 .aksrt-field-group__body {

assets/admin/src/components/form/AksFormRenderer.vue

@@ -44,13 +44,14 @@
 
     <!-- Form content -->
     <template v-else-if="schema && schema.length">
-      <template v-for="group in filteredSchema" :key="group.key || group.title">
+      <template v-for="group in filteredSchema" :key="groupKey(group)">
         <AksFieldGroup
+          v-if="isGroupVisible(group)"
           :title="group.title"
           :description="group.description"
           :icon="group.icon"
-          :collapsible="group.collapsible"
+          :collapsible="!!group.collapsible"
-          :default-collapsed="group.defaultCollapsed"
+          :default-collapsed="resolveGroupCollapsed(group)"
         >
           <template v-if="group.fields">
             <template v-for="field in group.fields" :key="field.key">
@@ -164,25 +165,55 @@ const emit = defineEmits(['update:formData', 'save', 'reload'])
 
 const searchQuery = ref('')
 
-/** Check if a field should be visible based on its dependsOn rule */
+/** Evaluate dependsOn rule against current form data */
-function isFieldVisible(field) {
+function matchDependsOn(dependsOn) {
-  if (!field.dependsOn) return true
+  if (!dependsOn) return true
-
+  if (typeof dependsOn === 'string') {
-  // dependsOn can be a string (truthy check on that key) or an object { key, value }
+    return !!props.formData[dependsOn]
-  if (typeof field.dependsOn === 'string') {
-    return !!props.formData[field.dependsOn]
   }
-
+  if (typeof dependsOn === 'object') {
-  if (typeof field.dependsOn === 'object') {
+    const { key, value, not } = dependsOn
-    const { key, value, not } = field.dependsOn
     const currentVal = props.formData[key]
     if (not) return currentVal !== value
-    return currentVal === value
+    // Loose equality so true matches 1 / '1' from some option stores.
+    // eslint-disable-next-line eqeqeq
+    return currentVal == value || (!!value === true && !!currentVal)
   }
-
   return true
 }
 
+/** Check if a field should be visible based on its dependsOn rule */
+function isFieldVisible(field) {
+  return matchDependsOn(field.dependsOn)
+}
+
+/** Whole group can be hidden (e.g. optional advanced blocks). */
+function isGroupVisible(group) {
+  return matchDependsOn(group.dependsOn)
+}
+
+/**
+ * Collapse preference for a group.
+ * - expandWhen: form key; when truthy, start expanded (channel just enabled → open form)
+ * - defaultCollapsed: static default
+ */
+function resolveGroupCollapsed(group) {
+  if (group.expandWhen) {
+    const on = !!props.formData?.[group.expandWhen]
+    return !on
+  }
+  return !!group.defaultCollapsed
+}
+
+/** Stable key; remount when expandWhen flips so newly enabled channels open expanded. */
+function groupKey(group) {
+  const base = group.key || group.title || 'group'
+  if (group.expandWhen) {
+    return `${base}:${props.formData?.[group.expandWhen] ? 'on' : 'off'}`
+  }
+  return base
+}
+
 /** Get field value from formData */
 function getFieldValue(key) {
   return props.formData?.[key]

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_vmq_enabled', label: 'V免签', type: 'switch', default: false, help: '当前仅开关占位，凭据接入后补齐。' },
-        { key: 'payment_codepay_enabled', label: 'Codepay', type: 'switch', default: false },
+        { 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 },
-      ],
-    },
   ],
 }

src/AKSRT/Admin/Schema/SchemaPayment.php

@@ -219,7 +219,7 @@ class SchemaPayment {
                 'gateway' => [
                     'key'        => 'gateway',
                     'title'      => '收款接口',
-                    'version'    => '1.0.0',
+                    'version'    => '1.1.0',
                     'option_key' => 'aksrt_settings',
                     'groups'     => [
                         ['key' => 'adapter', 'title' => '网关适配器', 'fields' => [
@@ -229,65 +229,67 @@ class SchemaPayment {
                             ['key' => 'payment_gateway_callback_secret', 'label' => '回调校验口令', 'type' => 'string', 'default' => ''],
                             ['key' => 'payment_gateway_help', 'label' => '运维说明', 'type' => 'string', 'default' => '未接真实支付网关时，建议使用测试网关或人工确认模式完成联调。'],
                         ]],
-                        ['key' => 'gateways', 'title' => '支付网关', 'fields' => [
+                        ['key' => 'gateways', 'title' => '支付渠道开关', '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_balance_enabled', 'label' => '余额支付', 'type' => 'switch', 'default' => true],
+                            ['key' => 'payment_stripe_enabled', 'label' => 'Stripe', 'type' => 'switch', 'default' => false],
-                            ['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_stripe_enabled', 'label' => 'Stripe', 'type' => 'switch', 'default' => false],
+                            ['key' => 'payment_balance_enabled', 'label' => '余额支付', 'type' => 'switch', 'default' => true],
+                            ['key' => 'payment_card_pass_enabled', 'label' => '卡密充值', 'type' => 'switch', 'default' => false],
                         ]],
-                        ['key' => 'wechat', 'title' => '微信支付配置', 'fields' => [
+                        // Channel credential groups: SPA uses collapsible + expandWhen + group dependsOn.
+                        // Field-level dependsOn kept for contract audit / non-SPA consumers.
+                        ['key' => 'wechat', 'title' => '微信支付配置', 'collapsible' => true, 'expandWhen' => 'payment_wechat_enabled', 'dependsOn' => ['key' => 'payment_wechat_enabled', 'value' => true], 'fields' => [
                             ['key' => 'wechat_merchantid', 'label' => '商户号', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_wechat_enabled', 'value' => true]],
                             ['key' => 'wechat_jsapi', 'label' => 'JSAPI密钥', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_wechat_enabled', 'value' => true]],
                             ['key' => 'wechat_appsecret', 'label' => 'AppSecret', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_wechat_enabled', 'value' => true]],
                             ['key' => 'wechat_cert_path', 'label' => '证书路径', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_wechat_enabled', 'value' => true]],
                             ['key' => 'wechat_key_path', 'label' => '密钥路径', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_wechat_enabled', 'value' => true]],
                         ]],
-                        ['key' => 'alipay', 'title' => '支付宝配置', 'fields' => [
+                        ['key' => 'alipay', 'title' => '支付宝配置', 'collapsible' => true, 'expandWhen' => 'payment_alipay_enabled', 'dependsOn' => ['key' => 'payment_alipay_enabled', 'value' => true], 'fields' => [
                             ['key' => 'alipay_appid', 'label' => 'AppID', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_alipay_enabled', 'value' => true]],
-                            ['key' => 'alipay_privatekey', 'label' => '应用私钥', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_alipay_enabled', 'value' => true]],
+                            ['key' => 'alipay_privatekey', 'label' => '应用私钥', 'type' => 'textarea', 'default' => '', 'dependsOn' => ['key' => 'payment_alipay_enabled', 'value' => true]],
-                            ['key' => 'alipay_publickey', 'label' => '支付宝公钥', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_alipay_enabled', 'value' => true]],
+                            ['key' => 'alipay_publickey', 'label' => '支付宝公钥', 'type' => 'textarea', 'default' => '', 'dependsOn' => ['key' => 'payment_alipay_enabled', 'value' => true]],
                             ['key' => 'alipay_return_url', 'label' => '同步回调地址', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_alipay_enabled', 'value' => true]],
                             ['key' => 'alipay_notify_url', 'label' => '异步回调地址', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_alipay_enabled', 'value' => true]],
                         ]],
-                        ['key' => 'paypal', 'title' => 'PayPal配置', 'fields' => [
+                        ['key' => 'paypal', 'title' => 'PayPal配置', 'collapsible' => true, 'expandWhen' => 'payment_paypal_enabled', 'dependsOn' => ['key' => 'payment_paypal_enabled', 'value' => true], 'fields' => [
                             ['key' => 'paypal_client_id', 'label' => 'Client ID', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_paypal_enabled', 'value' => true]],
                             ['key' => 'paypal_client_secret', 'label' => 'Client Secret', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_paypal_enabled', 'value' => true]],
                             ['key' => 'paypal_currency', 'label' => '货币', 'type' => 'input', 'default' => 'USD', 'dependsOn' => ['key' => 'payment_paypal_enabled', 'value' => true]],
                             ['key' => 'paypal_sandbox', 'label' => '沙箱模式', 'type' => 'switch', 'default' => true, 'dependsOn' => ['key' => 'payment_paypal_enabled', 'value' => true]],
                         ]],
-                        ['key' => 'xunhupay', 'title' => '虎皮椒配置', 'fields' => [
+                        ['key' => 'stripe', 'title' => 'Stripe配置', 'collapsible' => true, 'expandWhen' => 'payment_stripe_enabled', 'dependsOn' => ['key' => 'payment_stripe_enabled', 'value' => true], 'fields' => [
-                            ['key' => 'xunhupay_appid', 'label' => 'AppID', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_xunhupay_enabled', 'value' => true]],
-                            ['key' => 'xunhupay_appsecret', 'label' => 'AppSecret', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_xunhupay_enabled', 'value' => true]],
-                        ]],
-                        ['key' => 'xhpay', 'title' => '小火付配置', 'fields' => [
-                            ['key' => 'xhpay_mchid', 'label' => '商户号', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_xhpay_enabled', 'value' => true]],
-                            ['key' => 'xhpay_alipay_v2', 'label' => '支付宝V2', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_xhpay_enabled', 'value' => true]],
-                            ['key' => 'xhpay_wx_h5', 'label' => '微信H5', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_xhpay_enabled', 'value' => true]],
-                        ]],
-                        ['key' => 'payjs', 'title' => 'PayJS配置', 'fields' => [
-                            ['key' => 'payjs_mchid', 'label' => '商户号', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_payjs_enabled', 'value' => true]],
-                            ['key' => 'payjs_key', 'label' => '通信密钥', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_payjs_enabled', 'value' => true]],
-                        ]],
-                        ['key' => 'epay', 'title' => '易支付配置', 'fields' => [
-                            ['key' => 'epay_apiurl', 'label' => '接口地址', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_epay_enabled', 'value' => true]],
-                            ['key' => 'epay_pid', 'label' => '商户ID', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_epay_enabled', 'value' => true]],
-                            ['key' => 'epay_key', 'label' => '商户密钥', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_epay_enabled', 'value' => true]],
-                        ]],
-                        ['key' => 'stripe', 'title' => 'Stripe配置', 'fields' => [
                             ['key' => 'stripe_secret_key', 'label' => 'Secret Key', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_stripe_enabled', 'value' => true]],
                             ['key' => 'stripe_publishable_key', 'label' => 'Publishable Key', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_stripe_enabled', 'value' => true]],
                             ['key' => 'stripe_webhook_secret', 'label' => 'Webhook Secret', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_stripe_enabled', 'value' => true]],
                             ['key' => 'stripe_currency', 'label' => '货币', 'type' => 'input', 'default' => 'usd', 'dependsOn' => ['key' => 'payment_stripe_enabled', 'value' => true]],
                             ['key' => 'stripe_test_mode', 'label' => '测试模式', 'type' => 'switch', 'default' => true, 'dependsOn' => ['key' => 'payment_stripe_enabled', 'value' => true]],
                         ]],
+                        ['key' => 'xunhupay', 'title' => '虎皮椒配置', 'collapsible' => true, 'expandWhen' => 'payment_xunhupay_enabled', 'dependsOn' => ['key' => 'payment_xunhupay_enabled', 'value' => true], 'fields' => [
+                            ['key' => 'xunhupay_appid', 'label' => 'AppID', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_xunhupay_enabled', 'value' => true]],
+                            ['key' => 'xunhupay_appsecret', 'label' => 'AppSecret', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_xunhupay_enabled', 'value' => true]],
+                        ]],
+                        ['key' => 'xhpay', 'title' => '小火付配置', 'collapsible' => true, 'expandWhen' => 'payment_xhpay_enabled', 'dependsOn' => ['key' => 'payment_xhpay_enabled', 'value' => true], 'fields' => [
+                            ['key' => 'xhpay_mchid', 'label' => '商户号', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_xhpay_enabled', 'value' => true]],
+                            ['key' => 'xhpay_alipay_v2', 'label' => '支付宝V2', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_xhpay_enabled', 'value' => true]],
+                            ['key' => 'xhpay_wx_h5', 'label' => '微信H5', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_xhpay_enabled', 'value' => true]],
+                        ]],
+                        ['key' => 'payjs', 'title' => 'PayJS配置', 'collapsible' => true, 'expandWhen' => 'payment_payjs_enabled', 'dependsOn' => ['key' => 'payment_payjs_enabled', 'value' => true], 'fields' => [
+                            ['key' => 'payjs_mchid', 'label' => '商户号', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_payjs_enabled', 'value' => true]],
+                            ['key' => 'payjs_key', 'label' => '通信密钥', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_payjs_enabled', 'value' => true]],
+                        ]],
+                        ['key' => 'epay', 'title' => '易支付配置', 'collapsible' => true, 'expandWhen' => 'payment_epay_enabled', 'dependsOn' => ['key' => 'payment_epay_enabled', 'value' => true], 'fields' => [
+                            ['key' => 'epay_apiurl', 'label' => '接口地址', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_epay_enabled', 'value' => true]],
+                            ['key' => 'epay_pid', 'label' => '商户ID', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_epay_enabled', 'value' => true]],
+                            ['key' => 'epay_key', 'label' => '商户密钥', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'payment_epay_enabled', 'value' => true]],
+                        ]],
                     ],
                 ],
                 'order' => [