Menu
MUI 9 导航类组件在 Foundation 项目中的详尽用法。当使用 Tabs/Menu/Drawer/Breadcrumbs/Pagination/Stepper/SpeedDial/BottomNav/Link 时参考。
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
| name | foundation-mui-navigation |
| description | MUI 9 导航类组件在 Foundation 项目中的详尽用法。当使用 Tabs/Menu/Drawer/Breadcrumbs/Pagination/Stepper/SpeedDial/BottomNav/Link 时参考。 |
本 SKILL 覆盖所有 MUI 9 导航类组件在 Foundation 项目中的标准用法。
| 组件 | 参考文档 | 一句话用途 |
|---|---|---|
| BottomNavigation / BottomNavigationAction | bottom-navigation.md | 底部导航栏，移动端主导航 |
| Breadcrumbs | breadcrumbs.md | 面包屑，层级路径展示 |
| Drawer / SwipeableDrawer | drawer.md | 侧边抽屉，辅助导航面板 |
| Link | link.md | 文本链接 |
| Menu / MenuItem / MenuList | menu.md | 弹出菜单，上下文操作 |
| Pagination / PaginationItem | pagination.md | 分页器 |
| SpeedDial / SpeedDialAction / SpeedDialIcon | speed-dial.md | 快速拨号按钮，浮动操作集 |
| Stepper / Step / StepLabel / StepContent / StepButton / StepConnector / MobileStepper | stepper.md | 步骤条，向导流程 |
| Tabs / Tab / TabScrollButton | tabs.md | 选项卡，视图切换 |
Foundation 使用自有路由系统，不用 react-router。导航组件的 onChange 回调应调用 navigate(id)：
import { useRouter } from '@/shared/hooks/useRouter';
const { navigate } = useRouter();
// Tabs 切换页面
<Tabs value={currentRoute} onChange={(_, id) => navigate(id)}>
<Tab value="home" label={t('nav.home')} />
<Tab value="settings" label={t('nav.settings')} />
</Tabs>
只从 theme.palette.foundation.* 取值，导航组件常用：
fp.accentfp.text.secondaryfp.bg.sidebar 或 fp.bg.surfacefp.bg.hover导航图标只用 @mui/icons-material 的 *Rounded 系列。
所有导航文案（Tab label、Menu item 文字、Breadcrumb 名称、Stepper 步骤名）走 t('key')。
复杂导航样式写在 <Name>.styles.ts，使用工厂函数模式。
Foundation 脚手架的子窗口系统使用指南：ChildWindowService（Open/Close/List）、事件总线通信（定向 / 广播）、预设类型（confirm / message / blank）、新增子窗口类型标准操作，以及"子窗口 MVVM 与主窗口一致、通信只走事件总线"等铁律。
MUI 9 数据展示类组件在 Foundation 项目中的详尽用法。当使用 Typography/Avatar/Badge/Chip/Divider/List/Table/Tooltip 时参考。
MUI 9 反馈类组件在 Foundation 项目中的详尽用法。当使用 Alert/Dialog/Progress/Skeleton/Snackbar/Backdrop 时参考。
Foundation 项目 @mui/icons-material 图标库详尽用法指南。Icon 铁律：只用 *Rounded 系列，禁止 emoji/Unicode/第三方 icon 包。
MUI 9 输入类组件在 Foundation 项目中的详尽用法。当使用 Button/TextField/Select/Checkbox/Switch/Slider/Radio/Rating/Autocomplete/ToggleButton/FAB 时参考。
MUI 9 布局类组件在 Foundation 项目中的详尽用法。当使用 Box/Container/Grid/Stack/ImageList 时参考。