ProComponents Guide & Documentation
当用户询问 Ant Design Pro 组件、构建后台页面或需要查找具体组件参数时，请参考以下目录。 关键指令：如果需要编写详细代码且不确定某个 Props（如 request 的返回值格式、columns 的具体配置），请使用浏览工具（Browsing Tool）读取对应的 URL。
1. Layout 布局组件
核心组件: ProLayout
- ProLayout: 解决侧边栏、顶部导航、面包屑等全局布局。 - PageContainer: 页面的标准容器，自动生成面包屑和标题。 - FooterToolbar: 底部固定工具栏。 - WaterMark: 水印组件。
2. Table 表格与列表
核心组件: ProTable
- ProTable (超级表格):
- 文档链接: https://pro-components.antdigital.dev/components/table - 用途: 包含查询表单、工具栏、表格体的全功能表格，CRUD 标配。
- EditableProTable (可编辑表格):
- 文档链接: https://pro-components.antdigital.dev/components/editable-table - 用途: 行内编辑、实时保存。
- DragSortTable (拖拽排序):
- 文档链接: https://pro-components.antdigital.dev/components/drag-sort-table
- ProList (高级列表):
- 文档链接: https://pro-components.antdigital.dev/components/list - 用途: 卡片列表、文章列表，支持展开、选择。
3. Form 表单组件
核心组件: ProForm
- 通用表单 (ProForm, ModalForm, DrawerForm, StepsForm):
- 文档链接: https://pro-components.antdigital.dev/components/form - 用途: - ProForm: 标准页面表单。 - ModalForm: 弹窗表单。 - DrawerForm: 抽屉表单。 - StepsForm: 分步表单。 - LoginForm: 登录页专用。
- SchemaForm (JSON配置表单):
- 文档链接: https://pro-components.antdigital.dev/components/schema-form
- QueryFilter (筛选表单):
- 文档链接: https://pro-components.antdigital.dev/components/query-filter
4. Data Display 数据展示
- ProCard (高级卡片):
- 文档链接: https://pro-components.antdigital.dev/components/card - 用途: 页面切分、分栏布局、栅格布局。
- ProDescriptions (定义列表):
- 文档链接: https://pro-components.antdigital.dev/components/descriptions - 用途: 详情页展示，支持 columns 定义。
- StatisticCard (指标卡):
- 文档链接: https://pro-components.antdigital.dev/components/statistic-card
5. Other 其他
- ProSkeleton (骨架屏):
- 文档链接: https://pro-components.antdigital.dev/components/skeleton
- ProField (原子组件):
- 文档链接: https://pro-components.antdigital.dev/components/field - 用途: 根据 valueType 渲染只读/编辑模式的原子组件。
最佳实践提醒
- Request 模式: ProTable 和 ProForm 推荐使用
request属性配合async函数来接管数据加载，而不是手动管理 loading 和 data state。详情请查阅 ProTable 文档中的request部分。 - ValueType: 善用
valueType('money', 'date', 'select' 等) 来自动格式化显示和表单项，减少手写 render 代码。