Menu
MUI 9 数据展示类组件在 Foundation 项目中的详尽用法。当使用 Typography/Avatar/Badge/Chip/Divider/List/Table/Tooltip 时参考。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Foundation 脚手架的子窗口系统使用指南：ChildWindowService（Open/Close/List）、事件总线通信（定向 / 广播）、预设类型（confirm / message / blank）、新增子窗口类型标准操作，以及"子窗口 MVVM 与主窗口一致、通信只走事件总线"等铁律。
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 时参考。
MUI 9 导航类组件在 Foundation 项目中的详尽用法。当使用 Tabs/Menu/Drawer/Breadcrumbs/Pagination/Stepper/SpeedDial/BottomNav/Link 时参考。
| name | foundation-mui-data-display |
| description | MUI 9 数据展示类组件在 Foundation 项目中的详尽用法。当使用 Typography/Avatar/Badge/Chip/Divider/List/Table/Tooltip 时参考。 |
| # | 规则 | 要点 |
|---|---|---|
| 1 | 配色 | 只从 theme.palette.foundation.* 取值，禁止硬编码 hex |
| 2 | 圆角 | 按钮 6px / 容器 8px，已由主题统一 |
| 3 | 图标 | 只用 @mui/icons-material 的 *Rounded 系列 |
| 4 | i18n | 所有人类可见字符串走 t('key') |
| 5 | 样式工厂 | 写在 <Name>.styles.ts，使用 (theme: Theme) => Record<string, SxProps<Theme>> |
| 6 | 对话框 | 简单确认走 NativeDialogs；MUI Dialog 仅用于复杂表单 |
| 7 | 调用链 | View → ViewModel → services/ → @bindings/ |
| 8 | 路由 | 用 useRouter().navigate(id)，不用 react-router |
| 文件 | 覆盖组件 | 说明 |
|---|---|---|
| typography.md | Typography | 文本排版，variant 映射 |
| avatar.md | Avatar, AvatarGroup | 用户头像、头像组 |
| badge.md | Badge | 徽章/角标 |
| chip.md | Chip | 标签/筛选条件 |
| divider.md | Divider | 分隔线 |
| list.md | List 全家族 | 列表（Sidebar 基础） |
| table.md | Table 全家族 | 简单表格 |
| tooltip.md | Tooltip, Icon, SvgIcon | 悬停提示与图标 |
