fix(frontend): 修复无限制订阅的显示问题

frontend/src/components/common/SubscriptionProgressMini.vue

@@ -69,8 +69,21 @@
               </span>
             </div>
 
-            <!-- Progress bars -->
+            <!-- Progress bars or Unlimited badge -->
             <div class="space-y-1.5">
+              <!-- Unlimited subscription badge -->
+              <div
+                v-if="isUnlimited(subscription)"
+                class="flex items-center gap-2 rounded-lg bg-gradient-to-r from-emerald-50 to-teal-50 px-2.5 py-1.5 dark:from-emerald-900/20 dark:to-teal-900/20"
+              >
+                <span class="text-lg text-emerald-600 dark:text-emerald-400">∞</span>
+                <span class="text-xs font-medium text-emerald-700 dark:text-emerald-300">
+                  {{ t('subscriptionProgress.unlimited') }}
+                </span>
+              </div>
+
+              <!-- Progress bars for limited subscriptions -->
+              <template v-else>
                 <div v-if="subscription.group?.daily_limit_usd" class="flex items-center gap-2">
                   <span class="w-8 flex-shrink-0 text-[10px] text-gray-500">{{
                     t('subscriptionProgress.daily')
@@ -157,6 +170,7 @@
                     }}
                   </span>
                 </div>
+              </template>
             </div>
           </div>
         </div>
@@ -215,7 +229,19 @@ function getMaxUsagePercentage(sub: UserSubscription): number {
   return percentages.length > 0 ? Math.max(...percentages) : 0
 }
 
+function isUnlimited(sub: UserSubscription): boolean {
+  return (
+    !sub.group?.daily_limit_usd &&
+    !sub.group?.weekly_limit_usd &&
+    !sub.group?.monthly_limit_usd
+  )
+}
+
 function getProgressDotClass(sub: UserSubscription): string {
+  // Unlimited subscriptions get a special color
+  if (isUnlimited(sub)) {
+    return 'bg-emerald-500'
+  }
   const maxPercentage = getMaxUsagePercentage(sub)
   if (maxPercentage >= 90) return 'bg-red-500'
   if (maxPercentage >= 70) return 'bg-orange-500'

frontend/src/i18n/locales/en.ts

@@ -749,6 +749,7 @@ export default {
       weekly: 'Weekly',
       monthly: 'Monthly',
       noLimits: 'No limits configured',
+      unlimited: 'Unlimited',
       resetNow: 'Resetting soon',
       windowNotActive: 'Window not active',
       resetInMinutes: 'Resets in {minutes}m',
@@ -1492,7 +1493,8 @@ export default {
     expiresToday: 'Expires today',
     expiresTomorrow: 'Expires tomorrow',
     viewAll: 'View all subscriptions',
-    noSubscriptions: 'No active subscriptions'
+    noSubscriptions: 'No active subscriptions',
+    unlimited: 'Unlimited'
   },
 
   // Version Badge
@@ -1535,6 +1537,7 @@ export default {
     expires: 'Expires',
     noExpiration: 'No expiration',
     unlimited: 'Unlimited',
+    unlimitedDesc: 'No usage limits on this subscription',
     daily: 'Daily',
     weekly: 'Weekly',
     monthly: 'Monthly',

frontend/src/i18n/locales/zh.ts

@@ -840,6 +840,7 @@ export default {
       weekly: '每周',
       monthly: '每月',
       noLimits: '未配置限额',
+      unlimited: '无限制',
       resetNow: '即将重置',
       windowNotActive: '窗口未激活',
       resetInMinutes: '{minutes} 分钟后重置',
@@ -1689,7 +1690,8 @@ export default {
     expiresToday: '今天到期',
     expiresTomorrow: '明天到期',
     viewAll: '查看全部订阅',
-    noSubscriptions: '暂无有效订阅'
+    noSubscriptions: '暂无有效订阅',
+    unlimited: '无限制'
   },
 
   // Version Badge
@@ -1731,6 +1733,7 @@ export default {
     expires: '到期时间',
     noExpiration: '无到期时间',
     unlimited: '无限制',
+    unlimitedDesc: '该订阅无用量限制',
     daily: '每日',
     weekly: '每周',
     monthly: '每月',

frontend/src/views/admin/SubscriptionsView.vue

@@ -202,16 +202,19 @@
                 </div>
               </div>
 
-              <!-- No Limits -->
+              <!-- No Limits - Unlimited badge -->
               <div
                 v-if="
                   !row.group?.daily_limit_usd &&
                   !row.group?.weekly_limit_usd &&
                   !row.group?.monthly_limit_usd
                 "
-                class="text-xs text-gray-500"
+                class="flex items-center gap-2 rounded-lg bg-gradient-to-r from-emerald-50 to-teal-50 px-3 py-2 dark:from-emerald-900/20 dark:to-teal-900/20"
               >
-                {{ t('admin.subscriptions.noLimits') }}
+                <span class="text-lg text-emerald-600 dark:text-emerald-400">∞</span>
+                <span class="text-xs font-medium text-emerald-700 dark:text-emerald-300">
+                  {{ t('admin.subscriptions.unlimited') }}
+                </span>
               </div>
             </div>
           </template>

frontend/src/views/user/SubscriptionsView.vue

@@ -230,18 +230,26 @@
               </p>
             </div>
 
-            <!-- No limits configured -->
+            <!-- No limits configured - Unlimited badge -->
             <div
               v-if="
                 !subscription.group?.daily_limit_usd &&
                 !subscription.group?.weekly_limit_usd &&
                 !subscription.group?.monthly_limit_usd
               "
-              class="py-4 text-center"
+              class="flex items-center justify-center rounded-xl bg-gradient-to-r from-emerald-50 to-teal-50 py-6 dark:from-emerald-900/20 dark:to-teal-900/20"
             >
-              <span class="text-sm text-gray-500 dark:text-dark-400">{{
-                t('userSubscriptions.unlimited')
-              }}</span>
+              <div class="flex items-center gap-3">
+                <span class="text-4xl text-emerald-600 dark:text-emerald-400">∞</span>
+                <div>
+                  <p class="text-sm font-medium text-emerald-700 dark:text-emerald-300">
+                    {{ t('userSubscriptions.unlimited') }}
+                  </p>
+                  <p class="text-xs text-emerald-600/70 dark:text-emerald-400/70">
+                    {{ t('userSubscriptions.unlimitedDesc') }}
+                  </p>
+                </div>
+              </div>
             </div>
           </div>
         </div>