# NutUI-React 组件库使用规范

## 1. 组件库介绍

NutUI-React 是基于 Taro 框架开发的移动端 React 组件库，提供了80+高质量组件，覆盖移动端主流场景，支持一套代码同时开发多端小程序+H5。

## 2. 优先使用原则

在开发UI时，应优先使用NutUI-React组件库中的组件，而非自行实现。具体原则如下：

### 2.1 基础组件
- **按钮**：使用 `Button` 组件
- **输入框**：使用 `Input` 组件
- **列表**：使用 `List` 和 `Cell` 组件
- **卡片**：使用 `Card` 组件
- **开关**：使用 `Switch` 组件
- **标签**：使用 `Tag` 组件
- **头像**：使用 `Avatar` 组件

### 2.2 布局组件
- **栅格**：使用 `Grid` 组件
- **布局**：使用 `Layout` 组件
- **滚动**：使用 `ScrollView` 组件

### 2.3 导航组件
- **标签栏**：使用 `Tabbar` 组件
- **导航栏**：使用 `NavBar` 组件
- **选项卡**：使用 `Tabs` 组件

### 2.4 反馈组件
- **对话框**：使用 `Dialog` 组件
- **提示**：使用 `Toast` 组件
- **加载**：使用 `Loading` 组件
- **操作菜单**：使用 `ActionSheet` 组件

## 3. 使用示例

### 3.1 登录页面
```tsx
import { Button, Form, Input, Checkbox, Dialog } from '@nutui/nutui-react-taro';

// 登录表单示例
<Form>
  <Form.Item label="系统号">
    <Input placeholder="请输入系统号" clearable />
  </Form.Item>
  <Form.Item label="用户名">
    <Input placeholder="请输入用户名" clearable />
  </Form.Item>
  <Form.Item label="密码">
    <Input placeholder="请输入密码" type="password" clearable />
  </Form.Item>
  <Button type="primary" block>登录</Button>
  <Checkbox label="我已阅读并同意用户协议" />
</Form>
```

### 3.2 我的页面
```tsx
import { Avatar, List, Cell, Button } from '@nutui/nutui-react-taro';

// 我的页面示例
<div className="mine">
  <div className="user-info">
    <Avatar size="large" icon="user" />
    <div className="user-name">用户名</div>
    <div className="user-phone">138****8888</div>
  </div>
  <List>
    <Cell title="个人资料" icon="user" isLink />
    <Cell title="设置" icon="settings" isLink />
    <Cell title="帮助中心" icon="help-circle" isLink />
    <Cell title="关于我们" icon="info" isLink />
  </List>
  <Button type="danger" block>退出登录</Button>
</div>
```

## 4. 最佳实践

1. **按需引入**：只引入需要的组件，减少打包体积
2. **类型安全**：使用 TypeScript 类型定义
3. **响应式设计**：适配不同屏幕尺寸
4. **性能优化**：合理使用组件，避免不必要的渲染
5. **可访问性**：确保组件的可访问性

## 5. 参考文档

- [NutUI-React 官方文档](https://nutui.jd.com/taro/react/3x/#/zh-CN/guide/intro-react)
- [Taro 官方文档](https://docs.taro.zone/)

## 6. 组件使用优先级

| 组件类型 | 优先使用 | 备选方案 |
|---------|---------|--------|
| 按钮 | `Button` | 自定义按钮 |
| 输入框 | `Input` | 自定义输入框 |
| 列表 | `List` + `Cell` | 自定义列表 |
| 卡片 | `Card` | 自定义卡片 |
| 对话框 | `Dialog` | Taro 原生对话框 |
| 提示 | `Toast` | Taro 原生提示 |

此规范旨在确保项目中UI的一致性和开发效率，优先使用NutUI-React组件库可以减少重复开发，提高代码质量。