From da416036e4ab13f415b62a40287e9ac6db380769 Mon Sep 17 00:00:00 2001
From: YoVinchen <gzh298255@gmail.com>
Date: Sat, 11 Apr 2026 15:38:00 +0800
Subject: [PATCH] refactor(usage): compact request log table with merged
 cache/multiplier columns and centered layout

---
 src/components/usage/RequestLogTable.tsx | 587 +++++++----------------
 1 file changed, 180 insertions(+), 407 deletions(-)

diff --git a/src/components/usage/RequestLogTable.tsx b/src/components/usage/RequestLogTable.tsx
index fe485ec20..2767d6f17 100644
--- a/src/components/usage/RequestLogTable.tsx
+++ b/src/components/usage/RequestLogTable.tsx
@@ -17,10 +17,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { useRequestLogs, usageKeys } from "@/lib/query/usage";
-import { useQueryClient } from "@tanstack/react-query";
-import type { LogFilters } from "@/types/usage";
-import { ChevronLeft, ChevronRight, RefreshCw, Search, X } from "lucide-react";
+import { useRequestLogs } from "@/lib/query/usage";
+import type { LogFilters, UsageRangeSelection } from "@/types/usage";
+import { Calendar, ChevronLeft, ChevronRight, Search, X } from "lucide-react";
 import {
   fmtInt,
   fmtUsd,
@@ -29,38 +28,25 @@ import {
 } from "./format";
 
 interface RequestLogTableProps {
+  range: UsageRangeSelection;
+  rangeLabel: string;
   appType?: string;
   refreshIntervalMs: number;
 }
 
-const ONE_DAY_SECONDS = 24 * 60 * 60;
-const MAX_FIXED_RANGE_SECONDS = 30 * ONE_DAY_SECONDS;
-
-type TimeMode = "rolling" | "fixed";
-
 export function RequestLogTable({
+  range,
+  rangeLabel,
   appType: dashboardAppType,
   refreshIntervalMs,
 }: RequestLogTableProps) {
   const { t, i18n } = useTranslation();
-  const queryClient = useQueryClient();
-
-  const getRollingRange = () => {
-    const now = Math.floor(Date.now() / 1000);
-    const oneDayAgo = now - ONE_DAY_SECONDS;
-    return { startDate: oneDayAgo, endDate: now };
-  };
-
-  const [appliedTimeMode, setAppliedTimeMode] = useState<TimeMode>("rolling");
-  const [draftTimeMode, setDraftTimeMode] = useState<TimeMode>("rolling");
 
   const [appliedFilters, setAppliedFilters] = useState<LogFilters>({});
   const [draftFilters, setDraftFilters] = useState<LogFilters>({});
   const [page, setPage] = useState(0);
   const pageSize = 20;
-  const [validationError, setValidationError] = useState<string | null>(null);
 
-  // When dashboard-level app filter is active (not "all"), override the local appType filter
   const dashboardAppTypeActive = dashboardAppType && dashboardAppType !== "all";
   const effectiveFilters: LogFilters = dashboardAppTypeActive
     ? { ...appliedFilters, appType: dashboardAppType }
@@ -68,8 +54,7 @@ export function RequestLogTable({
 
   const { data: result, isLoading } = useRequestLogs({
     filters: effectiveFilters,
-    timeMode: appliedTimeMode,
-    rollingWindowSeconds: ONE_DAY_SECONDS,
+    range,
     page,
     pageSize,
     options: {
@@ -82,122 +67,43 @@ export function RequestLogTable({
   const totalPages = Math.ceil(total / pageSize);
 
   const handleSearch = () => {
-    setValidationError(null);
-
-    if (draftTimeMode === "fixed") {
-      const start = draftFilters.startDate;
-      const end = draftFilters.endDate;
-
-      if (typeof start !== "number" || typeof end !== "number") {
-        setValidationError(
-          t("usage.invalidTimeRange", "请选择完整的开始/结束时间"),
-        );
-        return;
-      }
-
-      if (start > end) {
-        setValidationError(
-          t("usage.invalidTimeRangeOrder", "开始时间不能晚于结束时间"),
-        );
-        return;
-      }
-
-      if (end - start > MAX_FIXED_RANGE_SECONDS) {
-        setValidationError(
-          t("usage.timeRangeTooLarge", "时间范围过大，请缩小范围"),
-        );
-        return;
-      }
-    }
-
-    setAppliedTimeMode(draftTimeMode);
-    setAppliedFilters((prev) => {
-      const next = { ...prev, ...draftFilters };
-      if (draftTimeMode === "rolling") {
-        delete next.startDate;
-        delete next.endDate;
-      }
-      return next;
-    });
+    setAppliedFilters(draftFilters);
     setPage(0);
   };
 
   const handleReset = () => {
-    setValidationError(null);
-    setAppliedTimeMode("rolling");
-    setDraftTimeMode("rolling");
     setDraftFilters({});
     setAppliedFilters({});
     setPage(0);
   };
 
-  const handleRefresh = () => {
-    const key = {
-      timeMode: appliedTimeMode,
-      rollingWindowSeconds:
-        appliedTimeMode === "rolling" ? ONE_DAY_SECONDS : undefined,
-      appType: appliedFilters.appType,
-      providerName: appliedFilters.providerName,
-      model: appliedFilters.model,
-      statusCode: appliedFilters.statusCode,
-      startDate:
-        appliedTimeMode === "fixed" ? appliedFilters.startDate : undefined,
-      endDate: appliedTimeMode === "fixed" ? appliedFilters.endDate : undefined,
-    };
-
-    queryClient.invalidateQueries({
-      queryKey: usageKeys.logs(key, page, pageSize),
-    });
-  };
-
-  // 将 Unix 时间戳转换为本地时间的 datetime-local 格式
-  const timestampToLocalDatetime = (timestamp: number): string => {
-    const date = new Date(timestamp * 1000);
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, "0");
-    const day = String(date.getDate()).padStart(2, "0");
-    const hours = String(date.getHours()).padStart(2, "0");
-    const minutes = String(date.getMinutes()).padStart(2, "0");
-    return `${year}-${month}-${day}T${hours}:${minutes}`;
-  };
-
-  // 将 datetime-local 格式转换为 Unix 时间戳
-  const localDatetimeToTimestamp = (datetime: string): number | undefined => {
-    if (!datetime) return undefined;
-    // 验证格式是否完整 (YYYY-MM-DDTHH:mm)
-    if (datetime.length < 16) return undefined;
-    const timestamp = new Date(datetime).getTime();
-    // 验证是否为有效日期
-    if (isNaN(timestamp)) return undefined;
-    return Math.floor(timestamp / 1000);
-  };
-
   const language = i18n.resolvedLanguage || i18n.language || "en";
   const locale = getLocaleFromLanguage(language);
 
-  const rollingRangeForDisplay =
-    draftTimeMode === "rolling" ? getRollingRange() : null;
-
   return (
     <div className="space-y-4">
-      {/* 筛选栏 */}
-      <div className="flex flex-col gap-4 rounded-lg border bg-card/50 p-4 backdrop-blur-sm">
-        <div className="flex flex-wrap items-center gap-3">
+      <div className="rounded-lg border bg-card/50 p-2 backdrop-blur-sm">
+        <div className="flex flex-wrap items-center gap-1.5">
+          {/* App type */}
+          {/* App type */}
           <Select
             value={
               dashboardAppTypeActive
                 ? dashboardAppType
                 : draftFilters.appType || "all"
             }
-            onValueChange={(v) =>
-              setDraftFilters({
+            onValueChange={(v) => {
+              const next = {
                 ...draftFilters,
                 appType: v === "all" ? undefined : v,
-              })
-            }
+              };
+              setDraftFilters(next);
+              setAppliedFilters(next);
+              setPage(0);
+            }}
             disabled={!!dashboardAppTypeActive}
           >
-            <SelectTrigger className="w-[130px] bg-background">
+            <SelectTrigger className="h-8 w-[110px] bg-background text-xs">
               <SelectValue placeholder={t("usage.appType")} />
             </SelectTrigger>
             <SelectContent>
@@ -208,10 +114,11 @@ export function RequestLogTable({
             </SelectContent>
           </Select>
 
+          {/* Status code */}
           <Select
             value={draftFilters.statusCode?.toString() || "all"}
-            onValueChange={(v) =>
-              setDraftFilters({
+            onValueChange={(v) => {
+              const next = {
                 ...draftFilters,
                 statusCode:
                   v === "all"
@@ -219,40 +126,49 @@ export function RequestLogTable({
                     : Number.isFinite(Number.parseInt(v, 10))
                       ? Number.parseInt(v, 10)
                       : undefined,
-              })
-            }
+              };
+              setDraftFilters(next);
+              setAppliedFilters(next);
+              setPage(0);
+            }}
           >
-            <SelectTrigger className="w-[130px] bg-background">
+            <SelectTrigger className="h-8 w-[100px] bg-background text-xs">
               <SelectValue placeholder={t("usage.statusCode")} />
             </SelectTrigger>
             <SelectContent>
               <SelectItem value="all">{t("common.all")}</SelectItem>
               <SelectItem value="200">200 OK</SelectItem>
-              <SelectItem value="400">400 Bad Request</SelectItem>
-              <SelectItem value="401">401 Unauthorized</SelectItem>
-              <SelectItem value="429">429 Rate Limit</SelectItem>
-              <SelectItem value="500">500 Server Error</SelectItem>
+              <SelectItem value="400">400</SelectItem>
+              <SelectItem value="401">401</SelectItem>
+              <SelectItem value="429">429</SelectItem>
+              <SelectItem value="500">500</SelectItem>
             </SelectContent>
           </Select>
 
-          <div className="flex items-center gap-2 flex-1 min-w-[300px]">
-            <div className="relative flex-1">
-              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-              <Input
-                placeholder={t("usage.searchProviderPlaceholder")}
-                className="pl-9 bg-background"
-                value={draftFilters.providerName || ""}
-                onChange={(e) =>
-                  setDraftFilters({
-                    ...draftFilters,
-                    providerName: e.target.value || undefined,
-                  })
-                }
-              />
-            </div>
+          {/* Provider search */}
+          <div className="relative min-w-[140px] flex-1">
+            <Search className="absolute left-2 top-2 h-3.5 w-3.5 text-muted-foreground" />
+            <Input
+              placeholder={t("usage.searchProviderPlaceholder")}
+              className="h-8 bg-background pl-7 text-xs"
+              value={draftFilters.providerName || ""}
+              onChange={(e) =>
+                setDraftFilters({
+                  ...draftFilters,
+                  providerName: e.target.value || undefined,
+                })
+              }
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleSearch();
+              }}
+            />
+          </div>
+
+          {/* Model search */}
+          <div className="relative min-w-[120px] flex-1">
             <Input
               placeholder={t("usage.searchModelPlaceholder")}
-              className="w-[180px] bg-background"
+              className="h-8 bg-background text-xs"
               value={draftFilters.model || ""}
               onChange={(e) =>
                 setDraftFilters({
@@ -260,89 +176,40 @@ export function RequestLogTable({
                   model: e.target.value || undefined,
                 })
               }
-            />
-          </div>
-        </div>
-
-        <div className="flex flex-wrap items-center justify-between gap-3">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <span className="whitespace-nowrap">{t("usage.timeRange")}:</span>
-            <Input
-              type="datetime-local"
-              className="h-8 w-[200px] bg-background"
-              value={
-                (rollingRangeForDisplay?.startDate ?? draftFilters.startDate)
-                  ? timestampToLocalDatetime(
-                      (rollingRangeForDisplay?.startDate ??
-                        draftFilters.startDate) as number,
-                    )
-                  : ""
-              }
-              onChange={(e) => {
-                const timestamp = localDatetimeToTimestamp(e.target.value);
-                setDraftTimeMode("fixed");
-                setDraftFilters({
-                  ...draftFilters,
-                  startDate: timestamp,
-                });
-              }}
-            />
-            <span>-</span>
-            <Input
-              type="datetime-local"
-              className="h-8 w-[200px] bg-background"
-              value={
-                (rollingRangeForDisplay?.endDate ?? draftFilters.endDate)
-                  ? timestampToLocalDatetime(
-                      (rollingRangeForDisplay?.endDate ??
-                        draftFilters.endDate) as number,
-                    )
-                  : ""
-              }
-              onChange={(e) => {
-                const timestamp = localDatetimeToTimestamp(e.target.value);
-                setDraftTimeMode("fixed");
-                setDraftFilters({
-                  ...draftFilters,
-                  endDate: timestamp,
-                });
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleSearch();
               }}
             />
           </div>
 
-          <div className="flex items-center gap-2 ml-auto">
-            <Button
-              size="sm"
-              variant="default"
-              onClick={handleSearch}
-              className="h-8"
-            >
-              <Search className="mr-2 h-3.5 w-3.5" />
-              {t("common.search")}
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={handleReset}
-              className="h-8"
-            >
-              <X className="mr-2 h-3.5 w-3.5" />
-              {t("common.reset")}
-            </Button>
-            <Button
-              size="sm"
-              variant="ghost"
-              onClick={handleRefresh}
-              className="h-8 px-2"
-            >
-              <RefreshCw className="h-4 w-4" />
-            </Button>
+          {/* Time range badge */}
+          <div className="inline-flex h-8 items-center gap-1.5 rounded-md border border-border/60 bg-background px-2 text-xs text-muted-foreground">
+            <Calendar className="h-3.5 w-3.5 shrink-0" />
+            <span className="max-w-[180px] truncate text-foreground">
+              {rangeLabel}
+            </span>
           </div>
-        </div>
 
-        {validationError && (
-          <div className="text-sm text-red-600">{validationError}</div>
-        )}
+          {/* Search & Reset (icon-only) */}
+          <Button
+            size="icon"
+            variant="default"
+            onClick={handleSearch}
+            className="h-8 w-8"
+            title={t("common.search")}
+          >
+            <Search className="h-3.5 w-3.5" />
+          </Button>
+          <Button
+            size="icon"
+            variant="outline"
+            onClick={handleReset}
+            className="h-8 w-8"
+            title={t("common.reset")}
+          >
+            <X className="h-3.5 w-3.5" />
+          </Button>
+        </div>
       </div>
 
       {isLoading ? (
@@ -353,40 +220,31 @@ export function RequestLogTable({
             <Table>
               <TableHeader>
                 <TableRow>
-                  <TableHead className="whitespace-nowrap">
+                  <TableHead className="text-center whitespace-nowrap">
                     {t("usage.time")}
                   </TableHead>
-                  <TableHead className="whitespace-nowrap">
+                  <TableHead className="text-center whitespace-nowrap">
                     {t("usage.provider")}
                   </TableHead>
-                  <TableHead className="min-w-[200px] whitespace-nowrap">
+                  <TableHead className="text-center whitespace-nowrap">
                     {t("usage.billingModel")}
                   </TableHead>
-                  <TableHead className="text-right whitespace-nowrap">
+                  <TableHead className="text-center whitespace-nowrap">
                     {t("usage.inputTokens")}
                   </TableHead>
-                  <TableHead className="text-right whitespace-nowrap">
+                  <TableHead className="text-center whitespace-nowrap">
                     {t("usage.outputTokens")}
                   </TableHead>
-                  <TableHead className="text-right min-w-[90px] whitespace-nowrap">
-                    {t("usage.cacheReadTokens")}
-                  </TableHead>
-                  <TableHead className="text-right min-w-[90px] whitespace-nowrap">
-                    {t("usage.cacheCreationTokens")}
-                  </TableHead>
-                  <TableHead className="text-right whitespace-nowrap">
-                    {t("usage.multiplier")}
-                  </TableHead>
-                  <TableHead className="text-right whitespace-nowrap">
+                  <TableHead className="text-center whitespace-nowrap">
                     {t("usage.totalCost")}
                   </TableHead>
-                  <TableHead className="text-center min-w-[140px] whitespace-nowrap">
+                  <TableHead className="text-center whitespace-nowrap">
                     {t("usage.timingInfo")}
                   </TableHead>
-                  <TableHead className="whitespace-nowrap">
+                  <TableHead className="text-center whitespace-nowrap">
                     {t("usage.status")}
                   </TableHead>
-                  <TableHead className="whitespace-nowrap">
+                  <TableHead className="text-center whitespace-nowrap">
                     {t("usage.source", { defaultValue: "Source" })}
                   </TableHead>
                 </TableRow>
@@ -395,7 +253,7 @@ export function RequestLogTable({
                 {logs.length === 0 ? (
                   <TableRow>
                     <TableCell
-                      colSpan={12}
+                      colSpan={9}
                       className="text-center text-muted-foreground"
                     >
                       {t("usage.noData")}
@@ -404,140 +262,96 @@ export function RequestLogTable({
                 ) : (
                   logs.map((log) => (
                     <TableRow key={log.requestId}>
-                      <TableCell>
-                        {new Date(log.createdAt * 1000).toLocaleString(locale)}
+                      <TableCell className="text-center whitespace-nowrap text-xs px-1.5">
+                        {new Date(log.createdAt * 1000).toLocaleString(locale, {
+                          month: "2-digit",
+                          day: "2-digit",
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })}
                       </TableCell>
-                      <TableCell>
+                      <TableCell className="text-center">
                         {log.providerName || t("usage.unknownProvider")}
                       </TableCell>
-                      <TableCell className="font-mono text-xs max-w-[200px]">
+                      <TableCell className="text-center font-mono text-xs max-w-[200px]">
                         <div
                           className="truncate"
                           title={
                             log.requestModel && log.requestModel !== log.model
-                              ? `${t("usage.requestModel")}: ${log.requestModel}\n${t("usage.responseModel")}: ${log.model}`
+                              ? `${log.requestModel} → ${log.model}`
                               : log.model
                           }
                         >
-                          {log.model}
+                          {log.requestModel &&
+                          log.requestModel !== log.model ? (
+                            <span>
+                              {log.requestModel}
+                              <span className="text-muted-foreground">
+                                {" → "}
+                                {log.model}
+                              </span>
+                            </span>
+                          ) : (
+                            log.model
+                          )}
                         </div>
-                        {log.requestModel && log.requestModel !== log.model && (
-                          <div
-                            className="truncate text-muted-foreground text-[10px]"
-                            title={log.requestModel}
-                          >
-                            ← {log.requestModel}
+                      </TableCell>
+                      <TableCell className="text-center px-1.5">
+                        <div className="tabular-nums">
+                          {fmtInt(log.inputTokens, locale)}
+                        </div>
+                        {(log.cacheReadTokens > 0 ||
+                          log.cacheCreationTokens > 0) && (
+                          <div className="text-[10px] text-muted-foreground whitespace-nowrap">
+                            {[
+                              log.cacheReadTokens > 0 &&
+                                `R${fmtInt(log.cacheReadTokens, locale)}`,
+                              log.cacheCreationTokens > 0 &&
+                                `W${fmtInt(log.cacheCreationTokens, locale)}`,
+                            ]
+                              .filter(Boolean)
+                              .join("·")}
                           </div>
                         )}
                       </TableCell>
-                      <TableCell className="text-right">
-                        {fmtInt(log.inputTokens, locale)}
-                      </TableCell>
-                      <TableCell className="text-right">
+                      <TableCell className="text-center">
                         {fmtInt(log.outputTokens, locale)}
                       </TableCell>
-                      <TableCell className="text-right">
-                        {fmtInt(log.cacheReadTokens, locale)}
+                      <TableCell className="text-center px-1.5">
+                        <div className="font-medium tabular-nums">
+                          {fmtUsd(log.totalCostUsd, 4)}
+                        </div>
+                        {parseFiniteNumber(log.costMultiplier) != null &&
+                          parseFiniteNumber(log.costMultiplier) !== 1 && (
+                            <div className="text-[11px] text-muted-foreground">
+                              ×
+                              {parseFiniteNumber(log.costMultiplier)?.toFixed(
+                                2,
+                              )}
+                            </div>
+                          )}
                       </TableCell>
-                      <TableCell className="text-right">
-                        {fmtInt(log.cacheCreationTokens, locale)}
-                      </TableCell>
-                      <TableCell className="text-right font-mono text-xs">
-                        {(parseFiniteNumber(log.costMultiplier) ?? 1) !== 1 ? (
-                          <span className="text-orange-600">
-                            ×{log.costMultiplier}
+                      <TableCell className="text-center whitespace-nowrap text-xs tabular-nums">
+                        {(log.latencyMs / 1000).toFixed(1)}s
+                        {log.firstTokenMs != null && (
+                          <span className="text-muted-foreground">
+                            /{(log.firstTokenMs / 1000).toFixed(1)}s
                           </span>
-                        ) : (
-                          <span className="text-muted-foreground">×1</span>
                         )}
                       </TableCell>
-                      <TableCell className="text-right">
-                        {fmtUsd(log.totalCostUsd, 6)}
-                      </TableCell>
-                      <TableCell>
-                        <div className="flex items-center justify-center gap-1">
-                          {(() => {
-                            const durationMs =
-                              typeof log.durationMs === "number"
-                                ? log.durationMs
-                                : log.latencyMs;
-                            const durationSec = durationMs / 1000;
-                            const durationColor = Number.isFinite(durationSec)
-                              ? durationSec <= 5
-                                ? "bg-green-100 text-green-800"
-                                : durationSec <= 120
-                                  ? "bg-orange-100 text-orange-800"
-                                  : "bg-red-200 text-red-900"
-                              : "bg-gray-100 text-gray-700";
-                            return (
-                              <span
-                                className={`inline-flex items-center justify-center rounded-full px-2 py-0.5 text-xs ${durationColor}`}
-                              >
-                                {Number.isFinite(durationSec)
-                                  ? `${Math.round(durationSec)}s`
-                                  : "--"}
-                              </span>
-                            );
-                          })()}
-                          {log.isStreaming &&
-                            log.firstTokenMs != null &&
-                            (() => {
-                              const firstSec = log.firstTokenMs / 1000;
-                              const firstColor = Number.isFinite(firstSec)
-                                ? firstSec <= 5
-                                  ? "bg-green-100 text-green-800"
-                                  : firstSec <= 120
-                                    ? "bg-orange-100 text-orange-800"
-                                    : "bg-red-200 text-red-900"
-                                : "bg-gray-100 text-gray-700";
-                              return (
-                                <span
-                                  className={`inline-flex items-center justify-center rounded-full px-2 py-0.5 text-xs ${firstColor}`}
-                                >
-                                  {Number.isFinite(firstSec)
-                                    ? `${firstSec.toFixed(1)}s`
-                                    : "--"}
-                                </span>
-                              );
-                            })()}
-                          <span
-                            className={`inline-flex items-center justify-center rounded-full px-2 py-0.5 text-xs ${
-                              log.isStreaming
-                                ? "bg-blue-100 text-blue-800"
-                                : "bg-purple-100 text-purple-800"
-                            }`}
-                          >
-                            {log.isStreaming
-                              ? t("usage.stream")
-                              : t("usage.nonStream")}
-                          </span>
-                        </div>
-                      </TableCell>
-                      <TableCell>
+                      <TableCell className="text-center">
                         <span
-                          className={`inline-flex rounded-full px-2 py-1 text-xs ${
+                          className={
                             log.statusCode >= 200 && log.statusCode < 300
-                              ? "bg-green-100 text-green-800"
-                              : "bg-red-100 text-red-800"
-                          }`}
+                              ? "text-green-600"
+                              : "text-red-600"
+                          }
                         >
                           {log.statusCode}
                         </span>
                       </TableCell>
-                      <TableCell>
-                        {log.dataSource && log.dataSource !== "proxy" ? (
-                          <span className="inline-flex rounded-full px-2 py-0.5 text-[10px] bg-indigo-100 text-indigo-800">
-                            {t(`usage.dataSource.${log.dataSource}`, {
-                              defaultValue: log.dataSource,
-                            })}
-                          </span>
-                        ) : (
-                          <span className="inline-flex rounded-full px-2 py-0.5 text-[10px] bg-gray-100 text-gray-600">
-                            {t("usage.dataSource.proxy", {
-                              defaultValue: "Proxy",
-                            })}
-                          </span>
-                        )}
+                      <TableCell className="text-center text-xs text-muted-foreground">
+                        {log.dataSource || "proxy"}
                       </TableCell>
                     </TableRow>
                   ))
@@ -546,71 +360,30 @@ export function RequestLogTable({
             </Table>
           </div>
 
-          {/* 分页控件 */}
-          {total > 0 && (
-            <div className="flex items-center justify-between px-2">
-              <span className="text-sm text-muted-foreground">
-                {t("usage.totalRecords", { total })}
+          <div className="flex items-center justify-between text-sm text-muted-foreground">
+            <span>{t("usage.totalRecords", { total })}</span>
+            <div className="flex items-center gap-2">
+              <Button
+                size="sm"
+                variant="outline"
+                disabled={page === 0}
+                onClick={() => setPage((p) => Math.max(0, p - 1))}
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <span>
+                {page + 1} / {Math.max(totalPages, 1)}
               </span>
-              <div className="flex items-center gap-1">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setPage(Math.max(0, page - 1))}
-                  disabled={page === 0}
-                >
-                  <ChevronLeft className="h-4 w-4" />
-                </Button>
-                {/* 页码按钮 */}
-                {(() => {
-                  const pages: (number | string)[] = [];
-                  if (totalPages <= 7) {
-                    for (let i = 0; i < totalPages; i++) pages.push(i);
-                  } else {
-                    pages.push(0);
-                    if (page > 2) pages.push("...");
-                    for (
-                      let i = Math.max(1, page - 1);
-                      i <= Math.min(totalPages - 2, page + 1);
-                      i++
-                    ) {
-                      pages.push(i);
-                    }
-                    if (page < totalPages - 3) pages.push("...");
-                    pages.push(totalPages - 1);
-                  }
-                  return pages.map((p, idx) =>
-                    typeof p === "string" ? (
-                      <span
-                        key={`ellipsis-${idx}`}
-                        className="px-2 text-muted-foreground"
-                      >
-                        ...
-                      </span>
-                    ) : (
-                      <Button
-                        key={p}
-                        variant={p === page ? "default" : "outline"}
-                        size="sm"
-                        className="h-8 w-8 p-0"
-                        onClick={() => setPage(p)}
-                      >
-                        {p + 1}
-                      </Button>
-                    ),
-                  );
-                })()}
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setPage(page + 1)}
-                  disabled={page >= totalPages - 1}
-                >
-                  <ChevronRight className="h-4 w-4" />
-                </Button>
-              </div>
+              <Button
+                size="sm"
+                variant="outline"
+                disabled={page >= totalPages - 1}
+                onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
             </div>
-          )}
+          </div>
         </>
       )}
     </div>