mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-14 02:46:37 +08:00
fix(frontend): refresh file storage stats on tab and page revisit
Set stats query staleTime to 0 with refetchOnMount always, and unmount inactive file admin tabs so returning to the stats view triggers a new fetch instead of serving the 30s React Query cache.
This commit is contained in:
@@ -2,35 +2,18 @@
|
|||||||
|
|
||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
import {useQuery} from "@tanstack/react-query"
|
import {useQuery} from "@tanstack/react-query"
|
||||||
import {
|
import {Database, Files, HardDrive, Info, Loader2, TrendingUp, Upload,} from "lucide-react"
|
||||||
Upload,
|
import {Area, AreaChart, CartesianGrid, Cell, Pie, PieChart, XAxis, YAxis,} from "recharts"
|
||||||
Loader2,
|
|
||||||
HardDrive,
|
|
||||||
Database,
|
|
||||||
TrendingUp,
|
|
||||||
Files,
|
|
||||||
Info,
|
|
||||||
} from "lucide-react"
|
|
||||||
import {
|
|
||||||
Area,
|
|
||||||
AreaChart,
|
|
||||||
CartesianGrid,
|
|
||||||
Cell,
|
|
||||||
Pie,
|
|
||||||
PieChart,
|
|
||||||
XAxis,
|
|
||||||
YAxis,
|
|
||||||
} from "recharts"
|
|
||||||
|
|
||||||
import {Button} from "@/components/ui/button"
|
import {Button} from "@/components/ui/button"
|
||||||
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
|
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card"
|
||||||
import {
|
import {
|
||||||
ChartConfig,
|
ChartConfig,
|
||||||
ChartContainer,
|
ChartContainer,
|
||||||
ChartTooltip,
|
|
||||||
ChartTooltipContent,
|
|
||||||
ChartLegend,
|
ChartLegend,
|
||||||
ChartLegendContent,
|
ChartLegendContent,
|
||||||
|
ChartTooltip,
|
||||||
|
ChartTooltipContent,
|
||||||
} from "@/components/ui/chart"
|
} from "@/components/ui/chart"
|
||||||
import services, {formatFileSize} from "@/lib/services"
|
import services, {formatFileSize} from "@/lib/services"
|
||||||
|
|
||||||
@@ -84,6 +67,8 @@ export function FileStats() {
|
|||||||
const statsQuery = useQuery({
|
const statsQuery = useQuery({
|
||||||
queryKey: ["files", "stats"],
|
queryKey: ["files", "stats"],
|
||||||
queryFn: () => services.adminUpload.getFileStats(),
|
queryFn: () => services.adminUpload.getFileStats(),
|
||||||
|
staleTime: 0,
|
||||||
|
refetchOnMount: "always",
|
||||||
})
|
})
|
||||||
|
|
||||||
const stats = statsQuery.data
|
const stats = statsQuery.data
|
||||||
@@ -159,7 +144,7 @@ export function FileStats() {
|
|||||||
)
|
)
|
||||||
}, [stats?.trend])
|
}, [stats?.trend])
|
||||||
|
|
||||||
if (statsQuery.isPending) {
|
if (statsQuery.isLoading) {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-center py-32">
|
<div className="flex items-center justify-center py-32">
|
||||||
<Loader2 className="size-8 animate-spin text-sky-500" />
|
<Loader2 className="size-8 animate-spin text-sky-500" />
|
||||||
|
|||||||
@@ -42,16 +42,16 @@ export default function FilesPage() {
|
|||||||
|
|
||||||
{/* ──────── TAB 1: 统计看板 ──────── */}
|
{/* ──────── TAB 1: 统计看板 ──────── */}
|
||||||
<TabsContent value="stats" className="outline-hidden">
|
<TabsContent value="stats" className="outline-hidden">
|
||||||
<FileStats />
|
{activeTab === "stats" ? <FileStats /> : null}
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
{/* ──────── TAB 2: 文件列表 ──────── */}
|
{/* ──────── TAB 2: 文件列表 ──────── */}
|
||||||
<TabsContent value="list" className="outline-hidden">
|
<TabsContent value="list" className="outline-hidden">
|
||||||
<FileList />
|
{activeTab === "list" ? <FileList /> : null}
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="storage" className="outline-hidden">
|
<TabsContent value="storage" className="outline-hidden">
|
||||||
<StorageConfigTab />
|
{activeTab === "storage" ? <StorageConfigTab /> : null}
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|||||||
Reference in New Issue
Block a user