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

2025-12-31 20:46:54 +08:00
parent 3fd9bd4a80
commit 2c35f0276f
5 changed files with 134 additions and 91 deletions
--- a/frontend/src/components/common/SubscriptionProgressMini.vue
+++ b/frontend/src/components/common/SubscriptionProgressMini.vue
@@ -69,94 +69,108 @@
              </span>
            </div>

-            <!-- Progress bars -->
+            <!-- Progress bars or Unlimited badge -->
            <div class="space-y-1.5">
-              <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')
-                }}</span>
-                <div class="h-1.5 min-w-0 flex-1 rounded-full bg-gray-200 dark:bg-dark-600">
-                  <div
-                    class="h-1.5 rounded-full transition-all"
-                    :class="
-                      getProgressBarClass(
-                        subscription.daily_usage_usd,
-                        subscription.group?.daily_limit_usd
-                      )
-                    "
-                    :style="{
-                      width: getProgressWidth(
-                        subscription.daily_usage_usd,
-                        subscription.group?.daily_limit_usd
-                      )
-                    }"
-                  ></div>
-                </div>
-                <span class="w-24 flex-shrink-0 text-right text-[10px] text-gray-500">
-                  {{
-                    formatUsage(subscription.daily_usage_usd, subscription.group?.daily_limit_usd)
-                  }}
+              <!-- 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>

-              <div v-if="subscription.group?.weekly_limit_usd" class="flex items-center gap-2">
-                <span class="w-8 flex-shrink-0 text-[10px] text-gray-500">{{
-                  t('subscriptionProgress.weekly')
-                }}</span>
-                <div class="h-1.5 min-w-0 flex-1 rounded-full bg-gray-200 dark:bg-dark-600">
-                  <div
-                    class="h-1.5 rounded-full transition-all"
-                    :class="
-                      getProgressBarClass(
-                        subscription.weekly_usage_usd,
-                        subscription.group?.weekly_limit_usd
-                      )
-                    "
-                    :style="{
-                      width: getProgressWidth(
-                        subscription.weekly_usage_usd,
-                        subscription.group?.weekly_limit_usd
-                      )
-                    }"
-                  ></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')
+                  }}</span>
+                  <div class="h-1.5 min-w-0 flex-1 rounded-full bg-gray-200 dark:bg-dark-600">
+                    <div
+                      class="h-1.5 rounded-full transition-all"
+                      :class="
+                        getProgressBarClass(
+                          subscription.daily_usage_usd,
+                          subscription.group?.daily_limit_usd
+                        )
+                      "
+                      :style="{
+                        width: getProgressWidth(
+                          subscription.daily_usage_usd,
+                          subscription.group?.daily_limit_usd
+                        )
+                      }"
+                    ></div>
+                  </div>
+                  <span class="w-24 flex-shrink-0 text-right text-[10px] text-gray-500">
+                    {{
+                      formatUsage(subscription.daily_usage_usd, subscription.group?.daily_limit_usd)
+                    }}
+                  </span>
                </div>
-                <span class="w-24 flex-shrink-0 text-right text-[10px] text-gray-500">
-                  {{
-                    formatUsage(subscription.weekly_usage_usd, subscription.group?.weekly_limit_usd)
-                  }}
-                </span>
-              </div>

-              <div v-if="subscription.group?.monthly_limit_usd" class="flex items-center gap-2">
-                <span class="w-8 flex-shrink-0 text-[10px] text-gray-500">{{
-                  t('subscriptionProgress.monthly')
-                }}</span>
-                <div class="h-1.5 min-w-0 flex-1 rounded-full bg-gray-200 dark:bg-dark-600">
-                  <div
-                    class="h-1.5 rounded-full transition-all"
-                    :class="
-                      getProgressBarClass(
-                        subscription.monthly_usage_usd,
-                        subscription.group?.monthly_limit_usd
-                      )
-                    "
-                    :style="{
-                      width: getProgressWidth(
-                        subscription.monthly_usage_usd,
-                        subscription.group?.monthly_limit_usd
-                      )
-                    }"
-                  ></div>
+                <div v-if="subscription.group?.weekly_limit_usd" class="flex items-center gap-2">
+                  <span class="w-8 flex-shrink-0 text-[10px] text-gray-500">{{
+                    t('subscriptionProgress.weekly')
+                  }}</span>
+                  <div class="h-1.5 min-w-0 flex-1 rounded-full bg-gray-200 dark:bg-dark-600">
+                    <div
+                      class="h-1.5 rounded-full transition-all"
+                      :class="
+                        getProgressBarClass(
+                          subscription.weekly_usage_usd,
+                          subscription.group?.weekly_limit_usd
+                        )
+                      "
+                      :style="{
+                        width: getProgressWidth(
+                          subscription.weekly_usage_usd,
+                          subscription.group?.weekly_limit_usd
+                        )
+                      }"
+                    ></div>
+                  </div>
+                  <span class="w-24 flex-shrink-0 text-right text-[10px] text-gray-500">
+                    {{
+                      formatUsage(subscription.weekly_usage_usd, subscription.group?.weekly_limit_usd)
+                    }}
+                  </span>
                </div>
-                <span class="w-24 flex-shrink-0 text-right text-[10px] text-gray-500">
-                  {{
-                    formatUsage(
-                      subscription.monthly_usage_usd,
-                      subscription.group?.monthly_limit_usd
-                    )
-                  }}
-                </span>
-              </div>
+
+                <div v-if="subscription.group?.monthly_limit_usd" class="flex items-center gap-2">
+                  <span class="w-8 flex-shrink-0 text-[10px] text-gray-500">{{
+                    t('subscriptionProgress.monthly')
+                  }}</span>
+                  <div class="h-1.5 min-w-0 flex-1 rounded-full bg-gray-200 dark:bg-dark-600">
+                    <div
+                      class="h-1.5 rounded-full transition-all"
+                      :class="
+                        getProgressBarClass(
+                          subscription.monthly_usage_usd,
+                          subscription.group?.monthly_limit_usd
+                        )
+                      "
+                      :style="{
+                        width: getProgressWidth(
+                          subscription.monthly_usage_usd,
+                          subscription.group?.monthly_limit_usd
+                        )
+                      }"
+                    ></div>
+                  </div>
+                  <span class="w-24 flex-shrink-0 text-right text-[10px] text-gray-500">
+                    {{
+                      formatUsage(
+                        subscription.monthly_usage_usd,
+                        subscription.group?.monthly_limit_usd
+                      )
+                    }}
+                  </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'
--- a/frontend/src/i18n/locales/en.ts
+++ b/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',
--- a/frontend/src/i18n/locales/zh.ts
+++ b/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: '每月',
--- a/frontend/src/views/admin/SubscriptionsView.vue
+++ b/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>
--- a/frontend/src/views/user/SubscriptionsView.vue
+++ b/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>