From 879f88afe5bfa5d7ae4ed9b979d4986f50983568 Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Mon, 13 Apr 2026 17:20:25 +0800
Subject: [PATCH] fix(frontend): compact quota card - inline labels, dropdown
 type selector
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move dimension labels (日限额/周限额/总限额) inline with input row
- Replace $ / % toggle buttons with a compact dropdown select
- Reduce limit input width (w-28) to give more space for notify toggle
- Overall card height significantly reduced
---
 backend/cmd/server/VERSION                    |   2 +-
 .../src/components/account/QuotaLimitCard.vue | 150 +++++-------------
 .../components/account/QuotaNotifyToggle.vue  |  56 +++----
 3 files changed, 61 insertions(+), 147 deletions(-)

diff --git a/backend/cmd/server/VERSION b/backend/cmd/server/VERSION
index f0c656910d..32fe62c708 100644
--- a/backend/cmd/server/VERSION
+++ b/backend/cmd/server/VERSION
@@ -1 +1 @@
-0.1.110.31
+0.1.110.32
diff --git a/frontend/src/components/account/QuotaLimitCard.vue b/frontend/src/components/account/QuotaLimitCard.vue
index ab109a9a1c..730501268e 100644
--- a/frontend/src/components/account/QuotaLimitCard.vue
+++ b/frontend/src/components/account/QuotaLimitCard.vue
@@ -196,171 +196,103 @@ const onWeeklyModeChange = (e: Event) => {
       </div>
 
       <!-- 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>
-          <label class="input-label">{{ t('admin.accounts.quotaDailyLimit') }}</label>
-          <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>
-              <input
-                :value="dailyLimit"
-                @input="onDailyInput"
-                type="number"
-                min="0"
-                step="0.01"
-                class="input pl-7"
-                :placeholder="t('admin.accounts.quotaLimitPlaceholder')"
-              />
+          <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">
+              <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>
             <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)"
+              class="flex-1 min-w-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 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>
-            <select
-              :value="dailyResetMode || 'rolling'"
-              @change="onDailyModeChange"
-              class="input py-1 text-xs w-auto"
-            >
+            <select :value="dailyResetMode || 'rolling'" @change="onDailyModeChange" class="input py-1 text-xs w-auto">
               <option value="rolling">{{ t('admin.accounts.quotaResetModeRolling') }}</option>
               <option value="fixed">{{ t('admin.accounts.quotaResetModeFixed') }}</option>
             </select>
             <template v-if="dailyResetMode === 'fixed'">
               <label class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('admin.accounts.quotaResetHour') }}</label>
-              <select
-                :value="dailyResetHour ?? 0"
-                @change="emit('update:dailyResetHour', Number(($event.target as HTMLSelectElement).value))"
-                class="input py-1 text-xs w-24"
-              >
+              <select :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>
               </select>
             </template>
           </div>
-          <p class="input-hint mb-0">
-            <template v-if="dailyResetMode === 'fixed'">
-              {{ t('admin.accounts.quotaDailyLimitHintFixed', { hour: String(dailyResetHour ?? 0).padStart(2, '0'), timezone: resetTimezone || 'UTC' }) }}
-            </template>
-            <template v-else>
-              {{ t('admin.accounts.quotaDailyLimitHint') }}
-            </template>
+          <p class="input-hint mb-0 text-[11px]">
+            <template v-if="dailyResetMode === 'fixed'">{{ t('admin.accounts.quotaDailyLimitHintFixed', { hour: String(dailyResetHour ?? 0).padStart(2, '0'), timezone: resetTimezone || 'UTC' }) }}</template>
+            <template v-else>{{ t('admin.accounts.quotaDailyLimitHint') }}</template>
           </p>
         </div>
 
         <!-- 周配额 -->
         <div>
-          <label class="input-label">{{ t('admin.accounts.quotaWeeklyLimit') }}</label>
-          <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>
-              <input
-                :value="weeklyLimit"
-                @input="onWeeklyInput"
-                type="number"
-                min="0"
-                step="0.01"
-                class="input pl-7"
-                :placeholder="t('admin.accounts.quotaLimitPlaceholder')"
-              />
+          <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">
+              <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>
             <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)"
+              class="flex-1 min-w-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 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>
-            <select
-              :value="weeklyResetMode || 'rolling'"
-              @change="onWeeklyModeChange"
-              class="input py-1 text-xs w-auto"
-            >
+            <select :value="weeklyResetMode || 'rolling'" @change="onWeeklyModeChange" class="input py-1 text-xs w-auto">
               <option value="rolling">{{ t('admin.accounts.quotaResetModeRolling') }}</option>
               <option value="fixed">{{ t('admin.accounts.quotaResetModeFixed') }}</option>
             </select>
             <template v-if="weeklyResetMode === 'fixed'">
               <label class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('admin.accounts.quotaWeeklyResetDay') }}</label>
-              <select
-                :value="weeklyResetDay ?? 1"
-                @change="emit('update:weeklyResetDay', Number(($event.target as HTMLSelectElement).value))"
-                class="input py-1 text-xs w-28"
-              >
+              <select :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>
               </select>
               <label class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t('admin.accounts.quotaResetHour') }}</label>
-              <select
-                :value="weeklyResetHour ?? 0"
-                @change="emit('update:weeklyResetHour', Number(($event.target as HTMLSelectElement).value))"
-                class="input py-1 text-xs w-24"
-              >
+              <select :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>
               </select>
             </template>
           </div>
-          <p class="input-hint mb-0">
-            <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>
-            <template v-else>
-              {{ t('admin.accounts.quotaWeeklyLimitHint') }}
-            </template>
+          <p class="input-hint mb-0 text-[11px]">
+            <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>
+            <template v-else>{{ t('admin.accounts.quotaWeeklyLimitHint') }}</template>
           </p>
         </div>
 
-        <!-- 时区选择（当任一维度使用固定模式时显示） -->
+        <!-- 时区选择 -->
         <div v-if="hasFixedMode">
           <label class="input-label">{{ t('admin.accounts.quotaResetTimezone') }}</label>
-          <select
-            :value="resetTimezone || 'UTC'"
-            @change="emit('update:resetTimezone', ($event.target as HTMLSelectElement).value)"
-            class="input text-sm"
-          >
+          <select :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>
           </select>
         </div>
 
         <!-- 总配额 -->
         <div>
-          <label class="input-label">{{ t('admin.accounts.quotaTotalLimit') }}</label>
-          <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>
-              <input
-                :value="totalLimit"
-                @input="onTotalInput"
-                type="number"
-                min="0"
-                step="0.01"
-                class="input pl-7"
-                :placeholder="t('admin.accounts.quotaLimitPlaceholder')"
-              />
+          <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">
+              <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>
             <QuotaNotifyToggle
               v-if="quotaNotifyGlobalEnabled && totalLimit && totalLimit > 0"
-              class="flex-1"
-              :enabled="props.quotaNotifyTotalEnabled"
-              :threshold="props.quotaNotifyTotalThreshold"
-              :threshold-type="props.quotaNotifyTotalThresholdType"
-              @update:enabled="emit('update:quotaNotifyTotalEnabled', $event)"
-              @update:threshold="emit('update:quotaNotifyTotalThreshold', $event)"
-              @update:threshold-type="emit('update:quotaNotifyTotalThresholdType', $event)"
+              class="flex-1 min-w-0"
+              :enabled="props.quotaNotifyTotalEnabled" :threshold="props.quotaNotifyTotalThreshold" :threshold-type="props.quotaNotifyTotalThresholdType"
+              @update:enabled="emit('update:quotaNotifyTotalEnabled', $event)" @update:threshold="emit('update:quotaNotifyTotalThreshold', $event)" @update:threshold-type="emit('update:quotaNotifyTotalThresholdType', $event)"
             />
           </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>
diff --git a/frontend/src/components/account/QuotaNotifyToggle.vue b/frontend/src/components/account/QuotaNotifyToggle.vue
index c7583a01e9..cf7833e4da 100644
--- a/frontend/src/components/account/QuotaNotifyToggle.vue
+++ b/frontend/src/components/account/QuotaNotifyToggle.vue
@@ -14,15 +14,11 @@ const emit = defineEmits<{
   'update:threshold': [value: number | null]
   'update:thresholdType': [value: string | null]
 }>()
-
-function toggleType(current: string | null) {
-  emit('update:thresholdType', current === 'percentage' ? 'fixed' : 'percentage')
-}
 </script>
 
 <template>
-  <div class="flex items-center gap-2">
-    <label class="text-sm text-gray-500 whitespace-nowrap">{{ t('admin.accounts.quotaNotify.alert') }}</label>
+  <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)"
@@ -39,38 +35,24 @@ function toggleType(current: string | null) {
       />
     </button>
     <template v-if="enabled">
-      <button
-        type="button"
-        class="px-1.5 py-0.5 text-xs font-medium rounded border transition-colors"
-        :class="(!thresholdType || thresholdType === 'fixed') ? 'bg-primary-100 text-primary-700 border-primary-300 dark:bg-primary-900/30 dark:text-primary-400 dark:border-primary-700' : 'bg-gray-100 text-gray-500 border-gray-200 dark:bg-dark-600 dark:text-gray-400 dark:border-dark-500'"
-        @click="toggleType(thresholdType)"
+      <input
+        :value="threshold"
+        @input="emit('update:threshold', parseFloat(($event.target as HTMLInputElement).value) || null)"
+        type="number"
+        min="0"
+        :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"
       >
-        $
-      </button>
-      <button
-        type="button"
-        class="px-1.5 py-0.5 text-xs font-medium rounded border transition-colors"
-        :class="thresholdType === 'percentage' ? 'bg-primary-100 text-primary-700 border-primary-300 dark:bg-primary-900/30 dark:text-primary-400 dark:border-primary-700' : 'bg-gray-100 text-gray-500 border-gray-200 dark:bg-dark-600 dark:text-gray-400 dark:border-dark-500'"
-        @click="toggleType(thresholdType)"
-      >
-        %
-      </button>
-      <div class="relative flex-1">
-        <input
-          :value="threshold"
-          @input="emit('update:threshold', parseFloat(($event.target as HTMLInputElement).value) || null)"
-          type="number"
-          min="0"
-          :max="thresholdType === 'percentage' ? 100 : undefined"
-          :step="thresholdType === 'percentage' ? 1 : 0.01"
-          class="input py-1 text-sm w-full"
-          :class="thresholdType === 'percentage' ? 'pr-7' : 'pr-7'"
-          :placeholder="thresholdType === 'percentage' ? t('admin.accounts.quotaNotify.thresholdPlaceholder') : t('admin.accounts.quotaNotify.threshold')"
-        />
-        <span class="absolute right-2.5 top-1/2 -translate-y-1/2 text-xs text-gray-400 pointer-events-none">
-          {{ thresholdType === 'percentage' ? '%' : '$' }}
-        </span>
-      </div>
+        <option value="fixed">$</option>
+        <option value="percentage">%</option>
+      </select>
     </template>
   </div>
 </template>