oadmin/sub2api
1
0
Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

fix(ui): widen notify type dropdown to show % fully, align quota input widths

Browse Source
This commit is contained in:
erio
2026-04-13 18:23:20 +08:00
parent 216bda58da
commit e27335acdd
3 changed files with 54 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
backend/cmd/server/VERSION
View File

@@ -1 +1 @@
0.1.110.34 0.1.110.38

161
frontend/src/components/account/QuotaLimitCard.vue
View File

@@ -196,171 +196,114 @@ const onWeeklyModeChange = (e: Event) => {
</div> </div>
<!-- Collapsible content --> <!-- Collapsible content -->
<div v-if="localEnabled && !collapsed" class="space-y-3 p-4 pt-3"> <div v-if="localEnabled && !collapsed" class="space-y-2 p-4 pt-3">
<!-- 日配额 --> <!-- 日配额 -->
<div> <div>
<label class="input-label">{{ t('admin.accounts.quotaDailyLimit') }}</label> <!-- 标题行 -->
<div class="flex items-start gap-2"> <div class="flex items-center gap-2 mb-1">
<div class="relative flex-1"> <span class="text-xs font-medium text-gray-700 dark:text-gray-300 w-28 flex-shrink-0">{{ t('admin.accounts.quotaDailyLimit') }}</span>
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400">$</span> <span v-if="quotaNotifyGlobalEnabled && dailyLimit && dailyLimit > 0" class="text-xs font-medium text-gray-700 dark:text-gray-300">{{ t('admin.accounts.quotaNotify.alert') }}</span>
<input </div>
:value="dailyLimit" <!-- 输入行 -->
@input="onDailyInput" <div class="flex items-center gap-2">
type="number" <div class="relative w-28 flex-shrink-0">
min="0" <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 text-sm">$</span>
step="0.01" <input :value="dailyLimit" @input="onDailyInput" type="number" min="0" step="0.01" class="input pl-6 py-1.5 text-sm" :placeholder="t('admin.accounts.quotaLimitPlaceholder')" />
class="input pl-7"
:placeholder="t('admin.accounts.quotaLimitPlaceholder')"
/>
</div> </div>
<QuotaNotifyToggle <QuotaNotifyToggle
v-if="quotaNotifyGlobalEnabled && dailyLimit && dailyLimit > 0" v-if="quotaNotifyGlobalEnabled && dailyLimit && dailyLimit > 0"
class="flex-1" class="flex-1 min-w-0"
:enabled="props.quotaNotifyDailyEnabled" :enabled="props.quotaNotifyDailyEnabled" :threshold="props.quotaNotifyDailyThreshold" :threshold-type="props.quotaNotifyDailyThresholdType"
:threshold="props.quotaNotifyDailyThreshold" @update:enabled="emit('update:quotaNotifyDailyEnabled', $event)" @update:threshold="emit('update:quotaNotifyDailyThreshold', $event)" @update:threshold-type="emit('update:quotaNotifyDailyThresholdType', $event)"
: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 class="mt-1.5 flex items-center gap-2 flex-wrap"> <div class="mt-1 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 :value="dailyResetMode || 'rolling'" @change="onDailyModeChange" class="input py-1 text-xs w-auto">
:value="dailyResetMode || 'rolling'"
@change="onDailyModeChange"
class="input py-1 text-xs w-auto"
>
<option value="rolling">{{ t('admin.accounts.quotaResetModeRolling') }}</option> <option value="rolling">{{ t('admin.accounts.quotaResetModeRolling') }}</option>
<option value="fixed">{{ t('admin.accounts.quotaResetModeFixed') }}</option> <option value="fixed">{{ t('admin.accounts.quotaResetModeFixed') }}</option>
</select> </select>
<template v-if="dailyResetMode === 'fixed'"> <template v-if="dailyResetMode === 'fixed'">
<label class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('admin.accounts.quotaResetHour') }}</label> <label class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('admin.accounts.quotaResetHour') }}</label>
<select <select :value="dailyResetHour ?? 0" @change="emit('update:dailyResetHour', Number(($event.target as HTMLSelectElement).value))" class="input py-1 text-xs w-24">
:value="dailyResetHour ?? 0"
@change="emit('update:dailyResetHour', Number(($event.target as HTMLSelectElement).value))"
class="input py-1 text-xs w-24"
>
<option v-for="h in hourOptions" :key="h" :value="h">{{ String(h).padStart(2, '0') }}:00</option> <option v-for="h in hourOptions" :key="h" :value="h">{{ String(h).padStart(2, '0') }}:00</option>
</select> </select>
</template> </template>
</div> </div>
<p class="input-hint mb-0"> <p class="input-hint mb-0 text-[11px]">
<template v-if="dailyResetMode === 'fixed'"> <template v-if="dailyResetMode === 'fixed'">{{ t('admin.accounts.quotaDailyLimitHintFixed', { hour: String(dailyResetHour ?? 0).padStart(2, '0'), timezone: resetTimezone || 'UTC' }) }}</template>
{{ t('admin.accounts.quotaDailyLimitHintFixed', { hour: String(dailyResetHour ?? 0).padStart(2, '0'), timezone: resetTimezone || 'UTC' }) }} <template v-else>{{ t('admin.accounts.quotaDailyLimitHint') }}</template>
</template>
<template v-else>
{{ t('admin.accounts.quotaDailyLimitHint') }}
</template>
</p> </p>
</div> </div>
<!-- 周配额 --> <!-- 周配额 -->
<div> <div>
<label class="input-label">{{ t('admin.accounts.quotaWeeklyLimit') }}</label> <div class="flex items-center gap-2 mb-1">
<div class="flex items-start gap-2"> <span class="text-xs font-medium text-gray-700 dark:text-gray-300 w-28 flex-shrink-0">{{ t('admin.accounts.quotaWeeklyLimit') }}</span>
<div class="relative flex-1"> <span v-if="quotaNotifyGlobalEnabled && weeklyLimit && weeklyLimit > 0" class="text-xs font-medium text-gray-700 dark:text-gray-300">{{ t('admin.accounts.quotaNotify.alert') }}</span>
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400">$</span> </div>
<input <div class="flex items-center gap-2">
:value="weeklyLimit" <div class="relative w-28 flex-shrink-0">
@input="onWeeklyInput" <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 text-sm">$</span>
type="number" <input :value="weeklyLimit" @input="onWeeklyInput" type="number" min="0" step="0.01" class="input pl-6 py-1.5 text-sm" :placeholder="t('admin.accounts.quotaLimitPlaceholder')" />
min="0"
step="0.01"
class="input pl-7"
:placeholder="t('admin.accounts.quotaLimitPlaceholder')"
/>
</div> </div>
<QuotaNotifyToggle <QuotaNotifyToggle
v-if="quotaNotifyGlobalEnabled && weeklyLimit && weeklyLimit > 0" v-if="quotaNotifyGlobalEnabled && weeklyLimit && weeklyLimit > 0"
class="flex-1" class="flex-1 min-w-0"
:enabled="props.quotaNotifyWeeklyEnabled" :enabled="props.quotaNotifyWeeklyEnabled" :threshold="props.quotaNotifyWeeklyThreshold" :threshold-type="props.quotaNotifyWeeklyThresholdType"
:threshold="props.quotaNotifyWeeklyThreshold" @update:enabled="emit('update:quotaNotifyWeeklyEnabled', $event)" @update:threshold="emit('update:quotaNotifyWeeklyThreshold', $event)" @update:threshold-type="emit('update:quotaNotifyWeeklyThresholdType', $event)"
: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>
<div class="mt-1.5 flex items-center gap-2 flex-wrap"> <div class="mt-1 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 :value="weeklyResetMode || 'rolling'" @change="onWeeklyModeChange" class="input py-1 text-xs w-auto">
:value="weeklyResetMode || 'rolling'"
@change="onWeeklyModeChange"
class="input py-1 text-xs w-auto"
>
<option value="rolling">{{ t('admin.accounts.quotaResetModeRolling') }}</option> <option value="rolling">{{ t('admin.accounts.quotaResetModeRolling') }}</option>
<option value="fixed">{{ t('admin.accounts.quotaResetModeFixed') }}</option> <option value="fixed">{{ t('admin.accounts.quotaResetModeFixed') }}</option>
</select> </select>
<template v-if="weeklyResetMode === 'fixed'"> <template v-if="weeklyResetMode === 'fixed'">
<label class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('admin.accounts.quotaWeeklyResetDay') }}</label> <label class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('admin.accounts.quotaWeeklyResetDay') }}</label>
<select <select :value="weeklyResetDay ?? 1" @change="emit('update:weeklyResetDay', Number(($event.target as HTMLSelectElement).value))" class="input py-1 text-xs w-28">
:value="weeklyResetDay ?? 1"
@change="emit('update:weeklyResetDay', Number(($event.target as HTMLSelectElement).value))"
class="input py-1 text-xs w-28"
>
<option v-for="d in dayOptions" :key="d.value" :value="d.value">{{ t('admin.accounts.dayOfWeek.' + d.key) }}</option> <option v-for="d in dayOptions" :key="d.value" :value="d.value">{{ t('admin.accounts.dayOfWeek.' + d.key) }}</option>
</select> </select>
<label class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('admin.accounts.quotaResetHour') }}</label> <label class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('admin.accounts.quotaResetHour') }}</label>
<select <select :value="weeklyResetHour ?? 0" @change="emit('update:weeklyResetHour', Number(($event.target as HTMLSelectElement).value))" class="input py-1 text-xs w-24">
:value="weeklyResetHour ?? 0"
@change="emit('update:weeklyResetHour', Number(($event.target as HTMLSelectElement).value))"
class="input py-1 text-xs w-24"
>
<option v-for="h in hourOptions" :key="h" :value="h">{{ String(h).padStart(2, '0') }}:00</option> <option v-for="h in hourOptions" :key="h" :value="h">{{ String(h).padStart(2, '0') }}:00</option>
</select> </select>
</template> </template>
</div> </div>
<p class="input-hint mb-0"> <p class="input-hint mb-0 text-[11px]">
<template v-if="weeklyResetMode === 'fixed'"> <template v-if="weeklyResetMode === 'fixed'">{{ t('admin.accounts.quotaWeeklyLimitHintFixed', { day: t('admin.accounts.dayOfWeek.' + (dayOptions.find(d => d.value === (weeklyResetDay ?? 1))?.key || 'monday')), hour: String(weeklyResetHour ?? 0).padStart(2, '0'), timezone: resetTimezone || 'UTC' }) }}</template>
{{ t('admin.accounts.quotaWeeklyLimitHintFixed', { day: t('admin.accounts.dayOfWeek.' + (dayOptions.find(d => d.value === (weeklyResetDay ?? 1))?.key || 'monday')), hour: String(weeklyResetHour ?? 0).padStart(2, '0'), timezone: resetTimezone || 'UTC' }) }} <template v-else>{{ t('admin.accounts.quotaWeeklyLimitHint') }}</template>
</template>
<template v-else>
{{ t('admin.accounts.quotaWeeklyLimitHint') }}
</template>
</p> </p>
</div> </div>
<!-- 时区选择（当任一维度使用固定模式时显示） --> <!-- 时区选择 -->
<div v-if="hasFixedMode"> <div v-if="hasFixedMode">
<label class="input-label">{{ t('admin.accounts.quotaResetTimezone') }}</label> <label class="input-label">{{ t('admin.accounts.quotaResetTimezone') }}</label>
<select <select :value="resetTimezone || 'UTC'" @change="emit('update:resetTimezone', ($event.target as HTMLSelectElement).value)" class="input text-sm">
:value="resetTimezone || 'UTC'"
@change="emit('update:resetTimezone', ($event.target as HTMLSelectElement).value)"
class="input text-sm"
>
<option v-for="tz in timezoneOptions" :key="tz" :value="tz">{{ tz }}</option> <option v-for="tz in timezoneOptions" :key="tz" :value="tz">{{ tz }}</option>
</select> </select>
</div> </div>
<!-- 总配额 --> <!-- 总配额 -->
<div> <div>
<label class="input-label">{{ t('admin.accounts.quotaTotalLimit') }}</label> <div class="flex items-center gap-2 mb-1">
<div class="flex items-start gap-2"> <span class="text-xs font-medium text-gray-700 dark:text-gray-300 w-28 flex-shrink-0">{{ t('admin.accounts.quotaTotalLimit') }}</span>
<div class="relative flex-1"> <span v-if="quotaNotifyGlobalEnabled && totalLimit && totalLimit > 0" class="text-xs font-medium text-gray-700 dark:text-gray-300">{{ t('admin.accounts.quotaNotify.alert') }}</span>
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400">$</span> </div>
<input <div class="flex items-center gap-2">
:value="totalLimit" <div class="relative w-28 flex-shrink-0">
@input="onTotalInput" <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 text-sm">$</span>
type="number" <input :value="totalLimit" @input="onTotalInput" type="number" min="0" step="0.01" class="input pl-6 py-1.5 text-sm" :placeholder="t('admin.accounts.quotaLimitPlaceholder')" />
min="0"
step="0.01"
class="input pl-7"
:placeholder="t('admin.accounts.quotaLimitPlaceholder')"
/>
</div> </div>
<QuotaNotifyToggle <QuotaNotifyToggle
v-if="quotaNotifyGlobalEnabled && totalLimit && totalLimit > 0" v-if="quotaNotifyGlobalEnabled && totalLimit && totalLimit > 0"
class="flex-1" class="flex-1 min-w-0"
:enabled="props.quotaNotifyTotalEnabled" :enabled="props.quotaNotifyTotalEnabled" :threshold="props.quotaNotifyTotalThreshold" :threshold-type="props.quotaNotifyTotalThresholdType"
:threshold="props.quotaNotifyTotalThreshold" @update:enabled="emit('update:quotaNotifyTotalEnabled', $event)" @update:threshold="emit('update:quotaNotifyTotalThreshold', $event)" @update:threshold-type="emit('update:quotaNotifyTotalThresholdType', $event)"
:threshold-type="props.quotaNotifyTotalThresholdType"
@update:enabled="emit('update:quotaNotifyTotalEnabled', $event)"
@update:threshold="emit('update:quotaNotifyTotalThreshold', $event)"
@update:threshold-type="emit('update:quotaNotifyTotalThresholdType', $event)"
/> />
</div> </div>
<p class="input-hint mb-0">{{ t('admin.accounts.quotaTotalLimitHint') }}</p> <p class="input-hint mb-0 text-[11px]">{{ t('admin.accounts.quotaTotalLimitHint') }}</p>
</div> </div>
</div> </div>
</div> </div>

2
frontend/src/components/account/QuotaNotifyToggle.vue
View File

@@ -42,7 +42,7 @@ const emit = defineEmits<{
<select <select
:value="thresholdType || 'fixed'" :value="thresholdType || 'fixed'"
@change="emit('update:thresholdType', ($event.target as HTMLSelectElement).value)" @change="emit('update:thresholdType', ($event.target as HTMLSelectElement).value)"
class="input py-1 text-xs w-16 flex-shrink-0 text-center" class="input py-1 text-xs w-[4.5rem] flex-shrink-0 text-center"
> >
<option value="fixed">$</option> <option value="fixed">$</option>
<option value="percentage">%</option> <option value="percentage">%</option>