Genarrative/apps/admin-web/src/app/AdminShell.tsx

import {
  Activity,
  BadgeDollarSign,
  Bug,
  Coins,
  Database,
  FolderArchive,
  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,
  'error-reports': Bug,
  '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,
  'project-snapshots': FolderArchive,
  accounts: Users,
  'agc-models': ListChecks,
} 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>
  );
}