ant-design-guide
SKILL.md
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)
如果用户询问如何初始化项目或配置环境：
- Vite: https://ant.design/docs/react/use-with-vite
- Next.js: https://ant.design/docs/react/use-with-next
- Umi: https://ant.design/docs/react/use-with-umi
- Remix/SSR: https://ant.design/docs/react/server-side-rendering
🧩 组件索引 (Component Index)
1. 通用与布局 (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
2. 导航 (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
3. 数据录入 (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
4. 数据展示 (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
5. 反馈与交互 (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
6. 主题定制 (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。