From d4f6ad72251ba3f364d8271d773c11244f1e232c Mon Sep 17 00:00:00 2001
From: shaw <shaw-wei@foxmail.com>
Date: Thu, 5 Mar 2026 10:45:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Eapikey=E7=9A=84usage?=
 =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/i18n/locales/en.ts     |  59 ++
 frontend/src/i18n/locales/zh.ts     |  59 ++
 frontend/src/router/index.ts        |   9 +
 frontend/src/views/KeyUsageView.vue | 858 ++++++++++++++++++++++++++++
 frontend/vite.config.ts             |   4 +
 5 files changed, 989 insertions(+)
 create mode 100644 frontend/src/views/KeyUsageView.vue

diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 3963ad01..0fad270d 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -110,6 +110,65 @@ export default {
     }
   },
 
+  // Key Usage Query Page
+  keyUsage: {
+    title: 'API Key Usage',
+    subtitle: 'Enter your API Key to view real-time spending and usage status',
+    placeholder: 'sk-ant-mirror-xxxxxxxxxxxx',
+    query: 'Query',
+    querying: 'Querying...',
+    privacyNote: 'Your Key is processed locally in the browser and will not be stored',
+    dateRange: 'Date Range:',
+    dateRangeToday: 'Today',
+    dateRange7d: '7 Days',
+    dateRange30d: '30 Days',
+    dateRangeCustom: 'Custom',
+    apply: 'Apply',
+    used: 'Used',
+    detailInfo: 'Detail Information',
+    tokenStats: 'Token Statistics',
+    modelStats: 'Model Usage Statistics',
+    // Table headers
+    model: 'Model',
+    requests: 'Requests',
+    inputTokens: 'Input Tokens',
+    outputTokens: 'Output Tokens',
+    totalTokens: 'Total Tokens',
+    cost: 'Cost',
+    // Status
+    quotaMode: 'Key Quota Mode',
+    walletBalance: 'Wallet Balance',
+    // Ring card titles
+    totalQuota: 'Total Quota',
+    limit5h: '5-Hour Limit',
+    limitDaily: 'Daily Limit',
+    limit7d: '7-Day Limit',
+    limitWeekly: 'Weekly Limit',
+    limitMonthly: 'Monthly Limit',
+    // Detail rows
+    remainingQuota: 'Remaining Quota',
+    expiresAt: 'Expires At',
+    todayExpires: '(expires today)',
+    daysLeft: '({days} days)',
+    usedQuota: 'Used Quota',
+    subscriptionType: 'Subscription Type',
+    subscriptionExpires: 'Subscription Expires',
+    // Usage stat cells
+    todayRequests: 'Today Requests',
+    todayTokens: 'Today Tokens',
+    todayCost: 'Today Cost',
+    rpmTpm: 'RPM / TPM',
+    totalRequests: 'Total Requests',
+    totalTokensLabel: 'Total Tokens',
+    totalCost: 'Total Cost',
+    avgDuration: 'Avg Duration',
+    // Messages
+    enterApiKey: 'Please enter an API Key',
+    querySuccess: 'Query successful',
+    queryFailed: 'Query failed',
+    queryFailedRetry: 'Query failed, please try again later',
+  },
+
   // Setup Wizard
   setup: {
     title: 'Sub2API Setup',
diff --git a/frontend/src/i18n/locales/zh.ts b/frontend/src/i18n/locales/zh.ts
index a692b7f6..a9619b9d 100644
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -110,6 +110,65 @@ export default {
     }
   },
 
+  // Key Usage Query Page
+  keyUsage: {
+    title: 'API Key 用量查询',
+    subtitle: '输入您的 API Key 以查看实时消费金额与使用状态',
+    placeholder: 'sk-ant-mirror-xxxxxxxxxxxx',
+    query: '查询',
+    querying: '查询中...',
+    privacyNote: '您的 Key 仅在浏览器本地处理，不会被存储',
+    dateRange: '统计范围:',
+    dateRangeToday: '今日',
+    dateRange7d: '7 天',
+    dateRange30d: '30 天',
+    dateRangeCustom: '自定义',
+    apply: '应用',
+    used: '已使用',
+    detailInfo: '详细信息',
+    tokenStats: 'Token 统计',
+    modelStats: '模型用量统计',
+    // Table headers
+    model: '模型',
+    requests: '请求数',
+    inputTokens: '输入 Tokens',
+    outputTokens: '输出 Tokens',
+    totalTokens: '总 Tokens',
+    cost: '费用',
+    // Status
+    quotaMode: 'Key 限额模式',
+    walletBalance: '钱包余额',
+    // Ring card titles
+    totalQuota: '总额度',
+    limit5h: '5 小时限额',
+    limitDaily: '日限额',
+    limit7d: '7 天限额',
+    limitWeekly: '周限额',
+    limitMonthly: '月限额',
+    // Detail rows
+    remainingQuota: '剩余额度',
+    expiresAt: '过期时间',
+    todayExpires: '(今日到期)',
+    daysLeft: '({days} 天)',
+    usedQuota: '已用额度',
+    subscriptionType: '订阅类型',
+    subscriptionExpires: '订阅到期',
+    // Usage stat cells
+    todayRequests: '今日请求',
+    todayTokens: '今日 Tokens',
+    todayCost: '今日费用',
+    rpmTpm: 'RPM / TPM',
+    totalRequests: '累计请求',
+    totalTokensLabel: '累计 Tokens',
+    totalCost: '累计费用',
+    avgDuration: '平均耗时',
+    // Messages
+    enterApiKey: '请输入 API Key',
+    querySuccess: '查询成功',
+    queryFailed: '查询失败',
+    queryFailedRetry: '查询失败，请稍后重试',
+  },
+
   // Setup Wizard
   setup: {
     title: 'Sub2API 安装向导',
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 8aa9cfff..d235de51 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -102,6 +102,15 @@ const routes: RouteRecordRaw[] = [
       title: 'Reset Password'
     }
   },
+  {
+    path: '/key-usage',
+    name: 'KeyUsage',
+    component: () => import('@/views/KeyUsageView.vue'),
+    meta: {
+      requiresAuth: false,
+      title: 'Key Usage',
+    }
+  },
 
   // ==================== User Routes ====================
   {
diff --git a/frontend/src/views/KeyUsageView.vue b/frontend/src/views/KeyUsageView.vue
new file mode 100644
index 00000000..a061ad9f
--- /dev/null
+++ b/frontend/src/views/KeyUsageView.vue
@@ -0,0 +1,858 @@
+<template>
+  <div class="relative flex min-h-screen flex-col bg-gray-50 dark:bg-dark-950">
+    <!-- Header (same pattern as HomeView) -->
+    <header class="relative z-20 px-6 py-4">
+      <nav class="mx-auto flex max-w-6xl items-center justify-between">
+        <router-link to="/home" class="flex items-center gap-3">
+          <div class="h-10 w-10 overflow-hidden rounded-xl shadow-md">
+            <img :src="siteLogo || '/logo.png'" alt="Logo" class="h-full w-full object-contain" />
+          </div>
+          <span class="text-lg font-semibold tracking-tight text-gray-900 dark:text-white">{{ siteName }}</span>
+        </router-link>
+        <div class="flex items-center gap-3">
+          <LocaleSwitcher />
+          <a
+            v-if="docUrl"
+            :href="docUrl"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-dark-400 dark:hover:bg-dark-800 dark:hover:text-white"
+            :title="t('home.viewDocs')"
+          >
+            <Icon name="book" size="md" />
+          </a>
+          <button
+            @click="toggleTheme"
+            class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-dark-400 dark:hover:bg-dark-800 dark:hover:text-white"
+            :title="isDark ? t('home.switchToLight') : t('home.switchToDark')"
+          >
+            <Icon v-if="isDark" name="sun" size="md" />
+            <Icon v-else name="moon" size="md" />
+          </button>
+        </div>
+      </nav>
+    </header>
+
+    <!-- Main Content -->
+    <main class="flex-1 w-full max-w-5xl mx-auto px-6 py-12">
+      <!-- Hero -->
+      <div class="text-center mb-12">
+        <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-3 text-gray-900 dark:text-white">
+          {{ t('keyUsage.title') }}
+        </h1>
+        <p class="text-gray-500 dark:text-dark-400 text-base max-w-md mx-auto">
+          {{ t('keyUsage.subtitle') }}
+        </p>
+      </div>
+
+      <!-- Input Section -->
+      <div class="max-w-xl mx-auto mb-14">
+        <div class="flex gap-3">
+          <div class="flex-1 relative">
+            <div class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 dark:text-dark-500">
+              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+              </svg>
+            </div>
+            <input
+              v-model="apiKey"
+              :type="keyVisible ? 'text' : 'password'"
+              :placeholder="t('keyUsage.placeholder')"
+              class="input-ring w-full h-12 pl-12 pr-12 rounded-xl border border-gray-200 bg-white text-sm text-gray-900 placeholder:text-gray-400 transition-all dark:border-dark-700 dark:bg-dark-900 dark:text-white dark:placeholder:text-dark-500"
+              @keydown.enter="queryKey"
+            />
+            <button
+              @click="keyVisible = !keyVisible"
+              class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-700 dark:text-dark-500 dark:hover:text-white transition-colors"
+            >
+              <svg v-if="!keyVisible" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
+                <line x1="1" y1="1" x2="23" y2="23"/>
+              </svg>
+              <svg v-else class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
+              </svg>
+            </button>
+          </div>
+          <button
+            @click="queryKey"
+            :disabled="isQuerying"
+            class="h-12 px-7 rounded-xl bg-primary-500 hover:bg-primary-600 text-white font-medium text-sm transition-all active:scale-[0.97] flex items-center gap-2 whitespace-nowrap disabled:opacity-60"
+          >
+            <svg v-if="isQuerying" class="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
+              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" opacity="0.25"/>
+              <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
+            </svg>
+            <svg v-else class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+            </svg>
+            {{ isQuerying ? t('keyUsage.querying') : t('keyUsage.query') }}
+          </button>
+        </div>
+        <p class="text-xs text-gray-400 dark:text-dark-500 mt-3 text-center">
+          {{ t('keyUsage.privacyNote') }}
+        </p>
+
+        <!-- Date Range Picker -->
+        <div v-if="showDatePicker" class="mt-4">
+          <div class="flex flex-wrap items-center gap-2 justify-center">
+            <span class="text-xs text-gray-500 dark:text-dark-400">{{ t('keyUsage.dateRange') }}</span>
+            <button
+              v-for="range in dateRanges"
+              :key="range.key"
+              @click="setDateRange(range.key)"
+              class="text-xs px-3 py-1.5 rounded-lg border transition-all"
+              :class="currentRange === range.key
+                ? 'bg-primary-500 text-white border-primary-500'
+                : 'border-gray-200 bg-white text-gray-700 dark:border-dark-700 dark:bg-dark-900 dark:text-dark-200 hover:border-primary-300 dark:hover:border-dark-600'"
+            >{{ range.label }}</button>
+            <div v-if="currentRange === 'custom'" class="flex items-center gap-2 ml-1">
+              <input
+                v-model="customStartDate"
+                type="date"
+                class="input-ring text-xs px-2 py-1.5 rounded-lg border border-gray-200 bg-white text-gray-900 dark:border-dark-700 dark:bg-dark-900 dark:text-white"
+              />
+              <span class="text-xs text-gray-400">-</span>
+              <input
+                v-model="customEndDate"
+                type="date"
+                class="input-ring text-xs px-2 py-1.5 rounded-lg border border-gray-200 bg-white text-gray-900 dark:border-dark-700 dark:bg-dark-900 dark:text-white"
+              />
+              <button
+                @click="queryKey"
+                class="text-xs px-3 py-1.5 rounded-lg bg-primary-500 text-white hover:bg-primary-600"
+              >{{ t('keyUsage.apply') }}</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Results Container -->
+      <div v-if="showResults">
+        <!-- Loading Skeleton -->
+        <div v-if="showLoading" class="space-y-6">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div class="rounded-2xl border border-gray-200 bg-white p-8 dark:border-dark-700 dark:bg-dark-900">
+              <div class="skeleton h-5 w-24 mb-6"></div>
+              <div class="flex justify-center"><div class="skeleton w-44 h-44 rounded-full"></div></div>
+            </div>
+            <div class="rounded-2xl border border-gray-200 bg-white p-8 dark:border-dark-700 dark:bg-dark-900">
+              <div class="skeleton h-5 w-24 mb-6"></div>
+              <div class="flex justify-center"><div class="skeleton w-44 h-44 rounded-full"></div></div>
+            </div>
+          </div>
+          <div class="rounded-2xl border border-gray-200 bg-white p-8 dark:border-dark-700 dark:bg-dark-900">
+            <div class="skeleton h-5 w-32 mb-6"></div>
+            <div class="space-y-4">
+              <div class="skeleton h-4 w-full"></div>
+              <div class="skeleton h-4 w-3/4"></div>
+              <div class="skeleton h-4 w-5/6"></div>
+              <div class="skeleton h-4 w-2/3"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Result Content -->
+        <div v-else-if="resultData" class="space-y-6">
+          <!-- Status Badge -->
+          <div v-if="statusInfo" class="fade-up flex items-center justify-center mb-2">
+            <div class="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-gray-200 bg-white/90 shadow-sm backdrop-blur-sm dark:border-dark-700 dark:bg-dark-900/90">
+              <span
+                class="w-2.5 h-2.5 rounded-full pulse-dot"
+                :class="statusInfo.isActive ? 'bg-emerald-500' : 'bg-rose-500'"
+              ></span>
+              <span class="text-sm font-medium text-gray-900 dark:text-white">{{ statusInfo.label }}</span>
+              <span class="text-xs text-gray-400 dark:text-dark-500">|</span>
+              <span class="text-xs text-gray-500 dark:text-dark-400">{{ statusInfo.statusText }}</span>
+            </div>
+          </div>
+
+          <!-- Ring Cards Grid -->
+          <div v-if="ringItems.length > 0" :class="ringGridClass">
+            <div
+              v-for="(ring, i) in ringItems"
+              :key="i"
+              class="fade-up rounded-2xl border border-gray-200 bg-white/90 p-8 backdrop-blur-sm transition-all duration-300 hover:shadow-lg dark:border-dark-700 dark:bg-dark-900/90"
+              :class="`fade-up-delay-${Math.min(i + 1, 4)}`"
+            >
+              <div class="flex items-center justify-between mb-6">
+                <h3 class="text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-dark-400">
+                  {{ ring.title }}
+                </h3>
+                <!-- Clock icon -->
+                <svg v-if="ring.iconType === 'clock'" class="w-5 h-5 text-gray-400 dark:text-dark-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
+                </svg>
+                <!-- Calendar icon -->
+                <svg v-else-if="ring.iconType === 'calendar'" class="w-5 h-5 text-gray-400 dark:text-dark-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
+                </svg>
+                <!-- Dollar icon -->
+                <svg v-else class="w-5 h-5 text-gray-400 dark:text-dark-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
+                </svg>
+              </div>
+              <div class="flex justify-center">
+                <div class="relative">
+                  <svg class="w-44 h-44" viewBox="0 0 160 160">
+                    <circle cx="80" cy="80" r="68" fill="none" :stroke="ringTrackColor" stroke-width="10"/>
+                    <circle
+                      class="progress-ring"
+                      cx="80" cy="80" r="68" fill="none"
+                      :stroke="`url(#ring-grad-${i})`"
+                      stroke-width="10" stroke-linecap="round"
+                      :stroke-dasharray="CIRCUMFERENCE.toFixed(2)"
+                      :stroke-dashoffset="getRingOffset(ring)"
+                    />
+                    <defs>
+                      <linearGradient :id="`ring-grad-${i}`" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" :stop-color="RING_GRADIENTS[i % 4].from"/>
+                        <stop offset="100%" :stop-color="RING_GRADIENTS[i % 4].to"/>
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                  <div class="absolute inset-0 flex flex-col items-center justify-center">
+                    <template v-if="ring.isBalance">
+                      <span class="text-2xl font-bold tabular-nums" :style="{ color: RING_GRADIENTS[i % 4].from }">
+                        {{ ring.amount }}
+                      </span>
+                    </template>
+                    <template v-else>
+                      <span class="text-3xl font-bold tabular-nums text-gray-900 dark:text-white">
+                        {{ displayPcts[i] ?? 0 }}%
+                      </span>
+                      <span class="text-xs text-gray-500 dark:text-dark-400 mt-0.5">{{ t('keyUsage.used') }}</span>
+                      <span
+                        class="text-sm font-semibold mt-1 tabular-nums"
+                        :style="{ color: RING_GRADIENTS[i % 4].from }"
+                      >{{ ring.amount }}</span>
+                    </template>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Detail Card -->
+          <div
+            v-if="detailRows.length > 0"
+            class="fade-up fade-up-delay-3 rounded-2xl border border-gray-200 bg-white/90 backdrop-blur-sm overflow-hidden dark:border-dark-700 dark:bg-dark-900/90"
+          >
+            <div class="px-8 py-5 border-b border-gray-200 dark:border-dark-700">
+              <h3 class="text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-dark-400">{{ t('keyUsage.detailInfo') }}</h3>
+            </div>
+            <div class="divide-y divide-gray-100 dark:divide-dark-800">
+              <div
+                v-for="(row, i) in detailRows"
+                :key="i"
+                class="px-8 py-4 flex items-center justify-between"
+              >
+                <div class="flex items-center gap-3">
+                  <div class="w-8 h-8 rounded-lg flex items-center justify-center" :class="row.iconBg">
+                    <svg
+                      class="w-4 h-4"
+                      :class="row.iconColor"
+                      viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                      stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                      v-html="row.iconSvg"
+                    ></svg>
+                  </div>
+                  <span class="text-sm text-gray-700 dark:text-dark-200">{{ row.label }}</span>
+                </div>
+                <span class="text-sm font-semibold tabular-nums" :class="row.valueClass || 'text-gray-900 dark:text-white'">
+                  {{ row.value }}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Usage Stats Card -->
+          <div
+            v-if="usageStatCells.length > 0"
+            class="fade-up fade-up-delay-3 rounded-2xl border border-gray-200 bg-white/90 backdrop-blur-sm overflow-hidden dark:border-dark-700 dark:bg-dark-900/90"
+          >
+            <div class="px-8 py-5 border-b border-gray-200 dark:border-dark-700">
+              <h3 class="text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-dark-400">{{ t('keyUsage.tokenStats') }}</h3>
+            </div>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-px bg-gray-100 dark:bg-dark-800">
+              <div
+                v-for="(cell, i) in usageStatCells"
+                :key="i"
+                class="bg-white px-6 py-4 dark:bg-dark-900"
+              >
+                <div class="text-xs text-gray-500 dark:text-dark-400 mb-1">{{ cell.label }}</div>
+                <div class="text-sm font-semibold tabular-nums text-gray-900 dark:text-white">{{ cell.value }}</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Model Stats Table -->
+          <div
+            v-if="modelStats.length > 0"
+            class="fade-up fade-up-delay-4 rounded-2xl border border-gray-200 bg-white/90 backdrop-blur-sm overflow-hidden dark:border-dark-700 dark:bg-dark-900/90"
+          >
+            <div class="px-8 py-5 border-b border-gray-200 dark:border-dark-700">
+              <h3 class="text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-dark-400">{{ t('keyUsage.modelStats') }}</h3>
+            </div>
+            <div class="overflow-x-auto">
+              <table class="w-full">
+                <thead>
+                  <tr class="border-b border-gray-200 bg-gray-50 dark:border-dark-700 dark:bg-dark-950">
+                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-dark-400">{{ t('keyUsage.model') }}</th>
+                    <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-dark-400">{{ t('keyUsage.requests') }}</th>
+                    <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-dark-400">{{ t('keyUsage.inputTokens') }}</th>
+                    <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-dark-400">{{ t('keyUsage.outputTokens') }}</th>
+                    <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-dark-400">{{ t('keyUsage.totalTokens') }}</th>
+                    <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-dark-400">{{ t('keyUsage.cost') }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="(m, i) in modelStats"
+                    :key="i"
+                    class="border-b border-gray-100 last:border-b-0 dark:border-dark-800"
+                  >
+                    <td class="px-4 py-3 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white">{{ m.model || '-' }}</td>
+                    <td class="px-4 py-3 text-sm tabular-nums text-right text-gray-700 dark:text-dark-200">{{ fmtNum(m.requests) }}</td>
+                    <td class="px-4 py-3 text-sm tabular-nums text-right text-gray-700 dark:text-dark-200">{{ fmtNum(m.input_tokens) }}</td>
+                    <td class="px-4 py-3 text-sm tabular-nums text-right text-gray-700 dark:text-dark-200">{{ fmtNum(m.output_tokens) }}</td>
+                    <td class="px-4 py-3 text-sm tabular-nums text-right text-gray-700 dark:text-dark-200">{{ fmtNum(m.total_tokens) }}</td>
+                    <td class="px-4 py-3 text-sm tabular-nums text-right font-medium text-gray-900 dark:text-white">{{ usd(m.actual_cost != null ? m.actual_cost : m.cost) }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <!-- Footer (same pattern as HomeView) -->
+    <footer class="relative z-10 border-t border-gray-200/50 px-6 py-8 dark:border-dark-800/50">
+      <div class="mx-auto flex max-w-6xl flex-col items-center justify-center gap-4 text-center sm:flex-row sm:text-left">
+        <p class="text-sm text-gray-500 dark:text-dark-400">
+          &copy; {{ currentYear }} {{ siteName }}. {{ t('home.footer.allRightsReserved') }}
+        </p>
+        <div class="flex items-center gap-4">
+          <a
+            v-if="docUrl"
+            :href="docUrl"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-dark-400 dark:hover:text-white"
+          >{{ t('home.docs') }}</a>
+          <a
+            :href="githubUrl"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-dark-400 dark:hover:text-white"
+          >GitHub</a>
+        </div>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores'
+import LocaleSwitcher from '@/components/common/LocaleSwitcher.vue'
+import Icon from '@/components/icons/Icon.vue'
+
+const { t, locale } = useI18n()
+const appStore = useAppStore()
+
+// ==================== Site Settings (same as HomeView) ====================
+
+const siteName = computed(() => appStore.cachedPublicSettings?.site_name || appStore.siteName || 'Sub2API')
+const siteLogo = computed(() => appStore.cachedPublicSettings?.site_logo || appStore.siteLogo || '')
+const docUrl = computed(() => appStore.cachedPublicSettings?.doc_url || appStore.docUrl || '')
+const githubUrl = 'https://github.com/Wei-Shaw/sub2api'
+
+// ==================== Theme (same as HomeView) ====================
+
+const isDark = ref(document.documentElement.classList.contains('dark'))
+
+function toggleTheme() {
+  isDark.value = !isDark.value
+  document.documentElement.classList.toggle('dark', isDark.value)
+  localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
+}
+
+const currentYear = computed(() => new Date().getFullYear())
+
+// ==================== Key Query State ====================
+
+const apiKey = ref('')
+const keyVisible = ref(false)
+const isQuerying = ref(false)
+const showResults = ref(false)
+const showLoading = ref(false)
+const showDatePicker = ref(false)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const resultData = ref<any>(null)
+
+// ==================== Date Range State ====================
+
+type DateRangeKey = 'today' | '7d' | '30d' | 'custom'
+const currentRange = ref<DateRangeKey>('today')
+const customStartDate = ref('')
+const customEndDate = ref('')
+
+const dateRanges = computed(() => [
+  { key: 'today' as const, label: t('keyUsage.dateRangeToday') },
+  { key: '7d' as const, label: t('keyUsage.dateRange7d') },
+  { key: '30d' as const, label: t('keyUsage.dateRange30d') },
+  { key: 'custom' as const, label: t('keyUsage.dateRangeCustom') },
+])
+
+function setDateRange(key: DateRangeKey) {
+  currentRange.value = key
+  if (key !== 'custom') {
+    queryKey()
+  }
+}
+
+function getDateParams(): string {
+  const now = new Date()
+  const fmt = (d: Date) => d.toISOString().split('T')[0]
+
+  if (currentRange.value === 'custom') {
+    if (customStartDate.value && customEndDate.value) {
+      return `start_date=${customStartDate.value}&end_date=${customEndDate.value}`
+    }
+    return ''
+  }
+
+  const end = fmt(now)
+  let start: string
+  switch (currentRange.value) {
+    case 'today': start = end; break
+    case '7d': start = fmt(new Date(now.getTime() - 7 * 86400000)); break
+    case '30d': start = fmt(new Date(now.getTime() - 30 * 86400000)); break
+    default: start = fmt(new Date(now.getTime() - 30 * 86400000))
+  }
+  return `start_date=${start}&end_date=${end}`
+}
+
+// ==================== Ring Animation ====================
+
+const CIRCUMFERENCE = 2 * Math.PI * 68
+const RING_GRADIENTS = [
+  { from: '#14b8a6', to: '#5eead4' },
+  { from: '#6366F1', to: '#A5B4FC' },
+  { from: '#10B981', to: '#6EE7B7' },
+  { from: '#F59E0B', to: '#FCD34D' },
+]
+
+const ringAnimated = ref(false)
+const displayPcts = ref<number[]>([])
+
+const ringTrackColor = computed(() => isDark.value ? '#222222' : '#F0F0EE')
+
+interface RingItem {
+  title: string
+  pct: number
+  amount: string
+  isBalance?: boolean
+  iconType: 'clock' | 'calendar' | 'dollar'
+}
+
+function getRingOffset(ring: RingItem): number {
+  if (!ringAnimated.value) return CIRCUMFERENCE
+  if (ring.isBalance) return 0
+  return CIRCUMFERENCE - (Math.min(ring.pct, 100) / 100) * CIRCUMFERENCE
+}
+
+function triggerRingAnimation(items: RingItem[]) {
+  ringAnimated.value = false
+  displayPcts.value = items.map(() => 0)
+
+  nextTick(() => {
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        ringAnimated.value = true
+
+        // Animate percentage numbers
+        const duration = 1000
+        const startTime = performance.now()
+        const targets = items.map(item => item.isBalance ? 0 : item.pct)
+
+        function tick() {
+          const elapsed = performance.now() - startTime
+          const p = Math.min(elapsed / duration, 1)
+          const ease = 1 - Math.pow(1 - p, 3)
+          displayPcts.value = targets.map(target => Math.round(ease * target))
+          if (p < 1) requestAnimationFrame(tick)
+        }
+        requestAnimationFrame(tick)
+      }, 50)
+    })
+  })
+}
+
+// ==================== Computed Data ====================
+
+const statusInfo = computed(() => {
+  const data = resultData.value
+  if (!data) return null
+
+  if (data.mode === 'quota_limited') {
+    const isValid = data.isValid !== false
+    const statusMap: Record<string, string> = {
+      active: 'Active',
+      quota_exhausted: 'Quota Exhausted',
+      expired: 'Expired',
+    }
+    return {
+      label: t('keyUsage.quotaMode'),
+      statusText: statusMap[data.status] || data.status || 'Unknown',
+      isActive: isValid && data.status === 'active',
+    }
+  }
+
+  return {
+    label: data.planName || t('keyUsage.walletBalance'),
+    statusText: 'Active',
+    isActive: true,
+  }
+})
+
+const ringItems = computed<RingItem[]>(() => {
+  const data = resultData.value
+  if (!data) return []
+
+  const items: RingItem[] = []
+
+  if (data.mode === 'quota_limited') {
+    if (data.quota) {
+      const pct = data.quota.limit > 0 ? Math.min(Math.round((data.quota.used / data.quota.limit) * 100), 100) : 0
+      items.push({ title: t('keyUsage.totalQuota'), pct, amount: `${usd(data.quota.used)} / ${usd(data.quota.limit)}`, iconType: 'dollar' })
+    }
+    if (data.rate_limits) {
+      const windowLabels: Record<string, string> = { '5h': t('keyUsage.limit5h'), '1d': t('keyUsage.limitDaily'), '7d': t('keyUsage.limit7d') }
+      const windowIcons: Record<string, 'clock' | 'calendar'> = { '5h': 'clock', '1d': 'calendar', '7d': 'calendar' }
+      for (const rl of data.rate_limits) {
+        const pct = rl.limit > 0 ? Math.min(Math.round((rl.used / rl.limit) * 100), 100) : 0
+        items.push({
+          title: windowLabels[rl.window] || rl.window,
+          pct,
+          amount: `${usd(rl.used)} / ${usd(rl.limit)}`,
+          iconType: windowIcons[rl.window] || 'clock',
+        })
+      }
+    }
+  } else {
+    if (data.subscription) {
+      const sub = data.subscription
+      const limits = [
+        { label: t('keyUsage.limitDaily'), usage: sub.daily_usage_usd, limit: sub.daily_limit_usd },
+        { label: t('keyUsage.limitWeekly'), usage: sub.weekly_usage_usd, limit: sub.weekly_limit_usd },
+        { label: t('keyUsage.limitMonthly'), usage: sub.monthly_usage_usd, limit: sub.monthly_limit_usd },
+      ]
+      for (const l of limits) {
+        if (l.limit != null && l.limit > 0) {
+          const pct = Math.min(Math.round((l.usage / l.limit) * 100), 100)
+          items.push({ title: l.label, pct, amount: `${usd(l.usage)} / ${usd(l.limit)}`, iconType: 'calendar' })
+        }
+      }
+    }
+    if (!data.subscription && data.balance != null) {
+      items.push({ title: t('keyUsage.walletBalance'), pct: 0, amount: usd(data.balance), isBalance: true, iconType: 'dollar' })
+    }
+  }
+
+  return items
+})
+
+const ringGridClass = computed(() => {
+  const len = ringItems.value.length
+  if (len === 1) return 'grid grid-cols-1 max-w-md mx-auto gap-6'
+  if (len === 2) return 'grid grid-cols-1 md:grid-cols-2 gap-6'
+  return 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'
+})
+
+interface DetailRow {
+  iconBg: string
+  iconColor: string
+  iconSvg: string
+  label: string
+  value: string
+  valueClass: string
+}
+
+function getUsageColor(pct: number): string {
+  if (pct > 90) return 'text-rose-500'
+  if (pct > 70) return 'text-amber-500'
+  return 'text-emerald-500'
+}
+
+const detailRows = computed<DetailRow[]>(() => {
+  const data = resultData.value
+  if (!data) return []
+
+  const rows: DetailRow[] = []
+  const ICON_SHIELD = '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>'
+  const ICON_CALENDAR = '<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>'
+  const ICON_DOLLAR = '<line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>'
+  const ICON_CHECK = '<polyline points="20 6 9 17 4 12"/>'
+
+  if (data.mode === 'quota_limited') {
+    if (data.quota) {
+      const remainColor = data.quota.remaining <= 0 ? 'text-rose-500'
+        : data.quota.remaining < data.quota.limit * 0.1 ? 'text-amber-500'
+        : 'text-emerald-500'
+      rows.push({
+        iconBg: 'bg-emerald-500/10', iconColor: 'text-emerald-500', iconSvg: ICON_SHIELD,
+        label: t('keyUsage.remainingQuota'), value: usd(data.quota.remaining), valueClass: remainColor,
+      })
+    }
+    if (data.expires_at) {
+      const daysLeft = data.days_until_expiry
+      let expiryStr = formatDate(data.expires_at)
+      if (daysLeft != null) {
+        expiryStr += daysLeft > 0 ? ` ${t('keyUsage.daysLeft', { days: daysLeft })}` : daysLeft === 0 ? ` ${t('keyUsage.todayExpires')}` : ''
+      }
+      rows.push({
+        iconBg: 'bg-amber-500/10', iconColor: 'text-amber-500', iconSvg: ICON_CALENDAR,
+        label: t('keyUsage.expiresAt'), value: expiryStr, valueClass: '',
+      })
+    }
+    if (data.rate_limits) {
+      const windowMap: Record<string, string> = { '5h': '5H', '1d': locale.value === 'zh' ? '日' : 'D', '7d': '7D' }
+      for (const rl of data.rate_limits) {
+        const pct = rl.limit > 0 ? (rl.used / rl.limit) * 100 : 0
+        rows.push({
+          iconBg: 'bg-primary-500/10', iconColor: 'text-primary-500', iconSvg: ICON_DOLLAR,
+          label: `${t('keyUsage.usedQuota')} (${windowMap[rl.window] || rl.window})`,
+          value: `${usd(rl.used)} / ${usd(rl.limit)}`,
+          valueClass: getUsageColor(pct),
+        })
+      }
+    }
+  } else {
+    rows.push({
+      iconBg: 'bg-emerald-500/10', iconColor: 'text-emerald-500', iconSvg: ICON_CHECK,
+      label: t('keyUsage.subscriptionType'), value: data.planName || t('keyUsage.walletBalance'), valueClass: '',
+    })
+
+    if (data.subscription) {
+      const sub = data.subscription
+      if (sub.daily_limit_usd > 0) {
+        const pct = (sub.daily_usage_usd / sub.daily_limit_usd) * 100
+        rows.push({
+          iconBg: 'bg-primary-500/10', iconColor: 'text-primary-500', iconSvg: ICON_DOLLAR,
+          label: `${t('keyUsage.usedQuota')} (${locale.value === 'zh' ? '日' : 'D'})`, value: `${usd(sub.daily_usage_usd)} / ${usd(sub.daily_limit_usd)}`, valueClass: getUsageColor(pct),
+        })
+      }
+      if (sub.weekly_limit_usd > 0) {
+        const pct = (sub.weekly_usage_usd / sub.weekly_limit_usd) * 100
+        rows.push({
+          iconBg: 'bg-indigo-500/10', iconColor: 'text-indigo-500', iconSvg: ICON_DOLLAR,
+          label: `${t('keyUsage.usedQuota')} (${locale.value === 'zh' ? '周' : 'W'})`, value: `${usd(sub.weekly_usage_usd)} / ${usd(sub.weekly_limit_usd)}`, valueClass: getUsageColor(pct),
+        })
+      }
+      if (sub.monthly_limit_usd > 0) {
+        const pct = (sub.monthly_usage_usd / sub.monthly_limit_usd) * 100
+        rows.push({
+          iconBg: 'bg-emerald-500/10', iconColor: 'text-emerald-500', iconSvg: ICON_DOLLAR,
+          label: `${t('keyUsage.usedQuota')} (${locale.value === 'zh' ? '月' : 'M'})`, value: `${usd(sub.monthly_usage_usd)} / ${usd(sub.monthly_limit_usd)}`, valueClass: getUsageColor(pct),
+        })
+      }
+      if (sub.expires_at) {
+        rows.push({
+          iconBg: 'bg-amber-500/10', iconColor: 'text-amber-500', iconSvg: ICON_CALENDAR,
+          label: t('keyUsage.subscriptionExpires'), value: formatDate(sub.expires_at), valueClass: '',
+        })
+      }
+    }
+
+    const remainColor = data.remaining != null
+      ? (data.remaining <= 0 ? 'text-rose-500' : data.remaining < 10 ? 'text-amber-500' : 'text-emerald-500')
+      : ''
+    rows.push({
+      iconBg: 'bg-emerald-500/10', iconColor: 'text-emerald-500', iconSvg: ICON_SHIELD,
+      label: t('keyUsage.remainingQuota'), value: data.remaining != null ? usd(data.remaining) : '-', valueClass: remainColor,
+    })
+  }
+
+  return rows
+})
+
+interface StatCell {
+  label: string
+  value: string
+}
+
+const usageStatCells = computed<StatCell[]>(() => {
+  const usage = resultData.value?.usage
+  if (!usage) return []
+
+  const today = usage.today || {}
+  const total = usage.total || {}
+
+  return [
+    { label: t('keyUsage.todayRequests'), value: fmtNum(today.requests) },
+    { label: t('keyUsage.todayTokens'), value: fmtNum(today.total_tokens) },
+    { label: t('keyUsage.todayCost'), value: usd(today.actual_cost) },
+    { label: t('keyUsage.rpmTpm'), value: `${usage.rpm || 0} / ${usage.tpm || 0}` },
+    { label: t('keyUsage.totalRequests'), value: fmtNum(total.requests) },
+    { label: t('keyUsage.totalTokensLabel'), value: fmtNum(total.total_tokens) },
+    { label: t('keyUsage.totalCost'), value: usd(total.actual_cost) },
+    { label: t('keyUsage.avgDuration'), value: usage.average_duration_ms ? `${Math.round(usage.average_duration_ms)} ms` : '-' },
+  ]
+})
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const modelStats = computed<any[]>(() => resultData.value?.model_stats || [])
+
+// ==================== Utility Functions ====================
+
+function usd(value: number | null | undefined): string {
+  if (value == null || value < 0) return '-'
+  return '$' + Number(value).toFixed(2)
+}
+
+function fmtNum(val: number | null | undefined): string {
+  if (val == null) return '-'
+  return val.toLocaleString()
+}
+
+function formatDate(iso: string | null | undefined): string {
+  if (!iso) return '-'
+  const d = new Date(iso)
+  const loc = locale.value === 'zh' ? 'zh-CN' : 'en-US'
+  return d.toLocaleDateString(loc, { year: 'numeric', month: 'long', day: 'numeric' })
+}
+
+// ==================== API Query ====================
+
+async function fetchUsage(key: string) {
+  const dateParams = getDateParams()
+  const url = '/v1/usage' + (dateParams ? '?' + dateParams : '')
+  const res = await fetch(url, {
+    headers: { 'Authorization': 'Bearer ' + key },
+  })
+  if (!res.ok) {
+    const body = await res.json().catch(() => null)
+    const msg = body?.error?.message || body?.message || `${t('keyUsage.queryFailed')} (${res.status})`
+    throw new Error(msg)
+  }
+  return await res.json()
+}
+
+async function queryKey() {
+  if (isQuerying.value) return
+  const key = apiKey.value.trim()
+  if (!key) {
+    appStore.showInfo(t('keyUsage.enterApiKey'))
+    return
+  }
+
+  isQuerying.value = true
+  showResults.value = true
+  showLoading.value = true
+  resultData.value = null
+
+  try {
+    const data = await fetchUsage(key)
+    resultData.value = data
+    showLoading.value = false
+    showDatePicker.value = true
+
+    // Trigger ring animations after DOM update
+    nextTick(() => {
+      triggerRingAnimation(ringItems.value)
+    })
+
+    appStore.showSuccess(t('keyUsage.querySuccess'))
+  } catch (err) {
+    showResults.value = false
+    showLoading.value = false
+    appStore.showError((err as Error).message || t('keyUsage.queryFailedRetry'))
+  } finally {
+    isQuerying.value = false
+  }
+}
+
+// ==================== Lifecycle ====================
+
+function initTheme() {
+  const savedTheme = localStorage.getItem('theme')
+  if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    isDark.value = true
+    document.documentElement.classList.add('dark')
+  }
+}
+
+onMounted(() => {
+  initTheme()
+  if (!appStore.publicSettingsLoaded) {
+    appStore.fetchPublicSettings()
+  }
+})
+</script>
+
+<style scoped>
+/* Input focus ring */
+.input-ring {
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.input-ring:focus {
+  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2);
+  border-color: #14b8a6;
+  outline: none;
+}
+
+/* Ring animation */
+.progress-ring {
+  transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+}
+
+/* Skeleton loading */
+@keyframes shimmer-kv {
+  0%   { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+.skeleton {
+  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
+  background-size: 200% 100%;
+  animation: shimmer-kv 1.8s ease-in-out infinite;
+  border-radius: 8px;
+}
+:global(.dark) .skeleton {
+  background: linear-gradient(90deg, #334155 25%, #1e293b 50%, #334155 75%);
+  background-size: 200% 100%;
+}
+
+/* Fade up animation */
+@keyframes fade-up-kv {
+  from { opacity: 0; transform: translateY(16px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.fade-up {
+  animation: fade-up-kv 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+.fade-up-delay-1 { animation-delay: 0.1s; opacity: 0; }
+.fade-up-delay-2 { animation-delay: 0.2s; opacity: 0; }
+.fade-up-delay-3 { animation-delay: 0.3s; opacity: 0; }
+.fade-up-delay-4 { animation-delay: 0.4s; opacity: 0; }
+
+/* Pulse dot */
+@keyframes pulse-dot-kv {
+  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
+  50% { opacity: 0.6; box-shadow: 0 0 8px 2px currentColor; }
+}
+.pulse-dot {
+  animation: pulse-dot-kv 2s ease-in-out infinite;
+}
+
+/* Tabular nums */
+.tabular-nums {
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+}
+</style>
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index d6487b5b..b71f9d58 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -115,6 +115,10 @@ export default defineConfig(({ mode }) => {
           target: backendUrl,
           changeOrigin: true
         },
+        '/v1': {
+          target: backendUrl,
+          changeOrigin: true
+        },
         '/setup': {
           target: backendUrl,
           changeOrigin: true