布局系统

import { AdminLayout as WebAdminLayout } from '@skyroc/web-admin-layouts';
import { NotificationButton } from '@skyroc/web-admin-notification';
import { DarkModeContainer } from '@skyroc/web-ui-compose';
import { createFileRoute } from '@tanstack/react-router';
import { useTranslation } from 'react-i18next';

import SystemLogo from '@/components/SystemLogo';
import UserAvatar from '@/features/auth/components/UserAvatar';
import { guardAdminRoute } from '@/features/router/guard';

const AdminFooter = () => {
  return (
    <DarkModeContainer className="h-full flex-center">
      <a href="https://github.com/Ohh-889/skyroc-admin/blob/main/LICENSE" rel="noopener noreferrer" target="_blank">
        Copyright MIT © 2021 Skyroc
      </a>
    </DarkModeContainer>
  );
};

const AdminLayout = () => {
  const { t } = useTranslation();

  return (
    <WebAdminLayout
      footer={<AdminFooter />}
      headerMiddleActions={<NotificationButton className="px-12px" />}
      headerRightActions={<UserAvatar />}
      logo={<SystemLogo className="text-32px text-primary" />}
      logoTitle={t('system.title')}
    />
  );
};

export const Route = createFileRoute('/(admin)')({
  component: AdminLayout,
  beforeLoad: async ({ context, location, matches, preload }) => {
    await guardAdminRoute({ context, location, matches, preload });
  }
});

WebAdminLayout
  -> AdminLayoutProvider
    -> @skyroc/materials/AdminLayout
      -> AdminHeader
      -> AdminSider
      -> AdminTab
      -> AdminContent
      -> AdminMenu
      -> ThemeDrawer
      -> AdminEffect

const GlobalContent = () => {
  const { content } = useAdminLayoutContext();

  return (
    <div className="h-full grow bg-layout p-16px">
      {content ?? <Outlet />}
    </div>
  );
};

const AdminLayout = () => {
  const { t } = useTranslation();

  return (
    <WebAdminLayout
      footer={<AdminFooter />}
      headerMiddleActions={
        <>
          <HelpCenterButton />
          <NotificationButton className="px-12px" />
        </>
      }
      headerRightActions={<UserAvatar />}
      logo={<SystemLogo className="text-32px text-primary" />}
      logoTitle={t('system.title')}
    />
  );
};

const AdminLayout = () => {
  const { t } = useTranslation();

  return (
    <WebAdminLayout
      headerMiddleActions={<NotificationButton className="px-12px" />}
      headerRightActions={<UserAvatar />}
      logoComponent={style => (
        <CustomBrandLogo
          logo={<SystemLogo className="text-32px text-primary" />}
          style={style}
          title={t('system.title')}
        />
      )}
    />
  );
};

import { createFileRoute } from '@tanstack/react-router';

const ReportCenter = () => {
  return <div>Report Center</div>;
};

export const Route = createFileRoute('/(admin)/report/center')({
  component: ReportCenter,
  staticData: {
    title: 'report_center',
    i18nKey: 'route.report_center',
    menu: {
      icon: 'mdi:file-chart-outline',
      order: 12
    }
  }
});