136 lines
3.5 KiB
TypeScript
136 lines
3.5 KiB
TypeScript
import {
|
|
Activity,
|
|
BadgeDollarSign,
|
|
Bug,
|
|
Coins,
|
|
Database,
|
|
GitBranch,
|
|
Images,
|
|
LayoutDashboard,
|
|
ListChecks,
|
|
LogOut,
|
|
ReceiptText,
|
|
ShieldCheck,
|
|
Star,
|
|
Table2,
|
|
TicketCheck,
|
|
TicketPercent,
|
|
Users,
|
|
WalletCards,
|
|
} from 'lucide-react';
|
|
import type { ReactNode } from 'react';
|
|
|
|
import type { AdminSessionPayload } from '../api/adminApiTypes';
|
|
import type { AdminRouteDefinition, AdminRouteId } from './adminRoutes';
|
|
|
|
interface AdminShellProps {
|
|
admin: AdminSessionPayload;
|
|
routeId: AdminRouteId | null;
|
|
routes: AdminRouteDefinition[];
|
|
children: ReactNode;
|
|
onRouteChange: (routeId: AdminRouteId) => void;
|
|
onLogout: () => void;
|
|
}
|
|
|
|
const routeIcons = {
|
|
dashboard: LayoutDashboard,
|
|
overview: Activity,
|
|
tables: Database,
|
|
debug: Bug,
|
|
tracking: Table2,
|
|
'gray-release': GitBranch,
|
|
redeem: TicketPercent,
|
|
invite: TicketCheck,
|
|
'profile-wallet': WalletCards,
|
|
tasks: ListChecks,
|
|
'recharge-products': BadgeDollarSign,
|
|
'recharge-orders': ReceiptText,
|
|
'editor-generation-pricing': Coins,
|
|
'editor-showcase': Star,
|
|
'editor-assets': Images,
|
|
accounts: Users,
|
|
} satisfies Record<AdminRouteId, typeof LayoutDashboard>;
|
|
|
|
export function AdminShell({
|
|
admin,
|
|
routeId,
|
|
routes,
|
|
children,
|
|
onRouteChange,
|
|
onLogout,
|
|
}: AdminShellProps) {
|
|
return (
|
|
<div className="admin-shell">
|
|
<aside className="admin-sidebar">
|
|
<div className="admin-brand">
|
|
<div className="admin-brand-icon">
|
|
<ShieldCheck size={20} aria-hidden="true" />
|
|
</div>
|
|
<div>
|
|
<strong>陶泥儿后台</strong>
|
|
<span>Admin</span>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="admin-nav" aria-label="后台导航">
|
|
{routes.map((route) => {
|
|
const Icon = routeIcons[route.id];
|
|
return (
|
|
<button
|
|
className="admin-nav-button"
|
|
data-active={route.id === routeId}
|
|
key={route.id}
|
|
title={route.label}
|
|
type="button"
|
|
onClick={() => onRouteChange(route.id)}
|
|
>
|
|
<Icon size={18} aria-hidden="true" />
|
|
<span>{route.label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
|
|
<div className="admin-main">
|
|
<header className="admin-topbar">
|
|
<div className="admin-user">
|
|
<span>{admin.displayName || admin.username}</span>
|
|
<small>{admin.accountRole === 'owner' ? 'owner' : 'member'}</small>
|
|
</div>
|
|
<button
|
|
className="admin-icon-button"
|
|
title="退出登录"
|
|
type="button"
|
|
onClick={onLogout}
|
|
>
|
|
<LogOut size={18} aria-hidden="true" />
|
|
<span>退出</span>
|
|
</button>
|
|
</header>
|
|
|
|
<main className="admin-content">{children}</main>
|
|
</div>
|
|
|
|
<nav className="admin-bottom-nav" aria-label="后台导航">
|
|
{routes.map((route) => {
|
|
const Icon = routeIcons[route.id];
|
|
return (
|
|
<button
|
|
className="admin-bottom-nav-button"
|
|
data-active={route.id === routeId}
|
|
key={route.id}
|
|
title={route.label}
|
|
type="button"
|
|
onClick={() => onRouteChange(route.id)}
|
|
>
|
|
<Icon size={19} aria-hidden="true" />
|
|
<span>{route.label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|