Menü
MUI 9 容器表面类组件在 Foundation 项目中的详尽用法。当使用 Accordion/AppBar/Card/Paper 时参考。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | foundation-mui-surfaces |
| description | MUI 9 容器表面类组件在 Foundation 项目中的详尽用法。当使用 Accordion/AppBar/Card/Paper 时参考。 |
| # | 规则 | 要点 |
|---|---|---|
| 1 | 配色 | 只从 theme.palette.foundation.* 取值，禁止硬编码 hex |
| 2 | 圆角 | Paper/Card 容器 borderRadius: 8（主题已统一，勿覆盖） |
| 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 hook -> services/ -> @bindings/ |
Paper (基础表面)
├── Card (继承自 Paper，带结构化内容区域)
├── Accordion (继承自 Paper，可折叠面板)
└── AppBar (继承自 Paper，固定/粘性工具栏)
| 文件 | 覆盖组件 | 典型场景 |
|---|---|---|
| paper.md | Paper | 所有表面容器的基础，内容区域背景 |
| card.md | Card / CardHeader / CardContent / CardActions / CardMedia / CardActionArea | 设置页 section、信息展示卡片 |
| accordion.md | Accordion / AccordionSummary / AccordionDetails / AccordionActions | 可折叠设置组、FAQ、分组内容 |
| app-bar.md | AppBar / Toolbar | 页面内工具栏（本项目有自绘 TitleBar，AppBar 不常用） |
import type { SxProps, Theme } from '@mui/material';
export const surfaceStyles = (theme: Theme): Record<string, SxProps<Theme>> => {
const fp = theme.palette.foundation;
return {
card: {
backgroundColor: fp.bg.surface,
border: `1px solid ${fp.divider}`,
// borderRadius 由主题统一为 8，无需手动设置
},
cardTitle: { color: fp.text.primary, fontWeight: 600 },
cardSubtitle: { color: fp.text.secondary },
};
};
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 时参考。