# feat(leaderboard): 添加排行榜排序和筛选功能#448
Conversation
- 为供应商排行榜和缓存命中率排行榜添加客户端列排序功能 - 点击表头可切换升序/降序/无排序 - 为供应商排行榜新增 ProviderTypeFilter 类型筛选器 - 扩展 API 和缓存层支持供应商排行榜的 providerType 参数 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> fix(leaderboard): 修复 TableRow key 警告 将 key 计算提取到变量中，避免类型转换问题 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> feat(leaderboard): 为所有排行榜添加列排序功能 - 用户排行榜支持按用户名、请求数、Token数、消费金额排序 - 模型排行榜支持按模型名、请求数、Token数、消费金额、成功率排序 - 供应商排行榜和缓存命中率排行榜新增供应商名称排序 - 移除前三名字体加粗逻辑，避免排序后视觉混淆 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> refactor(leaderboard): 排序时保持前三名高亮样式 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> fix(leaderboard): 修复 TableRow key 为 undefined 的警告 当 getRowKey 返回 undefined 时 fallback 到 index
- 添加 defaultBold 属性支持列默认加粗 - 排序生效时对应列字体加粗 - 成本列在无排序时默认加粗，排序其他列时取消加粗 - 移除成本列固定的 font-semibold 样式 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Summary of ChangesHello @YewFence, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 此拉取请求旨在通过引入客户端排序、扩展供应商类型筛选功能以及优化视觉呈现，显著提升排行榜页面的用户体验和数据分析能力。这些改进使用户能够更灵活地探索和理解排行榜数据，从而更高效地进行决策。 Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
本次 PR 为排行榜添加了客户端排序和供应商类型筛选功能，整体实现良好，代码结构清晰。主要改动涉及前端表格组件、API 路由、缓存层和数据库查询，覆盖了完整的业务链路。
在前端 leaderboard-table.tsx 中，客户端排序逻辑实现正确，但发现一个关于“前三名高亮”的显示 bug，即排序后高亮未按预期取消。此外，在 leaderboard-table.tsx 和 leaderboard-view.tsx 中存在少量可优化的重复代码，已在具体评论中提出重构建议。
后端的改动，包括 API、缓存和数据库层对 providerType 过滤的支持，实现得非常出色，特别是 repository/leaderboard.ts 中动态构建 SQL 查询的方式值得称赞。
总体而言，这是一次高质量的功能增强。在修复提到的 bug 和进行少量代码优化后，即可合并。
src/app/[locale]/dashboard/leaderboard/_components/leaderboard-table.tsx
Show resolved
Hide resolved
| const isActiveSortColumn = sortKey === col.sortKey && sortDirection !== null; | ||
| const noSorting = sortKey === null; | ||
| const shouldBold = isActiveSortColumn || (col.defaultBold && noSorting); |
There was a problem hiding this comment.
计算列是否应加粗的逻辑 (shouldBold) 在 TableHeader (此处) 和 TableBody (L208-L210) 中被重复。为了提高代码的可维护性和减少重复，建议将此逻辑提取到一个独立的辅助函数中，例如：
const getShouldBold = (col: ColumnDef<T>) => {
const isActiveSortColumn = sortKey === col.sortKey && sortDirection !== null;
const noSorting = sortKey === null;
return isActiveSortColumn || (col.defaultBold && noSorting);
};然后在两处都调用 getShouldBold(col)。
src/app/[locale]/dashboard/leaderboard/_components/leaderboard-view.tsx
Outdated
Show resolved
Hide resolved
github-actions
bot
added
enhancement
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review Summary
No significant issues identified in this PR. The implementation is well-structured and follows the existing patterns in the codebase.
PR Size: S
- Lines changed: 251 (194 additions + 57 deletions)
- Files changed: 5
Review Analysis
Changes reviewed:
leaderboard-table.tsx: Added client-side sorting with proper state managementleaderboard-view.tsx: Extended column definitions with sortKey/getValue/defaultBoldroute.ts: API now accepts providerType for provider scopeleaderboard-cache.ts: Cache layer properly passes providerType to queriesleaderboard.ts: Database queries correctly filter by providerType
Validation performed:
- Sorting logic correctly handles tri-state cycling (asc → desc → null)
- Type definitions properly extended with optional properties
- API parameter validation is consistent with existing patterns
- Cache keys correctly incorporate providerType to avoid cache collisions
- Database queries properly filter with conditional where clauses
Review Coverage
- Logic and correctness - Clean
- Security (OWASP Top 10) - Clean
- Error handling - Clean
- Type safety - Clean
- Documentation accuracy - Clean
- Test coverage - Existing patterns followed (no dedicated tests for UI sorting is acceptable for this scope)
- Code clarity - Good
Automated review by Claude AI
There was a problem hiding this comment.
Code Review Summary
No significant issues identified in this PR. The implementation is well-structured and follows the existing patterns in the codebase.
PR Size: S
- Lines changed: 251 (194 additions + 57 deletions)
- Files changed: 5
Review Analysis
Changes reviewed:
leaderboard-table.tsx: Added client-side sorting with proper state managementleaderboard-view.tsx: Extended column definitions with sortKey/getValue/defaultBoldroute.ts: API now accepts providerType for provider scopeleaderboard-cache.ts: Cache layer properly passes providerType to queriesleaderboard.ts: Database queries correctly filter by providerType
Validation performed:
- Sorting logic correctly handles tri-state cycling (asc → desc → null)
- Type definitions properly extended with optional properties
- API parameter validation is consistent with existing patterns
- Cache keys correctly incorporate providerType to avoid cache collisions
- Database queries properly filter with conditional where clauses
Review Coverage
- Logic and correctness - Clean
- Security (OWASP Top 10) - Clean
- Error handling - Clean
- Type safety - Clean
- Documentation accuracy - Clean
- Test coverage - Existing patterns followed (no dedicated tests for UI sorting is acceptable for this scope)
- Code clarity - Good
Automated review by Claude AI
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
github-project-automation
bot
moved this from Backlog
to Done
in Claude Code Hub Roadmap
2 participants
Summary
Add client-side sorting, type filtering, and visual enhancements to the Leaderboard feature, improving data analysis experience.
Closes #442 - Implements column sorting and extends provider type filter to the provider leaderboard.
变更摘要
为排行榜（Leaderboard）添加了客户端排序、类型筛选和视觉增强功能，提升数据分析体验。
主要改动
表头排序功能：所有排行榜（用户、供应商、模型、缓存命中率）现在支持点击表头进行列排序
成本列默认加粗：成本/消耗金额列在无排序时默认加粗显示
类型筛选器扩展：将
ProviderTypeFilter组件从缓存命中率排行榜扩展到供应商排行榜providerType参数涉及文件
src/app/[locale]/dashboard/leaderboard/_components/leaderboard-table.tsxsrc/app/[locale]/dashboard/leaderboard/_components/leaderboard-view.tsxsrc/app/api/leaderboard/route.tssrc/lib/redis/leaderboard-cache.tssrc/repository/leaderboard.ts技术细节
排序列加粗实现
defaultBold属性到ColumnDef接口shouldBold = isActiveSortColumn || (col.defaultBold && noSorting)defaultBold: true，在无排序时保持加粗测试验证
bun run lint通过bun run typecheck通过截图/演示
排序功能
筛选功能
Checklist
devmain无直接冲突Description enhanced by Claude AI