菜单与标签页

bootstrap.tsx
  -> setupAdminLayouts({ routeTree, routeMode, menuCategories, menuNodeCallback, extras, storage })

useAuth().initAuth()
  -> initMenus(userInfo)
    -> menuGenerator.generate(...)
      -> allMenus
      -> quickReferenceMenus
      -> home

WebAdminLayout
  -> useAdminMenus()
  -> AdminMenu / AdminSider / AdminHeader
  -> useAdminTab()
  -> AdminTab
  -> cacheTabs()

setupAdminLayouts({
  defaultHome: globalConfig.defaultHome,
  defaultIcon: globalConfig.defaultIcon,
  loadDynamicRoutes: loadAdminDynamicRoutes,
  menuCategories,
  extras: menuExtras,
  menuNodeCallback,
  permissionSuperRole: import.meta.env.VITE_STATIC_SUPER_ROLE,
  routeMode: globalConfig.routeMode,
  routeTree,
  storage: localStg
});

export const menuCategories = {
  admin: {
    key: 'admin',
    layout: '/(admin)'
  }
} as const satisfies Record<string, AdminLayoutMenuCategory>;

export const Route = createFileRoute('/(admin)/manage/user/')({
  component: UserList,
  staticData: {
    title: 'manage_user',
    i18nKey: 'route.manage_user',
    menu: {
      icon: 'ic:round-manage-accounts',
      order: 1
    },
    permissions: ['R_ADMIN']
  }
});

loadDynamicRoutes: loadAdminDynamicRoutes

import type { MenuNodeCallback, MenuNodeConfig } from '@skyroc/web-admin-layouts';

import { menuCategories } from './menu-category';

const adminTopLevelMenuNodes = [
  {
    id: 'admin-feature-divider',
    menu: {
      order: 6,
      type: 'divider'
    }
  },
  {
    id: 'admin-about-divider',
    menu: {
      order: 20,
      type: 'divider'
    }
  }
] satisfies MenuNodeConfig[];

export const menuNodeCallback: MenuNodeCallback = routeId => {
  if (routeId !== menuCategories.admin.layout) return [];

  return adminTopLevelMenuNodes;
};

import ReleaseChannelMenuExtra from './components/ReleaseChannelMenuExtra';

export const menuExtras = {
  ReleaseChannel: ReleaseChannelMenuExtra
};

export type ExtraKey = keyof typeof menuExtras;

declare namespace Router {
  interface MenuExtraRegistry extends Record<import('@/features/menus/extras').ExtraKey, true> {}
}

staticData: {
  title: 'about',
  menu: {
    extra: 'ReleaseChannel',
    icon: 'fluent:book-information-24-regular',
    order: 22
  }
}

quickReferenceMenus[path]
  -> title / i18nKey / icon / localIcon / tab
  -> getTabByMenuInfo(...)
  -> App.Global.Tab

const adminTopLevelMenuNodes = [
  {
    id: 'admin-feature-divider',
    menu: {
      order: 6,
      type: 'divider'
    }
  },
  {
    id: 'admin-report-divider',
    menu: {
      order: 12,
      type: 'divider'
    }
  },
  {
    id: 'admin-about-divider',
    menu: {
      order: 20,
      type: 'divider'
    }
  }
] satisfies MenuNodeConfig[];

import { Tag } from 'antd';

interface BetaMenuExtraProps {
  /** 菜单标题，用于辅助生成可读文案。 */
  title?: string;
}

const BetaMenuExtra = (props: BetaMenuExtraProps) => {
  const { title = 'menu' } = props;

  return <Tag aria-label={`${title} beta`}>Beta</Tag>;
};

export default BetaMenuExtra;

import BetaMenuExtra from './components/BetaMenuExtra';
import ReleaseChannelMenuExtra from './components/ReleaseChannelMenuExtra';

export const menuExtras = {
  Beta: BetaMenuExtra,
  ReleaseChannel: ReleaseChannelMenuExtra
};

staticData: {
  title: 'report_center',
  i18nKey: 'route.report_center',
  menu: {
    extra: 'Beta',
    icon: 'mdi:file-chart-outline',
    order: 12
  }
}

export const Route = createFileRoute('/(admin)/manage/user/$id')({
  component: UserDetail,
  staticData: {
    title: 'manage_user_detail',
    i18nKey: 'route.manage_user_$id',
    menu: {
      hide: true,
      activeMenu: '/manage/user'
    },
    tab: {
      multi: true
    }
  }
});