lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: flatten admin settings header

Browse Source
This commit is contained in:
Your Name 2026-05-29 14:51:20 +08:00
parent fbfe3256c8
commit 155539693c
1 changed files with 86 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
app/(admin)/settings/_components/admin-settings-navigation.tsx
View File

@ -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>
);
}