opensource/sub2api
3
0
Fork 0
mirror of https://github.com/Wei-Shaw/sub2api.git synced 2026-09-24 16:05:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): quota card layout - title row + input row, fix $ dropdown

Browse Source 
- Separate title row (日限额 + 告警阈值) from input row
- Widen limit input to w-32 for better alignment with title
- Remove duplicate label from QuotaNotifyToggle (now in title row)
- Fix dropdown to always show $ or % as selected value
This commit is contained in:
erio
2026-04-13 17:27:57 +08:00
parent 4b097a6428
commit 4a2ef0b538
3 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/cmd/server/VERSION
+1 -1
View File
@@ -1 +1 @@
0.1.110.32
0.1.110.33
frontend/src/components/account/QuotaLimitCard.vue
+17 -6
View File
@@ -199,9 +199,14 @@ const onWeeklyModeChange = (e: Event) => {
<div v-if="localEnabled && !collapsed" class="space-y-2 p-4 pt-3">
<!-- 日配额 -->
<div>
<!-- 标题行 -->
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-medium text-gray-700 dark:text-gray-300 w-32 flex-shrink-0">{{ t('admin.accounts.quotaDailyLimit') }}</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>
</div>
<!-- 输入行 -->
<div class="flex items-center gap-2">
<label class="input-label mb-0 text-xs w-14 flex-shrink-0">{{ t('admin.accounts.quotaDailyLimit') }}</label>
<div class="relative w-28 flex-shrink-0">
<div class="relative w-32 flex-shrink-0">
<span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 text-sm">$</span>
<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')" />
</div>
@@ -233,9 +238,12 @@ const onWeeklyModeChange = (e: Event) => {
<!-- 周配额 -->
<div>
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-medium text-gray-700 dark:text-gray-300 w-32 flex-shrink-0">{{ t('admin.accounts.quotaWeeklyLimit') }}</span>
<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>
</div>
<div class="flex items-center gap-2">
<label class="input-label mb-0 text-xs w-14 flex-shrink-0">{{ t('admin.accounts.quotaWeeklyLimit') }}</label>
<div class="relative w-28 flex-shrink-0">
<div class="relative w-32 flex-shrink-0">
<span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 text-sm">$</span>
<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')" />
</div>
@@ -279,9 +287,12 @@ const onWeeklyModeChange = (e: Event) => {
<!-- 总配额 -->
<div>
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-medium text-gray-700 dark:text-gray-300 w-32 flex-shrink-0">{{ t('admin.accounts.quotaTotalLimit') }}</span>
<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>
</div>
<div class="flex items-center gap-2">
<label class="input-label mb-0 text-xs w-14 flex-shrink-0">{{ t('admin.accounts.quotaTotalLimit') }}</label>
<div class="relative w-28 flex-shrink-0">
<div class="relative w-32 flex-shrink-0">
<span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 text-sm">$</span>
<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')" />
</div>
frontend/src/components/account/QuotaNotifyToggle.vue
+1 -7
View File
@@ -1,8 +1,4 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
defineProps<{
enabled: boolean | null
threshold: number | null
@@ -18,7 +14,6 @@ const emit = defineEmits<{
<template>
<div class="flex items-center gap-1.5">
<label class="text-xs text-gray-500 whitespace-nowrap">{{ t('admin.accounts.quotaNotify.alert') }}</label>
<button
type="button"
@click="emit('update:enabled', !enabled)"
@@ -43,12 +38,11 @@ const emit = defineEmits<{
:max="thresholdType === 'percentage' ? 100 : undefined"
:step="thresholdType === 'percentage' ? 1 : 0.01"
class="input py-1 text-sm flex-1 min-w-0"
:placeholder="thresholdType === 'percentage' ? t('admin.accounts.quotaNotify.thresholdPlaceholder') : t('admin.accounts.quotaNotify.threshold')"
/>
<select
:value="thresholdType || 'fixed'"
@change="emit('update:thresholdType', ($event.target as HTMLSelectElement).value)"
class="input py-1 text-xs w-12 flex-shrink-0 text-center"
class="input py-1 text-xs w-14 flex-shrink-0 text-center appearance-auto"
>
<option value="fixed">$</option>
<option value="percentage">%</option>