From 2066c478ab3d408a67a05f98ca08e79c9d480b0c Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Mon, 13 Apr 2026 16:52:02 +0800
Subject: [PATCH] fix(frontend): quota notify UI improvements

- QuotaNotifyToggle: add $ or % suffix to threshold input based on type
- QuotaLimitCard: combine reset mode and notify toggle on same row
  to reduce vertical height for daily/weekly sections
- Remove redundant ml-4 indentation from QuotaNotifyToggle
---
 backend/cmd/server/VERSION                    |  2 +-
 .../src/components/account/QuotaLimitCard.vue | 74 +++++++++----------
 .../components/account/QuotaNotifyToggle.vue  | 32 ++++----
 3 files changed, 56 insertions(+), 52 deletions(-)

diff --git a/backend/cmd/server/VERSION b/backend/cmd/server/VERSION
index c74c5ae7..e52af706 100644
--- a/backend/cmd/server/VERSION
+++ b/backend/cmd/server/VERSION
@@ -1 +1 @@
-0.1.110.27
+0.1.110.28
diff --git a/frontend/src/components/account/QuotaLimitCard.vue b/frontend/src/components/account/QuotaLimitCard.vue
index 38ab6479..682f51aa 100644
--- a/frontend/src/components/account/QuotaLimitCard.vue
+++ b/frontend/src/components/account/QuotaLimitCard.vue
@@ -203,28 +203,28 @@ const onWeeklyModeChange = (e: Event) => {
               :placeholder="t('admin.accounts.quotaLimitPlaceholder')"
             />
           </div>
-          <!-- 日配额重置模式 -->
-          <div class="mt-2 flex items-center gap-2">
+          <!-- 日配额：重置方式 + 告警阈值同行 -->
+          <div class="mt-2 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"
+              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>
-          </div>
-          <!-- 固定模式：小时选择 -->
-          <div v-if="dailyResetMode === 'fixed'" class="mt-2 flex items-center gap-2">
-            <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"
-            >
-              <option v-for="h in hourOptions" :key="h" :value="h">{{ String(h).padStart(2, '0') }}:00</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"
+              >
+                <option v-for="h in hourOptions" :key="h" :value="h">{{ String(h).padStart(2, '0') }}:00</option>
+              </select>
+            </template>
           </div>
           <p class="input-hint">
             <template v-if="dailyResetMode === 'fixed'">
@@ -234,7 +234,6 @@ const onWeeklyModeChange = (e: Event) => {
               {{ t('admin.accounts.quotaDailyLimitHint') }}
             </template>
           </p>
-          <!-- 日配额告警 -->
           <QuotaNotifyToggle
             v-if="quotaNotifyGlobalEnabled && dailyLimit && dailyLimit > 0"
             :enabled="props.quotaNotifyDailyEnabled"
@@ -261,36 +260,36 @@ const onWeeklyModeChange = (e: Event) => {
               :placeholder="t('admin.accounts.quotaLimitPlaceholder')"
             />
           </div>
-          <!-- 周配额重置模式 -->
-          <div class="mt-2 flex items-center gap-2">
+          <!-- 周配额：重置方式 + 告警阈值同行 -->
+          <div class="mt-2 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"
+              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>
-          </div>
-          <!-- 固定模式：星期几 + 小时 -->
-          <div v-if="weeklyResetMode === 'fixed'" class="mt-2 flex items-center gap-2 flex-wrap">
-            <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"
-            >
-              <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"
-            >
-              <option v-for="h in hourOptions" :key="h" :value="h">{{ String(h).padStart(2, '0') }}:00</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"
+              >
+                <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"
+              >
+                <option v-for="h in hourOptions" :key="h" :value="h">{{ String(h).padStart(2, '0') }}:00</option>
+              </select>
+            </template>
           </div>
           <p class="input-hint">
             <template v-if="weeklyResetMode === 'fixed'">
@@ -300,7 +299,6 @@ const onWeeklyModeChange = (e: Event) => {
               {{ t('admin.accounts.quotaWeeklyLimitHint') }}
             </template>
           </p>
-          <!-- 周配额告警 -->
           <QuotaNotifyToggle
             v-if="quotaNotifyGlobalEnabled && weeklyLimit && weeklyLimit > 0"
             :enabled="props.quotaNotifyWeeklyEnabled"
diff --git a/frontend/src/components/account/QuotaNotifyToggle.vue b/frontend/src/components/account/QuotaNotifyToggle.vue
index b1c22fe2..c7583a01 100644
--- a/frontend/src/components/account/QuotaNotifyToggle.vue
+++ b/frontend/src/components/account/QuotaNotifyToggle.vue
@@ -21,7 +21,7 @@ function toggleType(current: string | null) {
 </script>
 
 <template>
-  <div class="ml-4 mt-2 flex items-center gap-3">
+  <div class="flex items-center gap-2">
     <label class="text-sm text-gray-500 whitespace-nowrap">{{ t('admin.accounts.quotaNotify.alert') }}</label>
     <button
       type="button"
@@ -38,7 +38,7 @@ function toggleType(current: string | null) {
         ]"
       />
     </button>
-    <div v-if="enabled" class="flex items-center gap-1 flex-1">
+    <template v-if="enabled">
       <button
         type="button"
         class="px-1.5 py-0.5 text-xs font-medium rounded border transition-colors"
@@ -55,16 +55,22 @@ function toggleType(current: string | null) {
       >
         %
       </button>
-      <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"
-        :placeholder="thresholdType === 'percentage' ? t('admin.accounts.quotaNotify.thresholdPlaceholder') : t('admin.accounts.quotaNotify.threshold')"
-      />
-    </div>
+      <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>
+    </template>
   </div>
 </template>