feat: 用户排行榜增强 — 分模型统计展开 + 用户级统计仪表盘 (Per-Model Breakdown & User Statistics Dashboard)

[sususu98]

功能描述

希望增强排行榜的 用户排名 界面，提供两层用户用量洞察能力：

1. 展开行：分模型统计 — 在用户排行榜中展开每行，查看该用户按模型维度的用量明细
2. 用户统计仪表盘 — 点击用户名，进入该用户的专属统计页面，包含趋势图、模型分布等仪表盘级别的可视化

背景

目前用户排行榜仅展示汇总数据（总请求数、总 Token、总费用）。在多模型混用场景下（claude-sonnet / claude-opus / gemini 等），管理员缺乏以下能力：

• 查看单个用户在不同模型上的消费分布
• 查看单个用户的费用/请求趋势变化
• 对用户的用量模式进行深入分析（哪些模型用得多、缓存命中率如何等）

目前 my-usage 页面已经为普通用户自己提供了类似功能（StatisticsSummaryCard 组件展示请求数/费用/Token/缓存统计 + 分模型明细），但管理员无法从排行榜角度查看任意用户的同等信息。

---

Part 1: 排行榜展开行 — 分模型统计

需求

在用户排行榜的每一行末尾增加展开按钮，展开后显示该用户按模型维度的统计子表。

预期效果

模型	请求数	Token	费用
claude-sonnet-4-20250514	1,234	12.5M	$45.60
claude-opus-4-20250514	89	2.1M	$28.30
gemini-2.5-pro	456	5.8M	$12.10

现有架构支持

• usage_ledger 表已包含 model 和 original_model 字段，可 GROUP BY (userId, model) 二次聚合
• LeaderboardTable 组件已通过 renderExpandedContent prop 支持可展开行（当前用于供应商缓存命中率 Tab）
• findProviderCacheHitRateLeaderboardWithTimezone 已实现"先按父实体聚合 -> 再按模型二次聚合"的模式，可直接参考

建议实现

1. 在 src/repository/leaderboard.ts 新增 UserModelStat 接口和二次聚合查询
2. 扩展 LeaderboardEntry 增加 modelStats: UserModelStat[]
3. 在 leaderboard-view.tsx 为 scope === "user" 添加 renderExpandedContent

---

Part 2: 用户级统计仪表盘

需求

在用户排行榜中，点击用户名可跳转到（或弹出）该用户的专属统计仪表盘，提供与主仪表盘概览页类似的可视化体验，但数据范围限定为该用户。

预期包含的可视化元素

2.1 概览指标卡片

类似 BentoMetricCard 的用户级版本：

• 今日请求数（与昨日同期对比）
• 今日费用（与昨日同期对比）
• 平均响应时间
• 缓存命中率

注：getOverviewMetricsWithComparison 已支持 userId 参数，可直接复用。

2.2 时间趋势图

类似 StatisticsChartCard 的用户级版本（Recharts AreaChart）：

• 费用趋势（按天/小时）
• 请求量趋势（按天/小时）
• 支持 today / 7days / 30days / thisMonth 时间范围切换
• 以该用户的各 API Key 为维度展示多条曲线

注：getUserStatistics Action 的底层查询（getKeyStatisticsFromDB）已支持按 userId 过滤，StatisticsChartCard 组件可直接复用。

2.3 模型消费分布

类似 my-usage 页面的 StatisticsSummaryCard 中的 Model Breakdown：

• 按模型分组展示：请求数、Token（输入/输出/缓存）、费用、费用占比
• 可点击展开查看 Token 详情（input/output/cache read/cache write）和缓存命中率

注：getMyStatsSummary Action 的查询模式可参考，但需改为支持 targetUserId 参数。

建议实现方案

方案 A: 新页面（推荐）

• 新增路由 /dashboard/leaderboard/user/[userId]
• 排行榜用户名变为超链接
• 页面复用现有组件：BentoMetricCard + StatisticsChartCard + ModelBreakdownColumn

方案 B: 对话框

• 在排行榜行末增加"查看详情"按钮
• 弹出全屏对话框（类似 key-stats-dialog.tsx 模式）
• 优点：无需离开排行榜页面

---

相关文件

排行榜（Part 1）

• src/repository/leaderboard.ts — 排行榜查询逻辑
• src/app/[locale]/dashboard/leaderboard/_components/leaderboard-view.tsx — 排行榜 UI
• src/app/[locale]/dashboard/leaderboard/_components/leaderboard-table.tsx — 通用表格（已支持 renderExpandedContent）

统计图表（Part 2）

• src/app/[locale]/dashboard/_components/bento/statistics-chart-card.tsx — 时间趋势面积图（Recharts AreaChart, 支持 Cost/Calls 切换, Overlay/Stacked 模式）
• src/app/[locale]/dashboard/_components/bento/metric-card.tsx — 指标卡片组件
• src/repository/overview.ts — getOverviewMetricsWithComparison(userId?) 已支持用户过滤
• src/actions/statistics.ts — getUserStatistics 统计数据源
• src/repository/statistics.ts — 底层时间序列聚合查询（支持按用户/密钥分组）

参考实现（my-usage 页面）

• src/app/[locale]/my-usage/_components/statistics-summary-card.tsx — 用户自有统计卡（含分模型明细，可作为 Part 2.3 参考）
• src/actions/my-usage.ts — getMyStatsSummary 模型级统计查询

数据层

• src/drizzle/schema.ts — usage_ledger 表（model, original_model, userId, costUsd, tokens 等字段齐全）
• src/app/api/leaderboard/route.ts — 排行榜 API

环境信息

• CCH 版本：基于 dev 分支最新代码
• 相关 Issue：有没有考虑增加单key但是额度分codex、claude、gemini的功能 #699（per-model quota 需求，方向不同但互补）、feat: 在概览/性能页面展示供应商返回的真实模型名称 #829（展示供应商返回的真实模型名称）

[coderabbitai]

🔗 Related PRs

#607 - feat(leaderboard): add user tag and group filters for user ranking [merged]
#753 - feat(leaderboard): provider avg-cost metrics and cache-hit model drilldown [merged]
#795 - release v0.5.8 [merged]
#818 - perf(dashboard): lazy-load usage data on users page for instant first render [merged]
#838 - 修复首页统计图表在小高度下裁切 [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[github-actions]

Thank you for this well-researched feature request.

Feasibility Assessment:

I have verified all the key claims in your analysis, and they are accurate:

Data Layer (Verified):

• usage_ledger table has model and original_model fields at src/drizzle/schema.ts:872-873
• userId foreign key exists for grouping by user
• Index on model field exists at line 914-916

Frontend Component Support (Verified):

• LeaderboardTable accepts renderExpandedContent prop at src/app/[locale]/dashboard/leaderboard/_components/leaderboard-table.tsx:44
• The expansion logic is already implemented (lines 232-234)

Reference Implementation Pattern (Verified):

• findProviderCacheHitRateLeaderboardWithTimezone at src/repository/leaderboard.ts:474-591 demonstrates the exact pattern:
  1. Parent-level aggregation query (lines 507-527)
  2. Child-level aggregation by model (lines 544-562)
  3. Group into Map<parentId, ModelStat[]> (lines 564-577)
  4. Return combined results with modelStats array (lines 579-590)

Configuration (Verified):

• billingModelSource setting exists and is used to determine model field priority at src/repository/leaderboard.ts:530-535

Current User Leaderboard Implementation:

• findLeaderboardWithTimezone at src/repository/leaderboard.ts:206-271 currently only aggregates at user level
• LeaderboardEntry interface at lines 14-20 does not include modelStats

Implementation Considerations:

1. The suggested approach follows an established pattern in the codebase
2. Backend changes would be isolated to src/repository/leaderboard.ts
3. Frontend changes would add renderExpandedContent for scope === "user" in leaderboard-view.tsx
4. The billingModelSource configuration should be reused for consistency with model leaderboard
5. Consider reusing ModelCacheHitStat interface pattern or creating a new UserModelStat interface

Dependencies:

• src/repository/leaderboard.ts - data aggregation
• src/app/[locale]/dashboard/leaderboard/_components/leaderboard-view.tsx - frontend rendering
• src/app/[locale]/dashboard/leaderboard/_components/leaderboard-table.tsx - expansion UI (already supports)
• i18n strings for new table headers

---

Automated response from Claude AI