feat(pricing): add claude-opus-4-6 and gpt-5.3-codex models, use incremental seeding

- Add claude-opus-4-6-20260206 pricing (same as opus-4-5)
- Add gpt-5.3-codex series pricing (same as gpt-5.2-codex)
- Change seed_model_pricing to INSERT OR IGNORE for incremental upsert
- Remove count==0 guard in ensure_model_pricing_seeded so new models
  are appended on every startup without overwriting user customizations

src-tauri/src/database/schema.rs

@@ -919,7 +919,16 @@ impl Database {
     /// 注意: model_id 使用短横线格式（如 claude-haiku-4-5），与 API 返回的模型名称标准化后一致
     fn seed_model_pricing(conn: &Connection) -> Result<(), AppError> {
         let pricing_data = [
-            // Claude 4.5 系列 (Latest Models)
+            // Claude 4.6 系列
+            (
+                "claude-opus-4-6-20260206",
+                "Claude Opus 4.6",
+                "5",
+                "25",
+                "0.50",
+                "6.25",
+            ),
+            // Claude 4.5 系列
             (
                 "claude-opus-4-5-20251101",
                 "Claude Opus 4.5",
@@ -1025,6 +1034,40 @@ impl Database {
                 "0.175",
                 "0",
             ),
+            // GPT-5.3 Codex 系列
+            ("gpt-5.3-codex", "GPT-5.3 Codex", "1.75", "14", "0.175", "0"),
+            (
+                "gpt-5.3-codex-low",
+                "GPT-5.3 Codex",
+                "1.75",
+                "14",
+                "0.175",
+                "0",
+            ),
+            (
+                "gpt-5.3-codex-medium",
+                "GPT-5.3 Codex",
+                "1.75",
+                "14",
+                "0.175",
+                "0",
+            ),
+            (
+                "gpt-5.3-codex-high",
+                "GPT-5.3 Codex",
+                "1.75",
+                "14",
+                "0.175",
+                "0",
+            ),
+            (
+                "gpt-5.3-codex-xhigh",
+                "GPT-5.3 Codex",
+                "1.75",
+                "14",
+                "0.175",
+                "0",
+            ),
             // GPT-5.1 系列
             ("gpt-5.1", "GPT-5.1", "1.25", "10", "0.125", "0"),
             ("gpt-5.1-low", "GPT-5.1", "1.25", "10", "0.125", "0"),
@@ -1212,7 +1255,7 @@ impl Database {
 
         for (model_id, display_name, input, output, cache_read, cache_creation) in pricing_data {
             conn.execute(
-                "INSERT OR REPLACE INTO model_pricing (
+                "INSERT OR IGNORE INTO model_pricing (
                     model_id, display_name, input_cost_per_million, output_cost_per_million,
                     cache_read_cost_per_million, cache_creation_cost_per_million
                 ) VALUES (?1, ?2, ?3, ?4, ?5, ?6)",
@@ -1239,14 +1282,8 @@ impl Database {
     }
 
     fn ensure_model_pricing_seeded_on_conn(conn: &Connection) -> Result<(), AppError> {
-        let count: i64 = conn
-            .query_row("SELECT COUNT(*) FROM model_pricing", [], |row| row.get(0))
-            .map_err(|e| AppError::Database(format!("统计模型定价数据失败: {e}")))?;
-
-        if count == 0 {
-            Self::seed_model_pricing(conn)?;
-        }
-        Ok(())
+        // 每次启动都执行 INSERT OR IGNORE，增量追加新模型，已有数据不覆盖
+        Self::seed_model_pricing(conn)
     }
 
     // --- 辅助方法 ---

src-tauri/src/services/usage_stats.rs

@@ -272,7 +272,7 @@ impl Database {
                 .single()
                 .unwrap_or_else(Local::now);
 
-            let date = bucket_start.to_rfc3339();
+            let date = bucket_start.format("%Y-%m-%dT%H:%M:%S").to_string();
 
             if let Some(mut stat) = map.remove(&i) {
                 stat.date = date;

src/components/providers/forms/ProviderForm.tsx

@@ -746,7 +746,7 @@ export function ProviderForm({
       return;
     }
 
-    // OpenCode: validate provider key
+    // OpenCode: validate provider key and models
     if (appId === "opencode") {
       const keyPattern = /^[a-z0-9]+(-[a-z0-9]+)*$/;
       if (!opencodeProviderKey.trim()) {
@@ -761,6 +761,11 @@ export function ProviderForm({
         toast.error(t("opencode.providerKeyDuplicate"));
         return;
       }
+      // Validate that at least one model is configured
+      if (Object.keys(opencodeModels).length === 0) {
+        toast.error(t("opencode.modelsRequired"));
+        return;
+      }
     }
 
     // 非官方供应商必填校验：端点和 API Key

src/components/usage/ModelStatsTable.tsx

@@ -8,17 +8,10 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { useModelStats } from "@/lib/query/usage";
-import { fmtUsd } from "./format";
 
-interface ModelStatsTableProps {
-  refreshIntervalMs: number;
-}
-
-export function ModelStatsTable({ refreshIntervalMs }: ModelStatsTableProps) {
+export function ModelStatsTable() {
   const { t } = useTranslation();
-  const { data: stats, isLoading } = useModelStats({
-    refetchInterval: refreshIntervalMs > 0 ? refreshIntervalMs : false,
-  });
+  const { data: stats, isLoading } = useModelStats();
 
   if (isLoading) {
     return <div className="h-[400px] animate-pulse rounded bg-gray-100" />;
@@ -67,10 +60,10 @@ export function ModelStatsTable({ refreshIntervalMs }: ModelStatsTableProps) {
                   {stat.totalTokens.toLocaleString()}
                 </TableCell>
                 <TableCell className="text-right">
-                  {fmtUsd(stat.totalCost, 4)}
+                  ${parseFloat(stat.totalCost).toFixed(4)}
                 </TableCell>
                 <TableCell className="text-right">
-                  {fmtUsd(stat.avgCostPerRequest, 6)}
+                  ${parseFloat(stat.avgCostPerRequest).toFixed(6)}
                 </TableCell>
               </TableRow>
             ))

src/components/usage/ProviderStatsTable.tsx

@@ -8,19 +8,10 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { useProviderStats } from "@/lib/query/usage";
-import { fmtUsd } from "./format";
 
-interface ProviderStatsTableProps {
-  refreshIntervalMs: number;
-}
-
-export function ProviderStatsTable({
-  refreshIntervalMs,
-}: ProviderStatsTableProps) {
+export function ProviderStatsTable() {
   const { t } = useTranslation();
-  const { data: stats, isLoading } = useProviderStats({
-    refetchInterval: refreshIntervalMs > 0 ? refreshIntervalMs : false,
-  });
+  const { data: stats, isLoading } = useProviderStats();
 
   if (isLoading) {
     return <div className="h-[400px] animate-pulse rounded bg-gray-100" />;
@@ -72,7 +63,7 @@ export function ProviderStatsTable({
                   {stat.totalTokens.toLocaleString()}
                 </TableCell>
                 <TableCell className="text-right">
-                  {fmtUsd(stat.totalCost, 4)}
+                  ${parseFloat(stat.totalCost).toFixed(4)}
                 </TableCell>
                 <TableCell className="text-right">
                   {stat.successRate.toFixed(1)}%

src/components/usage/RequestLogTable.tsx

@@ -21,122 +21,44 @@ 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 {
-  fmtInt,
-  fmtUsd,
-  getLocaleFromLanguage,
-  parseFiniteNumber,
-} from "./format";
 
-interface RequestLogTableProps {
-  refreshIntervalMs: number;
-}
-
-const ONE_DAY_SECONDS = 24 * 60 * 60;
-const MAX_FIXED_RANGE_SECONDS = 30 * ONE_DAY_SECONDS;
-
-type TimeMode = "rolling" | "fixed";
-
-export function RequestLogTable({ refreshIntervalMs }: RequestLogTableProps) {
+export function RequestLogTable() {
   const { t, i18n } = useTranslation();
   const queryClient = useQueryClient();
 
-  const getRollingRange = () => {
+  // 默认时间范围：过去24小时
+  const getDefaultFilters = (): LogFilters => {
     const now = Math.floor(Date.now() / 1000);
-    const oneDayAgo = now - ONE_DAY_SECONDS;
+    const oneDayAgo = now - 24 * 60 * 60;
     return { startDate: oneDayAgo, endDate: now };
   };
 
-  const [appliedTimeMode, setAppliedTimeMode] = useState<TimeMode>("rolling");
-  const [draftTimeMode, setDraftTimeMode] = useState<TimeMode>("rolling");
-
-  const [appliedFilters, setAppliedFilters] = useState<LogFilters>({});
-  const [draftFilters, setDraftFilters] = useState<LogFilters>({});
+  const [filters, setFilters] = useState<LogFilters>(getDefaultFilters);
+  const [tempFilters, setTempFilters] = useState<LogFilters>(getDefaultFilters);
   const [page, setPage] = useState(0);
   const pageSize = 20;
-  const [validationError, setValidationError] = useState<string | null>(null);
 
-  const { data: result, isLoading } = useRequestLogs({
-    filters: appliedFilters,
-    timeMode: appliedTimeMode,
-    rollingWindowSeconds: ONE_DAY_SECONDS,
-    page,
-    pageSize,
-    options: {
-      refetchInterval: refreshIntervalMs > 0 ? refreshIntervalMs : false,
-    },
-  });
+  const { data: result, isLoading } = useRequestLogs(filters, page, pageSize);
 
   const logs = result?.data ?? [];
   const total = result?.total ?? 0;
   const totalPages = Math.ceil(total / pageSize);
 
   const handleSearch = () => {
-    setValidationError(null);
-
-    if (draftTimeMode === "fixed") {
-      const start = draftFilters.startDate;
-      const end = draftFilters.endDate;
-
-      if (typeof start !== "number" || typeof end !== "number") {
-        setValidationError(
-          t("usage.invalidTimeRange", "请选择完整的开始/结束时间"),
-        );
-        return;
-      }
-
-      if (start > end) {
-        setValidationError(
-          t("usage.invalidTimeRangeOrder", "开始时间不能晚于结束时间"),
-        );
-        return;
-      }
-
-      if (end - start > MAX_FIXED_RANGE_SECONDS) {
-        setValidationError(
-          t("usage.timeRangeTooLarge", "时间范围过大，请缩小范围"),
-        );
-        return;
-      }
-    }
-
-    setAppliedTimeMode(draftTimeMode);
-    setAppliedFilters((prev) => {
-      const next = { ...prev, ...draftFilters };
-      if (draftTimeMode === "rolling") {
-        delete next.startDate;
-        delete next.endDate;
-      }
-      return next;
-    });
+    setFilters(tempFilters);
     setPage(0);
   };
 
   const handleReset = () => {
-    setValidationError(null);
-    setAppliedTimeMode("rolling");
-    setDraftTimeMode("rolling");
-    setDraftFilters({});
-    setAppliedFilters({});
+    const defaults = getDefaultFilters();
+    setTempFilters(defaults);
+    setFilters(defaults);
     setPage(0);
   };
 
   const handleRefresh = () => {
-    const key = {
-      timeMode: appliedTimeMode,
-      rollingWindowSeconds:
-        appliedTimeMode === "rolling" ? ONE_DAY_SECONDS : undefined,
-      appType: appliedFilters.appType,
-      providerName: appliedFilters.providerName,
-      model: appliedFilters.model,
-      statusCode: appliedFilters.statusCode,
-      startDate:
-        appliedTimeMode === "fixed" ? appliedFilters.startDate : undefined,
-      endDate: appliedTimeMode === "fixed" ? appliedFilters.endDate : undefined,
-    };
-
     queryClient.invalidateQueries({
-      queryKey: usageKeys.logs(key, page, pageSize),
+      queryKey: usageKeys.logs(filters, page, pageSize),
     });
   };
 
@@ -162,11 +84,12 @@ export function RequestLogTable({ refreshIntervalMs }: RequestLogTableProps) {
     return Math.floor(timestamp / 1000);
   };
 
-  const language = i18n.resolvedLanguage || i18n.language || "en";
-  const locale = getLocaleFromLanguage(language);
-
-  const rollingRangeForDisplay =
-    draftTimeMode === "rolling" ? getRollingRange() : null;
+  const dateLocale =
+    i18n.language === "zh"
+      ? "zh-CN"
+      : i18n.language === "ja"
+        ? "ja-JP"
+        : "en-US";
 
   return (
     <div className="space-y-4">
@@ -174,10 +97,10 @@ export function RequestLogTable({ refreshIntervalMs }: RequestLogTableProps) {
       <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">
           <Select
-            value={draftFilters.appType || "all"}
+            value={tempFilters.appType || "all"}
             onValueChange={(v) =>
-              setDraftFilters({
-                ...draftFilters,
+              setTempFilters({
+                ...tempFilters,
                 appType: v === "all" ? undefined : v,
               })
             }
@@ -194,16 +117,11 @@ export function RequestLogTable({ refreshIntervalMs }: RequestLogTableProps) {
           </Select>
 
           <Select
-            value={draftFilters.statusCode?.toString() || "all"}
+            value={tempFilters.statusCode?.toString() || "all"}
             onValueChange={(v) =>
-              setDraftFilters({
-                ...draftFilters,
-                statusCode:
-                  v === "all"
-                    ? undefined
-                    : Number.isFinite(Number.parseInt(v, 10))
-                      ? Number.parseInt(v, 10)
-                      : undefined,
+              setTempFilters({
+                ...tempFilters,
+                statusCode: v === "all" ? undefined : parseInt(v),
               })
             }
           >
@@ -226,10 +144,10 @@ export function RequestLogTable({ refreshIntervalMs }: RequestLogTableProps) {
               <Input
                 placeholder={t("usage.searchProviderPlaceholder")}
                 className="pl-9 bg-background"
-                value={draftFilters.providerName || ""}
+                value={tempFilters.providerName || ""}
                 onChange={(e) =>
-                  setDraftFilters({
-                    ...draftFilters,
+                  setTempFilters({
+                    ...tempFilters,
                     providerName: e.target.value || undefined,
                   })
                 }
@@ -238,10 +156,10 @@ export function RequestLogTable({ refreshIntervalMs }: RequestLogTableProps) {
             <Input
               placeholder={t("usage.searchModelPlaceholder")}
               className="w-[180px] bg-background"
-              value={draftFilters.model || ""}
+              value={tempFilters.model || ""}
               onChange={(e) =>
-                setDraftFilters({
-                  ...draftFilters,
+                setTempFilters({
+                  ...tempFilters,
                   model: e.target.value || undefined,
                 })
               }
@@ -256,18 +174,14 @@ export function RequestLogTable({ refreshIntervalMs }: RequestLogTableProps) {
               type="datetime-local"
               className="h-8 w-[200px] bg-background"
               value={
-                (rollingRangeForDisplay?.startDate ?? draftFilters.startDate)
-                  ? timestampToLocalDatetime(
-                      (rollingRangeForDisplay?.startDate ??
-                        draftFilters.startDate) as number,
-                    )
+                tempFilters.startDate
+                  ? timestampToLocalDatetime(tempFilters.startDate)
                   : ""
               }
               onChange={(e) => {
                 const timestamp = localDatetimeToTimestamp(e.target.value);
-                setDraftTimeMode("fixed");
-                setDraftFilters({
-                  ...draftFilters,
+                setTempFilters({
+                  ...tempFilters,
                   startDate: timestamp,
                 });
               }}
@@ -277,18 +191,14 @@ export function RequestLogTable({ refreshIntervalMs }: RequestLogTableProps) {
               type="datetime-local"
               className="h-8 w-[200px] bg-background"
               value={
-                (rollingRangeForDisplay?.endDate ?? draftFilters.endDate)
-                  ? timestampToLocalDatetime(
-                      (rollingRangeForDisplay?.endDate ??
-                        draftFilters.endDate) as number,
-                    )
+                tempFilters.endDate
+                  ? timestampToLocalDatetime(tempFilters.endDate)
                   : ""
               }
               onChange={(e) => {
                 const timestamp = localDatetimeToTimestamp(e.target.value);
-                setDraftTimeMode("fixed");
-                setDraftFilters({
-                  ...draftFilters,
+                setTempFilters({
+                  ...tempFilters,
                   endDate: timestamp,
                 });
               }}
@@ -324,10 +234,6 @@ export function RequestLogTable({ refreshIntervalMs }: RequestLogTableProps) {
             </Button>
           </div>
         </div>
-
-        {validationError && (
-          <div className="text-sm text-red-600">{validationError}</div>
-        )}
       </div>
 
       {isLoading ? (
@@ -387,7 +293,9 @@ export function RequestLogTable({ refreshIntervalMs }: RequestLogTableProps) {
                   logs.map((log) => (
                     <TableRow key={log.requestId}>
                       <TableCell>
-                        {new Date(log.createdAt * 1000).toLocaleString(locale)}
+                        {new Date(log.createdAt * 1000).toLocaleString(
+                          dateLocale,
+                        )}
                       </TableCell>
                       <TableCell>
                         {log.providerName || t("usage.unknownProvider")}
@@ -413,19 +321,19 @@ export function RequestLogTable({ refreshIntervalMs }: RequestLogTableProps) {
                         )}
                       </TableCell>
                       <TableCell className="text-right">
-                        {fmtInt(log.inputTokens, locale)}
+                        {log.inputTokens.toLocaleString()}
                       </TableCell>
                       <TableCell className="text-right">
-                        {fmtInt(log.outputTokens, locale)}
+                        {log.outputTokens.toLocaleString()}
                       </TableCell>
                       <TableCell className="text-right">
-                        {fmtInt(log.cacheReadTokens, locale)}
+                        {log.cacheReadTokens.toLocaleString()}
                       </TableCell>
                       <TableCell className="text-right">
-                        {fmtInt(log.cacheCreationTokens, locale)}
+                        {log.cacheCreationTokens.toLocaleString()}
                       </TableCell>
                       <TableCell className="text-right font-mono text-xs">
-                        {(parseFiniteNumber(log.costMultiplier) ?? 1) !== 1 ? (
+                        {parseFloat(log.costMultiplier) !== 1 ? (
                           <span className="text-orange-600">
                             ×{log.costMultiplier}
                           </span>
@@ -434,30 +342,24 @@ export function RequestLogTable({ refreshIntervalMs }: RequestLogTableProps) {
                         )}
                       </TableCell>
                       <TableCell className="text-right">
-                        {fmtUsd(log.totalCostUsd, 6)}
+                        ${parseFloat(log.totalCostUsd).toFixed(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
+                            const durationSec =
+                              (log.durationMs ?? log.latencyMs) / 1000;
+                            const durationColor =
+                              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";
+                                  : "bg-red-200 text-red-900";
                             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`
-                                  : "--"}
+                                {Math.round(durationSec)}s
                               </span>
                             );
                           })()}
@@ -465,20 +367,17 @@ export function RequestLogTable({ refreshIntervalMs }: RequestLogTableProps) {
                             log.firstTokenMs != null &&
                             (() => {
                               const firstSec = log.firstTokenMs / 1000;
-                              const firstColor = Number.isFinite(firstSec)
-                                ? firstSec <= 5
+                              const firstColor =
+                                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";
+                                    : "bg-red-200 text-red-900";
                               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`
-                                    : "--"}
+                                  {firstSec.toFixed(1)}s
                                 </span>
                               );
                             })()}

src/components/usage/UsageDashboard.tsx

@@ -8,28 +8,11 @@ import { ProviderStatsTable } from "./ProviderStatsTable";
 import { ModelStatsTable } from "./ModelStatsTable";
 import type { TimeRange } from "@/types/usage";
 import { motion } from "framer-motion";
-import { BarChart3, ListFilter, Activity, RefreshCw } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { useQueryClient } from "@tanstack/react-query";
-import { usageKeys } from "@/lib/query/usage";
+import { BarChart3, ListFilter, Activity } from "lucide-react";
 
 export function UsageDashboard() {
   const { t } = useTranslation();
-  const queryClient = useQueryClient();
   const [timeRange, setTimeRange] = useState<TimeRange>("1d");
-  const [refreshIntervalMs, setRefreshIntervalMs] = useState(30000);
-
-  const refreshIntervalOptionsMs = [0, 5000, 10000, 30000, 60000] as const;
-  const changeRefreshInterval = () => {
-    const currentIndex = refreshIntervalOptionsMs.indexOf(
-      refreshIntervalMs as (typeof refreshIntervalOptionsMs)[number],
-    );
-    const safeIndex = currentIndex >= 0 ? currentIndex : 3; // default 30s
-    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;
 
@@ -51,45 +34,32 @@ export function UsageDashboard() {
           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}
+          <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"
             >
-              <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"
-              >
-                {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>
+              {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>
         </Tabs>
       </div>
 
-      <UsageSummaryCards days={days} refreshIntervalMs={refreshIntervalMs} />
+      <UsageSummaryCards days={days} />
 
-      <UsageTrendChart days={days} refreshIntervalMs={refreshIntervalMs} />
+      <UsageTrendChart days={days} />
 
       <div className="space-y-4">
         <Tabs defaultValue="logs" className="w-full">
@@ -116,15 +86,15 @@ export function UsageDashboard() {
             transition={{ delay: 0.2 }}
           >
             <TabsContent value="logs" className="mt-0">
-              <RequestLogTable refreshIntervalMs={refreshIntervalMs} />
+              <RequestLogTable />
             </TabsContent>
 
             <TabsContent value="providers" className="mt-0">
-              <ProviderStatsTable refreshIntervalMs={refreshIntervalMs} />
+              <ProviderStatsTable />
             </TabsContent>
 
             <TabsContent value="models" className="mt-0">
-              <ModelStatsTable refreshIntervalMs={refreshIntervalMs} />
+              <ModelStatsTable />
             </TabsContent>
           </motion.div>
         </Tabs>

src/components/usage/UsageSummaryCards.tsx

@@ -4,26 +4,19 @@ import { Card, CardContent } from "@/components/ui/card";
 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";
 
 interface UsageSummaryCardsProps {
   days: number;
-  refreshIntervalMs: number;
 }
 
-export function UsageSummaryCards({
-  days,
-  refreshIntervalMs,
-}: UsageSummaryCardsProps) {
+export function UsageSummaryCards({ days }: UsageSummaryCardsProps) {
   const { t } = useTranslation();
 
-  const { data: summary, isLoading } = useUsageSummary(days, {
-    refetchInterval: refreshIntervalMs > 0 ? refreshIntervalMs : false,
-  });
+  const { data: summary, isLoading } = useUsageSummary(days);
 
   const stats = useMemo(() => {
     const totalRequests = summary?.totalRequests ?? 0;
-    const totalCost = parseFiniteNumber(summary?.totalCost);
+    const totalCost = parseFloat(summary?.totalCost || "0");
 
     const inputTokens = summary?.totalInputTokens ?? 0;
     const outputTokens = summary?.totalOutputTokens ?? 0;
@@ -44,7 +37,7 @@ export function UsageSummaryCards({
       },
       {
         title: t("usage.totalCost"),
-        value: totalCost == null ? "--" : fmtUsd(totalCost, 4),
+        value: `$${totalCost.toFixed(4)}`,
         icon: DollarSign,
         color: "text-green-500",
         bg: "bg-green-500/10",

src/components/usage/UsageTrendChart.tsx

@@ -11,26 +11,14 @@ import {
 } from "recharts";
 import { useUsageTrends } from "@/lib/query/usage";
 import { Loader2 } from "lucide-react";
-import {
-  fmtInt,
-  fmtUsd,
-  getLocaleFromLanguage,
-  parseFiniteNumber,
-} from "./format";
 
 interface UsageTrendChartProps {
   days: number;
-  refreshIntervalMs: number;
 }
 
-export function UsageTrendChart({
-  days,
-  refreshIntervalMs,
-}: UsageTrendChartProps) {
+export function UsageTrendChart({ days }: UsageTrendChartProps) {
   const { t, i18n } = useTranslation();
-  const { data: trends, isLoading } = useUsageTrends(days, {
-    refetchInterval: refreshIntervalMs > 0 ? refreshIntervalMs : false,
-  });
+  const { data: trends, isLoading } = useUsageTrends(days);
 
   if (isLoading) {
     return (
@@ -41,12 +29,15 @@ export function UsageTrendChart({
   }
 
   const isToday = days === 1;
-  const language = i18n.resolvedLanguage || i18n.language || "en";
-  const dateLocale = getLocaleFromLanguage(language);
+  const dateLocale =
+    i18n.language === "zh"
+      ? "zh-CN"
+      : i18n.language === "ja"
+        ? "ja-JP"
+        : "en-US";
   const chartData =
     trends?.map((stat) => {
       const pointDate = new Date(stat.date);
-      const cost = parseFiniteNumber(stat.totalCost);
       return {
         rawDate: stat.date,
         label: isToday
@@ -65,7 +56,7 @@ export function UsageTrendChart({
         outputTokens: stat.totalOutputTokens,
         cacheCreationTokens: stat.totalCacheCreationTokens,
         cacheReadTokens: stat.totalCacheReadTokens,
-        cost: cost ?? null,
+        cost: parseFloat(stat.totalCost),
       };
     }) || [];
 
@@ -88,9 +79,9 @@ export function UsageTrendChart({
               />
               <span className="font-medium">{entry.name}:</span>
               <span>
-                {entry.dataKey === "cost"
-                  ? fmtUsd(entry.value, 6)
-                  : fmtInt(entry.value, dateLocale)}
+                {entry.name.includes(t("usage.cost", "成本"))
+                  ? `$${typeof entry.value === "number" ? entry.value.toFixed(6) : entry.value}`
+                  : entry.value.toLocaleString()}
               </span>
             </div>
           ))}

src/components/usage/format.ts

@@ -1,39 +0,0 @@
-export function parseFiniteNumber(value: unknown): number | null {
-  if (typeof value === "number") {
-    return Number.isFinite(value) ? value : null;
-  }
-
-  if (typeof value === "string") {
-    const parsed = Number.parseFloat(value);
-    return Number.isFinite(parsed) ? parsed : null;
-  }
-
-  return null;
-}
-
-export function fmtInt(
-  value: unknown,
-  locale?: string,
-  fallback: string = "--",
-): string {
-  const num = parseFiniteNumber(value);
-  if (num == null) return fallback;
-  return new Intl.NumberFormat(locale).format(Math.trunc(num));
-}
-
-export function fmtUsd(
-  value: unknown,
-  digits: number,
-  fallback: string = "--",
-): string {
-  const num = parseFiniteNumber(value);
-  if (num == null) return fallback;
-  return `$${num.toFixed(digits)}`;
-}
-
-export function getLocaleFromLanguage(language: string): string {
-  if (!language) return "en-US";
-  if (language.startsWith("zh")) return "zh-CN";
-  if (language.startsWith("ja")) return "ja-JP";
-  return "en-US";
-}

src/i18n/locales/en.json

@@ -633,6 +633,7 @@
     "modelId": "Model ID",
     "modelName": "Display Name",
     "noModels": "No models configured",
+    "modelsRequired": "Please add at least one model",
     "providerKey": "Provider Key",
     "providerKeyPlaceholder": "my-provider",
     "providerKeyHint": "Unique identifier in config file. Cannot be changed after creation. Use lowercase letters, numbers, and hyphens only.",

src/i18n/locales/ja.json

@@ -633,6 +633,7 @@
     "modelId": "モデル ID",
     "modelName": "表示名",
     "noModels": "モデルが設定されていません",
+    "modelsRequired": "モデルを少なくとも1つ追加してください",
     "providerKey": "プロバイダーキー",
     "providerKeyPlaceholder": "my-provider",
     "providerKeyHint": "設定ファイルの一意の識別子。作成後は変更できません。小文字、数字、ハイフンのみ使用できます。",

src/i18n/locales/zh.json

@@ -633,6 +633,7 @@
     "modelId": "模型 ID",
     "modelName": "显示名称",
     "noModels": "暂无模型配置",
+    "modelsRequired": "请至少添加一个模型配置",
     "providerKey": "供应商标识",
     "providerKeyPlaceholder": "my-provider",
     "providerKeyHint": "配置文件中的唯一标识符，创建后无法修改，只能使用小写字母、数字和连字符",

src/lib/query/usage.ts

@@ -2,35 +2,6 @@ import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { usageApi } from "@/lib/api/usage";
 import type { LogFilters } from "@/types/usage";
 
-const DEFAULT_REFETCH_INTERVAL_MS = 30000;
-
-type UsageQueryOptions = {
-  refetchInterval?: number | false;
-  refetchIntervalInBackground?: boolean;
-};
-
-type RequestLogsTimeMode = "rolling" | "fixed";
-
-type RequestLogsQueryArgs = {
-  filters: LogFilters;
-  timeMode: RequestLogsTimeMode;
-  page?: number;
-  pageSize?: number;
-  rollingWindowSeconds?: number;
-  options?: UsageQueryOptions;
-};
-
-type RequestLogsKey = {
-  timeMode: RequestLogsTimeMode;
-  rollingWindowSeconds?: number;
-  appType?: string;
-  providerName?: string;
-  model?: string;
-  statusCode?: number;
-  startDate?: number;
-  endDate?: number;
-};
-
 // Query keys
 export const usageKeys = {
   all: ["usage"] as const,
@@ -38,21 +9,8 @@ export const usageKeys = {
   trends: (days: number) => [...usageKeys.all, "trends", days] as const,
   providerStats: () => [...usageKeys.all, "provider-stats"] as const,
   modelStats: () => [...usageKeys.all, "model-stats"] as const,
-  logs: (key: RequestLogsKey, page: number, pageSize: number) =>
-    [
-      ...usageKeys.all,
-      "logs",
-      key.timeMode,
-      key.rollingWindowSeconds ?? 0,
-      key.appType ?? "",
-      key.providerName ?? "",
-      key.model ?? "",
-      key.statusCode ?? -1,
-      key.startDate ?? 0,
-      key.endDate ?? 0,
-      page,
-      pageSize,
-    ] as const,
+  logs: (filters: LogFilters, page: number, pageSize: number) =>
+    [...usageKeys.all, "logs", filters, page, pageSize] as const,
   detail: (requestId: string) =>
     [...usageKeys.all, "detail", requestId] as const,
   pricing: () => [...usageKeys.all, "pricing"] as const,
@@ -67,85 +25,58 @@ const getWindow = (days: number) => {
 };
 
 // Hooks
-export function useUsageSummary(days: number, options?: UsageQueryOptions) {
+export function useUsageSummary(days: number) {
   return useQuery({
     queryKey: usageKeys.summary(days),
     queryFn: () => {
       const { startDate, endDate } = getWindow(days);
       return usageApi.getUsageSummary(startDate, endDate);
     },
-    refetchInterval: options?.refetchInterval ?? DEFAULT_REFETCH_INTERVAL_MS, // 每30秒自动刷新
-    refetchIntervalInBackground: options?.refetchIntervalInBackground ?? false, // 后台不刷新
+    refetchInterval: 30000, // 每30秒自动刷新
+    refetchIntervalInBackground: false, // 后台不刷新
   });
 }
 
-export function useUsageTrends(days: number, options?: UsageQueryOptions) {
+export function useUsageTrends(days: number) {
   return useQuery({
     queryKey: usageKeys.trends(days),
     queryFn: () => {
       const { startDate, endDate } = getWindow(days);
       return usageApi.getUsageTrends(startDate, endDate);
     },
-    refetchInterval: options?.refetchInterval ?? DEFAULT_REFETCH_INTERVAL_MS, // 每30秒自动刷新
-    refetchIntervalInBackground: options?.refetchIntervalInBackground ?? false,
+    refetchInterval: 30000, // 每30秒自动刷新
+    refetchIntervalInBackground: false,
   });
 }
 
-export function useProviderStats(options?: UsageQueryOptions) {
+export function useProviderStats() {
   return useQuery({
     queryKey: usageKeys.providerStats(),
     queryFn: usageApi.getProviderStats,
-    refetchInterval: options?.refetchInterval ?? DEFAULT_REFETCH_INTERVAL_MS, // 每30秒自动刷新
-    refetchIntervalInBackground: options?.refetchIntervalInBackground ?? false,
+    refetchInterval: 30000, // 每30秒自动刷新
+    refetchIntervalInBackground: false,
   });
 }
 
-export function useModelStats(options?: UsageQueryOptions) {
+export function useModelStats() {
   return useQuery({
     queryKey: usageKeys.modelStats(),
     queryFn: usageApi.getModelStats,
-    refetchInterval: options?.refetchInterval ?? DEFAULT_REFETCH_INTERVAL_MS, // 每30秒自动刷新
-    refetchIntervalInBackground: options?.refetchIntervalInBackground ?? false,
+    refetchInterval: 30000, // 每30秒自动刷新
+    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,
-  page = 0,
-  pageSize = 20,
-  rollingWindowSeconds = 24 * 60 * 60,
-  options,
-}: RequestLogsQueryArgs) {
-  const key: RequestLogsKey = {
-    timeMode,
-    rollingWindowSeconds:
-      timeMode === "rolling" ? rollingWindowSeconds : undefined,
-    appType: filters.appType,
-    providerName: filters.providerName,
-    model: filters.model,
-    statusCode: filters.statusCode,
-    startDate: timeMode === "fixed" ? filters.startDate : undefined,
-    endDate: timeMode === "fixed" ? filters.endDate : undefined,
-  };
-
+export function useRequestLogs(
+  filters: LogFilters,
+  page: number = 0,
+  pageSize: number = 20,
+) {
   return useQuery({
-    queryKey: usageKeys.logs(key, page, pageSize),
-    queryFn: () => {
-      const effectiveFilters =
-        timeMode === "rolling"
-          ? { ...filters, ...getRollingRange(rollingWindowSeconds) }
-          : filters;
-      return usageApi.getRequestLogs(effectiveFilters, page, pageSize);
-    },
-    refetchInterval: options?.refetchInterval ?? DEFAULT_REFETCH_INTERVAL_MS, // 每30秒自动刷新
-    refetchIntervalInBackground: options?.refetchIntervalInBackground ?? false,
+    queryKey: usageKeys.logs(filters, page, pageSize),
+    queryFn: () => usageApi.getRequestLogs(filters, page, pageSize),
+    refetchInterval: 30000, // 每30秒自动刷新
+    refetchIntervalInBackground: false,
   });
 }