fix(frontend): place quota notify toggle inline with limit input

Move QuotaNotifyToggle to the same row as the limit $ input for all
three dimensions (daily/weekly/total), significantly reducing card height.
This commit is contained in:
erio
2026-04-13 17:12:20 +08:00
parent ac55443278
commit 7141dceee2
2 changed files with 67 additions and 58 deletions

View File

@@ -1 +1 @@
0.1.110.30 0.1.110.31

View File

@@ -200,7 +200,8 @@ const onWeeklyModeChange = (e: Event) => {
<!-- 日配额 --> <!-- 日配额 -->
<div> <div>
<label class="input-label">{{ t('admin.accounts.quotaDailyLimit') }}</label> <label class="input-label">{{ t('admin.accounts.quotaDailyLimit') }}</label>
<div class="relative"> <div class="flex items-start gap-2">
<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> <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400">$</span>
<input <input
:value="dailyLimit" :value="dailyLimit"
@@ -212,6 +213,17 @@ const onWeeklyModeChange = (e: Event) => {
:placeholder="t('admin.accounts.quotaLimitPlaceholder')" :placeholder="t('admin.accounts.quotaLimitPlaceholder')"
/> />
</div> </div>
<QuotaNotifyToggle
v-if="quotaNotifyGlobalEnabled && dailyLimit && dailyLimit > 0"
class="flex-1"
:enabled="props.quotaNotifyDailyEnabled"
:threshold="props.quotaNotifyDailyThreshold"
:threshold-type="props.quotaNotifyDailyThresholdType"
@update:enabled="emit('update:quotaNotifyDailyEnabled', $event)"
@update:threshold="emit('update:quotaNotifyDailyThreshold', $event)"
@update:threshold-type="emit('update:quotaNotifyDailyThresholdType', $event)"
/>
</div>
<div class="mt-1.5 flex items-center gap-2 flex-wrap"> <div class="mt-1.5 flex items-center gap-2 flex-wrap">
<label class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('admin.accounts.quotaResetMode') }}</label> <label class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('admin.accounts.quotaResetMode') }}</label>
<select <select
@@ -241,21 +253,13 @@ const onWeeklyModeChange = (e: Event) => {
{{ t('admin.accounts.quotaDailyLimitHint') }} {{ t('admin.accounts.quotaDailyLimitHint') }}
</template> </template>
</p> </p>
<QuotaNotifyToggle
v-if="quotaNotifyGlobalEnabled && dailyLimit && dailyLimit > 0"
:enabled="props.quotaNotifyDailyEnabled"
:threshold="props.quotaNotifyDailyThreshold"
:threshold-type="props.quotaNotifyDailyThresholdType"
@update:enabled="emit('update:quotaNotifyDailyEnabled', $event)"
@update:threshold="emit('update:quotaNotifyDailyThreshold', $event)"
@update:threshold-type="emit('update:quotaNotifyDailyThresholdType', $event)"
/>
</div> </div>
<!-- 周配额 --> <!-- 周配额 -->
<div> <div>
<label class="input-label">{{ t('admin.accounts.quotaWeeklyLimit') }}</label> <label class="input-label">{{ t('admin.accounts.quotaWeeklyLimit') }}</label>
<div class="relative"> <div class="flex items-start gap-2">
<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> <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400">$</span>
<input <input
:value="weeklyLimit" :value="weeklyLimit"
@@ -267,6 +271,17 @@ const onWeeklyModeChange = (e: Event) => {
:placeholder="t('admin.accounts.quotaLimitPlaceholder')" :placeholder="t('admin.accounts.quotaLimitPlaceholder')"
/> />
</div> </div>
<QuotaNotifyToggle
v-if="quotaNotifyGlobalEnabled && weeklyLimit && weeklyLimit > 0"
class="flex-1"
:enabled="props.quotaNotifyWeeklyEnabled"
:threshold="props.quotaNotifyWeeklyThreshold"
:threshold-type="props.quotaNotifyWeeklyThresholdType"
@update:enabled="emit('update:quotaNotifyWeeklyEnabled', $event)"
@update:threshold="emit('update:quotaNotifyWeeklyThreshold', $event)"
@update:threshold-type="emit('update:quotaNotifyWeeklyThresholdType', $event)"
/>
</div>
<div class="mt-1.5 flex items-center gap-2 flex-wrap"> <div class="mt-1.5 flex items-center gap-2 flex-wrap">
<label class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('admin.accounts.quotaResetMode') }}</label> <label class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('admin.accounts.quotaResetMode') }}</label>
<select <select
@@ -304,15 +319,6 @@ const onWeeklyModeChange = (e: Event) => {
{{ t('admin.accounts.quotaWeeklyLimitHint') }} {{ t('admin.accounts.quotaWeeklyLimitHint') }}
</template> </template>
</p> </p>
<QuotaNotifyToggle
v-if="quotaNotifyGlobalEnabled && weeklyLimit && weeklyLimit > 0"
:enabled="props.quotaNotifyWeeklyEnabled"
:threshold="props.quotaNotifyWeeklyThreshold"
:threshold-type="props.quotaNotifyWeeklyThresholdType"
@update:enabled="emit('update:quotaNotifyWeeklyEnabled', $event)"
@update:threshold="emit('update:quotaNotifyWeeklyThreshold', $event)"
@update:threshold-type="emit('update:quotaNotifyWeeklyThresholdType', $event)"
/>
</div> </div>
<!-- 时区选择当任一维度使用固定模式时显示 --> <!-- 时区选择当任一维度使用固定模式时显示 -->
@@ -330,7 +336,8 @@ const onWeeklyModeChange = (e: Event) => {
<!-- 总配额 --> <!-- 总配额 -->
<div> <div>
<label class="input-label">{{ t('admin.accounts.quotaTotalLimit') }}</label> <label class="input-label">{{ t('admin.accounts.quotaTotalLimit') }}</label>
<div class="relative"> <div class="flex items-start gap-2">
<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> <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400">$</span>
<input <input
:value="totalLimit" :value="totalLimit"
@@ -342,9 +349,9 @@ const onWeeklyModeChange = (e: Event) => {
:placeholder="t('admin.accounts.quotaLimitPlaceholder')" :placeholder="t('admin.accounts.quotaLimitPlaceholder')"
/> />
</div> </div>
<p class="input-hint mb-0">{{ t('admin.accounts.quotaTotalLimitHint') }}</p>
<QuotaNotifyToggle <QuotaNotifyToggle
v-if="quotaNotifyGlobalEnabled && totalLimit && totalLimit > 0" v-if="quotaNotifyGlobalEnabled && totalLimit && totalLimit > 0"
class="flex-1"
:enabled="props.quotaNotifyTotalEnabled" :enabled="props.quotaNotifyTotalEnabled"
:threshold="props.quotaNotifyTotalThreshold" :threshold="props.quotaNotifyTotalThreshold"
:threshold-type="props.quotaNotifyTotalThresholdType" :threshold-type="props.quotaNotifyTotalThresholdType"
@@ -353,6 +360,8 @@ const onWeeklyModeChange = (e: Event) => {
@update:threshold-type="emit('update:quotaNotifyTotalThresholdType', $event)" @update:threshold-type="emit('update:quotaNotifyTotalThresholdType', $event)"
/> />
</div> </div>
<p class="input-hint mb-0">{{ t('admin.accounts.quotaTotalLimitHint') }}</p>
</div>
</div> </div>
</div> </div>
</template> </template>