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.
This commit is contained in:
kate522 committed
1 parent
3267bee71e
commit
6db4da32c6
4 files changed
+193
-90
No files matched your search
@@ -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 {
|
||||
|
||||
@@ -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]
|
||||
|
||||
Reference in new issue
Block a user