From c293a255d02f873ffb50ffe3c52ad5d3d5cf36bc Mon Sep 17 00:00:00 2001
From: ryan <ryan@arctel.net>
Date: Tue, 30 Jun 2026 20:52:24 +0800
Subject: [PATCH] feat(frontend): persist selected tab on admin settings page
 refresh

Store the selected tab of the admin settings page in the URL query string under the tab parameter. Defend against invalid values by validating it against the list of known tabs.
---
 .../app/(main)/admin/settings/page-client.tsx     | 15 +++++++++++++--
 frontend/app/(main)/admin/settings/page.tsx       | 14 +++++++++++++-
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/frontend/app/(main)/admin/settings/page-client.tsx b/frontend/app/(main)/admin/settings/page-client.tsx
index 76d95fcd..f77ce0f3 100644
--- a/frontend/app/(main)/admin/settings/page-client.tsx
+++ b/frontend/app/(main)/admin/settings/page-client.tsx
@@ -7,7 +7,7 @@ import dynamic from "next/dynamic"
 import {useEffect, useMemo} from "react"
 import {useQuery} from "@tanstack/react-query"
 import {Loader2, Settings} from "lucide-react"
-import {useRouter} from "next/navigation"
+import {useRouter, useSearchParams} from "next/navigation"
 import {motion} from "motion/react"
 
 import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
@@ -59,6 +59,17 @@ function systemConfigMap(configs: SystemConfig[]) {
 export function AdminSettingsPageClient() {
   const { user, loading } = useAuth()
   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({
     queryKey: ["admin", "system-configs"],
@@ -98,7 +109,7 @@ export function AdminSettingsPageClient() {
           <h1 className="text-2xl font-semibold tracking-tight">系统设置</h1>
         </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">
           <TabsTrigger value="security" className="px-0 pb-2 text-xs font-semibold">
             安全设置
diff --git a/frontend/app/(main)/admin/settings/page.tsx b/frontend/app/(main)/admin/settings/page.tsx
index 44be3884..d4ea4f9a 100644
--- a/frontend/app/(main)/admin/settings/page.tsx
+++ b/frontend/app/(main)/admin/settings/page.tsx
@@ -1,8 +1,20 @@
 // Copyright 2026 Arctel.net
 // SPDX-License-Identifier: Apache-2.0
 
+import {Suspense} from "react"
+import {Loader2} from "lucide-react"
 import {AdminSettingsPageClient} from "./page-client"
 
 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>
+  )
 }
\ No newline at end of file