Antd

# Ant Design 组件库 (antd)

## 描述
为 AI 助手提供 Ant Design 组件库的使用能力。AI 可以在任何 React 项目中使用 Ant Design 的基础组件来构建 UI，包括按钮、表单、表格、模态框、布局等所有官方组件。

## 位置
`~/.openclaw/workspace/skills/antd`

## 功能
- 提供 Ant Design 所有基础组件的使用知识
- 支持在任意 React 项目中使用 Ant Design
- 提供组件属性、用法、最佳实践
- 支持 Ant Design 5.x 的所有特性
- 提供主题定制、国际化等高级用法

## 核心组件

### 通用组件
Button, Icon, Typography, Layout, Space, Divider, etc.

### 导航组件
Menu, Tabs, Breadcrumb, Dropdown, Pagination, Steps, etc.

### 数据录入组件
Form, Input, Select, Radio, Checkbox, DatePicker, Upload, etc.

### 数据展示组件
Table, Card, List, Tree, Transfer, Timeline, Badge, etc.

### 反馈组件
Modal, Message, Notification, Result, Progress, Spin, etc.

### 布局组件
Grid, Layout, Space, Divider, etc.

## 使用方法

### 在 OpenClaw 中使用
```
用 Ant Design 创建一个按钮
帮我做一个表单，包含输入框和选择器
用 Table 组件展示用户数据
添加一个 Modal 确认对话框
```

## 依赖
- React 18+
- Ant Design 5+
- @ant-design/icons

## 作者
batype

## 版本
1.0.0

# Ant Design 组件库

为 AI 助手提供 Ant Design 组件库的完整使用指南。AI 可以在任何 React 项目中使用 Ant Design 构建 UI。

## 快速开始

### 安装

```bash
npm install antd @ant-design/icons
# 或
yarn add antd @ant-design/icons
```

### 引入样式

```javascript
import 'antd/dist/reset.css';
```

### 使用组件

```javascript
import { Button } from 'antd';

<Button type="primary">按钮</Button>
```

## 核心组件

### 按钮 (Button)

```javascript
import { Button } from 'antd';

// 基础用法
<Button>默认按钮</Button>
<Button type="primary">主要按钮</Button>
<Button type="dashed">虚线按钮</Button>
<Button type="text">文本按钮</Button>
<Button danger>危险按钮</Button>

// 状态
<Button loading>加载中</Button>
<Button disabled>禁用</Button>
<Button size="small">小按钮</Button>
```

### 表单 (Form)

```javascript
import { Form, Input, Button } from 'antd';

<Form onFinish={handleSubmit}>
  <Form.Item 
    name="username" 
    label="用户名"
    rules={[{ required: true, message: '请输入用户名!' }]}
  >
    <Input placeholder="请输入用户名" />
  </Form.Item>
  
  <Button type="primary" htmlType="submit">提交</Button>
</Form>
```

### 表格 (Table)

```javascript
import { Table, Tag } from 'antd';

const columns = [
  { title: '姓名', dataIndex: 'name' },
  { title: '年龄', dataIndex: 'age' },
  { 
    title: '状态', 
    dataIndex: 'status',
    render: (status) => (
      <Tag color={status === 'active' ? 'green' : 'red'}>
        {status === 'active' ? '启用' : '禁用'}
      </Tag>
    )
  },
];

<Table dataSource={data} columns={columns} rowKey="id" />
```

### 模态框 (Modal)

```javascript
import { Modal, Button } from 'antd';

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>打开</Button>

<Modal
  title="标题"
  open={open}
  onOk={() => setOpen(false)}
  onCancel={() => setOpen(false)}
>
  内容
</Modal>
```

## 组件分类

| 分类 | 组件 |
|------|------|
| 通用 | Button, Icon, Typography, Space, Divider |
| 导航 | Menu, Tabs, Breadcrumb, Dropdown, P...