用途:当需要用 Ant Design(antd)构建 React 应用时使用本技能,包括表单与校验(Form、Input、Select、DatePicker)、带排序筛选分页的表格(Table)、反馈组件(Modal、Message、Notification)、布局与导航(Layout、Menu、Breadcrumb),以及设计令牌与设计系统、主题定制和国际化。
主要能力:技能内容按 Ant Design React 官方文档结构组织,包含 examples/、api/、templates/ 三类目录。examples/ 下有 getting-started(installation、basic-usage)、components(button、input、form、table、select、date-picker、modal、layout、menu、icon、typography、grid、space、card、tabs、pagination、upload、message、notification、alert、spin、progress)、advanced(theme-customization、internationalization、typescript);api/ 下有 components.md、config-provider.md、design-tokens.md;templates/ 下有 project-setup.md、component-template.md。
使用方式:先根据用户请求识别主题,再加载对应示例文件,按其语法、结构与最佳实践编写代码;需要时查阅 api/ 中的 API 签名与参数,或参考 templates/ 脚手架。示例遵循 Ant Design React 4.x API,部分同时提供 JavaScript 与 TypeScript 版本。
最佳实践(资料列出):在入口文件引入 Ant Design CSS;用 ConfigProvider 包裹应用做全局配置;用 Form 校验规则;使用 TypeScript 提升类型安全;用设计令牌统一主题;用 ConfigProvider 的 locale 做国际化;组合组件构建复杂界面;用 React.memo 与 useMemo 优化性能;遵循无障碍指南;用 Grid 与响应式工具。
适用场景:企业级后台、数据表格与表单密集型 React 应用、需要统一设计系统与主题的界面。
限制:资料未提供安装命令、具体版本号、收费或价格信息,也未说明运行环境要求;示例基于 4.x API,其他版本兼容性暂未提供。