From 19b4da414969158d2621c584adbeaa2f4308e02c Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Sun, 8 Mar 2026 00:17:43 +0800
Subject: [PATCH] refactor: compact QuotaLimitCard layout and fix
 CreateAccountModal merge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- QuotaLimitCard: label and input on same row for reduced height
- CreateAccountModal: move AffinityConfigCard into OAuth/SetupToken
  quota control section, eliminating duplicate "配额控制" cards

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/account/CreateAccountModal.vue | 17 ++++++++---
 .../src/components/account/QuotaLimitCard.vue | 29 +++++++++----------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/account/CreateAccountModal.vue b/frontend/src/components/account/CreateAccountModal.vue
index b56acceee1..bda1cb36c4 100644
--- a/frontend/src/components/account/CreateAccountModal.vue
+++ b/frontend/src/components/account/CreateAccountModal.vue
@@ -1227,9 +1227,9 @@
 
       </div>
 
-      <!-- 配额控制 (Anthropic 平台: 配额 + 亲和) -->
+      <!-- 配额控制 (Anthropic apikey: 配额限制 + 亲和) -->
       <div
-        v-if="form.platform === 'anthropic'"
+        v-if="form.platform === 'anthropic' && form.type === 'apikey'"
         class="border-t border-gray-200 pt-4 dark:border-dark-600 space-y-4"
       >
         <div class="mb-3">
@@ -1238,7 +1238,7 @@
             {{ t('admin.accounts.quotaLimitHint') }}
           </p>
         </div>
-        <QuotaLimitCard v-if="form.type === 'apikey'" :totalLimit="editQuotaLimit" :dailyLimit="editQuotaDailyLimit" :weeklyLimit="editQuotaWeeklyLimit" @update:totalLimit="editQuotaLimit = $event" @update:dailyLimit="editQuotaDailyLimit = $event" @update:weeklyLimit="editQuotaWeeklyLimit = $event" />
+        <QuotaLimitCard :totalLimit="editQuotaLimit" :dailyLimit="editQuotaDailyLimit" :weeklyLimit="editQuotaWeeklyLimit" @update:totalLimit="editQuotaLimit = $event" @update:dailyLimit="editQuotaDailyLimit = $event" @update:weeklyLimit="editQuotaWeeklyLimit = $event" />
         <AffinityConfigCard
           :enabled="clientAffinityEnabled"
           :base="affinityBase"
@@ -1579,7 +1579,7 @@
         </div>
       </div>
 
-      <!-- Quota Control Section (Anthropic OAuth/SetupToken only) -->
+      <!-- 配额控制 (Anthropic OAuth/SetupToken: 亲和 + 窗口费用 + 会话 + RPM 等) -->
       <div
         v-if="form.platform === 'anthropic' && accountCategory === 'oauth-based'"
         class="border-t border-gray-200 pt-4 dark:border-dark-600 space-y-4"
@@ -1591,6 +1591,15 @@
           </p>
         </div>
 
+        <AffinityConfigCard
+          :enabled="clientAffinityEnabled"
+          :base="affinityBase"
+          :buffer="affinityBuffer"
+          @update:enabled="clientAffinityEnabled = $event"
+          @update:base="affinityBase = $event"
+          @update:buffer="affinityBuffer = $event"
+        />
+
         <!-- Window Cost Limit -->
         <div class="rounded-lg border border-gray-200 p-4 dark:border-dark-600">
           <div class="mb-3 flex items-center justify-between">
diff --git a/frontend/src/components/account/QuotaLimitCard.vue b/frontend/src/components/account/QuotaLimitCard.vue
index 505118ba3c..5f44b2fcb2 100644
--- a/frontend/src/components/account/QuotaLimitCard.vue
+++ b/frontend/src/components/account/QuotaLimitCard.vue
@@ -78,11 +78,11 @@ const onWeeklyInput = (e: Event) => {
         </button>
       </div>
 
-      <div v-if="localEnabled" class="space-y-3">
-        <!-- 日配额 -->
-        <div>
-          <label class="input-label">{{ t('admin.accounts.quotaDailyLimit') }}</label>
-          <div class="relative">
+      <div v-if="localEnabled" class="space-y-2">
+        <!-- 日限额 -->
+        <div class="flex items-center gap-3">
+          <label class="input-label mb-0 w-16 flex-shrink-0">{{ t('admin.accounts.quotaDailyLimit') }}</label>
+          <div class="relative flex-1">
             <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400">$</span>
             <input
               :value="dailyLimit"
@@ -94,13 +94,12 @@ const onWeeklyInput = (e: Event) => {
               :placeholder="t('admin.accounts.quotaLimitPlaceholder')"
             />
           </div>
-          <p class="input-hint">{{ t('admin.accounts.quotaDailyLimitHint') }}</p>
         </div>
 
-        <!-- 周配额 -->
-        <div>
-          <label class="input-label">{{ t('admin.accounts.quotaWeeklyLimit') }}</label>
-          <div class="relative">
+        <!-- 周限额 -->
+        <div class="flex items-center gap-3">
+          <label class="input-label mb-0 w-16 flex-shrink-0">{{ t('admin.accounts.quotaWeeklyLimit') }}</label>
+          <div class="relative flex-1">
             <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400">$</span>
             <input
               :value="weeklyLimit"
@@ -112,13 +111,12 @@ const onWeeklyInput = (e: Event) => {
               :placeholder="t('admin.accounts.quotaLimitPlaceholder')"
             />
           </div>
-          <p class="input-hint">{{ t('admin.accounts.quotaWeeklyLimitHint') }}</p>
         </div>
 
-        <!-- 总配额 -->
-        <div>
-          <label class="input-label">{{ t('admin.accounts.quotaTotalLimit') }}</label>
-          <div class="relative">
+        <!-- 总限额 -->
+        <div class="flex items-center gap-3">
+          <label class="input-label mb-0 w-16 flex-shrink-0">{{ t('admin.accounts.quotaTotalLimit') }}</label>
+          <div class="relative flex-1">
             <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400">$</span>
             <input
               :value="totalLimit"
@@ -130,7 +128,6 @@ const onWeeklyInput = (e: Event) => {
               :placeholder="t('admin.accounts.quotaLimitPlaceholder')"
             />
           </div>
-          <p class="input-hint">{{ t('admin.accounts.quotaTotalLimitHint') }}</p>
         </div>
       </div>
   </div>