From 155539693cd27993966a09738181dd11ec8390b1 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Fri, 29 May 2026 14:51:20 +0800
Subject: [PATCH] refactor: flatten admin settings header

---
 .../_components/admin-settings-navigation.tsx | 192 ++++++++----------
 1 file changed, 86 insertions(+), 106 deletions(-)

diff --git a/app/(admin)/settings/_components/admin-settings-navigation.tsx b/app/(admin)/settings/_components/admin-settings-navigation.tsx
index ce6465a57..4a08e25a6 100644
--- a/app/(admin)/settings/_components/admin-settings-navigation.tsx
+++ b/app/(admin)/settings/_components/admin-settings-navigation.tsx
@@ -33,12 +33,6 @@ function getActiveGroup(activeTab: string) {
   );
 }
 
-function getActiveItem(activeTab: string) {
-  return ADMIN_SETTINGS_NAV_GROUPS.flatMap((group) => group.items).find(
-    (item) => item.value === activeTab
-  );
-}
-
 function SettingsGroupDropdown({
   activeTab,
   group,
@@ -166,123 +160,109 @@ export function AdminSettingsNavigation({
   onTabChange: (value: string) => void;
 }) {
   const activeGroup = getActiveGroup(activeTab);
-  const activeItem = getActiveItem(activeTab);
-  const ActiveIcon = activeItem?.icon;
 
   return (
     <div className="rounded-2xl border bg-background px-4 py-3 shadow-sm">
-      <div className="flex flex-col gap-2.5">
-        <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
-          <div className="min-w-0 space-y-1.5">
-            <div className="flex flex-wrap items-center gap-2 text-[11px] text-muted-foreground uppercase tracking-[0.18em]">
-              <span className="font-semibold">Admin Console</span>
-              {activeGroup ? (
-                <>
-                  <span className="h-1 w-1 rounded-full bg-border" />
-                  <span className="tracking-normal normal-case text-[12px]">
-                    {activeGroup.title}
-                  </span>
-                </>
-              ) : null}
-            </div>
-
-            <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
-              <h1 className="font-semibold text-[26px] leading-none tracking-tight">
-                系统设置中心
-              </h1>
-              {activeItem && ActiveIcon ? (
-                <div className="inline-flex min-w-0 items-center gap-2 rounded-full border border-border/70 bg-muted/10 px-2.5 py-1.5">
-                  <div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-background text-muted-foreground shadow-sm">
-                    <ActiveIcon className="h-3.5 w-3.5" />
-                  </div>
-                  <div className="min-w-0">
-                    <div className="flex items-center gap-2">
-                      <span className="truncate font-medium text-[13px] text-foreground">
-                        {activeItem.label}
-                      </span>
-                      <SettingStatusBadge tone="enabled">当前</SettingStatusBadge>
-                    </div>
-                  </div>
-                </div>
-              ) : null}
-            </div>
-          </div>
+      <div className="flex flex-col gap-2 md:hidden">
+        <div className="flex items-center gap-2">
+          <Select onValueChange={onTabChange} value={activeTab}>
+            <SelectTrigger className="h-9 flex-1 border-border/70 bg-background shadow-none">
+              <SelectValue placeholder="选择设置项" />
+            </SelectTrigger>
+            <SelectContent>
+              {ADMIN_SETTINGS_NAV_GROUPS.map((group, groupIndex) => (
+                <SelectGroup key={group.title}>
+                  <SelectLabel>{group.title}</SelectLabel>
+                  {group.items
+                    .filter((item) => !item.href)
+                    .map((item) => (
+                      <SelectItem key={item.value} value={item.value}>
+                        {item.label}
+                      </SelectItem>
+                    ))}
+                  {groupIndex < ADMIN_SETTINGS_NAV_GROUPS.length - 1 ? (
+                    <SelectSeparator />
+                  ) : null}
+                </SelectGroup>
+              ))}
+            </SelectContent>
+          </Select>
 
           <Button
             asChild
-            className="h-8 rounded-full border-border/70 px-3 text-[13px]"
+            className="h-9 rounded-full border-border/70 px-3 text-[13px]"
             size="sm"
             variant="outline"
           >
             <Link href="/">
               <ArrowLeft className="h-3.5 w-3.5" />
-              返回工作台
+              返回
             </Link>
           </Button>
         </div>
 
-        <div className="border-border/70 border-t pt-2.5">
-          <div className="flex flex-col gap-2 md:hidden">
-            <Select onValueChange={onTabChange} value={activeTab}>
-              <SelectTrigger className="h-9 border-border/70 bg-background shadow-none">
-                <SelectValue placeholder="选择设置项" />
-              </SelectTrigger>
-              <SelectContent>
-                {ADMIN_SETTINGS_NAV_GROUPS.map((group, groupIndex) => (
-                  <SelectGroup key={group.title}>
-                    <SelectLabel>{group.title}</SelectLabel>
-                    {group.items
-                      .filter((item) => !item.href)
-                      .map((item) => (
-                        <SelectItem key={item.value} value={item.value}>
-                          {item.label}
-                        </SelectItem>
-                      ))}
-                    {groupIndex < ADMIN_SETTINGS_NAV_GROUPS.length - 1 ? (
-                      <SelectSeparator />
-                    ) : null}
-                  </SelectGroup>
-                ))}
-              </SelectContent>
-            </Select>
-
-            <div className="flex flex-wrap gap-1">
-              {(activeGroup?.items ?? []).map((item) => (
-                <SettingsQuickAction
-                  activeTab={activeTab}
-                  item={item}
-                  key={item.value}
-                  onTabChange={onTabChange}
-                />
-              ))}
-            </div>
-          </div>
-
-          <div className="hidden md:block">
-            <div className="flex min-w-0 items-center gap-1 overflow-x-auto pb-1">
-              {ADMIN_SETTINGS_NAV_GROUPS.map((group) => (
-                <SettingsGroupDropdown
-                  activeTab={activeTab}
-                  group={group}
-                  key={group.title}
-                  onTabChange={onTabChange}
-                />
-              ))}
-
-              <Separator className="mx-1 h-5 shrink-0" orientation="vertical" />
-
-              {(activeGroup?.items ?? []).map((item) => (
-                <SettingsQuickAction
-                  activeTab={activeTab}
-                  item={item}
-                  key={item.value}
-                  onTabChange={onTabChange}
-                />
-              ))}
-            </div>
-          </div>
+        <div className="flex flex-wrap gap-1">
+          {(activeGroup?.items ?? []).map((item) => (
+            <SettingsQuickAction
+              activeTab={activeTab}
+              item={item}
+              key={item.value}
+              onTabChange={onTabChange}
+            />
+          ))}
         </div>
       </div>
+
+      <div className="hidden min-w-0 items-center gap-2 md:flex">
+        <div className="shrink-0 text-[11px] text-muted-foreground uppercase tracking-[0.18em]">
+          Admin Console
+        </div>
+
+        {activeGroup ? (
+          <>
+            <span className="h-1 w-1 shrink-0 rounded-full bg-border" />
+            <span className="shrink-0 text-muted-foreground text-xs">
+              {activeGroup.title}
+            </span>
+          </>
+        ) : null}
+
+        <Separator className="mx-1 h-5 shrink-0" orientation="vertical" />
+
+        <div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto">
+          {ADMIN_SETTINGS_NAV_GROUPS.map((group) => (
+            <SettingsGroupDropdown
+              activeTab={activeTab}
+              group={group}
+              key={group.title}
+              onTabChange={onTabChange}
+            />
+          ))}
+
+          <Separator className="mx-1 h-5 shrink-0" orientation="vertical" />
+
+          {(activeGroup?.items ?? []).map((item) => (
+            <SettingsQuickAction
+              activeTab={activeTab}
+              item={item}
+              key={item.value}
+              onTabChange={onTabChange}
+            />
+          ))}
+        </div>
+
+        <Button
+          asChild
+          className="h-9 shrink-0 rounded-full border-border/70 px-3.5 text-[13px]"
+          size="sm"
+          variant="outline"
+        >
+          <Link href="/">
+            <ArrowLeft className="h-3.5 w-3.5" />
+            返回工作台
+          </Link>
+        </Button>
+      </div>
     </div>
   );
 }