feat(usage): refine usage dashboard UI and date range picker (#2002)

* feat(usage): enhance usage stats backend and query hooks

* feat(usage): redesign calendar date range picker with auto-switch and simplified layout

* refactor(usage): streamline dashboard layout and stats components

* refactor(usage): compact request log table with merged cache/multiplier columns and centered layout

* feat(i18n): add cache short labels and usage stats translations for zh/en/ja

* Align usage dashboard stats with range boundaries

The usage dashboard mixed second-precision detail rows with day-level rollups, which caused custom half-day ranges to overcount historical rollup data and left the request log paginator on stale pages after top-level filter changes.

This change limits rollups to fully covered local days, aligns multi-day trend buckets with natural local days, and resets request log pagination when the dashboard range or app filter changes.

Constraint: usage_daily_rollups stores only daily aggregates after pruning old detail rows
Rejected: Include partial boundary rollups proportionally | historical intra-day detail is unavailable after pruning
Rejected: Force RequestLogTable remount on range change | would discard local draft filters unnecessarily
Confidence: high
Scope-risk: moderate
Reversibility: clean
Directive: Keep summary, trends, provider stats, and model stats on the same rollup-boundary rules
Tested: cargo test --manifest-path src-tauri/Cargo.toml usage_stats
Tested: pnpm exec vitest run tests/components/RequestLogTable.test.tsx
Tested: pnpm typecheck
Not-tested: Manual UI validation in the Tauri app

* Preserve full-day usage filters at minute precision

The latest review surfaced two interaction bugs in the usage dashboard: rollup-backed stats undercounted end days selected via the minute-precision picker, and immediate select changes accidentally applied unsubmitted text drafts from the request log filters.

This change treats 23:59 as a fully selected local end day for rollup inclusion and narrows select-side state syncing so app/status updates do not commit provider/model drafts.

Constraint: The custom range picker emits minute-precision timestamps, while rollups are stored at day granularity
Rejected: Require exact 23:59:59 end timestamps | unreachable from the current picker UI
Rejected: Rebuild applied filters from the full draft state on select changes | silently commits unsaved text input
Confidence: high
Scope-risk: narrow
Reversibility: clean
Directive: Keep request-log text fields on explicit apply semantics even when select filters remain immediate
Tested: cargo test --manifest-path src-tauri/Cargo.toml usage_stats
Tested: pnpm exec vitest run tests/components/RequestLogTable.test.tsx
Tested: pnpm typecheck
Not-tested: Manual Tauri dashboard interaction

* refactor(usage): move range presets into date picker, single-row layout

- UsageDateRangePicker: add preset shortcuts (今天/1d/7d/14d/30d) inside
  popover top; clicking a preset applies immediately and closes popover
- UsageDashboard: collapse to single row (app filters + refresh + picker);
  remove standalone preset buttons and summary stats bar
- RequestLogTable: replace static Calendar badge with interactive
  UsageDateRangePicker via onRangeChange prop; single filter row

* Keep usage pagination regression coverage aligned with the rendered UI

The new regression test was asserting a non-existent pagination label and page summary text, so it failed before it could verify the real page-reset behavior. This commit switches the assertions to the numbered pagination buttons that the component actually renders and validates the reset through the query hook arguments.

Constraint: RequestLogTable exposes numbered pagination buttons, not a "Next page" label or "2 / 6" summary text
Rejected: Add synthetic pagination labels solely for the test | would couple production markup to a test-only assumption
Confidence: high
Scope-risk: narrow
Reversibility: clean
Directive: Prefer pagination assertions that follow the rendered controls or hook inputs instead of invented summary text
Tested: pnpm vitest run tests/components/RequestLogTable.test.tsx; pnpm typecheck; pnpm test:unit

* refactor(usage): clean up dead code and polish date range picker

- Remove unused exports MAX_CUSTOM_USAGE_RANGE_SECONDS,
  timestampToLocalDatetime, and localDatetimeToTimestamp from
  usageRange.ts (replaced by the calendar picker)
- Deduplicate getPresetLabel from UsageDashboard and
  UsageDateRangePicker into shared getUsageRangePresetLabel helper
- Add aria-label, aria-current and aria-pressed to calendar day
  buttons so screen readers can disambiguate same-numbered days
  across adjacent months
- Drop unused cacheReadShort and cacheWriteShort i18n keys (zh/en/ja);
  the request log table renders R/W prefixes inline
- Align customRangeHint copy with the removed 30-day limit by
  dropping "up to 30 days" wording (zh/en/ja)

* fix(usage): align rollup cutoff to local midnight to keep days complete

`rollup_and_prune` previously used `Utc::now() - retain_days * 86400`
as the cutoff. Because rollups are bucketed by *local* date and detail
rows below the cutoff are pruned, an unaligned cutoff left the youngest
rolled-up day half-rolled-up and half-pruned. Combined with the new
`compute_rollup_date_bounds` boundary trimming (which excludes any
rollup day not fully covered by the requested range), custom range
queries that touch that day silently under-count summary, trend,
provider, and model stats.

Fix the invariant at the source: snap the cutoff to the next local
midnight after `(now - retain_days)`. Every rollup row now reflects a
complete local day, so the boundary trimmer's all-or-nothing assumption
holds.

Includes unit tests for the cutoff math (typical case + already-on-
midnight case). DST gap is handled defensively by bumping forward by
an hour.

Addresses Codex P2 review finding on PR #2002.

---------

Co-authored-by: Jason <farion1231@gmail.com>

src-tauri/src/commands/usage.rs

@@ -35,18 +35,26 @@ pub fn get_usage_trends(
 #[tauri::command]
 pub fn get_provider_stats(
     state: State<'_, AppState>,
+    start_date: Option<i64>,
+    end_date: Option<i64>,
     app_type: Option<String>,
 ) -> Result<Vec<ProviderStats>, AppError> {
-    state.db.get_provider_stats(app_type.as_deref())
+    state
+        .db
+        .get_provider_stats(start_date, end_date, app_type.as_deref())
 }
 
 /// 获取模型统计
 #[tauri::command]
 pub fn get_model_stats(
     state: State<'_, AppState>,
+    start_date: Option<i64>,
+    end_date: Option<i64>,
     app_type: Option<String>,
 ) -> Result<Vec<ModelStats>, AppError> {
-    state.db.get_model_stats(app_type.as_deref())
+    state
+        .db
+        .get_model_stats(start_date, end_date, app_type.as_deref())
 }
 
 /// 获取请求日志列表

src-tauri/src/database/dao/usage_rollup.rs

@@ -4,13 +4,61 @@
 
 use crate::database::{lock_conn, Database};
 use crate::error::AppError;
+use chrono::{Duration, Local, TimeZone};
+
+/// Compute the rollup/prune cutoff aligned to a local-day boundary.
+///
+/// Anything strictly older than the returned timestamp will be aggregated into
+/// `usage_daily_rollups` and deleted from `proxy_request_logs`. Aligning to the
+/// next local midnight after `(now - retain_days)` guarantees that the youngest
+/// rollup row always represents a *complete* local day. Without this alignment
+/// the cutoff falls mid-day, leaving the day half-rolled-up and half-pruned —
+/// which would silently under-count any range query that touches that day
+/// after `compute_rollup_date_bounds` trims partial-coverage rollup days.
+fn compute_local_midnight_cutoff(
+    now: chrono::DateTime<Local>,
+    retain_days: i64,
+) -> Result<i64, AppError> {
+    let target_day = now
+        .checked_sub_signed(Duration::days(retain_days))
+        .ok_or_else(|| AppError::Database("rollup cutoff overflow".to_string()))?
+        .date_naive();
+
+    // Use the *next* day's midnight so anything before it has fully been bucketed.
+    let next_day = target_day
+        .succ_opt()
+        .ok_or_else(|| AppError::Database("rollup cutoff next-day overflow".to_string()))?;
+    let naive_midnight = next_day
+        .and_hms_opt(0, 0, 0)
+        .ok_or_else(|| AppError::Database("rollup cutoff midnight overflow".to_string()))?;
+
+    let local_dt = match Local.from_local_datetime(&naive_midnight) {
+        chrono::LocalResult::Single(dt) => dt,
+        chrono::LocalResult::Ambiguous(earliest, _) => earliest,
+        chrono::LocalResult::None => {
+            // DST gap: fall back to one hour later, which always exists.
+            let bumped = naive_midnight + Duration::hours(1);
+            match Local.from_local_datetime(&bumped) {
+                chrono::LocalResult::Single(dt) => dt,
+                chrono::LocalResult::Ambiguous(earliest, _) => earliest,
+                chrono::LocalResult::None => {
+                    return Err(AppError::Database(
+                        "rollup cutoff fell into DST gap".to_string(),
+                    ))
+                }
+            }
+        }
+    };
+
+    Ok(local_dt.timestamp())
+}
 
 impl Database {
     /// Aggregate proxy_request_logs older than `retain_days` into usage_daily_rollups,
     /// then delete the aggregated detail rows.
     /// Returns the number of deleted detail rows.
     pub fn rollup_and_prune(&self, retain_days: i64) -> Result<u64, AppError> {
-        let cutoff = chrono::Utc::now().timestamp() - retain_days * 86400;
+        let cutoff = compute_local_midnight_cutoff(Local::now(), retain_days)?;
         let conn = lock_conn!(self.conn);
 
         // Check if there are any rows to process
@@ -110,8 +158,49 @@ impl Database {
 
 #[cfg(test)]
 mod tests {
+    use super::compute_local_midnight_cutoff;
     use crate::database::Database;
     use crate::error::AppError;
+    use chrono::{Local, TimeZone};
+
+    fn local_dt(
+        year: i32,
+        month: u32,
+        day: u32,
+        hour: u32,
+        minute: u32,
+        second: u32,
+    ) -> chrono::DateTime<Local> {
+        match Local.with_ymd_and_hms(year, month, day, hour, minute, second) {
+            chrono::LocalResult::Single(dt) => dt,
+            chrono::LocalResult::Ambiguous(earliest, _) => earliest,
+            chrono::LocalResult::None => panic!("invalid local datetime in test fixture"),
+        }
+    }
+
+    #[test]
+    fn cutoff_is_aligned_to_local_midnight_after_target_day() -> Result<(), AppError> {
+        // now = 2026-04-16 14:32:17 local; retain_days = 30
+        // target day = 2026-03-17; cutoff should be 2026-03-18 00:00 local.
+        let now = local_dt(2026, 4, 16, 14, 32, 17);
+        let cutoff_ts = compute_local_midnight_cutoff(now, 30)?;
+        let cutoff_dt = Local.timestamp_opt(cutoff_ts, 0).single().unwrap();
+        let expected = local_dt(2026, 3, 18, 0, 0, 0);
+        assert_eq!(cutoff_dt, expected);
+        Ok(())
+    }
+
+    #[test]
+    fn cutoff_at_local_midnight_now_still_lands_on_midnight() -> Result<(), AppError> {
+        // If `now` is itself local midnight, the math should not introduce drift.
+        let now = local_dt(2026, 4, 16, 0, 0, 0);
+        let cutoff_ts = compute_local_midnight_cutoff(now, 7)?;
+        let cutoff_dt = Local.timestamp_opt(cutoff_ts, 0).single().unwrap();
+        // (2026-04-16 - 7d) = 2026-04-09; cutoff = 2026-04-10 00:00 local.
+        let expected = local_dt(2026, 4, 10, 0, 0, 0);
+        assert_eq!(cutoff_dt, expected);
+        Ok(())
+    }
 
     #[test]
     fn test_rollup_and_prune() -> Result<(), AppError> {

src/components/usage/ModelStatsTable.tsx

@@ -9,18 +9,21 @@ import {
 } from "@/components/ui/table";
 import { useModelStats } from "@/lib/query/usage";
 import { fmtUsd } from "./format";
+import type { UsageRangeSelection } from "@/types/usage";
 
 interface ModelStatsTableProps {
+  range: UsageRangeSelection;
   appType?: string;
   refreshIntervalMs: number;
 }
 
 export function ModelStatsTable({
+  range,
   appType,
   refreshIntervalMs,
 }: ModelStatsTableProps) {
   const { t } = useTranslation();
-  const { data: stats, isLoading } = useModelStats(appType, {
+  const { data: stats, isLoading } = useModelStats(range, appType, {
     refetchInterval: refreshIntervalMs > 0 ? refreshIntervalMs : false,
   });
 

src/components/usage/ProviderStatsTable.tsx

@@ -9,18 +9,21 @@ import {
 } from "@/components/ui/table";
 import { useProviderStats } from "@/lib/query/usage";
 import { fmtUsd } from "./format";
+import type { UsageRangeSelection } from "@/types/usage";
 
 interface ProviderStatsTableProps {
+  range: UsageRangeSelection;
   appType?: string;
   refreshIntervalMs: number;
 }
 
 export function ProviderStatsTable({
+  range,
   appType,
   refreshIntervalMs,
 }: ProviderStatsTableProps) {
   const { t } = useTranslation();
-  const { data: stats, isLoading } = useProviderStats(appType, {
+  const { data: stats, isLoading } = useProviderStats(range, appType, {
     refetchInterval: refreshIntervalMs > 0 ? refreshIntervalMs : false,
   });
 

src/components/usage/RequestLogTable.tsx

@@ -17,10 +17,10 @@ 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 { ChevronLeft, ChevronRight, Search, X } from "lucide-react";
+import { UsageDateRangePicker } from "./UsageDateRangePicker";
 import {
   fmtInt,
   fmtUsd,
@@ -29,53 +29,28 @@ import {
 } from "./format";
 
 interface RequestLogTableProps {
+  range: UsageRangeSelection;
+  rangeLabel: string;
   appType?: string;
   refreshIntervalMs: number;
-  timeRange?: "1d" | "7d" | "30d";
+  onRangeChange?: (range: UsageRangeSelection) => void;
 }
 
-const ONE_DAY_SECONDS = 24 * 60 * 60;
-const MAX_FIXED_RANGE_SECONDS = 30 * ONE_DAY_SECONDS;
-
-const TIME_RANGE_SECONDS: Record<string, number> = {
-  "1d": ONE_DAY_SECONDS,
-  "7d": 7 * ONE_DAY_SECONDS,
-  "30d": 30 * ONE_DAY_SECONDS,
-};
-
-type TimeMode = "rolling" | "fixed";
-
 export function RequestLogTable({
+  range,
+  rangeLabel,
   appType: dashboardAppType,
   refreshIntervalMs,
-  timeRange = "1d",
+  onRangeChange,
 }: RequestLogTableProps) {
   const { t, i18n } = useTranslation();
-  const queryClient = useQueryClient();
-
-  const rollingWindowSeconds = TIME_RANGE_SECONDS[timeRange] ?? ONE_DAY_SECONDS;
-
-  const getRollingRange = () => {
-    const now = Math.floor(Date.now() / 1000);
-    return { startDate: now - rollingWindowSeconds, 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 [pageInput, setPageInput] = useState("");
   const pageSize = 20;
-  const [validationError, setValidationError] = useState<string | null>(null);
 
-  // Reset page when the dashboard time range changes
-  useEffect(() => {
-    setPage(0);
-  }, [timeRange]);
-
-  // 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 }
@@ -83,8 +58,7 @@ export function RequestLogTable({
 
   const { data: result, isLoading } = useRequestLogs({
     filters: effectiveFilters,
-    timeMode: appliedTimeMode,
-    rollingWindowSeconds,
+    range,
     page,
     pageSize,
     options: {
@@ -96,56 +70,41 @@ export function RequestLogTable({
   const total = result?.total ?? 0;
   const totalPages = Math.ceil(total / pageSize);
 
+  useEffect(() => {
+    setPage(0);
+  }, [
+    dashboardAppType,
+    range.customEndDate,
+    range.customStartDate,
+    range.preset,
+  ]);
+
   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 applySelectFilter = <K extends keyof LogFilters>(
+    key: K,
+    value: LogFilters[K],
+  ) => {
+    setDraftFilters((prev) => ({
+      ...prev,
+      [key]: value,
+    }));
+    setAppliedFilters((prev) => ({
+      ...prev,
+      [key]: value,
+    }));
+    setPage(0);
+  };
+
   const handleGoToPage = () => {
     const trimmed = pageInput.trim();
     if (!/^\d+$/.test(trimmed)) return;
@@ -155,58 +114,14 @@ export function RequestLogTable({
     setPageInput("");
   };
 
-  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 */}
           <Select
             value={
               dashboardAppTypeActive
@@ -214,14 +129,11 @@ export function RequestLogTable({
                 : draftFilters.appType || "all"
             }
             onValueChange={(v) =>
-              setDraftFilters({
-                ...draftFilters,
-                appType: v === "all" ? undefined : v,
-              })
+              applySelectFilter("appType", v === "all" ? undefined : v)
             }
             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>
@@ -232,51 +144,57 @@ export function RequestLogTable({
             </SelectContent>
           </Select>
 
+          {/* Status code */}
           <Select
             value={draftFilters.statusCode?.toString() || "all"}
             onValueChange={(v) =>
-              setDraftFilters({
-                ...draftFilters,
-                statusCode:
-                  v === "all"
-                    ? undefined
-                    : Number.isFinite(Number.parseInt(v, 10))
-                      ? Number.parseInt(v, 10)
-                      : undefined,
-              })
+              applySelectFilter(
+                "statusCode",
+                v === "all"
+                  ? undefined
+                  : Number.isFinite(Number.parseInt(v, 10))
+                    ? Number.parseInt(v, 10)
+                    : undefined,
+              )
             }
           >
-            <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({
@@ -284,89 +202,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>
-          </div>
-        </div>
+          {onRangeChange && (
+            <UsageDateRangePicker
+              selection={range}
+              triggerLabel={rangeLabel}
+              onApply={onRangeChange}
+            />
+          )}
 
-        {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 ? (
@@ -377,40 +246,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>
@@ -419,7 +279,7 @@ export function RequestLogTable({
                 {logs.length === 0 ? (
                   <TableRow>
                     <TableCell
-                      colSpan={12}
+                      colSpan={9}
                       className="text-center text-muted-foreground"
                     >
                       {t("usage.noData")}
@@ -428,140 +288,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>
                   ))
@@ -570,89 +386,83 @@ 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 })}
-              </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)[] = [];
-                  // 3 head + 3 tail + 3 neighborhood = 9 max distinct pages
-                  if (totalPages <= 9) {
-                    for (let i = 0; i < totalPages; i++) pages.push(i);
-                  } else {
-                    const pageSet = new Set<number>();
-                    for (let i = 0; i < 3; i++) pageSet.add(i);
-                    for (let i = totalPages - 3; i < totalPages; i++)
-                      pageSet.add(i);
-                    for (
-                      let i = Math.max(0, page - 1);
-                      i <= Math.min(totalPages - 1, page + 1);
-                      i++
-                    )
-                      pageSet.add(i);
-                    const sorted = Array.from(pageSet).sort((a, b) => a - b);
-                    for (let i = 0; i < sorted.length; i++) {
-                      if (i > 0 && sorted[i] - sorted[i - 1] > 1) {
-                        pages.push(`ellipsis-${i}`);
-                      }
-                      pages.push(sorted[i]);
+          <div className="flex items-center justify-between text-sm text-muted-foreground">
+            <span>{t("usage.totalRecords", { total })}</span>
+            <div className="flex items-center gap-1">
+              <Button
+                size="sm"
+                variant="outline"
+                disabled={page === 0}
+                onClick={() => setPage((p) => Math.max(0, p - 1))}
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              {(() => {
+                const pages: (number | string)[] = [];
+                if (totalPages <= 9) {
+                  for (let i = 0; i < totalPages; i++) pages.push(i);
+                } else {
+                  const pageSet = new Set<number>();
+                  for (let i = 0; i < 3; i++) pageSet.add(i);
+                  for (let i = totalPages - 3; i < totalPages; i++)
+                    pageSet.add(i);
+                  for (
+                    let i = Math.max(0, page - 1);
+                    i <= Math.min(totalPages - 1, page + 1);
+                    i++
+                  )
+                    pageSet.add(i);
+                  const sorted = Array.from(pageSet).sort((a, b) => a - b);
+                  for (let i = 0; i < sorted.length; i++) {
+                    if (i > 0 && sorted[i] - sorted[i - 1] > 1) {
+                      pages.push(`ellipsis-${i}`);
                     }
+                    pages.push(sorted[i]);
                   }
-                  return pages.map((p) =>
-                    typeof p === "string" ? (
-                      <span key={p} 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" />
+                }
+                return pages.map((p) =>
+                  typeof p === "string" ? (
+                    <span key={p} 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
+                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 className="flex items-center gap-1 ml-2">
+                <Input
+                  type="text"
+                  value={pageInput}
+                  onChange={(e) => setPageInput(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") handleGoToPage();
+                  }}
+                  placeholder={t("usage.pageInputPlaceholder")}
+                  className="h-8 w-16 text-center text-xs"
+                />
+                <Button variant="outline" size="sm" onClick={handleGoToPage}>
+                  {t("usage.goToPage")}
                 </Button>
-                <div className="flex items-center gap-1 ml-2">
-                  <Input
-                    type="text"
-                    value={pageInput}
-                    onChange={(e) => setPageInput(e.target.value)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") handleGoToPage();
-                    }}
-                    placeholder={t("usage.pageInputPlaceholder")}
-                    className="h-8 w-16 text-center text-xs"
-                  />
-                  <Button variant="outline" size="sm" onClick={handleGoToPage}>
-                    {t("usage.goToPage")}
-                  </Button>
-                </div>
               </div>
             </div>
-          )}
+          </div>
         </>
       )}
     </div>

src/components/usage/UsageDashboard.tsx

@@ -1,12 +1,11 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { UsageSummaryCards } from "./UsageSummaryCards";
 import { UsageTrendChart } from "./UsageTrendChart";
 import { RequestLogTable } from "./RequestLogTable";
 import { ProviderStatsTable } from "./ProviderStatsTable";
 import { ModelStatsTable } from "./ModelStatsTable";
-import type { AppTypeFilter, TimeRange } from "@/types/usage";
+import type { AppTypeFilter, UsageRangeSelection } from "@/types/usage";
 import { motion } from "framer-motion";
 import {
   BarChart3,
@@ -26,6 +25,10 @@ import {
 } from "@/components/ui/accordion";
 import { PricingConfigPanel } from "@/components/usage/PricingConfigPanel";
 import { cn } from "@/lib/utils";
+import { getLocaleFromLanguage } from "./format";
+import { getUsageRangePresetLabel, resolveUsageRange } from "@/lib/usageRange";
+import { UsageDateRangePicker } from "./UsageDateRangePicker";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 const APP_FILTER_OPTIONS: AppTypeFilter[] = [
   "all",
@@ -35,9 +38,9 @@ const APP_FILTER_OPTIONS: AppTypeFilter[] = [
 ];
 
 export function UsageDashboard() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const queryClient = useQueryClient();
-  const [timeRange, setTimeRange] = useState<TimeRange>("1d");
+  const [range, setRange] = useState<UsageRangeSelection>({ preset: "today" });
   const [appType, setAppType] = useState<AppTypeFilter>("all");
   const [refreshIntervalMs, setRefreshIntervalMs] = useState(30000);
 
@@ -46,14 +49,25 @@ export function UsageDashboard() {
     const currentIndex = refreshIntervalOptionsMs.indexOf(
       refreshIntervalMs as (typeof refreshIntervalOptionsMs)[number],
     );
-    const safeIndex = currentIndex >= 0 ? currentIndex : 3; // default 30s
+    const safeIndex = currentIndex >= 0 ? currentIndex : 3;
     const nextIndex = (safeIndex + 1) % refreshIntervalOptionsMs.length;
     const next = refreshIntervalOptionsMs[nextIndex];
     setRefreshIntervalMs(next);
     queryClient.invalidateQueries({ queryKey: usageKeys.all });
   };
 
-  const days = timeRange === "1d" ? 1 : timeRange === "7d" ? 7 : 30;
+  const language = i18n.resolvedLanguage || i18n.language || "en";
+  const locale = getLocaleFromLanguage(language);
+  const resolvedRange = useMemo(() => resolveUsageRange(range), [range]);
+  const rangeLabel = useMemo(() => {
+    if (range.preset !== "custom") {
+      return getUsageRangePresetLabel(range.preset, t);
+    }
+
+    return `${new Date(resolvedRange.startDate * 1000).toLocaleString(locale)} - ${new Date(
+      resolvedRange.endDate * 1000,
+    ).toLocaleString(locale)}`;
+  }, [locale, range, resolvedRange.endDate, resolvedRange.startDate, t]);
 
   return (
     <motion.div
@@ -62,82 +76,66 @@ export function UsageDashboard() {
       transition={{ duration: 0.4 }}
       className="space-y-8 pb-8"
     >
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-        <div className="flex flex-col gap-1">
-          <h2 className="text-2xl font-bold">{t("usage.title")}</h2>
-          <p className="text-sm text-muted-foreground">{t("usage.subtitle")}</p>
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+          <div className="flex flex-col gap-1">
+            <h2 className="text-2xl font-bold">{t("usage.title")}</h2>
+            <p className="text-sm text-muted-foreground">
+              {t("usage.subtitle")}
+            </p>
+          </div>
         </div>
 
-        <Tabs
-          value={timeRange}
-          onValueChange={(v) => setTimeRange(v as TimeRange)}
-          className="w-full sm:w-auto"
-        >
-          <div className="flex w-full sm:w-auto items-center gap-1">
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="h-10 px-2 text-xs text-muted-foreground"
-              title={t("common.refresh", "刷新")}
-              onClick={changeRefreshInterval}
-            >
-              <RefreshCw className="mr-1 h-3.5 w-3.5" />
-              {refreshIntervalMs > 0 ? `${refreshIntervalMs / 1000}s` : "--"}
-            </Button>
-            <TabsList className="flex w-full sm:w-auto bg-card/60 border border-border/50 backdrop-blur-sm shadow-sm h-10 p-1">
-              <TabsTrigger
-                value="1d"
-                className="flex-1 sm:flex-none sm:px-6 data-[state=active]:bg-primary/10 data-[state=active]:text-primary hover:text-primary transition-colors"
+        <div className="rounded-xl border border-border/50 bg-card/40 backdrop-blur-sm p-4">
+          <div className="flex flex-wrap items-center gap-1.5">
+            {APP_FILTER_OPTIONS.map((type) => (
+              <button
+                key={type}
+                type="button"
+                onClick={() => setAppType(type)}
+                className={cn(
+                  "px-4 py-1.5 rounded-lg text-sm font-medium transition-all",
+                  appType === type
+                    ? "bg-primary/10 text-primary shadow-sm border border-primary/20"
+                    : "text-muted-foreground hover:text-primary hover:bg-muted/50 border border-transparent",
+                )}
               >
-                {t("usage.today")}
-              </TabsTrigger>
-              <TabsTrigger
-                value="7d"
-                className="flex-1 sm:flex-none sm:px-6 data-[state=active]:bg-primary/10 data-[state=active]:text-primary hover:text-primary transition-colors"
-              >
-                {t("usage.last7days")}
-              </TabsTrigger>
-              <TabsTrigger
-                value="30d"
-                className="flex-1 sm:flex-none sm:px-6 data-[state=active]:bg-primary/10 data-[state=active]:text-primary hover:text-primary transition-colors"
-              >
-                {t("usage.last30days")}
-              </TabsTrigger>
-            </TabsList>
-          </div>
-        </Tabs>
-      </div>
+                {t(`usage.appFilter.${type}`)}
+              </button>
+            ))}
 
-      {/* App type filter bar (replaces DataSourceBar) */}
-      <div className="rounded-xl border border-border/50 bg-card/40 backdrop-blur-sm p-4 space-y-3">
-        <div className="flex flex-wrap items-center gap-1.5">
-          {APP_FILTER_OPTIONS.map((type) => (
-            <button
-              key={type}
-              type="button"
-              onClick={() => setAppType(type)}
-              className={cn(
-                "px-4 py-1.5 rounded-lg text-sm font-medium transition-all",
-                appType === type
-                  ? "bg-primary/10 text-primary shadow-sm border border-primary/20"
-                  : "text-muted-foreground hover:text-primary hover:bg-muted/50 border border-transparent",
-              )}
-            >
-              {t(`usage.appFilter.${type}`)}
-            </button>
-          ))}
+            <div className="ml-auto flex items-center gap-2">
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-8 px-2 text-xs text-muted-foreground"
+                title={t("common.refresh", "刷新")}
+                onClick={changeRefreshInterval}
+              >
+                <RefreshCw className="mr-1 h-3.5 w-3.5" />
+                {refreshIntervalMs > 0 ? `${refreshIntervalMs / 1000}s` : "--"}
+              </Button>
+
+              <UsageDateRangePicker
+                selection={range}
+                triggerLabel={rangeLabel}
+                onApply={(nextRange) => setRange(nextRange)}
+              />
+            </div>
+          </div>
         </div>
       </div>
 
       <UsageSummaryCards
-        days={days}
+        range={range}
         appType={appType}
         refreshIntervalMs={refreshIntervalMs}
       />
 
       <UsageTrendChart
-        days={days}
+        range={range}
+        rangeLabel={rangeLabel}
         appType={appType}
         refreshIntervalMs={refreshIntervalMs}
       />
@@ -168,14 +166,17 @@ export function UsageDashboard() {
           >
             <TabsContent value="logs" className="mt-0">
               <RequestLogTable
+                range={range}
+                rangeLabel={rangeLabel}
                 appType={appType}
                 refreshIntervalMs={refreshIntervalMs}
-                timeRange={timeRange}
+                onRangeChange={setRange}
               />
             </TabsContent>
 
             <TabsContent value="providers" className="mt-0">
               <ProviderStatsTable
+                range={range}
                 appType={appType}
                 refreshIntervalMs={refreshIntervalMs}
               />
@@ -183,6 +184,7 @@ export function UsageDashboard() {
 
             <TabsContent value="models" className="mt-0">
               <ModelStatsTable
+                range={range}
                 appType={appType}
                 refreshIntervalMs={refreshIntervalMs}
               />
@@ -191,7 +193,6 @@ export function UsageDashboard() {
         </Tabs>
       </div>
 
-      {/* Pricing Configuration */}
       <Accordion type="multiple" defaultValue={[]} className="w-full space-y-4">
         <AccordionItem
           value="pricing"

src/components/usage/UsageDateRangePicker.tsx

@@ -0,0 +1,439 @@
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { CalendarDays, ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { getUsageRangePresetLabel, resolveUsageRange } from "@/lib/usageRange";
+import { getLocaleFromLanguage } from "./format";
+import type { UsageRangePreset, UsageRangeSelection } from "@/types/usage";
+
+type DraftField = "start" | "end";
+
+const PRESETS: UsageRangePreset[] = ["today", "1d", "7d", "14d", "30d"];
+
+interface UsageDateRangePickerProps {
+  selection: UsageRangeSelection;
+  onApply: (selection: UsageRangeSelection) => void;
+  triggerLabel: string;
+}
+
+/* ── helpers ── */
+
+function startOfDay(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+function toTs(d: Date): number {
+  return Math.floor(d.getTime() / 1000);
+}
+
+function fromTs(ts: number): Date {
+  return new Date(ts * 1000);
+}
+
+function fmtDate(ts: number): string {
+  const d = fromTs(ts);
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+
+function fmtTime(ts: number): string {
+  const d = fromTs(ts);
+  return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+}
+
+function parseDateInput(ts: number, value: string): number {
+  const [y, m, d] = value.split("-").map(Number);
+  if (!Number.isFinite(y) || !Number.isFinite(m) || !Number.isFinite(d))
+    return ts;
+  const base = fromTs(ts);
+  return toTs(new Date(y, m - 1, d, base.getHours(), base.getMinutes()));
+}
+
+function parseTimeInput(ts: number, value: string): number {
+  const [h, min] = value.split(":").map(Number);
+  if (!Number.isFinite(h) || !Number.isFinite(min)) return ts;
+  const base = fromTs(ts);
+  return toTs(
+    new Date(base.getFullYear(), base.getMonth(), base.getDate(), h, min),
+  );
+}
+
+function setDateKeepTime(ts: number, day: Date): number {
+  const base = fromTs(ts);
+  return toTs(
+    new Date(
+      day.getFullYear(),
+      day.getMonth(),
+      day.getDate(),
+      base.getHours(),
+      base.getMinutes(),
+    ),
+  );
+}
+
+function getCalendarDays(month: Date): Date[] {
+  const first = new Date(month.getFullYear(), month.getMonth(), 1);
+  const gridStart = new Date(first);
+  gridStart.setDate(first.getDate() - first.getDay());
+  return Array.from({ length: 42 }, (_, i) => {
+    const d = new Date(gridStart);
+    d.setDate(gridStart.getDate() + i);
+    return d;
+  });
+}
+
+/* ── component ── */
+
+export function UsageDateRangePicker({
+  selection,
+  onApply,
+  triggerLabel,
+}: UsageDateRangePickerProps) {
+  const { t, i18n } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [activeField, setActiveField] = useState<DraftField>("start");
+  const resolvedRange = useMemo(
+    () => resolveUsageRange(selection),
+    [selection],
+  );
+  const [draftStart, setDraftStart] = useState(resolvedRange.startDate);
+  const [draftEnd, setDraftEnd] = useState(resolvedRange.endDate);
+  const [displayMonth, setDisplayMonth] = useState(
+    () =>
+      new Date(
+        fromTs(resolvedRange.startDate).getFullYear(),
+        fromTs(resolvedRange.startDate).getMonth(),
+        1,
+      ),
+  );
+  const [error, setError] = useState<string | null>(null);
+
+  const language = i18n.resolvedLanguage || i18n.language || "en";
+  const locale = getLocaleFromLanguage(language);
+
+  // Reset draft when popover opens
+  useEffect(() => {
+    if (!open) return;
+    const r = resolveUsageRange(selection);
+    setDraftStart(r.startDate);
+    setDraftEnd(r.endDate);
+    setDisplayMonth(
+      new Date(
+        fromTs(r.startDate).getFullYear(),
+        fromTs(r.startDate).getMonth(),
+        1,
+      ),
+    );
+    setActiveField("start");
+    setError(null);
+  }, [open, selection]);
+
+  const calendarDays = useMemo(
+    () => getCalendarDays(displayMonth),
+    [displayMonth],
+  );
+
+  const weekdayLabels = useMemo(
+    () =>
+      Array.from({ length: 7 }, (_, i) =>
+        new Intl.DateTimeFormat(locale, { weekday: "narrow" }).format(
+          new Date(2024, 0, 7 + i),
+        ),
+      ),
+    [locale],
+  );
+
+  const startDay = fromTs(draftStart);
+  const endDay = fromTs(draftEnd);
+  const today = new Date();
+
+  /* Pick a date from the calendar */
+  const handleDatePick = (day: Date) => {
+    setError(null);
+    const nextTs = setDateKeepTime(
+      activeField === "start" ? draftStart : draftEnd,
+      day,
+    );
+
+    if (activeField === "start") {
+      setDraftStart(nextTs);
+      // Auto-swap if start > end
+      if (nextTs > draftEnd) {
+        setDraftEnd(nextTs);
+      }
+      // Auto-advance to end field
+      setActiveField("end");
+    } else {
+      // If picked end < start, treat as new start and auto-advance
+      if (nextTs < draftStart) {
+        setDraftStart(nextTs);
+        setActiveField("end");
+      } else {
+        setDraftEnd(nextTs);
+      }
+    }
+
+    // Navigate calendar if the day is outside the displayed month
+    if (
+      day.getMonth() !== displayMonth.getMonth() ||
+      day.getFullYear() !== displayMonth.getFullYear()
+    ) {
+      setDisplayMonth(new Date(day.getFullYear(), day.getMonth(), 1));
+    }
+  };
+
+  const handleApply = () => {
+    setError(null);
+    if (draftStart > draftEnd) {
+      setError(t("usage.invalidTimeRangeOrder", "开始时间不能晚于结束时间"));
+      return;
+    }
+    onApply({
+      preset: "custom",
+      customStartDate: draftStart,
+      customEndDate: draftEnd,
+    });
+    setOpen(false);
+  };
+
+  const goToToday = () => {
+    setDisplayMonth(new Date(today.getFullYear(), today.getMonth(), 1));
+  };
+
+  /* ── Field card (start / end) ── */
+  const renderField = (field: DraftField) => {
+    const isActive = activeField === field;
+    const ts = field === "start" ? draftStart : draftEnd;
+    const setTs = field === "start" ? setDraftStart : setDraftEnd;
+    const label =
+      field === "start"
+        ? t("usage.startTime", "开始时间")
+        : t("usage.endTime", "结束时间");
+
+    return (
+      <div
+        className={cn(
+          "rounded-lg border px-3 py-2 cursor-pointer transition-all",
+          isActive
+            ? "border-primary ring-1 ring-primary/30 bg-primary/5"
+            : "border-border/50 hover:border-border",
+        )}
+        onClick={() => setActiveField(field)}
+      >
+        <div className="mb-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+          {label}
+        </div>
+        <div className="flex items-center gap-1.5">
+          <Input
+            type="date"
+            className="h-7 flex-1 border-0 bg-transparent p-0 text-sm shadow-none focus-visible:ring-0"
+            value={fmtDate(ts)}
+            onChange={(e) => {
+              const next = parseDateInput(ts, e.target.value);
+              setTs(next);
+              const d = fromTs(next);
+              setDisplayMonth(new Date(d.getFullYear(), d.getMonth(), 1));
+              setError(null);
+            }}
+            onFocus={() => setActiveField(field)}
+          />
+          <Input
+            type="time"
+            step={60}
+            className="h-7 w-[90px] flex-none border-0 bg-transparent p-0 text-sm shadow-none focus-visible:ring-0"
+            value={fmtTime(ts)}
+            onChange={(e) => {
+              setTs(parseTimeInput(ts, e.target.value));
+              setError(null);
+            }}
+            onFocus={() => setActiveField(field)}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant={selection.preset === "custom" ? "default" : "outline"}
+          className="justify-start gap-2"
+        >
+          <CalendarDays className="h-4 w-4" />
+          <span className="truncate">{triggerLabel}</span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-[340px] max-w-[calc(100vw-2rem)] p-3 sm:w-[620px]"
+        align="end"
+      >
+        {/* Preset shortcuts */}
+        <div className="flex flex-wrap gap-1.5 pb-2 border-b border-border/40">
+          {PRESETS.map((preset) => (
+            <Button
+              key={preset}
+              type="button"
+              size="sm"
+              variant={selection.preset === preset ? "default" : "outline"}
+              className="h-7 px-2.5 text-xs"
+              onClick={() => {
+                onApply({ preset });
+                setOpen(false);
+              }}
+            >
+              {getUsageRangePresetLabel(preset, t)}
+            </Button>
+          ))}
+        </div>
+
+        <div className="flex flex-col gap-3 sm:flex-row">
+          {/* Left: date fields */}
+          <div className="space-y-2 sm:w-[250px] sm:flex-none">
+            <p className="text-xs text-muted-foreground">
+              {t("usage.customRangeHint", "支持日期与时间，最长 30 天")}
+            </p>
+            {renderField("start")}
+            {renderField("end")}
+
+            {error && <p className="text-xs text-destructive">{error}</p>}
+
+            <div className="flex gap-2 pt-1">
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="flex-1"
+                onClick={() => setOpen(false)}
+              >
+                {t("common.cancel")}
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                className="flex-1"
+                onClick={handleApply}
+              >
+                {t("common.confirm")}
+              </Button>
+            </div>
+          </div>
+
+          {/* Right: calendar */}
+          <div className="rounded-lg border border-border/50 bg-muted/30 p-2.5 sm:min-w-0 sm:flex-1">
+            {/* Month navigation */}
+            <div className="flex items-center justify-between mb-1.5">
+              <Button
+                type="button"
+                size="icon"
+                variant="ghost"
+                className="h-7 w-7"
+                onClick={() =>
+                  setDisplayMonth(
+                    new Date(
+                      displayMonth.getFullYear(),
+                      displayMonth.getMonth() - 1,
+                      1,
+                    ),
+                  )
+                }
+              >
+                <ChevronLeft className="h-3.5 w-3.5" />
+              </Button>
+              <button
+                type="button"
+                className="text-sm font-medium hover:text-primary transition-colors"
+                onClick={goToToday}
+                title={t("usage.presetToday", { defaultValue: "当天" })}
+              >
+                {displayMonth.toLocaleDateString(locale, {
+                  year: "numeric",
+                  month: "long",
+                })}
+              </button>
+              <Button
+                type="button"
+                size="icon"
+                variant="ghost"
+                className="h-7 w-7"
+                onClick={() =>
+                  setDisplayMonth(
+                    new Date(
+                      displayMonth.getFullYear(),
+                      displayMonth.getMonth() + 1,
+                      1,
+                    ),
+                  )
+                }
+              >
+                <ChevronRight className="h-3.5 w-3.5" />
+              </Button>
+            </div>
+
+            {/* Weekday headers */}
+            <div className="grid grid-cols-7 text-center text-[11px] text-muted-foreground mb-0.5">
+              {weekdayLabels.map((label, i) => (
+                <div key={i} className="py-0.5">
+                  {label}
+                </div>
+              ))}
+            </div>
+
+            {/* Day grid */}
+            <div className="grid grid-cols-7 gap-px">
+              {calendarDays.map((day) => {
+                const isCurrentMonth =
+                  day.getMonth() === displayMonth.getMonth();
+                const isToday = isSameDay(day, today);
+                const isStart = isSameDay(day, startDay);
+                const isEnd = isSameDay(day, endDay);
+                const dayStart = startOfDay(day);
+                const inRange =
+                  dayStart >= startOfDay(startDay) &&
+                  dayStart <= startOfDay(endDay);
+                const isEndpoint = isStart || isEnd;
+
+                return (
+                  <button
+                    key={day.toISOString()}
+                    type="button"
+                    aria-label={day.toLocaleDateString(locale)}
+                    aria-current={isToday ? "date" : undefined}
+                    aria-pressed={isEndpoint}
+                    className={cn(
+                      "relative h-7 rounded text-xs transition-colors",
+                      !isCurrentMonth && "text-muted-foreground/30",
+                      isCurrentMonth && !inRange && "hover:bg-muted",
+                      inRange && !isEndpoint && "bg-primary/10 text-primary",
+                      isEndpoint &&
+                        "bg-primary text-primary-foreground font-medium",
+                      isToday && !isEndpoint && "ring-1 ring-primary/40",
+                    )}
+                    onClick={() => handleDatePick(day)}
+                  >
+                    {day.getDate()}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

src/components/usage/UsageSummaryCards.tsx

@@ -5,21 +5,22 @@ import { useUsageSummary } from "@/lib/query/usage";
 import { Activity, DollarSign, Layers, Database, Loader2 } from "lucide-react";
 import { motion } from "framer-motion";
 import { fmtUsd, parseFiniteNumber } from "./format";
+import type { UsageRangeSelection } from "@/types/usage";
 
 interface UsageSummaryCardsProps {
-  days: number;
+  range: UsageRangeSelection;
   appType?: string;
   refreshIntervalMs: number;
 }
 
 export function UsageSummaryCards({
-  days,
+  range,
   appType,
   refreshIntervalMs,
 }: UsageSummaryCardsProps) {
   const { t } = useTranslation();
 
-  const { data: summary, isLoading } = useUsageSummary(days, appType, {
+  const { data: summary, isLoading } = useUsageSummary(range, appType, {
     refetchInterval: refreshIntervalMs > 0 ? refreshIntervalMs : false,
   });
 

src/components/usage/UsageTrendChart.tsx

@@ -17,20 +17,25 @@ import {
   getLocaleFromLanguage,
   parseFiniteNumber,
 } from "./format";
+import { resolveUsageRange } from "@/lib/usageRange";
+import type { UsageRangeSelection } from "@/types/usage";
 
 interface UsageTrendChartProps {
-  days: number;
+  range: UsageRangeSelection;
+  rangeLabel: string;
   appType?: string;
   refreshIntervalMs: number;
 }
 
 export function UsageTrendChart({
-  days,
+  range,
+  rangeLabel,
   appType,
   refreshIntervalMs,
 }: UsageTrendChartProps) {
   const { t, i18n } = useTranslation();
-  const { data: trends, isLoading } = useUsageTrends(days, appType, {
+  const { startDate, endDate } = resolveUsageRange(range);
+  const { data: trends, isLoading } = useUsageTrends(range, appType, {
     refetchInterval: refreshIntervalMs > 0 ? refreshIntervalMs : false,
   });
 
@@ -42,7 +47,8 @@ export function UsageTrendChart({
     );
   }
 
-  const isToday = days === 1;
+  const durationSeconds = Math.max(endDate - startDate, 0);
+  const isHourly = durationSeconds <= 24 * 60 * 60;
   const language = i18n.resolvedLanguage || i18n.language || "en";
   const dateLocale = getLocaleFromLanguage(language);
   const chartData =
@@ -51,7 +57,7 @@ export function UsageTrendChart({
       const cost = parseFiniteNumber(stat.totalCost);
       return {
         rawDate: stat.date,
-        label: isToday
+        label: isHourly
           ? pointDate.toLocaleString(dateLocale, {
               month: "2-digit",
               day: "2-digit",
@@ -108,13 +114,7 @@ export function UsageTrendChart({
         <h3 className="text-lg font-semibold">
           {t("usage.trends", "使用趋势")}
         </h3>
-        <p className="text-sm text-muted-foreground">
-          {isToday
-            ? t("usage.rangeToday", "今天 (按小时)")
-            : days === 7
-              ? t("usage.rangeLast7Days", "过去 7 天")
-              : t("usage.rangeLast30Days", "过去 30 天")}
-        </p>
+        <p className="text-sm text-muted-foreground">{rangeLabel}</p>
       </div>
 
       <div className="h-[350px] w-full">

src/i18n/locales/en.json

@@ -1048,6 +1048,11 @@
     "today": "24 Hours",
     "last7days": "7 Days",
     "last30days": "30 Days",
+    "presetToday": "Today",
+    "preset1d": "1d",
+    "preset7d": "7d",
+    "preset14d": "14d",
+    "preset30d": "30d",
     "totalRequests": "Total Requests",
     "totalCost": "Total Cost",
     "cost": "Cost",
@@ -1139,6 +1144,10 @@
     "searchProviderPlaceholder": "Search provider...",
     "searchModelPlaceholder": "Search model...",
     "timeRange": "Time Range",
+    "customRange": "Calendar Filter",
+    "customRangeHint": "Supports both date and time",
+    "startTime": "Start Time",
+    "endTime": "End Time",
     "input": "Input",
     "output": "Output",
     "cacheWrite": "Creation",

src/i18n/locales/ja.json

@@ -1048,6 +1048,11 @@
     "today": "24時間",
     "last7days": "7日間",
     "last30days": "30日間",
+    "presetToday": "当日",
+    "preset1d": "1d",
+    "preset7d": "7d",
+    "preset14d": "14d",
+    "preset30d": "30d",
     "totalRequests": "総リクエスト数",
     "totalCost": "総コスト",
     "cost": "コスト",
@@ -1139,6 +1144,10 @@
     "searchProviderPlaceholder": "プロバイダーを検索...",
     "searchModelPlaceholder": "モデルを検索...",
     "timeRange": "期間",
+    "customRange": "カレンダーフィルター",
+    "customRangeHint": "日付と時刻の両方に対応",
+    "startTime": "開始時刻",
+    "endTime": "終了時刻",
     "input": "Input",
     "output": "Output",
     "cacheWrite": "作成",

src/i18n/locales/zh.json

@@ -1049,6 +1049,11 @@
     "today": "24小时",
     "last7days": "7天",
     "last30days": "30天",
+    "presetToday": "当天",
+    "preset1d": "1d",
+    "preset7d": "7d",
+    "preset14d": "14d",
+    "preset30d": "30d",
     "totalRequests": "总请求数",
     "totalCost": "总成本",
     "cost": "成本",
@@ -1140,6 +1145,10 @@
     "searchProviderPlaceholder": "搜索供应商...",
     "searchModelPlaceholder": "搜索模型...",
     "timeRange": "时间范围",
+    "customRange": "日历筛选",
+    "customRangeHint": "支持日期与时间",
+    "startTime": "开始时间",
+    "endTime": "结束时间",
     "input": "Input",
     "output": "Output",
     "cacheWrite": "创建",

src/lib/api/usage.ts

@@ -63,12 +63,20 @@ export const usageApi = {
     return invoke("get_usage_trends", { startDate, endDate, appType });
   },
 
-  getProviderStats: async (appType?: string): Promise<ProviderStats[]> => {
-    return invoke("get_provider_stats", { appType });
+  getProviderStats: async (
+    startDate?: number,
+    endDate?: number,
+    appType?: string,
+  ): Promise<ProviderStats[]> => {
+    return invoke("get_provider_stats", { startDate, endDate, appType });
   },
 
-  getModelStats: async (appType?: string): Promise<ModelStats[]> => {
-    return invoke("get_model_stats", { appType });
+  getModelStats: async (
+    startDate?: number,
+    endDate?: number,
+    appType?: string,
+  ): Promise<ModelStats[]> => {
+    return invoke("get_model_stats", { startDate, endDate, appType });
   },
 
   getRequestLogs: async (

src/lib/query/usage.ts

@@ -1,6 +1,7 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { usageApi } from "@/lib/api/usage";
-import type { LogFilters } from "@/types/usage";
+import { resolveUsageRange } from "@/lib/usageRange";
+import type { LogFilters, UsageRangeSelection } from "@/types/usage";
 
 const DEFAULT_REFETCH_INTERVAL_MS = 30000;
 
@@ -9,51 +10,94 @@ type UsageQueryOptions = {
   refetchIntervalInBackground?: boolean;
 };
 
-type RequestLogsTimeMode = "rolling" | "fixed";
-
 type RequestLogsQueryArgs = {
   filters: LogFilters;
-  timeMode: RequestLogsTimeMode;
+  range: UsageRangeSelection;
   page?: number;
   pageSize?: number;
-  rollingWindowSeconds?: number;
   options?: UsageQueryOptions;
 };
 
 type RequestLogsKey = {
-  timeMode: RequestLogsTimeMode;
-  rollingWindowSeconds?: number;
+  preset: UsageRangeSelection["preset"];
+  customStartDate?: number;
+  customEndDate?: number;
   appType?: string;
   providerName?: string;
   model?: string;
   statusCode?: number;
-  startDate?: number;
-  endDate?: number;
 };
 
 // Query keys
 export const usageKeys = {
   all: ["usage"] as const,
-  summary: (days: number, appType?: string) =>
-    [...usageKeys.all, "summary", days, appType ?? "all"] as const,
-  trends: (days: number, appType?: string) =>
-    [...usageKeys.all, "trends", days, appType ?? "all"] as const,
-  providerStats: (appType?: string) =>
-    [...usageKeys.all, "provider-stats", appType ?? "all"] as const,
-  modelStats: (appType?: string) =>
-    [...usageKeys.all, "model-stats", appType ?? "all"] as const,
+  summary: (
+    preset: UsageRangeSelection["preset"],
+    customStartDate: number | undefined,
+    customEndDate: number | undefined,
+    appType?: string,
+  ) =>
+    [
+      ...usageKeys.all,
+      "summary",
+      preset,
+      customStartDate ?? 0,
+      customEndDate ?? 0,
+      appType ?? "all",
+    ] as const,
+  trends: (
+    preset: UsageRangeSelection["preset"],
+    customStartDate: number | undefined,
+    customEndDate: number | undefined,
+    appType?: string,
+  ) =>
+    [
+      ...usageKeys.all,
+      "trends",
+      preset,
+      customStartDate ?? 0,
+      customEndDate ?? 0,
+      appType ?? "all",
+    ] as const,
+  providerStats: (
+    preset: UsageRangeSelection["preset"],
+    customStartDate: number | undefined,
+    customEndDate: number | undefined,
+    appType?: string,
+  ) =>
+    [
+      ...usageKeys.all,
+      "provider-stats",
+      preset,
+      customStartDate ?? 0,
+      customEndDate ?? 0,
+      appType ?? "all",
+    ] as const,
+  modelStats: (
+    preset: UsageRangeSelection["preset"],
+    customStartDate: number | undefined,
+    customEndDate: number | undefined,
+    appType?: string,
+  ) =>
+    [
+      ...usageKeys.all,
+      "model-stats",
+      preset,
+      customStartDate ?? 0,
+      customEndDate ?? 0,
+      appType ?? "all",
+    ] as const,
   logs: (key: RequestLogsKey, page: number, pageSize: number) =>
     [
       ...usageKeys.all,
       "logs",
-      key.timeMode,
-      key.rollingWindowSeconds ?? 0,
+      key.preset,
+      key.customStartDate ?? 0,
+      key.customEndDate ?? 0,
       key.appType ?? "",
       key.providerName ?? "",
       key.model ?? "",
       key.statusCode ?? -1,
-      key.startDate ?? 0,
-      key.endDate ?? 0,
       page,
       pageSize,
     ] as const,
@@ -64,23 +108,22 @@ export const usageKeys = {
     [...usageKeys.all, "limits", providerId, appType] as const,
 };
 
-const getWindow = (days: number) => {
-  const endDate = Math.floor(Date.now() / 1000);
-  const startDate = endDate - days * 24 * 60 * 60;
-  return { startDate, endDate };
-};
-
 // Hooks
 export function useUsageSummary(
-  days: number,
+  range: UsageRangeSelection,
   appType?: string,
   options?: UsageQueryOptions,
 ) {
   const effectiveAppType = appType === "all" ? undefined : appType;
   return useQuery({
-    queryKey: usageKeys.summary(days, appType),
+    queryKey: usageKeys.summary(
+      range.preset,
+      range.customStartDate,
+      range.customEndDate,
+      appType,
+    ),
     queryFn: () => {
-      const { startDate, endDate } = getWindow(days);
+      const { startDate, endDate } = resolveUsageRange(range);
       return usageApi.getUsageSummary(startDate, endDate, effectiveAppType);
     },
     refetchInterval: options?.refetchInterval ?? DEFAULT_REFETCH_INTERVAL_MS,
@@ -89,15 +132,20 @@ export function useUsageSummary(
 }
 
 export function useUsageTrends(
-  days: number,
+  range: UsageRangeSelection,
   appType?: string,
   options?: UsageQueryOptions,
 ) {
   const effectiveAppType = appType === "all" ? undefined : appType;
   return useQuery({
-    queryKey: usageKeys.trends(days, appType),
+    queryKey: usageKeys.trends(
+      range.preset,
+      range.customStartDate,
+      range.customEndDate,
+      appType,
+    ),
     queryFn: () => {
-      const { startDate, endDate } = getWindow(days);
+      const { startDate, endDate } = resolveUsageRange(range);
       return usageApi.getUsageTrends(startDate, endDate, effectiveAppType);
     },
     refetchInterval: options?.refetchInterval ?? DEFAULT_REFETCH_INTERVAL_MS,
@@ -106,61 +154,70 @@ export function useUsageTrends(
 }
 
 export function useProviderStats(
+  range: UsageRangeSelection,
   appType?: string,
   options?: UsageQueryOptions,
 ) {
   const effectiveAppType = appType === "all" ? undefined : appType;
   return useQuery({
-    queryKey: usageKeys.providerStats(appType),
-    queryFn: () => usageApi.getProviderStats(effectiveAppType),
+    queryKey: usageKeys.providerStats(
+      range.preset,
+      range.customStartDate,
+      range.customEndDate,
+      appType,
+    ),
+    queryFn: () => {
+      const { startDate, endDate } = resolveUsageRange(range);
+      return usageApi.getProviderStats(startDate, endDate, effectiveAppType);
+    },
     refetchInterval: options?.refetchInterval ?? DEFAULT_REFETCH_INTERVAL_MS,
     refetchIntervalInBackground: options?.refetchIntervalInBackground ?? false,
   });
 }
 
-export function useModelStats(appType?: string, options?: UsageQueryOptions) {
+export function useModelStats(
+  range: UsageRangeSelection,
+  appType?: string,
+  options?: UsageQueryOptions,
+) {
   const effectiveAppType = appType === "all" ? undefined : appType;
   return useQuery({
-    queryKey: usageKeys.modelStats(appType),
-    queryFn: () => usageApi.getModelStats(effectiveAppType),
+    queryKey: usageKeys.modelStats(
+      range.preset,
+      range.customStartDate,
+      range.customEndDate,
+      appType,
+    ),
+    queryFn: () => {
+      const { startDate, endDate } = resolveUsageRange(range);
+      return usageApi.getModelStats(startDate, endDate, effectiveAppType);
+    },
     refetchInterval: options?.refetchInterval ?? DEFAULT_REFETCH_INTERVAL_MS,
     refetchIntervalInBackground: options?.refetchIntervalInBackground ?? false,
   });
 }
 
-const getRollingRange = (windowSeconds: number) => {
-  const endDate = Math.floor(Date.now() / 1000);
-  const startDate = endDate - windowSeconds;
-  return { startDate, endDate };
-};
-
 export function useRequestLogs({
   filters,
-  timeMode,
+  range,
   page = 0,
   pageSize = 20,
-  rollingWindowSeconds = 24 * 60 * 60,
   options,
 }: RequestLogsQueryArgs) {
   const key: RequestLogsKey = {
-    timeMode,
-    rollingWindowSeconds:
-      timeMode === "rolling" ? rollingWindowSeconds : undefined,
+    preset: range.preset,
+    customStartDate: range.customStartDate,
+    customEndDate: range.customEndDate,
     appType: filters.appType,
     providerName: filters.providerName,
     model: filters.model,
     statusCode: filters.statusCode,
-    startDate: timeMode === "fixed" ? filters.startDate : undefined,
-    endDate: timeMode === "fixed" ? filters.endDate : undefined,
   };
 
   return useQuery({
     queryKey: usageKeys.logs(key, page, pageSize),
     queryFn: () => {
-      const effectiveFilters =
-        timeMode === "rolling"
-          ? { ...filters, ...getRollingRange(rollingWindowSeconds) }
-          : filters;
+      const effectiveFilters = { ...filters, ...resolveUsageRange(range) };
       return usageApi.getRequestLogs(effectiveFilters, page, pageSize);
     },
     refetchInterval: options?.refetchInterval ?? DEFAULT_REFETCH_INTERVAL_MS, // 每30秒自动刷新

src/lib/usageRange.ts

@@ -0,0 +1,79 @@
+import type { UsageRangePreset, UsageRangeSelection } from "@/types/usage";
+
+const DAY_SECONDS = 24 * 60 * 60;
+const DAY_MS = DAY_SECONDS * 1000;
+
+export interface ResolvedUsageRange {
+  startDate: number;
+  endDate: number;
+}
+
+function getStartOfLocalDayDate(nowMs: number): Date {
+  const date = new Date(nowMs);
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+function getPresetLookbackStart(
+  preset: Exclude<UsageRangePreset, "today" | "1d" | "custom">,
+  nowMs: number,
+): number {
+  const dayCount = preset === "7d" ? 7 : preset === "14d" ? 14 : 30;
+  return Math.floor(
+    getStartOfLocalDayDate(nowMs - (dayCount - 1) * DAY_MS).getTime() / 1000,
+  );
+}
+
+export function resolveUsageRange(
+  selection: UsageRangeSelection,
+  nowMs: number = Date.now(),
+): ResolvedUsageRange {
+  const endDate = Math.floor(nowMs / 1000);
+
+  switch (selection.preset) {
+    case "today":
+      return {
+        startDate: Math.floor(getStartOfLocalDayDate(nowMs).getTime() / 1000),
+        endDate,
+      };
+    case "1d":
+      return {
+        startDate: endDate - DAY_SECONDS,
+        endDate,
+      };
+    case "7d":
+    case "14d":
+    case "30d":
+      return {
+        startDate: getPresetLookbackStart(selection.preset, nowMs),
+        endDate,
+      };
+    case "custom": {
+      const startDate = selection.customStartDate ?? endDate - DAY_SECONDS;
+      const customEndDate = selection.customEndDate ?? endDate;
+      return {
+        startDate,
+        endDate: customEndDate,
+      };
+    }
+  }
+}
+
+export function getUsageRangePresetLabel(
+  preset: UsageRangePreset,
+  t: (key: string, options?: { defaultValue?: string }) => string,
+): string {
+  switch (preset) {
+    case "today":
+      return t("usage.presetToday", { defaultValue: "当天" });
+    case "1d":
+      return t("usage.preset1d", { defaultValue: "1d" });
+    case "7d":
+      return t("usage.preset7d", { defaultValue: "7d" });
+    case "14d":
+      return t("usage.preset14d", { defaultValue: "14d" });
+    case "30d":
+      return t("usage.preset30d", { defaultValue: "30d" });
+    case "custom":
+      return t("usage.customRange", { defaultValue: "日历筛选" });
+  }
+}

src/types/usage.ts

@@ -121,12 +121,18 @@ export interface ProviderLimitStatus {
   monthlyExceeded: boolean;
 }
 
-export type TimeRange = "1d" | "7d" | "30d";
+export type UsageRangePreset = "today" | "1d" | "7d" | "14d" | "30d" | "custom";
+
+export interface UsageRangeSelection {
+  preset: UsageRangePreset;
+  customStartDate?: number;
+  customEndDate?: number;
+}
 
 export type AppTypeFilter = "all" | "claude" | "codex" | "gemini";
 
 export interface StatsFilters {
-  timeRange: TimeRange;
+  timeRange: UsageRangePreset;
   providerId?: string;
   appType?: string;
 }

tests/components/RequestLogTable.test.tsx

@@ -0,0 +1,161 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { RequestLogTable } from "@/components/usage/RequestLogTable";
+import type { UsageRangeSelection } from "@/types/usage";
+
+const useRequestLogsMock = vi.hoisted(() => vi.fn());
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (
+      key: string,
+      options?: {
+        defaultValue?: string;
+      },
+    ) => options?.defaultValue ?? key,
+    i18n: {
+      resolvedLanguage: "en",
+      language: "en",
+    },
+  }),
+}));
+
+vi.mock("@/lib/query/usage", () => ({
+  useRequestLogs: (args: unknown) => useRequestLogsMock(args),
+}));
+
+vi.mock("@/components/ui/button", () => ({
+  Button: ({ children, ...props }: any) => (
+    <button {...props}>{children}</button>
+  ),
+}));
+
+vi.mock("@/components/ui/input", () => ({
+  Input: (props: any) => <input {...props} />,
+}));
+
+vi.mock("@/components/ui/select", () => ({
+  Select: ({ children }: any) => <div>{children}</div>,
+  SelectTrigger: ({ children, ...props }: any) => (
+    <button type="button" {...props}>
+      {children}
+    </button>
+  ),
+  SelectValue: ({ placeholder }: any) => <span>{placeholder ?? null}</span>,
+  SelectContent: () => null,
+  SelectItem: () => null,
+}));
+
+vi.mock("@/components/ui/table", () => ({
+  Table: ({ children }: any) => <table>{children}</table>,
+  TableBody: ({ children }: any) => <tbody>{children}</tbody>,
+  TableCell: ({ children, ...props }: any) => <td {...props}>{children}</td>,
+  TableHead: ({ children, ...props }: any) => <th {...props}>{children}</th>,
+  TableHeader: ({ children }: any) => <thead>{children}</thead>,
+  TableRow: ({ children }: any) => <tr>{children}</tr>,
+}));
+
+describe("RequestLogTable", () => {
+  beforeEach(() => {
+    useRequestLogsMock.mockReset();
+    useRequestLogsMock.mockImplementation(
+      ({ page = 0, pageSize = 20 }: { page?: number; pageSize?: number }) => ({
+        data: {
+          data: [],
+          total: 120,
+          page,
+          pageSize,
+        },
+        isLoading: false,
+      }),
+    );
+  });
+
+  it("resets pagination when the dashboard range changes", async () => {
+    const initialRange: UsageRangeSelection = { preset: "today" };
+    const nextRange: UsageRangeSelection = {
+      preset: "custom",
+      customStartDate: 1_710_000_000,
+      customEndDate: 1_710_086_400,
+    };
+
+    const { rerender } = render(
+      <RequestLogTable
+        range={initialRange}
+        rangeLabel="Today"
+        appType="all"
+        refreshIntervalMs={0}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "2" }));
+
+    await waitFor(() => {
+      expect(useRequestLogsMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          page: 1,
+          range: initialRange,
+        }),
+      );
+    });
+
+    rerender(
+      <RequestLogTable
+        range={nextRange}
+        rangeLabel="Custom"
+        appType="all"
+        refreshIntervalMs={0}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(useRequestLogsMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          page: 0,
+          range: nextRange,
+        }),
+      );
+    });
+  });
+
+  it("resets pagination when the dashboard app filter changes", async () => {
+    const range: UsageRangeSelection = { preset: "today" };
+    const { rerender } = render(
+      <RequestLogTable
+        range={range}
+        rangeLabel="Today"
+        appType="all"
+        refreshIntervalMs={0}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "2" }));
+
+    await waitFor(() => {
+      expect(useRequestLogsMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          page: 1,
+          range,
+        }),
+      );
+    });
+
+    rerender(
+      <RequestLogTable
+        range={range}
+        rangeLabel="Today"
+        appType="claude"
+        refreshIntervalMs={0}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(useRequestLogsMock).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          page: 0,
+          range,
+        }),
+      );
+    });
+  });
+});