From f3276f1c170d6e90706aea2d31ae1755525a6b8a Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Tue, 7 Apr 2026 21:55:20 +0800
Subject: [PATCH] fix(ui): improve cancel rate limit layout to natural language
 style

---
 frontend/src/i18n/locales/en.ts           |  3 +++
 frontend/src/i18n/locales/zh.ts           |  3 +++
 frontend/src/views/admin/SettingsView.vue | 19 +++++++++----------
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index e0a6191b82..ac0465828d 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -4347,6 +4347,9 @@ export default {
         maxPendingOrders: 'Max Pending Orders',
         cancelRateLimit: 'Limit Cancel Rate',
         cancelRateLimitHint: 'When enabled, users who exceed the cancel limit within the time window cannot create new orders',
+        cancelRateLimitEvery: 'Every',
+        cancelRateLimitAllowMax: 'allow max',
+        cancelRateLimitTimes: 'cancels',
         cancelRateLimitWindow: 'Window',
         cancelRateLimitUnit: 'Unit',
         cancelRateLimitMax: 'Max Cancels',
diff --git a/frontend/src/i18n/locales/zh.ts b/frontend/src/i18n/locales/zh.ts
index cc7452c006..3dd42bec65 100644
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -4520,6 +4520,9 @@ export default {
         maxPendingOrders: '最大待支付订单数',
         cancelRateLimit: '限制取消频率',
         cancelRateLimitHint: '启用后，用户在时间窗口内取消订单次数超限将无法创建新订单',
+        cancelRateLimitEvery: '每',
+        cancelRateLimitAllowMax: '内最多取消',
+        cancelRateLimitTimes: '次',
         cancelRateLimitWindow: '时间窗口',
         cancelRateLimitUnit: '周期',
         cancelRateLimitMax: '最大取消次数',
diff --git a/frontend/src/views/admin/SettingsView.vue b/frontend/src/views/admin/SettingsView.vue
index 2a5a0632aa..be2fd9a958 100644
--- a/frontend/src/views/admin/SettingsView.vue
+++ b/frontend/src/views/admin/SettingsView.vue
@@ -1685,16 +1685,15 @@
                     {{ t('admin.settings.payment.cancelRateLimit') }}
                   </label>
                 </div>
-                <div v-if="form.payment_cancel_rate_limit_enabled" class="mt-3 flex flex-wrap items-end gap-3">
-                  <div class="w-20"><label class="input-label">{{ t('admin.settings.payment.cancelRateLimitWindow') }}</label><input v-model.number="form.payment_cancel_rate_limit_window" type="number" min="1" class="input" /></div>
-                  <div class="w-24">
-                    <label class="input-label">{{ t('admin.settings.payment.cancelRateLimitUnit') }}</label>
-                    <Select v-model="form.payment_cancel_rate_limit_unit" :options="cancelRateLimitUnitOptions" class="w-full" />
-                  </div>
-                  <div class="w-20"><label class="input-label">{{ t('admin.settings.payment.cancelRateLimitMax') }}</label><input v-model.number="form.payment_cancel_rate_limit_max" type="number" min="1" class="input" /></div>
-                  <div class="w-24">
-                    <label class="input-label">{{ t('admin.settings.payment.cancelRateLimitWindowMode') }}</label>
-                    <Select v-model="form.payment_cancel_rate_limit_window_mode" :options="cancelRateLimitModeOptions" class="w-full" />
+                <div v-if="form.payment_cancel_rate_limit_enabled" class="mt-3">
+                  <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" class="input w-16 text-center" />
+                    <Select v-model="form.payment_cancel_rate_limit_unit" :options="cancelRateLimitUnitOptions" class="w-20" />
+                    <span>{{ t('admin.settings.payment.cancelRateLimitAllowMax') }}</span>
+                    <input v-model.number="form.payment_cancel_rate_limit_max" type="number" min="1" 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-20" />
                   </div>
                 </div>
                 <p class="mt-1.5 text-xs text-gray-400">{{ t('admin.settings.payment.cancelRateLimitHint') }}</p>