mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-11 01:36:37 +08:00
feat(frontend): persist selected tab on admin settings page
This commit is contained in:
@@ -7,7 +7,7 @@ import dynamic from "next/dynamic"
|
|||||||
import {useEffect, useMemo} from "react"
|
import {useEffect, useMemo} from "react"
|
||||||
import {useQuery} from "@tanstack/react-query"
|
import {useQuery} from "@tanstack/react-query"
|
||||||
import {Loader2, Settings} from "lucide-react"
|
import {Loader2, Settings} from "lucide-react"
|
||||||
import {useRouter} from "next/navigation"
|
import {useRouter, useSearchParams} from "next/navigation"
|
||||||
import {motion} from "motion/react"
|
import {motion} from "motion/react"
|
||||||
|
|
||||||
import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
|
import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
|
||||||
@@ -64,6 +64,17 @@ function systemConfigMap(configs: SystemConfig[]) {
|
|||||||
export function AdminSettingsPageClient() {
|
export function AdminSettingsPageClient() {
|
||||||
const { user, loading } = useAuth()
|
const { user, loading } = useAuth()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
const searchParams = useSearchParams()
|
||||||
|
|
||||||
|
const activeTab = useMemo(() => {
|
||||||
|
const rawTab = searchParams.get("tab")
|
||||||
|
const validTabs = ["security", "operation", "system", "other", "status", "info"]
|
||||||
|
return rawTab && validTabs.includes(rawTab) ? rawTab : "security"
|
||||||
|
}, [searchParams])
|
||||||
|
|
||||||
|
const handleTabChange = (value: string) => {
|
||||||
|
router.push(`/admin/settings?tab=${value}`)
|
||||||
|
}
|
||||||
|
|
||||||
const systemConfigsQuery = useQuery({
|
const systemConfigsQuery = useQuery({
|
||||||
queryKey: ["admin", "system-configs"],
|
queryKey: ["admin", "system-configs"],
|
||||||
@@ -103,7 +114,7 @@ export function AdminSettingsPageClient() {
|
|||||||
<h1 className="text-2xl font-semibold tracking-tight">系统设置</h1>
|
<h1 className="text-2xl font-semibold tracking-tight">系统设置</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Tabs defaultValue="security" className="w-full">
|
<Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
|
||||||
<TabsList variant="line" className="w-fit inline-flex gap-8 mb-6">
|
<TabsList variant="line" className="w-fit inline-flex gap-8 mb-6">
|
||||||
<TabsTrigger value="openflare-ops" className="px-0 pb-2 text-xs font-semibold">
|
<TabsTrigger value="openflare-ops" className="px-0 pb-2 text-xs font-semibold">
|
||||||
OpenFlare
|
OpenFlare
|
||||||
|
|||||||
@@ -1,8 +1,20 @@
|
|||||||
// Copyright 2026 Arctel.net
|
// Copyright 2026 Arctel.net
|
||||||
// SPDX-License-Identifier: Apache-2.0
|
// SPDX-License-Identifier: Apache-2.0
|
||||||
|
|
||||||
|
import {Suspense} from "react"
|
||||||
|
import {Loader2} from "lucide-react"
|
||||||
import {AdminSettingsPageClient} from "./page-client"
|
import {AdminSettingsPageClient} from "./page-client"
|
||||||
|
|
||||||
export default function AdminSettingsPage() {
|
export default function AdminSettingsPage() {
|
||||||
return <AdminSettingsPageClient />
|
return (
|
||||||
}
|
<Suspense
|
||||||
|
fallback={
|
||||||
|
<div className="flex items-center justify-center min-h-[400px]">
|
||||||
|
<Loader2 className="size-6 animate-spin text-primary" />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<AdminSettingsPageClient />
|
||||||
|
</Suspense>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user