ant-design-react

何时使用此技能

在用户希望执行以下操作时，使用此技能：

• 使用 Ant Design（antd）组件构建 React 应用
• 创建带验证的表单（Form、Input、Select、DatePicker）
• 在表格中显示数据，并支持排序、筛选和分页
• 使用设计令牌或 CSS 变量自定义 Ant Design 主题
• 使用反馈组件（Modal、Message、Notification）
• 实现布局和导航（Layout、Menu、Breadcrumb）
• 使用 Ant Design 设计令牌和设计系统

如何使用此技能

快速入门示例：带表格的表单

import { Button, Form, Input, Table, message } from 'antd';

const columns = [
  { title: 'Name', dataIndex: 'name', sorter: (a, b) => a.name.localeCompare(b.name) },
  { title: 'Email', dataIndex: 'email' },
  { title: 'Status', dataIndex: 'status', filters: [
    { text: 'Active', value: 'active' }, { text: 'Inactive', value: 'inactive' }
  ], onFilter: (value, record) => record.status === value },
];

function UserPage() {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    message.success(`Created user: ${values.name}`);
  };

  return (
    <>
      <Form form={form} layout="inline" onFinish={onFinish}>
        <Form.Item name="name" rules={[{ required: true }]}>
          <Input placeholder="Name" />
        </Form.Item>
        <Form.Item name="email" rules={[{ required: true, type: 'email' }]}>
          <Input placeholder="Email" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">Add User</Button>
        </Form.Item>
      </Form>
      <Table columns={columns} dataSource={[]} rowKey="id" pagination={{ pageSize: 10 }} />
    </>
  );
}

此技能的组织结构与 Ant Design React 官方文档一致（https://4x-ant-design.antgroup.com/docs/react/introduce-cn、https://4x-ant-design.antgroup.com/components/overview-cn/）。使用 Ant Design React 时：

1. 确定主题，根据用户的请求选择：

   • 入门/快速开始 → examples/getting-started/installation.md 或 examples/getting-started/basic-usage.md
   • Button/按钮 → examples/components/button.md
   • Form/表单 → examples/components/form.md
   • Table/表格 → examples/components/table.md
   • Input/输入框 → examples/components/input.md
   • Select/选择器 → examples/components/select.md
   • DatePicker/日期选择器 → examples/components/date-picker.md
   • Modal/对话框 → examples/components/modal.md
   • Layout/布局 → examples/components/layout.md
   • Menu/菜单 → examples/components/menu.md
   • 主题定制 → examples/advanced/theme-customization.md
   • 国际化 → examples/advanced/internationalization.md
   • TypeScript/类型支持 → examples/advanced/typescript.md

2. 从 examples/ 目录加载相应的示例文件：

   入门（快速开始）- examples/getting-started/：

   • examples/getting-started/installation.md - 安装 Ant Design 和基本设置
   • examples/getting-started/basic-usage.md - 基本组件用法

   组件 - examples/components/：

   • examples/components/button.md - Button 组件
   • examples/components/input.md - Input 组件
   • examples/components/form.md - 带验证的 Form 组件
   • examples/components/table.md - Table 组件
   • examples/components/select.md - Select 组件
   • examples/components/date-picker.md - DatePicker 组件
   • examples/components/modal.md - Modal 组件
   • examples/components/layout.md - Layout 组件
   • examples/components/menu.md - Menu 组件
   • examples/components/icon.md - Icon 组件
   • examples/components/typography.md - Typography 组件
   • examples/components/grid.md - Grid 组件
   • examples/components/space.md - Space 组件
   • examples/components/card.md - Card 组件
   • examples/components/tabs.md - Tabs 组件
   • examples/components/pagination.md - Pagination 组件
   • examples/components/upload.md - Upload 组件
   • examples/components/upload.md - Upload 组件
   • examples/components/message.md - Message 组件
   • examples/components/notification.md - Notification 组件
   • examples/components/alert.md - Alert 组件
   • examples/components/spin.md - Spin 组件
   • examples/components/progress.md - Progress 组件

   高级 - examples/advanced/：

   • examples/advanced/theme-customization.md - 自定义主题
   • examples/advanced/internationalization.md - 国际化设置
   • examples/advanced/typescript.md - TypeScript 支持

3. 遵循该示例文件中的具体说明，了解语法、结构和最佳实践

   重要说明：

   • 所有示例均遵循 Ant Design React 4.x API
   • 适用时，示例同时提供 JavaScript 和 TypeScript 版本
   • 每个示例文件都包含关键概念、代码示例和要点
   • 务必查看示例文件，了解最佳实践和常见模式

4. 必要时参考 api/ 目录中的 API 文档：

   • api/components.md - 组件 API 参考
   • api/config-provider.md - ConfigProvider API
   • api/design-tokens.md - 设计令牌 API

5. 使用 templates/ 目录中的模板：

   • templates/project-setup.md - 项目设置模板
   • templates/component-template.md - 组件用法模板

文档映射（一一对应官方文档）

指南（指南）：

• 查看 examples/guide/ 或 examples/getting-started/ 中的指南文件 → https://4x-ant-design.antgroup.com/docs/react/introduce-cn

组件（组件）：

• 查看 examples/components/ 中的组件文件 → https://4x-ant-design.antgroup.com/components/overview-cn/

示例和模板

此技能包含详细示例，按官方文档结构组织。所有示例都位于 examples/ 目录中（参见上方映射）。

使用示例：

• 根据用户请求确定主题
• 从上方映射中加载相应的示例文件
• 遵循该文件中的说明、语法和最佳实践
• 根据具体用例调整代码示例

使用模板：

• 参考 templates/ 目录中的模板，了解常见的脚手架结构
• 根据具体需求和编码风格调整模板

API 参考

详细的 API 文档位于 api/ 目录中，其组织结构与官方 Ant Design React API 文档一致：

组件 API（api/components.md）

• 所有组件属性和 API
• 组件方法和事件
• 组件类型和接口

ConfigProvider API（api/config-provider.md）

• ConfigProvider 组件 API
• 全局配置选项
• 区域设置配置

设计令牌 API（api/design-tokens.md）

• 设计令牌参考
• 主题自定义令牌
• CSS 变量

使用 API 参考：

1. 确定需要查询的 API
2. 从 api/ 目录加载对应的 API 文件
3. 查找 API 签名、参数、返回类型和示例
4. 参考链接的示例文件，了解详细用法
5. 所有 API 文件都包含指向 examples/ 目录中相关示例文件的链接

最佳实践

1. 导入样式：在入口文件中导入 Ant Design CSS
2. 使用 ConfigProvider：使用 ConfigProvider 包裹应用，以进行全局配置
3. 表单验证：使用带有验证规则的 Form 组件
4. TypeScript：使用 TypeScript 提高类型安全性
5. 主题自定义：使用设计令牌实现一致的主题
6. 国际化：使用带有区域设置的 ConfigProvider 实现 i18n
7. 组件组合：组合组件以构建复杂的 UI
8. 性能：使用 React.memo 和 useMemo 进行优化
9. 无障碍访问：遵循 Ant Design 无障碍访问指南
10. 响应式设计：使用 Grid 和响应式工具

资源

• 官方网站：https://4x-ant-design.antgroup.com/index-cn
• 入门指南：https://4x-ant-design.antgroup.com/docs/react/introduce-cn
• 组件：https://4x-ant-design.antgroup.com/components/overview-cn/
• GitHub 仓库：https://github.com/ant-design/ant-design

关键词

Ant Design、Ant Design React、antd、React UI 库、组件、Button、Form、Table、Input、Select、DatePicker、Modal、Layout、Menu、主题、自定义、国际化、i18n、TypeScript、设计系统、组件库、按钮、表单、表格、输入框、选择器、日期选择器、对话框、布局、菜单、主题、国际化、类型支持