feat: 账号管理新增使用统计功能

- 新增账号统计弹窗，展示30天使用数据
- 显示总费用、请求数、日均费用、日均请求等汇总指标
- 显示今日概览、最高费用日、最高请求日
- 包含费用与请求趋势图（双Y轴）
- 复用模型分布图组件展示模型使用分布
- 显示实际扣费和标准计费（标准计费以较淡颜色显示）

frontend/src/api/admin/accounts.ts

@@ -12,6 +12,7 @@ import type {
   AccountUsageInfo,
   WindowStats,
   ClaudeModel,
+  AccountUsageStatsResponse,
 } from '@/types';
 
 /**
@@ -126,27 +127,12 @@ export async function refreshCredentials(id: number): Promise<Account> {
 /**
  * Get account usage statistics
  * @param id - Account ID
- * @param period - Time period
- * @returns Account usage statistics
+ * @param days - Number of days (default: 30)
+ * @returns Account usage statistics with history, summary, and models
  */
-export async function getStats(
-  id: number,
-  period: string = 'month'
-): Promise<{
-  total_requests: number;
-  successful_requests: number;
-  failed_requests: number;
-  total_tokens: number;
-  average_response_time: number;
-}> {
-  const { data } = await apiClient.get<{
-    total_requests: number;
-    successful_requests: number;
-    failed_requests: number;
-    total_tokens: number;
-    average_response_time: number;
-  }>(`/admin/accounts/${id}/stats`, {
-    params: { period },
+export async function getStats(id: number, days: number = 30): Promise<AccountUsageStatsResponse> {
+  const { data } = await apiClient.get<AccountUsageStatsResponse>(`/admin/accounts/${id}/stats`, {
+    params: { days },
   });
   return data;
 }

frontend/src/components/account/AccountStatsModal.vue

@@ -0,0 +1,546 @@
+<template>
+  <Modal
+    :show="show"
+    :title="t('admin.accounts.usageStatistics')"
+    size="2xl"
+    @close="handleClose"
+  >
+    <div class="space-y-6">
+      <!-- Account Info Header -->
+      <div v-if="account" class="flex items-center justify-between p-3 bg-gradient-to-r from-primary-50 to-primary-100 dark:from-primary-900/20 dark:to-primary-800/20 rounded-xl border border-primary-200 dark:border-primary-700/50">
+        <div class="flex items-center gap-3">
+          <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center">
+            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+            </svg>
+          </div>
+          <div>
+            <div class="font-semibold text-gray-900 dark:text-gray-100">{{ account.name }}</div>
+            <div class="text-xs text-gray-500 dark:text-gray-400">
+              {{ t('admin.accounts.last30DaysUsage') }}
+            </div>
+          </div>
+        </div>
+        <span
+          :class="[
+            'px-2.5 py-1 text-xs font-semibold rounded-full',
+            account.status === 'active'
+              ? 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400'
+              : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'
+          ]"
+        >
+          {{ account.status }}
+        </span>
+      </div>
+
+      <!-- Loading State -->
+      <div v-if="loading" class="flex items-center justify-center py-12">
+        <LoadingSpinner />
+      </div>
+
+      <template v-else-if="stats">
+        <!-- Row 1: Main Stats Cards -->
+        <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
+          <!-- 30-Day Total Cost -->
+          <div class="card p-4 bg-gradient-to-br from-emerald-50 to-white dark:from-emerald-900/10 dark:to-dark-700 border-emerald-200 dark:border-emerald-800/30">
+            <div class="flex items-center justify-between mb-2">
+              <span class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.totalCost') }}</span>
+              <div class="p-1.5 rounded-lg bg-emerald-100 dark:bg-emerald-900/30">
+                <svg class="w-4 h-4 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+            </div>
+            <p class="text-2xl font-bold text-gray-900 dark:text-white">${{ formatCost(stats.summary.total_cost) }}</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+              {{ t('admin.accounts.stats.accumulatedCost') }}
+              <span class="text-gray-400 dark:text-gray-500">({{ t('admin.accounts.stats.standardCost') }}: ${{ formatCost(stats.summary.total_standard_cost) }})</span>
+            </p>
+          </div>
+
+          <!-- 30-Day Total Requests -->
+          <div class="card p-4 bg-gradient-to-br from-blue-50 to-white dark:from-blue-900/10 dark:to-dark-700 border-blue-200 dark:border-blue-800/30">
+            <div class="flex items-center justify-between mb-2">
+              <span class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.totalRequests') }}</span>
+              <div class="p-1.5 rounded-lg bg-blue-100 dark:bg-blue-900/30">
+                <svg class="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+              </div>
+            </div>
+            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ formatNumber(stats.summary.total_requests) }}</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ t('admin.accounts.stats.totalCalls') }}</p>
+          </div>
+
+          <!-- Daily Average Cost -->
+          <div class="card p-4 bg-gradient-to-br from-amber-50 to-white dark:from-amber-900/10 dark:to-dark-700 border-amber-200 dark:border-amber-800/30">
+            <div class="flex items-center justify-between mb-2">
+              <span class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.avgDailyCost') }}</span>
+              <div class="p-1.5 rounded-lg bg-amber-100 dark:bg-amber-900/30">
+                <svg class="w-4 h-4 text-amber-600 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                </svg>
+              </div>
+            </div>
+            <p class="text-2xl font-bold text-gray-900 dark:text-white">${{ formatCost(stats.summary.avg_daily_cost) }}</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ t('admin.accounts.stats.basedOnActualDays', { days: stats.summary.actual_days_used }) }}</p>
+          </div>
+
+          <!-- Daily Average Requests -->
+          <div class="card p-4 bg-gradient-to-br from-purple-50 to-white dark:from-purple-900/10 dark:to-dark-700 border-purple-200 dark:border-purple-800/30">
+            <div class="flex items-center justify-between mb-2">
+              <span class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.avgDailyRequests') }}</span>
+              <div class="p-1.5 rounded-lg bg-purple-100 dark:bg-purple-900/30">
+                <svg class="w-4 h-4 text-purple-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
+                </svg>
+              </div>
+            </div>
+            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ formatNumber(Math.round(stats.summary.avg_daily_requests)) }}</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ t('admin.accounts.stats.avgDailyUsage') }}</p>
+          </div>
+        </div>
+
+        <!-- Row 2: Today, Highest Cost, Highest Requests -->
+        <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
+          <!-- Today Overview -->
+          <div class="card p-4">
+            <div class="flex items-center gap-2 mb-3">
+              <div class="p-1.5 rounded-lg bg-cyan-100 dark:bg-cyan-900/30">
+                <svg class="w-4 h-4 text-cyan-600 dark:text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('admin.accounts.stats.todayOverview') }}</span>
+            </div>
+            <div class="space-y-2">
+              <div class="flex justify-between items-center">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.cost') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white">${{ formatCost(stats.summary.today?.cost || 0) }}</span>
+              </div>
+              <div class="flex justify-between items-center">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.requests') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ formatNumber(stats.summary.today?.requests || 0) }}</span>
+              </div>
+              <div class="flex justify-between items-center">
+                <span class="text-xs text-gray-500 dark:text-gray-400">Tokens</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ formatTokens(stats.summary.today?.tokens || 0) }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Highest Cost Day -->
+          <div class="card p-4">
+            <div class="flex items-center gap-2 mb-3">
+              <div class="p-1.5 rounded-lg bg-orange-100 dark:bg-orange-900/30">
+                <svg class="w-4 h-4 text-orange-600 dark:text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
+                </svg>
+              </div>
+              <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('admin.accounts.stats.highestCostDay') }}</span>
+            </div>
+            <div class="space-y-2">
+              <div class="flex justify-between items-center">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.date') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ stats.summary.highest_cost_day?.label || '-' }}</span>
+              </div>
+              <div class="flex justify-between items-center">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.cost') }}</span>
+                <span class="text-sm font-semibold text-orange-600 dark:text-orange-400">${{ formatCost(stats.summary.highest_cost_day?.cost || 0) }}</span>
+              </div>
+              <div class="flex justify-between items-center">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.requests') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ formatNumber(stats.summary.highest_cost_day?.requests || 0) }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Highest Request Day -->
+          <div class="card p-4">
+            <div class="flex items-center gap-2 mb-3">
+              <div class="p-1.5 rounded-lg bg-indigo-100 dark:bg-indigo-900/30">
+                <svg class="w-4 h-4 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+                </svg>
+              </div>
+              <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('admin.accounts.stats.highestRequestDay') }}</span>
+            </div>
+            <div class="space-y-2">
+              <div class="flex justify-between items-center">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.date') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ stats.summary.highest_request_day?.label || '-' }}</span>
+              </div>
+              <div class="flex justify-between items-center">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.requests') }}</span>
+                <span class="text-sm font-semibold text-indigo-600 dark:text-indigo-400">{{ formatNumber(stats.summary.highest_request_day?.requests || 0) }}</span>
+              </div>
+              <div class="flex justify-between items-center">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.cost') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white">${{ formatCost(stats.summary.highest_request_day?.cost || 0) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Row 3: Token Stats -->
+        <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
+          <!-- Accumulated Tokens -->
+          <div class="card p-4">
+            <div class="flex items-center gap-2 mb-3">
+              <div class="p-1.5 rounded-lg bg-teal-100 dark:bg-teal-900/30">
+                <svg class="w-4 h-4 text-teal-600 dark:text-teal-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+                </svg>
+              </div>
+              <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('admin.accounts.stats.accumulatedTokens') }}</span>
+            </div>
+            <div class="space-y-2">
+              <div class="flex justify-between items-center">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.totalTokens') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ formatTokens(stats.summary.total_tokens) }}</span>
+              </div>
+              <div class="flex justify-between items-center">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.dailyAvgTokens') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ formatTokens(Math.round(stats.summary.avg_daily_tokens)) }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Performance -->
+          <div class="card p-4">
+            <div class="flex items-center gap-2 mb-3">
+              <div class="p-1.5 rounded-lg bg-rose-100 dark:bg-rose-900/30">
+                <svg class="w-4 h-4 text-rose-600 dark:text-rose-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+              </div>
+              <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('admin.accounts.stats.performance') }}</span>
+            </div>
+            <div class="space-y-2">
+              <div class="flex justify-between items-center">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.avgResponseTime') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ formatDuration(stats.summary.avg_duration_ms) }}</span>
+              </div>
+              <div class="flex justify-between items-center">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.daysActive') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ stats.summary.actual_days_used }} / {{ stats.summary.days }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Recent Activity -->
+          <div class="card p-4">
+            <div class="flex items-center gap-2 mb-3">
+              <div class="p-1.5 rounded-lg bg-lime-100 dark:bg-lime-900/30">
+                <svg class="w-4 h-4 text-lime-600 dark:text-lime-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                </svg>
+              </div>
+              <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('admin.accounts.stats.recentActivity') }}</span>
+            </div>
+            <div class="space-y-2">
+              <div class="flex justify-between items-center">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.todayRequests') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ formatNumber(stats.summary.today?.requests || 0) }}</span>
+              </div>
+              <div class="flex justify-between items-center">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.todayTokens') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ formatTokens(stats.summary.today?.tokens || 0) }}</span>
+              </div>
+              <div class="flex justify-between items-center">
+                <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.accounts.stats.todayCost') }}</span>
+                <span class="text-sm font-semibold text-gray-900 dark:text-white">${{ formatCost(stats.summary.today?.cost || 0) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Usage Trend Chart -->
+        <div class="card p-4">
+          <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-4">{{ t('admin.accounts.stats.usageTrend') }}</h3>
+          <div class="h-64">
+            <Line v-if="trendChartData" :data="trendChartData" :options="lineChartOptions" />
+            <div v-else class="flex items-center justify-center h-full text-gray-500 dark:text-gray-400 text-sm">
+              {{ t('admin.dashboard.noDataAvailable') }}
+            </div>
+          </div>
+        </div>
+
+        <!-- Model Distribution -->
+        <ModelDistributionChart
+          :model-stats="stats.models"
+          :loading="false"
+        />
+      </template>
+
+      <!-- No Data State -->
+      <div v-else-if="!loading" class="flex flex-col items-center justify-center py-12 text-gray-500 dark:text-gray-400">
+        <svg class="w-12 h-12 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+        </svg>
+        <p class="text-sm">{{ t('admin.accounts.stats.noData') }}</p>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex justify-end">
+        <button
+          @click="handleClose"
+          class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-dark-600 hover:bg-gray-200 dark:hover:bg-dark-500 rounded-lg transition-colors"
+        >
+          {{ t('common.close') }}
+        </button>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+} from 'chart.js'
+import { Line } from 'vue-chartjs'
+import Modal from '@/components/common/Modal.vue'
+import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
+import ModelDistributionChart from '@/components/charts/ModelDistributionChart.vue'
+import { adminAPI } from '@/api/admin'
+import type { Account, AccountUsageStatsResponse } from '@/types'
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+)
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  show: boolean
+  account: Account | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const loading = ref(false)
+const stats = ref<AccountUsageStatsResponse | null>(null)
+
+// Dark mode detection
+const isDarkMode = computed(() => {
+  return document.documentElement.classList.contains('dark')
+})
+
+// Chart colors
+const chartColors = computed(() => ({
+  text: isDarkMode.value ? '#e5e7eb' : '#374151',
+  grid: isDarkMode.value ? '#374151' : '#e5e7eb',
+}))
+
+// Line chart data
+const trendChartData = computed(() => {
+  if (!stats.value?.history?.length) return null
+
+  return {
+    labels: stats.value.history.map(h => h.label),
+    datasets: [
+      {
+        label: t('admin.accounts.stats.cost') + ' (USD)',
+        data: stats.value.history.map(h => h.cost),
+        borderColor: '#3b82f6',
+        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+        fill: true,
+        tension: 0.3,
+        yAxisID: 'y',
+      },
+      {
+        label: t('admin.accounts.stats.requests'),
+        data: stats.value.history.map(h => h.requests),
+        borderColor: '#f97316',
+        backgroundColor: 'rgba(249, 115, 22, 0.1)',
+        fill: false,
+        tension: 0.3,
+        yAxisID: 'y1',
+      },
+    ],
+  }
+})
+
+// Line chart options with dual Y-axis
+const lineChartOptions = computed(() => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  interaction: {
+    intersect: false,
+    mode: 'index' as const,
+  },
+  plugins: {
+    legend: {
+      position: 'top' as const,
+      labels: {
+        color: chartColors.value.text,
+        usePointStyle: true,
+        pointStyle: 'circle',
+        padding: 15,
+        font: {
+          size: 11,
+        },
+      },
+    },
+    tooltip: {
+      callbacks: {
+        label: (context: any) => {
+          const label = context.dataset.label || ''
+          const value = context.raw
+          if (label.includes('USD')) {
+            return `${label}: $${formatCost(value)}`
+          }
+          return `${label}: ${formatNumber(value)}`
+        },
+      },
+    },
+  },
+  scales: {
+    x: {
+      grid: {
+        color: chartColors.value.grid,
+      },
+      ticks: {
+        color: chartColors.value.text,
+        font: {
+          size: 10,
+        },
+        maxRotation: 45,
+        minRotation: 0,
+      },
+    },
+    y: {
+      type: 'linear' as const,
+      display: true,
+      position: 'left' as const,
+      grid: {
+        color: chartColors.value.grid,
+      },
+      ticks: {
+        color: '#3b82f6',
+        font: {
+          size: 10,
+        },
+        callback: (value: string | number) => '$' + formatCost(Number(value)),
+      },
+      title: {
+        display: true,
+        text: t('admin.accounts.stats.cost') + ' (USD)',
+        color: '#3b82f6',
+        font: {
+          size: 11,
+        },
+      },
+    },
+    y1: {
+      type: 'linear' as const,
+      display: true,
+      position: 'right' as const,
+      grid: {
+        drawOnChartArea: false,
+      },
+      ticks: {
+        color: '#f97316',
+        font: {
+          size: 10,
+        },
+        callback: (value: string | number) => formatNumber(Number(value)),
+      },
+      title: {
+        display: true,
+        text: t('admin.accounts.stats.requests'),
+        color: '#f97316',
+        font: {
+          size: 11,
+        },
+      },
+    },
+  },
+}))
+
+// Load stats when modal opens
+watch(() => props.show, async (newVal) => {
+  if (newVal && props.account) {
+    await loadStats()
+  } else {
+    stats.value = null
+  }
+})
+
+const loadStats = async () => {
+  if (!props.account) return
+
+  loading.value = true
+  try {
+    stats.value = await adminAPI.accounts.getStats(props.account.id, 30)
+  } catch (error) {
+    console.error('Failed to load account stats:', error)
+    stats.value = null
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleClose = () => {
+  emit('close')
+}
+
+// Format helpers
+const formatCost = (value: number): string => {
+  if (value >= 1000) {
+    return (value / 1000).toFixed(2) + 'K'
+  } else if (value >= 1) {
+    return value.toFixed(2)
+  } else if (value >= 0.01) {
+    return value.toFixed(3)
+  }
+  return value.toFixed(4)
+}
+
+const formatNumber = (value: number): string => {
+  if (value >= 1_000_000) {
+    return (value / 1_000_000).toFixed(2) + 'M'
+  } else if (value >= 1_000) {
+    return (value / 1_000).toFixed(2) + 'K'
+  }
+  return value.toLocaleString()
+}
+
+const formatTokens = (value: number): string => {
+  if (value >= 1_000_000_000) {
+    return `${(value / 1_000_000_000).toFixed(2)}B`
+  } else if (value >= 1_000_000) {
+    return `${(value / 1_000_000).toFixed(2)}M`
+  } else if (value >= 1_000) {
+    return `${(value / 1_000).toFixed(2)}K`
+  }
+  return value.toLocaleString()
+}
+
+const formatDuration = (ms: number): string => {
+  if (ms >= 1000) {
+    return `${(ms / 1000).toFixed(2)}s`
+  }
+  return `${Math.round(ms)}ms`
+}
+</script>

frontend/src/components/account/index.ts

@@ -5,3 +5,6 @@ export { default as OAuthAuthorizationFlow } from './OAuthAuthorizationFlow.vue'
 export { default as AccountStatusIndicator } from './AccountStatusIndicator.vue'
 export { default as AccountUsageCell } from './AccountUsageCell.vue'
 export { default as UsageProgressBar } from './UsageProgressBar.vue'
+export { default as AccountStatsModal } from './AccountStatsModal.vue'
+export { default as AccountTestModal } from './AccountTestModal.vue'
+export { default as AccountTodayStatsCell } from './AccountTodayStatsCell.vue'

frontend/src/components/common/Modal.vue

@@ -52,7 +52,7 @@
 <script setup lang="ts">
 import { computed, watch, onMounted, onUnmounted } from 'vue'
 
-type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
 
 interface Props {
   show: boolean
@@ -80,6 +80,7 @@ const sizeClasses = computed(() => {
     md: 'max-w-md',
     lg: 'max-w-lg',
     xl: 'max-w-xl',
+    '2xl': 'max-w-5xl',
     full: 'max-w-4xl'
   }
   return sizes[props.size]

frontend/src/i18n/locales/en.ts

@@ -825,6 +825,39 @@ export default {
       selectTestModel: 'Select Test Model',
       testModel: 'claude-sonnet-4-5-20250929',
       testPrompt: 'Prompt: "hi"',
+      // Stats Modal
+      viewStats: 'View Stats',
+      usageStatistics: 'Usage Statistics',
+      last30DaysUsage: 'Last 30 days usage statistics (based on actual usage days)',
+      stats: {
+        totalCost: '30-Day Total Cost',
+        accumulatedCost: 'Accumulated cost',
+        standardCost: 'Standard',
+        totalRequests: '30-Day Total Requests',
+        totalCalls: 'Total API calls',
+        avgDailyCost: 'Daily Avg Cost',
+        basedOnActualDays: 'Based on {days} actual usage days',
+        avgDailyRequests: 'Daily Avg Requests',
+        avgDailyUsage: 'Average daily usage',
+        todayOverview: 'Today Overview',
+        cost: 'Cost',
+        requests: 'Requests',
+        highestCostDay: 'Highest Cost Day',
+        highestRequestDay: 'Highest Request Day',
+        date: 'Date',
+        accumulatedTokens: 'Accumulated Tokens',
+        totalTokens: '30-Day Total',
+        dailyAvgTokens: 'Daily Average',
+        performance: 'Performance',
+        avgResponseTime: 'Avg Response',
+        daysActive: 'Days Active',
+        recentActivity: 'Recent Activity',
+        todayRequests: 'Today Requests',
+        todayTokens: 'Today Tokens',
+        todayCost: 'Today Cost',
+        usageTrend: '30-Day Cost & Request Trend',
+        noData: 'No usage data available for this account',
+      },
     },
 
     // Proxies

frontend/src/i18n/locales/zh.ts

@@ -918,6 +918,39 @@ export default {
       selectTestModel: '选择测试模型',
       testModel: 'claude-sonnet-4-5-20250929',
       testPrompt: '提示词："hi"',
+      // Stats Modal
+      viewStats: '查看统计',
+      usageStatistics: '使用统计',
+      last30DaysUsage: '近30天使用统计（日均基于实际使用天数）',
+      stats: {
+        totalCost: '30天总费用',
+        accumulatedCost: '累计成本',
+        standardCost: '标准计费',
+        totalRequests: '30天总请求',
+        totalCalls: '累计调用次数',
+        avgDailyCost: '日均费用',
+        basedOnActualDays: '基于 {days} 天实际使用',
+        avgDailyRequests: '日均请求',
+        avgDailyUsage: '平均每日调用',
+        todayOverview: '今日概览',
+        cost: '费用',
+        requests: '请求',
+        highestCostDay: '最高费用日',
+        highestRequestDay: '最高请求日',
+        date: '日期',
+        accumulatedTokens: '累计 Token',
+        totalTokens: '30天总计',
+        dailyAvgTokens: '日均 Token',
+        performance: '性能',
+        avgResponseTime: '平均响应',
+        daysActive: '活跃天数',
+        recentActivity: '最近统计',
+        todayRequests: '今日请求',
+        todayTokens: '今日 Token',
+        todayCost: '今日费用',
+        usageTrend: '30天费用与请求趋势',
+        noData: '该账号暂无使用数据',
+      },
     },
 
     // Proxies Management

frontend/src/types/index.ts

@@ -645,3 +645,51 @@ export interface UsageQueryParams {
   start_date?: string;
   end_date?: string;
 }
+
+// ==================== Account Usage Statistics ====================
+
+export interface AccountUsageHistory {
+  date: string;
+  label: string;
+  requests: number;
+  tokens: number;
+  cost: number;
+  actual_cost: number;
+}
+
+export interface AccountUsageSummary {
+  days: number;
+  actual_days_used: number;
+  total_cost: number;
+  total_standard_cost: number;
+  total_requests: number;
+  total_tokens: number;
+  avg_daily_cost: number;
+  avg_daily_requests: number;
+  avg_daily_tokens: number;
+  avg_duration_ms: number;
+  today: {
+    date: string;
+    cost: number;
+    requests: number;
+    tokens: number;
+  } | null;
+  highest_cost_day: {
+    date: string;
+    label: string;
+    cost: number;
+    requests: number;
+  } | null;
+  highest_request_day: {
+    date: string;
+    label: string;
+    requests: number;
+    cost: number;
+  } | null;
+}
+
+export interface AccountUsageStatsResponse {
+  history: AccountUsageHistory[];
+  summary: AccountUsageSummary;
+  models: ModelStat[];
+}

frontend/src/views/admin/AccountsView.vue

@@ -186,6 +186,16 @@
                   <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 010 1.972l-11.54 6.347a1.125 1.125 0 01-1.667-.986V5.653z" />
                 </svg>
               </button>
+              <!-- View Stats button -->
+              <button
+                @click="handleViewStats(row)"
+                class="p-2 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/20 text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
+                :title="t('admin.accounts.viewStats')"
+              >
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+                </svg>
+              </button>
               <button
                 v-if="row.type === 'oauth' || row.type === 'setup-token'"
                 @click="handleReAuth(row)"
@@ -284,6 +294,13 @@
       @close="closeTestModal"
     />
 
+    <!-- Account Stats Modal -->
+    <AccountStatsModal
+      :show="showStatsModal"
+      :account="statsAccount"
+      @close="closeStatsModal"
+    />
+
     <!-- Delete Confirmation Dialog -->
     <ConfirmDialog
       :show="showDeleteDialog"
@@ -311,7 +328,7 @@ import Pagination from '@/components/common/Pagination.vue'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
 import EmptyState from '@/components/common/EmptyState.vue'
 import Select from '@/components/common/Select.vue'
-import { CreateAccountModal, EditAccountModal, ReAuthAccountModal } from '@/components/account'
+import { CreateAccountModal, EditAccountModal, ReAuthAccountModal, AccountStatsModal } from '@/components/account'
 import AccountStatusIndicator from '@/components/account/AccountStatusIndicator.vue'
 import AccountUsageCell from '@/components/account/AccountUsageCell.vue'
 import AccountTodayStatsCell from '@/components/account/AccountTodayStatsCell.vue'
@@ -382,10 +399,12 @@ const showEditModal = ref(false)
 const showReAuthModal = ref(false)
 const showDeleteDialog = ref(false)
 const showTestModal = ref(false)
+const showStatsModal = ref(false)
 const editingAccount = ref<Account | null>(null)
 const reAuthAccount = ref<Account | null>(null)
 const deletingAccount = ref<Account | null>(null)
 const testingAccount = ref<Account | null>(null)
+const statsAccount = ref<Account | null>(null)
 const togglingSchedulable = ref<number | null>(null)
 
 // Rate limit / Overload helpers
@@ -574,6 +593,17 @@ const closeTestModal = () => {
   testingAccount.value = null
 }
 
+// Stats modal
+const handleViewStats = (account: Account) => {
+  statsAccount.value = account
+  showStatsModal.value = true
+}
+
+const closeStatsModal = () => {
+  showStatsModal.value = false
+  statsAccount.value = null
+}
+
 // Initialize
 onMounted(() => {
   loadAccounts()