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/components/form/AksFieldGroup.vue

@@ -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 {