Ant Design Component Guide
当用户询问有关 Ant Design 组件的使用、样式修改、或者需要编写特定 UI 功能时，请参考此指南。
⚠️ 关键指令 (Critical Instructions)
-
查阅文档: Ant Design 版本更新较快（当前主流为 v5/v6），遇到复杂的 Props（如 Table columns, Form rules, Upload customRequest）时，必须使用浏览工具 (Browsing Tool) 读取对应组件的 URL 以获取准确的类型定义。
-
V5/V6 风格: 默认使用 Functional Components + Hooks。优先使用 CSS-in-JS (Antd Style) 或 style 属性，避免使用旧版的 Less 导入方式，除非用户特定要求。
-
App 包裹: 在使用 message , modal , notification 的静态方法时，推荐使用 <App> 组件包裹应用，并使用 App.useApp() hook 获取实例，以确保样式和 Context 正确继承。
📚 常用框架集成 (Integration)
如果用户询问如何初始化项目或配置环境：
🧩 组件索引 (Component Index)
- 通用与布局 (General & Layout)
构建页面骨架和基础元素
-
Button (按钮): https://ant.design/components/button
-
Icon (图标): https://ant.design/components/icon
-
Typography (排版): https://ant.design/components/typography
-
Layout (布局): https://ant.design/components/layout
-
Grid (栅格): https://ant.design/components/grid
-
Flex (弹性布局): https://ant.design/components/flex
-
Space (间距): https://ant.design/components/space
-
ConfigProvider (全局配置): https://ant.design/components/config-provider
- 导航 (Navigation)
页面跳转与层级导航
-
Menu (菜单): https://ant.design/components/menu
-
Breadcrumb (面包屑): https://ant.design/components/breadcrumb
-
Dropdown (下拉菜单): https://ant.design/components/dropdown
-
Steps (步骤条): https://ant.design/components/steps
-
Pagination (分页): https://ant.design/components/pagination
- 数据录入 (Data Entry)
表单与交互控件
-
Form (表单总线): https://ant.design/components/form
-
Input / Textarea: https://ant.design/components/input
-
Select (选择器): https://ant.design/components/select
-
Radio / Checkbox: https://ant.design/components/radio / https://ant.design/components/checkbox
-
DatePicker (日期选择): https://ant.design/components/date-picker
-
Upload (上传): https://ant.design/components/upload
-
Switch (开关): https://ant.design/components/switch
-
TreeSelect (树选择): https://ant.design/components/tree-select
-
Transfer (穿梭框): https://ant.design/components/transfer
- 数据展示 (Data Display)
核心展示组件
-
Table (表格): https://ant.design/components/table - 注意：复杂表格推荐优先考虑 ProTable
-
List (列表): https://ant.design/components/list
-
Descriptions (描述列表): https://ant.design/components/descriptions
-
Card (卡片): https://ant.design/components/card
-
Tabs (标签页): https://ant.design/components/tabs
-
Tag (标签): https://ant.design/components/tag
-
Image (图片): https://ant.design/components/image
-
Tree (树形控件): https://ant.design/components/tree
-
QRCode (二维码): https://ant.design/components/qr-code
-
Statistic (统计数值): https://ant.design/components/statistic
- 反馈与交互 (Feedback)
交互反馈
-
Modal (对话框): https://ant.design/components/modal
-
Drawer (抽屉): https://ant.design/components/drawer
-
Message (全局提示): https://ant.design/components/message
-
Notification (通知提醒): https://ant.design/components/notification
-
Spin (加载中): https://ant.design/components/spin
-
Popconfirm (气泡确认): https://ant.design/components/popconfirm
-
Skeleton (骨架屏): https://ant.design/components/skeleton
-
Watermark (水印): https://ant.design/components/watermark
- 主题定制 (Theme)
-
Customize Theme: https://ant.design/docs/react/customize-theme
-
ColorPicker: https://ant.design/components/color-picker
💡 使用场景示例
-
表单场景: 结合 Form , Input , Select , Button 。使用 Form.useForm() 获取实例。
-
后台列表: 结合 Table , Pagination , Space (操作栏)。
-
详情页: 结合 Descriptions 或 Card 。
-
全局反馈: 使用 <App> 组件包裹根节点，在子组件中使用 App.useApp() 调用 message 或 modal 。