kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Hide channel config cards until enabled; open expanded on enable and allow manual collapse via group header.
This commit is contained in:
kate522
2026-07-25 13:08:37 +08:00
parent 3267bee71e
commit 6db4da32c6
4 changed files with 193 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/src/components/form/AksFieldGroup.vue
+65 -28
View File
@@ -1,6 +1,11 @@
<template>
<div class="aksrt-field-group">
<div v-if="title" class="aksrt-field-group__header">
<div class="aksrt-field-group" :class="{ 'is-collapsible': collapsible, 'is-collapsed': collapsible && collapsed }">
<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">
<slot name="actions" />
<div class="aksrt-field-group__header-right">
<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 {
display: flex;
.aksrt-field-group__collapse-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 20px;
cursor: pointer;
color: #8a909c;
border: 1px solid #e8ecf2;
background: #f7f9fc;
color: #5c6370;
border-radius: 999px;
padding: 4px 10px;
font-size: 12px;
user-select: none;
transition: color 0.15s;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.aksrt-field-group__toggle:hover {
.aksrt-field-group__collapse-btn:hover {
color: #1890ff;
}
.aksrt-field-group__chevron {
transition: transform 0.2s;
border-color: #91caff;
background: #f0f7ff;
}
.aksrt-field-group__body {
assets/admin/src/components/form/AksFormRenderer.vue
+46 -15
View File
@@ -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"
:default-collapsed="group.defaultCollapsed"
:collapsible="!!group.collapsible"
: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 */
function isFieldVisible(field) {
if (!field.dependsOn) return true
// dependsOn can be a string (truthy check on that key) or an object { key, value }
if (typeof field.dependsOn === 'string') {
return !!props.formData[field.dependsOn]
/** Evaluate dependsOn rule against current form data */
function matchDependsOn(dependsOn) {
if (!dependsOn) return true
if (typeof dependsOn === 'string') {
return !!props.formData[dependsOn]
}
if (typeof field.dependsOn === 'object') {
const { key, value, not } = field.dependsOn
if (typeof dependsOn === 'object') {
const { key, value, not } = 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
+51 -18
View File
@@ -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 },
],
},
],
}