refactor: compact QuotaLimitCard layout and fix CreateAccountModal merge

- 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>
This commit is contained in:
erio
2026-03-08 00:17:43 +08:00
co-authored by Claude Opus 4.6
parent 07082650bb
commit 19b4da4149
2 changed files with 26 additions and 20 deletions
@@ -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">
@@ -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>