feat: 支持账号维度的数据统计

web/admin-spa/src/components/accounts/AccountUsageDetailModal.vue

@@ -0,0 +1,630 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="show"
+      class="fixed inset-0 z-[1050] flex items-center justify-center bg-gray-900/40 backdrop-blur-sm"
+    >
+      <div class="absolute inset-0" @click="handleClose" />
+      <div
+        class="relative z-10 mx-3 flex max-h-[92vh] w-full max-w-6xl flex-col overflow-hidden rounded-2xl border border-gray-200/70 bg-white/95 shadow-2xl ring-1 ring-black/5 transition-all dark:border-gray-700/60 dark:bg-gray-900/95 dark:ring-white/10 sm:mx-4 sm:p-1"
+      >
+        <!-- 顶部栏 -->
+        <div
+          class="flex flex-col gap-3 border-b border-gray-100 bg-white/80 px-5 py-4 backdrop-blur dark:border-gray-800 dark:bg-gray-900/80 sm:flex-row sm:items-center sm:justify-between"
+        >
+          <div class="flex flex-1 items-start gap-3">
+            <div
+              class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-indigo-500 text-white shadow-lg"
+            >
+              <i class="fas fa-chart-area text-lg" />
+            </div>
+            <div class="space-y-1">
+              <div class="flex flex-wrap items-center gap-2">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 sm:text-xl">
+                  {{ account?.name || account?.email || '账号使用详情' }}
+                </h3>
+                <span
+                  v-if="account?.platform"
+                  class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-500/10 dark:text-blue-300"
+                >
+                  <i class="fas fa-layer-group mr-1" />{{ platformLabel }}
+                </span>
+                <span
+                  v-if="account?.accountType"
+                  class="inline-flex items-center rounded-full bg-purple-100 px-2.5 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-500/10 dark:text-purple-300"
+                >
+                  <i class="fas fa-user-tag mr-1" />{{ accountTypeLabel }}
+                </span>
+              </div>
+              <p class="text-xs text-gray-500 dark:text-gray-400 sm:text-sm">
+                近 {{ summary?.days || 30 }} 天内的费用与请求趋势
+              </p>
+            </div>
+          </div>
+          <button
+            class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 text-gray-500 transition hover:bg-gray-200 hover:text-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+            @click="handleClose"
+          >
+            <i class="fas fa-times" />
+          </button>
+        </div>
+
+        <!-- 内容区域 -->
+        <div class="flex-1 overflow-y-auto px-5 py-4 sm:px-6">
+          <div v-if="loading" class="flex h-[50vh] items-center justify-center">
+            <div class="loading-spinner h-12 w-12 border-4 border-blue-500" />
+          </div>
+          <template v-else>
+            <!-- 关键指标 -->
+            <div class="mb-5 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+              <div
+                v-for="metric in primaryMetrics"
+                :key="metric.key"
+                class="rounded-2xl border border-gray-100 bg-white/80 p-4 shadow-sm transition dark:border-gray-700 dark:bg-gray-900/70"
+              >
+                <div class="flex items-start justify-between">
+                  <div>
+                    <p
+                      class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"
+                    >
+                      {{ metric.label }}
+                    </p>
+                    <p class="mt-2 text-xl font-semibold text-gray-900 dark:text-gray-100">
+                      {{ metric.value }}
+                    </p>
+                    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
+                      {{ metric.subtitle }}
+                    </p>
+                  </div>
+                  <div
+                    class="flex h-10 w-10 items-center justify-center rounded-xl bg-gray-50 dark:bg-gray-800"
+                  >
+                    <i :class="['fas', metric.icon, metric.iconClass]"></i>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 今日与峰值 -->
+            <div class="mb-6 grid grid-cols-1 gap-4 lg:grid-cols-3">
+              <div
+                class="space-y-3 rounded-2xl border border-blue-100 bg-blue-50/60 p-4 dark:border-blue-500/20 dark:bg-blue-900/20"
+              >
+                <div
+                  class="flex items-center gap-2 text-sm font-semibold text-blue-700 dark:text-blue-300"
+                >
+                  <i class="fas fa-sun" />
+                  今日概览
+                </div>
+                <div
+                  class="rounded-xl bg-white/80 p-3 text-sm text-gray-600 shadow-sm ring-1 ring-blue-100 dark:bg-gray-900/80 dark:text-gray-300 dark:ring-blue-500/20"
+                >
+                  <div class="flex items-center justify-between">
+                    <span>费用</span>
+                    <span class="font-semibold text-gray-900 dark:text-gray-100">{{
+                      summary?.today?.costFormatted || '$0.000000'
+                    }}</span>
+                  </div>
+                  <div class="mt-2 flex items-center justify-between">
+                    <span>请求</span>
+                    <span class="font-semibold text-gray-900 dark:text-gray-100">{{
+                      formatNumber(summary?.today?.requests || 0)
+                    }}</span>
+                  </div>
+                  <div
+                    class="mt-2 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"
+                  >
+                    <span>Tokens</span>
+                    <span>{{ formatNumber(summary?.today?.tokens || 0) }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div
+                class="space-y-3 rounded-2xl border border-amber-100 bg-amber-50/70 p-4 dark:border-amber-500/20 dark:bg-amber-900/20"
+              >
+                <div
+                  class="flex items-center gap-2 text-sm font-semibold text-amber-700 dark:text-amber-300"
+                >
+                  <i class="fas fa-crown" />
+                  最高费用日
+                </div>
+                <div
+                  class="rounded-xl bg-white/80 p-3 text-sm text-gray-600 shadow-sm ring-1 ring-amber-100 dark:bg-gray-900/80 dark:text-gray-300 dark:ring-amber-500/20"
+                >
+                  <div class="flex items-center justify-between">
+                    <span>日期</span>
+                    <span class="font-semibold text-gray-900 dark:text-gray-100">{{
+                      formatDate(summary?.highestCostDay?.date)
+                    }}</span>
+                  </div>
+                  <div class="mt-2 flex items-center justify-between">
+                    <span>费用</span>
+                    <span class="font-semibold text-gray-900 dark:text-gray-100">{{
+                      summary?.highestCostDay?.formattedCost || '$0.000000'
+                    }}</span>
+                  </div>
+                  <div
+                    class="mt-2 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"
+                  >
+                    <span>请求</span>
+                    <span>{{
+                      formatNumber(findHistoryValue(summary?.highestCostDay?.date, 'requests'))
+                    }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div
+                class="space-y-3 rounded-2xl border border-emerald-100 bg-emerald-50/60 p-4 dark:border-emerald-500/20 dark:bg-emerald-900/20"
+              >
+                <div
+                  class="flex items-center gap-2 text-sm font-semibold text-emerald-700 dark:text-emerald-300"
+                >
+                  <i class="fas fa-chart-bar" />
+                  最高请求日
+                </div>
+                <div
+                  class="rounded-xl bg-white/80 p-3 text-sm text-gray-600 shadow-sm ring-1 ring-emerald-100 dark:bg-gray-900/80 dark:text-gray-300 dark:ring-emerald-500/20"
+                >
+                  <div class="flex items-center justify-between">
+                    <span>日期</span>
+                    <span class="font-semibold text-gray-900 dark:text-gray-100">{{
+                      formatDate(summary?.highestRequestDay?.date)
+                    }}</span>
+                  </div>
+                  <div class="mt-2 flex items-center justify-between">
+                    <span>请求</span>
+                    <span class="font-semibold text-gray-900 dark:text-gray-100">{{
+                      formatNumber(summary?.highestRequestDay?.requests || 0)
+                    }}</span>
+                  </div>
+                  <div
+                    class="mt-2 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"
+                  >
+                    <span>费用</span>
+                    <span>{{
+                      formatCost(findHistoryValue(summary?.highestRequestDay?.date, 'cost'))
+                    }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 综合统计 -->
+            <div class="mb-6 grid grid-cols-1 gap-4 lg:grid-cols-3">
+              <div
+                class="rounded-2xl border border-gray-100 bg-white/80 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900/70"
+              >
+                <h4
+                  class="mb-3 flex items-center text-sm font-semibold text-gray-700 dark:text-gray-300"
+                >
+                  <i class="fas fa-database mr-2 text-indigo-500" /> 累计 Token
+                </h4>
+                <div class="space-y-2 text-sm text-gray-600 dark:text-gray-300">
+                  <div class="flex items-center justify-between">
+                    <span>30天总计</span>
+                    <span class="font-semibold text-gray-900 dark:text-gray-100">{{
+                      formatNumber(totalTokens)
+                    }}</span>
+                  </div>
+                  <div class="flex items-center justify-between">
+                    <span>日均 Token</span>
+                    <span class="font-semibold text-gray-900 dark:text-gray-100">{{
+                      formatNumber(Math.round(summary?.avgDailyTokens || 0))
+                    }}</span>
+                  </div>
+                  <div
+                    class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"
+                  >
+                    <span>输入 / 输出</span>
+                    <span
+                      >{{ formatNumber(overviewInputTokens) }} /
+                      {{ formatNumber(overviewOutputTokens) }}</span
+                    >
+                  </div>
+                </div>
+              </div>
+              <div
+                class="rounded-2xl border border-gray-100 bg-white/80 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900/70"
+              >
+                <h4
+                  class="mb-3 flex items-center text-sm font-semibold text-gray-700 dark:text-gray-300"
+                >
+                  <i class="fas fa-tachometer-alt mr-2 text-purple-500" /> 平均速率
+                </h4>
+                <div class="space-y-2 text-sm text-gray-600 dark:text-gray-300">
+                  <div class="flex items-center justify-between">
+                    <span>RPM</span>
+                    <span class="font-semibold text-gray-900 dark:text-gray-100">{{
+                      overview?.averages?.rpm ?? 0
+                    }}</span>
+                  </div>
+                  <div class="flex items-center justify-between">
+                    <span>TPM</span>
+                    <span class="font-semibold text-gray-900 dark:text-gray-100">{{
+                      overview?.averages?.tpm ?? 0
+                    }}</span>
+                  </div>
+                  <div
+                    class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"
+                  >
+                    <span>日均请求 / Token</span>
+                    <span
+                      >{{
+                        formatNumber(
+                          Math.round((overview?.averages?.dailyRequests || 0) * 100) / 100
+                        )
+                      }}
+                      /
+                      {{
+                        formatNumber(Math.round((overview?.averages?.dailyTokens || 0) * 100) / 100)
+                      }}</span
+                    >
+                  </div>
+                </div>
+              </div>
+              <div
+                class="rounded-2xl border border-gray-100 bg-white/80 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900/70"
+              >
+                <h4
+                  class="mb-3 flex items-center text-sm font-semibold text-gray-700 dark:text-gray-300"
+                >
+                  <i class="fas fa-layer-group mr-2 text-teal-500" /> 最近统计
+                </h4>
+                <div class="space-y-2 text-sm text-gray-600 dark:text-gray-300">
+                  <div class="flex items-center justify-between">
+                    <span>今日请求</span>
+                    <span class="font-semibold text-gray-900 dark:text-gray-100">{{
+                      formatNumber(overview?.daily?.requests || 0)
+                    }}</span>
+                  </div>
+                  <div class="flex items-center justify-between">
+                    <span>今日 Token</span>
+                    <span class="font-semibold text-gray-900 dark:text-gray-100">{{
+                      formatNumber(overview?.daily?.allTokens || 0)
+                    }}</span>
+                  </div>
+                  <div
+                    class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"
+                  >
+                    <span>今日费用</span>
+                    <span>{{ formatCost(overview?.daily?.cost || 0) }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 折线图 -->
+            <div
+              class="mb-6 rounded-2xl border border-gray-100 bg-white/80 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900/70"
+            >
+              <div class="mb-4 flex flex-wrap items-center justify-between gap-2">
+                <h4
+                  class="flex items-center text-sm font-semibold text-gray-700 dark:text-gray-300"
+                >
+                  <i class="fas fa-chart-line mr-2 text-blue-500" /> 30天费用与请求趋势
+                </h4>
+                <span class="text-xs text-gray-400 dark:text-gray-500">
+                  最新更新时间：{{ formatDateTime(generatedAtDisplay) }}
+                </span>
+              </div>
+              <div class="h-[260px] sm:h-[300px]">
+                <canvas ref="chartCanvas" class="h-full w-full" />
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import Chart from 'chart.js/auto'
+import { useThemeStore } from '@/stores/theme'
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  account: { type: Object, default: () => ({}) },
+  history: { type: Array, default: () => [] },
+  summary: { type: Object, default: () => ({}) },
+  overview: { type: Object, default: () => ({}) },
+  generatedAt: { type: String, default: '' },
+  loading: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['close'])
+
+const themeStore = useThemeStore()
+const { isDarkMode } = storeToRefs(themeStore)
+
+const chartCanvas = ref(null)
+let chartInstance = null
+
+const platformLabelMap = {
+  claude: 'Claude',
+  'claude-console': 'Claude Console',
+  openai: 'OpenAI',
+  'openai-responses': 'OpenAI Responses',
+  gemini: 'Gemini'
+}
+
+const platformLabel = computed(() => platformLabelMap[props.account?.platform] || '未知平台')
+
+const accountTypeLabel = computed(() => {
+  if (!props.account?.accountType) return '共享'
+  if (props.account.accountType === 'dedicated') return '专属'
+  if (props.account.accountType === 'group') return '分组'
+  return '共享'
+})
+
+const chartColors = computed(() => ({
+  text: isDarkMode.value ? '#e5e7eb' : '#374151',
+  grid: isDarkMode.value ? 'rgba(75, 85, 99, 0.25)' : 'rgba(209, 213, 219, 0.4)',
+  cost: '#3b82f6',
+  costFill: 'rgba(59, 130, 246, 0.15)',
+  requests: '#f97316'
+}))
+
+const totalTokens = computed(() => props.summary?.totalTokens || 0)
+const overviewInputTokens = computed(() => props.overview?.total?.inputTokens || 0)
+const overviewOutputTokens = computed(() => props.overview?.total?.outputTokens || 0)
+
+const formatNumber = (value) => {
+  const num = Number(value || 0)
+  if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(2)}M`
+  if (num >= 1_000) return `${(num / 1_000).toFixed(2)}K`
+  return num.toLocaleString()
+}
+
+const formatCost = (value) => {
+  const num = Number(value || 0)
+  if (Number.isNaN(num)) return '$0.000000'
+  if (num >= 1) return `$${num.toFixed(2)}`
+  if (num >= 0.01) return `$${num.toFixed(3)}`
+  return `$${num.toFixed(6)}`
+}
+
+const roundToTwo = (value) => Math.round((Number(value) || 0) * 100) / 100
+
+const formatDate = (value) => {
+  if (!value) return '-'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    const parts = value.split('-')
+    if (parts.length === 3) {
+      return `${parts[1]}-${parts[2]}`
+    }
+    return value
+  }
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${month}-${day}`
+}
+
+const formatDateTime = (value) => {
+  if (!value) return '暂无'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return value
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+}
+
+const findHistoryValue = (date, field) => {
+  if (!date) return 0
+  const target = props.history.find((item) => item.date === date)
+  return target ? target[field] || 0 : 0
+}
+
+const generatedAtDisplay = computed(
+  () => props.generatedAt || props.summary?.generatedAt || props.summary?.generated_at || ''
+)
+
+const primaryMetrics = computed(() => [
+  {
+    key: 'totalCost',
+    label: '30天总费用',
+    value: props.summary?.totalCostFormatted || '$0.000000',
+    subtitle: '累计成本',
+    icon: 'fa-file-invoice-dollar',
+    iconClass: 'text-emerald-500'
+  },
+  {
+    key: 'totalRequests',
+    label: '30天总请求',
+    value: formatNumber(props.summary?.totalRequests || 0),
+    subtitle: '调用次数',
+    icon: 'fa-paper-plane',
+    iconClass: 'text-blue-500'
+  },
+  {
+    key: 'avgCost',
+    label: '日均费用',
+    value: props.summary?.avgDailyCostFormatted || formatCost(props.summary?.avgDailyCost || 0),
+    subtitle: '平均每日成本',
+    icon: 'fa-wave-square',
+    iconClass: 'text-purple-500'
+  },
+  {
+    key: 'avgRequests',
+    label: '日均请求',
+    value: formatNumber(roundToTwo(props.summary?.avgDailyRequests || 0)),
+    subtitle: '平均每日调用',
+    icon: 'fa-chart-line',
+    iconClass: 'text-orange-500'
+  }
+])
+
+const renderChart = async () => {
+  await nextTick()
+
+  if (!props.show || !chartCanvas.value) {
+    return
+  }
+
+  if (chartInstance) {
+    chartInstance.destroy()
+  }
+
+  if (!props.history || props.history.length === 0) {
+    chartInstance = null
+    return
+  }
+
+  const labels = props.history.map((item) => item.label)
+  const costs = props.history.map((item) => item.cost || 0)
+  const requests = props.history.map((item) => item.requests || 0)
+
+  chartInstance = new Chart(chartCanvas.value, {
+    type: 'line',
+    data: {
+      labels,
+      datasets: [
+        {
+          label: '费用 (USD)',
+          data: costs,
+          borderColor: chartColors.value.cost,
+          backgroundColor: chartColors.value.costFill,
+          tension: 0.35,
+          fill: true,
+          yAxisID: 'y'
+        },
+        {
+          label: '请求次数',
+          data: requests,
+          borderColor: chartColors.value.requests,
+          backgroundColor: 'transparent',
+          tension: 0.35,
+          yAxisID: 'y1'
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      interaction: {
+        mode: 'index',
+        intersect: false
+      },
+      plugins: {
+        legend: {
+          labels: {
+            color: chartColors.value.text
+          }
+        },
+        tooltip: {
+          callbacks: {
+            label(context) {
+              if (context.dataset.label === '费用 (USD)') {
+                return `${context.dataset.label}: ${formatCost(context.parsed.y)}`
+              }
+              return `${context.dataset.label}: ${formatNumber(context.parsed.y)} 次`
+            }
+          }
+        }
+      },
+      scales: {
+        x: {
+          ticks: {
+            color: chartColors.value.text
+          },
+          grid: {
+            color: chartColors.value.grid
+          }
+        },
+        y: {
+          position: 'left',
+          ticks: {
+            color: chartColors.value.text,
+            callback: (value) => formatCost(value)
+          },
+          grid: {
+            color: chartColors.value.grid
+          }
+        },
+        y1: {
+          position: 'right',
+          ticks: {
+            color: chartColors.value.text,
+            callback: (value) => formatNumber(value)
+          },
+          grid: {
+            drawOnChartArea: false
+          }
+        }
+      }
+    }
+  })
+}
+
+const cleanupChart = () => {
+  if (chartInstance) {
+    chartInstance.destroy()
+    chartInstance = null
+  }
+}
+
+const handleClose = () => {
+  cleanupChart()
+  emit('close')
+}
+
+watch(
+  () => props.show,
+  (visible) => {
+    if (visible && !props.loading) {
+      renderChart()
+    } else if (!visible) {
+      cleanupChart()
+    }
+  }
+)
+
+watch(
+  () => props.loading,
+  (loading) => {
+    if (!loading && props.show) {
+      renderChart()
+    }
+  }
+)
+
+watch(
+  () => props.history,
+  () => {
+    if (props.show && !props.loading) {
+      renderChart()
+    }
+  },
+  { deep: true }
+)
+
+watch(isDarkMode, () => {
+  if (props.show && !props.loading) {
+    renderChart()
+  }
+})
+
+onUnmounted(() => {
+  cleanupChart()
+})
+</script>
+
+<style scoped>
+.loading-spinner {
+  border-top-color: transparent;
+  border-radius: 9999px;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

web/admin-spa/src/stores/dashboard.js

@@ -59,6 +59,13 @@ export const useDashboardStore = defineStore('dashboard', () => {
     topApiKeys: [],
     totalApiKeys: 0
   })
+  const accountUsageTrendData = ref({
+    data: [],
+    topAccounts: [],
+    totalAccounts: 0,
+    group: 'claude',
+    groupLabel: 'Claude账户'
+  })
 
   // 日期筛选
   const dateFilter = ref({
@@ -77,6 +84,7 @@ export const useDashboardStore = defineStore('dashboard', () => {
   // 趋势图粒度
   const trendGranularity = ref('day') // 'day' 或 'hour'
   const apiKeysTrendMetric = ref('requests') // 'requests' 或 'tokens'
+  const accountUsageGroup = ref('claude') // claude | openai | gemini
 
   // 默认时间
   const defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])
@@ -503,6 +511,97 @@ export const useDashboardStore = defineStore('dashboard', () => {
     }
   }
 
+  async function loadAccountUsageTrend(group = accountUsageGroup.value) {
+    try {
+      let url = '/admin/account-usage-trend?'
+      let days = 7
+
+      if (trendGranularity.value === 'hour') {
+        url += `granularity=hour`
+
+        if (dateFilter.value.customRange && dateFilter.value.customRange.length === 2) {
+          const convertToUTC = (systemTzTimeStr) => {
+            const systemTz = 8
+            const [datePart, timePart] = systemTzTimeStr.split(' ')
+            const [year, month, day] = datePart.split('-').map(Number)
+            const [hours, minutes, seconds] = timePart.split(':').map(Number)
+
+            const utcDate = new Date(
+              Date.UTC(year, month - 1, day, hours - systemTz, minutes, seconds)
+            )
+            return utcDate.toISOString()
+          }
+
+          url += `&startDate=${encodeURIComponent(convertToUTC(dateFilter.value.customRange[0]))}`
+          url += `&endDate=${encodeURIComponent(convertToUTC(dateFilter.value.customRange[1]))}`
+        } else {
+          const now = new Date()
+          let startTime
+          let endTime
+
+          if (dateFilter.value.type === 'preset') {
+            switch (dateFilter.value.preset) {
+              case 'last24h': {
+                endTime = new Date(now)
+                startTime = new Date(now.getTime() - 24 * 60 * 60 * 1000)
+                break
+              }
+              case 'yesterday': {
+                const yesterday = new Date()
+                yesterday.setDate(yesterday.getDate() - 1)
+                startTime = getSystemTimezoneDay(yesterday, true)
+                endTime = getSystemTimezoneDay(yesterday, false)
+                break
+              }
+              case 'dayBefore': {
+                const dayBefore = new Date()
+                dayBefore.setDate(dayBefore.getDate() - 2)
+                startTime = getSystemTimezoneDay(dayBefore, true)
+                endTime = getSystemTimezoneDay(dayBefore, false)
+                break
+              }
+              default: {
+                startTime = new Date(now.getTime() - 24 * 60 * 60 * 1000)
+                endTime = now
+              }
+            }
+          } else {
+            startTime = new Date(now.getTime() - 24 * 60 * 60 * 1000)
+            endTime = now
+          }
+
+          url += `&startDate=${encodeURIComponent(startTime.toISOString())}`
+          url += `&endDate=${encodeURIComponent(endTime.toISOString())}`
+        }
+      } else {
+        days =
+          dateFilter.value.type === 'preset'
+            ? dateFilter.value.preset === 'today'
+              ? 1
+              : dateFilter.value.preset === '7days'
+                ? 7
+                : 30
+            : calculateDaysBetween(dateFilter.value.customStart, dateFilter.value.customEnd)
+        url += `granularity=day&days=${days}`
+      }
+
+      url += `&group=${group}`
+
+      const response = await apiClient.get(url)
+      if (response.success) {
+        accountUsageTrendData.value = {
+          data: response.data || [],
+          topAccounts: response.topAccounts || [],
+          totalAccounts: response.totalAccounts || 0,
+          group: response.group || group,
+          groupLabel: response.groupLabel || ''
+        }
+      }
+    } catch (error) {
+      console.error('加载账号使用趋势失败:', error)
+    }
+  }
+
   // 日期筛选相关方法
   function setDateFilterPreset(preset) {
     dateFilter.value.type = 'preset'
@@ -748,10 +847,16 @@ export const useDashboardStore = defineStore('dashboard', () => {
     await Promise.all([
       loadUsageTrend(days, trendGranularity.value),
       loadModelStats(modelPeriod),
-      loadApiKeysTrend(apiKeysTrendMetric.value)
+      loadApiKeysTrend(apiKeysTrendMetric.value),
+      loadAccountUsageTrend(accountUsageGroup.value)
     ])
   }
 
+  function setAccountUsageGroup(group) {
+    accountUsageGroup.value = group
+    return loadAccountUsageTrend(group)
+  }
+
   function calculateDaysBetween(start, end) {
     if (!start || !end) return 7
     const startDate = new Date(start)
@@ -774,9 +879,11 @@ export const useDashboardStore = defineStore('dashboard', () => {
     trendData,
     dashboardModelStats,
     apiKeysTrendData,
+    accountUsageTrendData,
     dateFilter,
     trendGranularity,
     apiKeysTrendMetric,
+    accountUsageGroup,
     defaultTime,
 
     // 计算属性
@@ -787,10 +894,12 @@ export const useDashboardStore = defineStore('dashboard', () => {
     loadUsageTrend,
     loadModelStats,
     loadApiKeysTrend,
+    loadAccountUsageTrend,
     setDateFilterPreset,
     onCustomDateRangeChange,
     setTrendGranularity,
     refreshChartsData,
+    setAccountUsageGroup,
     disabledDate
   }
 })

web/admin-spa/src/views/AccountsView.vue

@@ -849,6 +849,15 @@
                     <i :class="['fas', account.schedulable ? 'fa-toggle-on' : 'fa-toggle-off']" />
                     <span class="ml-1">{{ account.schedulable ? '调度' : '停用' }}</span>
                   </button>
+                  <button
+                    v-if="canViewUsage(account)"
+                    class="rounded bg-indigo-100 px-2.5 py-1 text-xs font-medium text-indigo-700 transition-colors hover:bg-indigo-200"
+                    :title="'查看使用详情'"
+                    @click="openAccountUsageModal(account)"
+                  >
+                    <i class="fas fa-chart-line" />
+                    <span class="ml-1">详情</span>
+                  </button>
                   <button
                     class="rounded bg-blue-100 px-2.5 py-1 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-200"
                     :title="'编辑账户'"
@@ -1154,6 +1163,15 @@
               {{ account.schedulable ? '暂停' : '启用' }}
             </button>
 
+            <button
+              v-if="canViewUsage(account)"
+              class="flex flex-1 items-center justify-center gap-1 rounded-lg bg-indigo-50 px-3 py-2 text-xs text-indigo-600 transition-colors hover:bg-indigo-100"
+              @click="openAccountUsageModal(account)"
+            >
+              <i class="fas fa-chart-line" />
+              详情
+            </button>
+
             <button
               class="flex-1 rounded-lg bg-gray-50 px-3 py-2 text-xs text-gray-600 transition-colors hover:bg-gray-100"
               @click="editAccount(account)"
@@ -1298,6 +1316,18 @@
       @cancel="handleCancel"
       @confirm="handleConfirm"
     />
+
+    <AccountUsageDetailModal
+      v-if="showAccountUsageModal"
+      :account="selectedAccountForUsage || {}"
+      :generated-at="accountUsageGeneratedAt"
+      :history="accountUsageHistory"
+      :loading="accountUsageLoading"
+      :overview="accountUsageOverview"
+      :show="showAccountUsageModal"
+      :summary="accountUsageSummary"
+      @close="closeAccountUsageModal"
+    />
   </div>
 </template>
 
@@ -1308,6 +1338,7 @@ import { apiClient } from '@/config/api'
 import { useConfirm } from '@/composables/useConfirm'
 import AccountForm from '@/components/accounts/AccountForm.vue'
 import CcrAccountForm from '@/components/accounts/CcrAccountForm.vue'
+import AccountUsageDetailModal from '@/components/accounts/AccountUsageDetailModal.vue'
 import ConfirmModal from '@/components/common/ConfirmModal.vue'
 import CustomDropdown from '@/components/common/CustomDropdown.vue'
 
@@ -1340,6 +1371,17 @@ const pageSizeOptions = [10, 20, 50, 100]
 const pageSize = ref(getInitialPageSize())
 const currentPage = ref(1)
 
+// 账号使用详情弹窗状态
+const showAccountUsageModal = ref(false)
+const accountUsageLoading = ref(false)
+const selectedAccountForUsage = ref(null)
+const accountUsageHistory = ref([])
+const accountUsageSummary = ref({})
+const accountUsageOverview = ref({})
+const accountUsageGeneratedAt = ref('')
+
+const supportedUsagePlatforms = ['claude', 'claude-console', 'openai', 'openai-responses', 'gemini']
+
 // 缓存状态标志
 const apiKeysLoaded = ref(false)
 const groupsLoaded = ref(false)
@@ -1453,6 +1495,50 @@ const accountMatchesKeyword = (account, normalizedKeyword) => {
   )
 }
 
+const canViewUsage = (account) => !!account && supportedUsagePlatforms.includes(account.platform)
+
+const openAccountUsageModal = async (account) => {
+  if (!canViewUsage(account)) {
+    showToast('该账户类型暂不支持查看详情', 'warning')
+    return
+  }
+
+  selectedAccountForUsage.value = account
+  showAccountUsageModal.value = true
+  accountUsageLoading.value = true
+  accountUsageHistory.value = []
+  accountUsageSummary.value = {}
+  accountUsageOverview.value = {}
+  accountUsageGeneratedAt.value = ''
+
+  try {
+    const response = await apiClient.get(
+      `/admin/accounts/${account.id}/usage-history?platform=${account.platform}&days=30`
+    )
+
+    if (response.success) {
+      const data = response.data || {}
+      accountUsageHistory.value = data.history || []
+      accountUsageSummary.value = data.summary || {}
+      accountUsageOverview.value = data.overview || {}
+      accountUsageGeneratedAt.value = data.generatedAt || ''
+    } else {
+      showToast(response.error || '加载账号使用详情失败', 'error')
+    }
+  } catch (error) {
+    console.error('加载账号使用详情失败:', error)
+    showToast('加载账号使用详情失败', 'error')
+  } finally {
+    accountUsageLoading.value = false
+  }
+}
+
+const closeAccountUsageModal = () => {
+  showAccountUsageModal.value = false
+  accountUsageLoading.value = false
+  selectedAccountForUsage.value = null
+}
+
 // 计算排序后的账户列表
 const sortedAccounts = computed(() => {
   let sourceAccounts = accounts.value

web/admin-spa/src/views/ApiKeysView.vue

@@ -408,7 +408,7 @@
                       <i v-else class="fas fa-sort ml-1 text-gray-400" />
                     </th>
                     <th
-                      class="w-[23%] min-w-[170px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                      class="operations-column sticky right-0 w-[23%] min-w-[200px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                     >
                       操作
                     </th>
@@ -703,7 +703,10 @@
                           </span>
                         </div>
                       </td>
-                      <td class="whitespace-nowrap px-3 py-3" style="font-size: 13px">
+                      <td
+                        class="operations-column operations-cell whitespace-nowrap px-3 py-3"
+                        style="font-size: 13px"
+                      >
                         <div class="flex gap-1">
                           <button
                             class="rounded px-2 py-1 text-xs font-medium text-purple-600 transition-colors hover:bg-purple-50 hover:text-purple-900 dark:hover:bg-purple-900/20"
@@ -1501,7 +1504,7 @@
                         最后使用
                       </th>
                       <th
-                        class="w-[15%] min-w-[120px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
+                        class="operations-column sticky right-0 w-[15%] min-w-[160px] px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300"
                       >
                         操作
                       </th>
@@ -1657,7 +1660,7 @@
                         </span>
                         <span v-else class="text-gray-400" style="font-size: 13px">从未使用</span>
                       </td>
-                      <td class="px-3 py-3">
+                      <td class="operations-column operations-cell px-3 py-3">
                         <div class="flex items-center gap-2">
                           <button
                             v-if="key.canRestore"
@@ -3765,19 +3768,21 @@ onMounted(async () => {
   border-radius: 12px;
   border: 1px solid rgba(0, 0, 0, 0.05);
   width: 100%;
+  position: relative;
 }
 
 .table-container {
-  overflow-x: hidden;
+  overflow-x: auto;
   overflow-y: hidden;
   margin: 0;
   padding: 0;
   max-width: 100%;
+  position: relative;
 }
 
-/* 防止表格内容溢出 */
+/* 防止表格内容溢出，保证横向滚动 */
 .table-container table {
-  min-width: 100%;
+  min-width: 1200px;
   border-collapse: collapse;
 }
 
@@ -3811,6 +3816,27 @@ onMounted(async () => {
   background-color: rgba(255, 255, 255, 0.02);
 }
 
+/* 固定操作列在右侧，兼容浅色和深色模式 */
+.operations-column {
+  position: sticky;
+  right: 0;
+  background: inherit;
+  background-color: inherit;
+  z-index: 12;
+}
+
+.table-container thead .operations-column {
+  z-index: 30;
+}
+
+.table-container tbody .operations-column {
+  box-shadow: -8px 0 12px -8px rgba(15, 23, 42, 0.16);
+}
+
+.dark .table-container tbody .operations-column {
+  box-shadow: -8px 0 12px -8px rgba(30, 41, 59, 0.45);
+}
+
 .loading-spinner {
   width: 24px;
   height: 24px;

web/admin-spa/src/views/DashboardView.vue

@@ -621,6 +621,58 @@
         </div>
       </div>
     </div>
+
+    <!-- 账号使用趋势图 -->
+    <div class="mb-4 sm:mb-6 md:mb-8">
+      <div class="card p-4 sm:p-6">
+        <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-3">
+            <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 sm:text-lg">
+              账号使用趋势
+            </h3>
+            <span class="text-xs text-gray-500 dark:text-gray-400 sm:text-sm">
+              当前分组：{{ accountUsageTrendData.groupLabel || '未选择' }}
+            </span>
+          </div>
+          <div class="flex flex-wrap items-center gap-2">
+            <div class="flex gap-1 rounded-lg bg-gray-100 p-1 dark:bg-gray-700">
+              <button
+                v-for="option in accountGroupOptions"
+                :key="option.value"
+                :class="[
+                  'rounded-md px-2 py-1 text-xs font-medium transition-colors sm:px-3 sm:text-sm',
+                  accountUsageGroup === option.value
+                    ? 'bg-white text-blue-600 shadow-sm dark:bg-gray-800'
+                    : 'text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100'
+                ]"
+                @click="handleAccountUsageGroupChange(option.value)"
+              >
+                {{ option.label }}
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          class="mb-4 flex flex-wrap items-center gap-2 text-xs text-gray-600 dark:text-gray-400 sm:text-sm"
+        >
+          <span>共 {{ accountUsageTrendData.totalAccounts || 0 }} 个账号</span>
+          <span
+            v-if="accountUsageTrendData.topAccounts && accountUsageTrendData.topAccounts.length"
+          >
+            显示成本前 {{ accountUsageTrendData.topAccounts.length }} 个账号
+          </span>
+        </div>
+        <div
+          v-if="!accountUsageTrendData.data || accountUsageTrendData.data.length === 0"
+          class="py-12 text-center text-sm text-gray-500 dark:text-gray-400"
+        >
+          暂无账号使用数据
+        </div>
+        <div v-else class="sm:h-[350px]" style="height: 300px">
+          <canvas ref="accountUsageTrendChart" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -641,6 +693,8 @@ const {
   dashboardModelStats,
   trendData,
   apiKeysTrendData,
+  accountUsageTrendData,
+  accountUsageGroup,
   formattedUptime,
   dateFilter,
   trendGranularity,
@@ -655,6 +709,7 @@ const {
   onCustomDateRangeChange,
   setTrendGranularity,
   refreshChartsData,
+  setAccountUsageGroup,
   disabledDate
 } = dashboardStore
 
@@ -662,9 +717,19 @@ const {
 const modelUsageChart = ref(null)
 const usageTrendChart = ref(null)
 const apiKeysUsageTrendChart = ref(null)
+const accountUsageTrendChart = ref(null)
 let modelUsageChartInstance = null
 let usageTrendChartInstance = null
 let apiKeysUsageTrendChartInstance = null
+let accountUsageTrendChartInstance = null
+
+const accountGroupOptions = [
+  { value: 'claude', label: 'Claude' },
+  { value: 'openai', label: 'OpenAI' },
+  { value: 'gemini', label: 'Gemini' }
+]
+
+const accountTrendUpdating = ref(false)
 
 // 自动刷新相关
 const autoRefreshEnabled = ref(false)
@@ -697,6 +762,19 @@ function formatNumber(num) {
   return num.toString()
 }
 
+function formatCostValue(cost) {
+  if (!Number.isFinite(cost)) {
+    return '$0.000000'
+  }
+  if (cost >= 1) {
+    return `$${cost.toFixed(2)}`
+  }
+  if (cost >= 0.01) {
+    return `$${cost.toFixed(3)}`
+  }
+  return `$${cost.toFixed(6)}`
+}
+
 // 计算百分比
 function calculatePercentage(value, stats) {
   if (!stats || stats.length === 0) return 0
@@ -1201,6 +1279,186 @@ async function updateApiKeysUsageTrendChart() {
   createApiKeysUsageTrendChart()
 }
 
+function createAccountUsageTrendChart() {
+  if (!accountUsageTrendChart.value) return
+
+  if (accountUsageTrendChartInstance) {
+    accountUsageTrendChartInstance.destroy()
+  }
+
+  const trend = accountUsageTrendData.value?.data || []
+  const topAccounts = accountUsageTrendData.value?.topAccounts || []
+
+  const colors = [
+    '#2563EB',
+    '#059669',
+    '#D97706',
+    '#DC2626',
+    '#7C3AED',
+    '#F472B6',
+    '#0EA5E9',
+    '#F97316',
+    '#6366F1',
+    '#22C55E'
+  ]
+
+  const datasets = topAccounts.map((accountId, index) => {
+    const dataPoints = trend.map((item) => {
+      if (!item.accounts || !item.accounts[accountId]) return 0
+      return item.accounts[accountId].cost || 0
+    })
+
+    const accountName =
+      trend.find((item) => item.accounts && item.accounts[accountId])?.accounts[accountId]?.name ||
+      `账号 ${String(accountId).slice(0, 6)}`
+
+    return {
+      label: accountName,
+      data: dataPoints,
+      borderColor: colors[index % colors.length],
+      backgroundColor: colors[index % colors.length] + '20',
+      tension: 0.4,
+      fill: false
+    }
+  })
+
+  const labelField = trend[0]?.date ? 'date' : 'hour'
+
+  const chartData = {
+    labels: trend.map((item) => {
+      if (item.label) {
+        return item.label
+      }
+
+      if (labelField === 'hour') {
+        const date = new Date(item.hour)
+        const month = String(date.getMonth() + 1).padStart(2, '0')
+        const day = String(date.getDate()).padStart(2, '0')
+        const hour = String(date.getHours()).padStart(2, '0')
+        return `${month}/${day} ${hour}:00`
+      }
+
+      if (item.date && item.date.includes('-')) {
+        const parts = item.date.split('-')
+        if (parts.length >= 3) {
+          return `${parts[1]}/${parts[2]}`
+        }
+      }
+
+      return item.date
+    }),
+    datasets
+  }
+
+  const topAccountIds = topAccounts
+
+  accountUsageTrendChartInstance = new Chart(accountUsageTrendChart.value, {
+    type: 'line',
+    data: chartData,
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      interaction: {
+        mode: 'index',
+        intersect: false
+      },
+      plugins: {
+        legend: {
+          position: 'bottom',
+          labels: {
+            padding: 20,
+            usePointStyle: true,
+            font: {
+              size: 12
+            },
+            color: chartColors.value.legend
+          }
+        },
+        tooltip: {
+          mode: 'index',
+          intersect: false,
+          itemSort: (a, b) => b.parsed.y - a.parsed.y,
+          callbacks: {
+            label: function (context) {
+              const label = context.dataset.label || ''
+              const value = context.parsed.y || 0
+              const dataIndex = context.dataIndex
+              const datasetIndex = context.datasetIndex
+              const accountId = topAccountIds[datasetIndex]
+              const dataPoint = accountUsageTrendData.value.data[dataIndex]
+              const accountDetail = dataPoint?.accounts?.[accountId]
+
+              const allValues = context.chart.data.datasets
+                .map((dataset, idx) => ({
+                  value: dataset.data[dataIndex] || 0,
+                  index: idx
+                }))
+                .sort((a, b) => b.value - a.value)
+
+              const rank = allValues.findIndex((item) => item.index === datasetIndex) + 1
+              let rankIcon = ''
+              if (rank === 1) rankIcon = '🥇 '
+              else if (rank === 2) rankIcon = '🥈 '
+              else if (rank === 3) rankIcon = '🥉 '
+
+              const formattedCost = accountDetail?.formattedCost || formatCostValue(value)
+              const requests = accountDetail?.requests || 0
+
+              return `${rankIcon}${label}: ${formattedCost} / ${requests.toLocaleString()} 次`
+            }
+          }
+        }
+      },
+      scales: {
+        x: {
+          type: 'category',
+          display: true,
+          title: {
+            display: true,
+            text: trendGranularity.value === 'hour' ? '时间' : '日期',
+            color: chartColors.value.text
+          },
+          ticks: {
+            color: chartColors.value.text
+          },
+          grid: {
+            color: chartColors.value.grid
+          }
+        },
+        y: {
+          beginAtZero: true,
+          title: {
+            display: true,
+            text: '消耗金额 (USD)',
+            color: chartColors.value.text
+          },
+          ticks: {
+            callback: (value) => formatCostValue(Number(value)),
+            color: chartColors.value.text
+          },
+          grid: {
+            color: chartColors.value.grid
+          }
+        }
+      }
+    }
+  })
+}
+
+async function handleAccountUsageGroupChange(group) {
+  if (accountUsageGroup.value === group || accountTrendUpdating.value) {
+    return
+  }
+  accountTrendUpdating.value = true
+  try {
+    await setAccountUsageGroup(group)
+    await nextTick()
+    createAccountUsageTrendChart()
+  } finally {
+    accountTrendUpdating.value = false
+  }
+}
+
 // 监听数据变化更新图表
 watch(dashboardModelStats, () => {
   nextTick(() => createModelUsageChart())
@@ -1214,6 +1472,10 @@ watch(apiKeysTrendData, () => {
   nextTick(() => createApiKeysUsageTrendChart())
 })
 
+watch(accountUsageTrendData, () => {
+  nextTick(() => createAccountUsageTrendChart())
+})
+
 // 刷新所有数据
 async function refreshAllData() {
   if (isRefreshing.value) return
@@ -1297,6 +1559,7 @@ watch(isDarkMode, () => {
     createModelUsageChart()
     createUsageTrendChart()
     createApiKeysUsageTrendChart()
+    createAccountUsageTrendChart()
   })
 })
 
@@ -1310,6 +1573,7 @@ onMounted(async () => {
   createModelUsageChart()
   createUsageTrendChart()
   createApiKeysUsageTrendChart()
+  createAccountUsageTrendChart()
 })
 
 // 清理
@@ -1325,6 +1589,9 @@ onUnmounted(() => {
   if (apiKeysUsageTrendChartInstance) {
     apiKeysUsageTrendChartInstance.destroy()
   }
+  if (accountUsageTrendChartInstance) {
+    accountUsageTrendChartInstance.destroy()
+  }
 })
 </script>