feat(api-keys): token usage tab with time range, search, and column sorting

Adds a "Token Usage" tab on the API Keys page showing every key's token
consumption—not just the top 3—with time range chips, free-text search,
and sortable columns.

Backend:
- new database.APIKeyTokenStat type with input/output/cached/total token
  splits (UsageAPIKeyStat had only an aggregate total)
- new database.ListAPIKeyTokenStats(ctx, start, end) — single SQL that
  works on both sqlite and postgres, no row limit
- new GET /api/admin/usage/api-keys?start=&end= endpoint

Frontend:
- new APIKeyTokenUsagePanel component:
  - Today / This week / This month / Custom range chips (calendar-aligned,
    not "last N hours")
  - search by key name or masked key fragment
  - 8 columns, each click-to-sort with asc/desc toggle
  - default sort: total_tokens DESC
- tabbed view on /api-keys: "Keys" (existing list) | "Token Usage"
- localized strings for zh/en

Closes #162.

Author: james-6-23

admin/handler.go

@@ -236,6 +236,7 @@ func (h *Handler) RegisterRoutes(r *gin.Engine) {
 	api.GET("/accounts/event-trend", h.GetAccountEventTrend)
 	api.POST("/accounts/usage/probe", h.ForceUsageProbe)
 	api.GET("/usage/stats", h.GetUsageStats)
+	api.GET("/usage/api-keys", h.GetAPIKeyTokenStats)
 	api.GET("/usage/logs", h.GetUsageLogs)
 	api.GET("/usage/chart-data", h.GetChartData)
 	api.DELETE("/usage/logs", h.ClearUsageLogs)
@@ -2811,6 +2812,30 @@ func parseUsageStatsRange(startStr, endStr string) (time.Time, time.Time, error)
 	return start, end, nil
 }
 
+// GetAPIKeyTokenStats 返回按 API Key 聚合的 token 用量列表（issue #162）。
+// 支持可选 query 参数 start/end (RFC3339)；缺省回落到"今日"。
+// 不分页/不限条数：前端做排序、搜索、分页。
+func (h *Handler) GetAPIKeyTokenStats(c *gin.Context) {
+	ctx, cancel := context.WithTimeout(c.Request.Context(), 8*time.Second)
+	defer cancel()
+
+	rangeStart, rangeEnd, err := parseUsageStatsRange(c.Query("start"), c.Query("end"))
+	if err != nil {
+		writeError(c, http.StatusBadRequest, err.Error())
+		return
+	}
+
+	items, err := h.db.ListAPIKeyTokenStats(ctx, rangeStart, rangeEnd)
+	if err != nil {
+		writeInternalError(c, err)
+		return
+	}
+	if items == nil {
+		items = []database.APIKeyTokenStat{}
+	}
+	c.JSON(http.StatusOK, gin.H{"items": items})
+}
+
 // GetChartData 返回图表聚合数据（服务端分桶 + 内存缓存）
 func (h *Handler) GetChartData(c *gin.Context) {
 	startStr := c.Query("start")

database/api_key_usage.go

@@ -40,3 +40,91 @@ func (db *DB) GetAPIKeyWindowUsage(ctx context.Context, apiKeyID int64, window t
 	}
 	return usage, nil
 }
+
+// APIKeyTokenStat 是 API Key 在某时间区间内的 token 使用排行项。
+// 比 UsageAPIKeyStat 更细——分列 input / output / cached token，便于 UI 单独排序。
+type APIKeyTokenStat struct {
+	APIKeyID     int64   `json:"api_key_id"`
+	APIKeyName   string  `json:"api_key_name"`
+	APIKeyMasked string  `json:"api_key_masked"`
+	Label        string  `json:"label"`
+	Requests     int64   `json:"requests"`
+	InputTokens  int64   `json:"input_tokens"`
+	OutputTokens int64   `json:"output_tokens"`
+	CachedTokens int64   `json:"cached_tokens"`
+	TotalTokens  int64   `json:"total_tokens"`
+	ErrorCount   int64   `json:"error_count"`
+	UserBilled   float64 `json:"user_billed"`
+}
+
+// ListAPIKeyTokenStats 返回 [rangeStart, rangeEnd) 区间内按 API Key 聚合的 token 用量。
+// 两个时间都可零值；rangeStart 零值表示"今日 0 点"，rangeEnd 零值表示"至今"。
+// 返回结果**不限条数**，与 issue #162 一致；前端负责排序 / 搜索 / 分页。
+func (db *DB) ListAPIKeyTokenStats(ctx context.Context, rangeStart, rangeEnd time.Time) ([]APIKeyTokenStat, error) {
+	now := time.Now()
+	if rangeStart.IsZero() {
+		rangeStart = time.Date(now.Year(), now.Month(), now.Day(), 0, 0, 0, 0, now.Location())
+	}
+
+	query := `
+		SELECT
+			COALESCE(api_key_id, 0) AS api_key_id,
+			COALESCE(api_key_name, '') AS api_key_name,
+			COALESCE(api_key_masked, '') AS api_key_masked,
+			COUNT(*) AS requests,
+			COALESCE(SUM(input_tokens), 0) AS input_tokens,
+			COALESCE(SUM(output_tokens), 0) AS output_tokens,
+			COALESCE(SUM(cached_tokens), 0) AS cached_tokens,
+			COALESCE(SUM(total_tokens), 0) AS total_tokens,
+			COALESCE(SUM(CASE WHEN status_code >= 400 THEN 1 ELSE 0 END), 0) AS error_count,
+			COALESCE(SUM(user_billed), 0) AS user_billed
+		FROM usage_logs
+		WHERE status_code <> 499
+		  AND created_at >= $1
+	`
+	args := []interface{}{db.timeArg(rangeStart)}
+	if !rangeEnd.IsZero() {
+		query += " AND created_at < $2"
+		args = append(args, db.timeArg(rangeEnd))
+	}
+	query += " GROUP BY 1, 2, 3 ORDER BY total_tokens DESC, requests DESC"
+
+	rows, err := db.conn.QueryContext(ctx, query, args...)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	items := make([]APIKeyTokenStat, 0, 16)
+	for rows.Next() {
+		var item APIKeyTokenStat
+		if err := rows.Scan(
+			&item.APIKeyID,
+			&item.APIKeyName,
+			&item.APIKeyMasked,
+			&item.Requests,
+			&item.InputTokens,
+			&item.OutputTokens,
+			&item.CachedTokens,
+			&item.TotalTokens,
+			&item.ErrorCount,
+			&item.UserBilled,
+		); err != nil {
+			return nil, err
+		}
+		// 计算 label（前端可直接展示）：优先 name，其次 masked，否则 "unknown"
+		switch {
+		case item.APIKeyName != "":
+			item.Label = item.APIKeyName
+		case item.APIKeyMasked != "":
+			item.Label = item.APIKeyMasked
+		default:
+			item.Label = "unknown"
+		}
+		items = append(items, item)
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	return items, nil
+}

frontend/src/api.ts

@@ -6,6 +6,7 @@ import type {
   AddOpenAIResponsesAccountRequest,
   AdminErrorResponse,
   APIKeysResponse,
+  APIKeyTokenStat,
   AccountsResponse,
   ChartAggregation,
   CreateAccountResponse,
@@ -283,6 +284,15 @@ export const api = {
     const qs = searchParams.toString()
     return request<UsageStats>(qs ? `/usage/stats?${qs}` : '/usage/stats')
   },
+  getAPIKeyTokenStats: (params: { start?: string; end?: string } = {}) => {
+    const searchParams = new URLSearchParams()
+    if (params.start) searchParams.set('start', params.start)
+    if (params.end) searchParams.set('end', params.end)
+    const qs = searchParams.toString()
+    return request<{ items: APIKeyTokenStat[] }>(
+      qs ? `/usage/api-keys?${qs}` : '/usage/api-keys',
+    )
+  },
   getUsageLogs: (params: { start?: string; end?: string; limit?: number } = {}) => {
     const searchParams = new URLSearchParams()
     if (params.start && params.end) {