From 83643f2dde8209ed25fc5542f05a864f40b4a465 Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Fri, 10 Apr 2026 00:03:54 +0800
Subject: [PATCH] style(admin): cancel rate limit as toggle switch, config in
 single row

---
 frontend/src/views/admin/SettingsView.vue | 43 +++++++++++++----------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/frontend/src/views/admin/SettingsView.vue b/frontend/src/views/admin/SettingsView.vue
index 3ee730a688..e41350e6da 100644
--- a/frontend/src/views/admin/SettingsView.vue
+++ b/frontend/src/views/admin/SettingsView.vue
@@ -1669,32 +1669,39 @@
                 <div><label class="input-label">{{ t('admin.settings.payment.dailyLimit') }}</label><input :value="form.payment_daily_limit || ''" @input="form.payment_daily_limit = parseFloat(($event.target as HTMLInputElement).value) || 0" type="number" step="0.01" min="0" class="input" :placeholder="t('admin.settings.payment.noLimit')" /></div>
                 <div><label class="input-label">{{ t('admin.settings.payment.orderTimeout') }} <span class="text-red-500">*</span></label><input v-model.number="form.payment_order_timeout_minutes" type="number" min="1" class="input" required /><p class="mt-0.5 text-xs text-gray-400">{{ t('admin.settings.payment.orderTimeoutHint') }}</p></div>
               </div>
-              <!-- Row 3: Pending orders + load balance + cancel rate limit -->
+              <!-- Row 3: Pending orders + load balance + cancel rate limit toggle -->
               <div class="flex flex-wrap items-end gap-4">
                 <div class="w-28"><label class="input-label">{{ t('admin.settings.payment.maxPendingOrders') }}</label><input v-model.number="form.payment_max_pending_orders" type="number" min="1" class="input" /></div>
                 <div>
                   <label class="input-label">{{ t('admin.settings.payment.loadBalanceStrategy') }}</label>
                   <Select v-model="form.payment_load_balance_strategy" :options="loadBalanceOptions" class="w-40" />
                 </div>
-                <div class="flex items-center gap-2 pb-1">
-                  <label class="flex cursor-pointer items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
-                    <input type="checkbox" v-model="form.payment_cancel_rate_limit_enabled" class="h-4 w-4 rounded border-gray-300 text-primary-600" />
-                    {{ t('admin.settings.payment.cancelRateLimit') }}
-                  </label>
+                <div>
+                  <label class="input-label">{{ t('admin.settings.payment.cancelRateLimit') }}</label>
+                  <button
+                    type="button"
+                    :class="[
+                      'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
+                      form.payment_cancel_rate_limit_enabled ? 'bg-primary-500' : 'bg-gray-300 dark:bg-dark-600'
+                    ]"
+                    @click="form.payment_cancel_rate_limit_enabled = !form.payment_cancel_rate_limit_enabled"
+                  >
+                    <span :class="[
+                      'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+                      form.payment_cancel_rate_limit_enabled ? 'translate-x-5' : 'translate-x-0'
+                    ]" />
+                  </button>
                 </div>
               </div>
-              <!-- Cancel rate limit detail (expandable) -->
-              <div v-if="form.payment_cancel_rate_limit_enabled" class="rounded-lg border border-gray-200 p-3 dark:border-dark-600">
-                <div class="flex flex-wrap items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
-                  <span>{{ t('admin.settings.payment.cancelRateLimitEvery') }}</span>
-                  <input v-model.number="form.payment_cancel_rate_limit_window" type="number" min="1" required class="input w-16 text-center" />
-                  <Select v-model="form.payment_cancel_rate_limit_unit" :options="cancelRateLimitUnitOptions" class="w-24" />
-                  <span>{{ t('admin.settings.payment.cancelRateLimitAllowMax') }}</span>
-                  <input v-model.number="form.payment_cancel_rate_limit_max" type="number" min="1" required class="input w-16 text-center" />
-                  <span>{{ t('admin.settings.payment.cancelRateLimitTimes') }}</span>
-                  <Select v-model="form.payment_cancel_rate_limit_window_mode" :options="cancelRateLimitModeOptions" class="w-32" />
-                </div>
-                <p class="mt-1.5 text-xs text-gray-400">{{ t('admin.settings.payment.cancelRateLimitHint') }}</p>
+              <!-- Cancel rate limit detail (expandable, single row) -->
+              <div v-if="form.payment_cancel_rate_limit_enabled" class="flex flex-wrap items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
+                <span>{{ t('admin.settings.payment.cancelRateLimitEvery') }}</span>
+                <input v-model.number="form.payment_cancel_rate_limit_window" type="number" min="1" required class="input w-16 text-center" />
+                <Select v-model="form.payment_cancel_rate_limit_unit" :options="cancelRateLimitUnitOptions" class="w-24" />
+                <span>{{ t('admin.settings.payment.cancelRateLimitAllowMax') }}</span>
+                <input v-model.number="form.payment_cancel_rate_limit_max" type="number" min="1" required class="input w-16 text-center" />
+                <span>{{ t('admin.settings.payment.cancelRateLimitTimes') }}</span>
+                <Select v-model="form.payment_cancel_rate_limit_window_mode" :options="cancelRateLimitModeOptions" class="w-32" />
               </div>
               <!-- Row 4: Enabled payment types (provider badges like sub2apipay) -->
               <div>