From 4a2ef0b53823c6c11327e5becdb8551df4e30a9f Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Mon, 13 Apr 2026 17:27:57 +0800
Subject: [PATCH] fix(frontend): quota card layout - title row + input row, fix
 $ dropdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 backend/cmd/server/VERSION                    |  2 +-
 .../src/components/account/QuotaLimitCard.vue | 23 ++++++++++++++-----
 .../components/account/QuotaNotifyToggle.vue  |  8 +------
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/backend/cmd/server/VERSION b/backend/cmd/server/VERSION
index 32fe62c708..a6c776cd9d 100644
--- a/backend/cmd/server/VERSION
+++ b/backend/cmd/server/VERSION
@@ -1 +1 @@
-0.1.110.32
+0.1.110.33
diff --git a/frontend/src/components/account/QuotaLimitCard.vue b/frontend/src/components/account/QuotaLimitCard.vue
index 730501268e..a2f3734c5b 100644
--- a/frontend/src/components/account/QuotaLimitCard.vue
+++ b/frontend/src/components/account/QuotaLimitCard.vue
@@ -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>
diff --git a/frontend/src/components/account/QuotaNotifyToggle.vue b/frontend/src/components/account/QuotaNotifyToggle.vue
index cf7833e4da..b86daad703 100644
--- a/frontend/src/components/account/QuotaNotifyToggle.vue
+++ b/frontend/src/components/account/QuotaNotifyToggle.vue
@@ -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>