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:
@@ -1 +1 @@
|
|||||||
0.1.110.30
|
0.1.110.31
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user