payment-mini/nutui-usage.spec.md

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 登录页面

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 我的页面

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 官方文档
• Taro 官方文档

6. 组件使用优先级

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

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