排行榜支持按特定列正序或倒序排列

[ding113]

排行榜支持按特定列正序或倒序排列，通过点击列名控制。

供应商排行榜也应该新增类型筛选器，和缓存命中表相同。

[github-actions]

Thank you for this feature suggestion.

Feature request summary (for English readers):

1. Leaderboard tables should support ascending/descending sort by clicking on column headers
2. Provider leaderboard should have a type filter (similar to the cache hit rate table)

Feasibility assessment:

Based on my analysis of the codebase, both features are feasible and align well with existing patterns:

1. Column Sorting

The current leaderboard table (src/app/[locale]/dashboard/leaderboard/_components/leaderboard-table.tsx) uses a static rendering approach where data is displayed in the order received. The ColumnDef interface (lines 18-22) supports column definitions but doesn't currently include sorting functionality.

The codebase already has:

• A sortable property defined in src/components/ui/data-table.tsx (line 23: sortable?: boolean), though the actual sorting logic isn't implemented yet
• Sort dropdown patterns in src/app/[locale]/settings/providers/_components/provider-sort-dropdown.tsx using ArrowUpDown icon and Select component
• Similar sort state management in src/app/[locale]/dashboard/availability/_components/availability-view.tsx (lines 26: SortOption type)

Implementation considerations for sorting:

• Add sortKey and sortable properties to the ColumnDef interface in leaderboard-table.tsx
• Add click handlers to table headers with visual indicators (ArrowUpDown/ArrowUp/ArrowDown icons from lucide-react)
• Add sortConfig state to LeaderboardView component to track current sort column and direction
• Perform client-side sorting on the data array before rendering

2. Provider Type Filter for Provider Leaderboard

The cache hit rate table already uses ProviderTypeFilter from src/app/[locale]/settings/providers/_components/provider-type-filter.tsx. Looking at leaderboard-view.tsx:

• Line 53: providerTypeFilter state is defined
• Lines 93-95: The filter is passed to the API for providerCacheHitRate scope
• Lines 319-325: The filter UI is conditionally rendered only for providerCacheHitRate scope

Implementation considerations for provider filter:

• Extend the condition at line 319 to also show the filter for scope === "provider"
• Update the API request URL logic (around line 93) to also include providerType when scope === "provider"
• The backend API endpoint (src/app/api/leaderboard/route.ts) may need to handle the providerType parameter for provider scope queries

Related existing code:

• src/app/[locale]/dashboard/leaderboard/_components/leaderboard-view.tsx - Main view with scope/period controls
• src/app/[locale]/dashboard/leaderboard/_components/leaderboard-table.tsx - Table rendering component
• src/app/[locale]/settings/providers/_components/provider-type-filter.tsx - Reusable filter component
• src/app/api/leaderboard/route.ts - API endpoint for leaderboard data

---

Automated response from Claude AI

[github-actions]

感谢你的功能建议。

现状（基于当前实现）

• 表头当前仅渲染文本，不支持点击排序；“排名”完全取决于返回数组顺序（rank = index + 1）。
• “供应商缓存命中率排行榜”已支持类型筛选：仅在 scope === "providerCacheHitRate" 时展示 ProviderTypeFilter，并把 providerType 追加到 /api/leaderboard 请求里。
• /api/leaderboard 也仅在 scope=providerCacheHitRate 时解析并生效 providerType；scope=provider 不会应用该参数。
• 默认排序目前由后端 SQL 固定决定：user/provider 按 sum(costUsd) 降序，providerCacheHitRate 按 cacheHitRate 降序，model 按 count(*) 降序。

相关代码

• src/app/[locale]/dashboard/leaderboard/_components/leaderboard-table.tsx (lines 18-22, 115-120, 125-126)
  • ColumnDef 目前没有 sort key/comparator；表头渲染为 {col.header}；排名用 index + 1 计算。

  export interface ColumnDef<T> {
    header: string;
    className?: string;
    cell: (row: T, index: number) => React.ReactNode;
  }
  
  {columns.map((col, idx) => (
    <TableHead key={idx} className={col.className || ""}>
      {col.header}
    </TableHead>
  ))}
  
  const rank = index + 1;

• src/app/[locale]/dashboard/leaderboard/_components/leaderboard-view.tsx (lines 89-95, 319-325)

  if (scope === "providerCacheHitRate" && providerTypeFilter !== "all") {
    url += `&providerType=${encodeURIComponent(providerTypeFilter)}`;
  }
  
  {scope === "providerCacheHitRate" ? (
    <ProviderTypeFilter
      value={providerTypeFilter}
      onChange={setProviderTypeFilter}
      disabled={loading}
    />
  ) : null}

• src/app/api/leaderboard/route.ts (lines 33-38, 116-122) — providerType 目前仅允许/处理 providerCacheHitRate
• src/lib/redis/leaderboard-cache.ts (lines 93-103, 120-146) — providerType 仅传入缓存命中率榜的查询
• src/repository/leaderboard.ts (lines 174, 326, 400, 518) — 各榜单的默认 orderBy 规则

实现考虑（供评估）

• 列点击排序：需要在前端增加排序状态并对 data 做排序，或扩展 /api/leaderboard 支持 sort 参数并下推到 repository/leaderboard.ts 的 orderBy；目前接口没有 sort 参数。
• 供应商排行榜类型筛选：除了 UI 增加筛选器外，还需要让 scope=provider 的后端查询链路也按 providers.providerType 过滤（目前只有缓存命中率榜实现了该过滤，见 src/repository/leaderboard.ts lines 373-378）。

想确认一下：你希望“供应商排行榜”默认仍以当前的按 cost 排名为初始排序吗？点击列名后的排序需要在 URL 中持久化（类似 scope/period）吗？

---

Automated response from Codex AI