mr-component/demo/select-comparison.md

A library for Mr components

# 选择器组件对比与推荐用法

## 📋 概述

您的项目中现在有两个选择器组件：

- **MrSelect** - 传统的 Picker 选择器
- **BusinessPaymentSelector** - 专为支付场景设计的列表选择器

## 🔍 组件对比

### MrSelect (传统选择器)

```tsx
<MrSelect
  title="选择城市"
  options={[
    { value: 'beijing', label: '北京' },
    { value: 'shanghai', label: '上海' },
  ]}
  onConfirm={(value, option) => {
    console.log('选择结果:', value, option);
  }}
/>
```

**特点：**

- ✅ 基于 react-vant 的 Picker 组件
- ✅ 弹窗式选择，节省空间
- ✅ 支持多级联动
- ✅ 适合简单的选择场景
- ❌ 不适合显示复杂信息（余额、手续费等）
- ❌ 用户体验相对较差（需要点击确认）

### BusinessPaymentSelector (支付专用选择器)

```tsx
<BusinessPaymentSelector
  title="选择支付方式"
  options={[
    {
      id: 'wallet',
      name: 'Wallet',
      balance: '140,455.50',
      currency: 'KES',
      extra: 'Available',
    },
    {
      id: 'bank',
      name: 'MuRong Bank',
      balance: '13,093.40',
      currency: 'KES',
      fee: '6.00 KES',
      extra: 'Immediate',
    },
  ]}
  onChange={(value, option) => {
    console.log('选择结果:', value, option);
  }}
/>
```

**特点：**

- ✅ 列表式选择，即点即选
- ✅ 专为支付场景设计
- ✅ 支持余额、手续费、状态显示
- ✅ 完美适配移动端支付界面
- ✅ 支持禁用状态和禁用原因
- ✅ 可以添加新卡片功能
- ❌ 占用空间较大
- ❌ 不支持多级联动

## 🎯 使用场景推荐

### 使用 MrSelect 的场景：

- 简单的选择需求（城市、分类等）
- 选项数量较多，需要节省空间
- 不需要显示复杂的选项信息
- 用户熟悉传统的选择器操作

### 使用 BusinessPaymentSelector 的场景：

- 支付方式选择 ✅
- 银行卡选择 ✅
- 钱包选择 ✅
- 账户选择 ✅
- 需要显示余额、手续费等信息 ✅
- 移动端电商/金融应用 ✅

## 💡 针对您的 Figma 设计

根据您提供的 Figma 截图，这是一个**支付流程应用**，包含：

1. 成功页面
2. 手机号输入页面
3. **支付方式选择页面** ← 这里最适合 BusinessPaymentSelector
4. 支付确认页面

### 推荐方案：

```tsx
// 完全还原您的Figma设计
<BusinessPaymentSelector
  title="Payment Source"
  options={[
    {
      id: 'wallet',
      name: 'Wallet',
      balance: '140,455.50',
      currency: 'KES',
      extra: 'Not Allow for Overdraft',
    },
    {
      id: 'murongbank1',
      name: 'MuRong Bank',
      balance: '13,093.40',
      currency: 'KES',
      fee: '6.00 KES',
      extra: 'Immediate',
    },
    {
      id: 'murongbank2',
      name: 'MuRong Bank',
      balance: '0.00',
      currency: 'CNY',
      disabled: true,
      disabledReason: 'Insufficient balance',
    },
  ]}
  allowAddCard={true}
  addCardText="Add a new card"
  onChange={(value, option) => {
    console.log('选择支付方式:', value, option);
  }}
/>
```

## 🚀 总结

### MrSelect 适合：

- 📋 表单中的下拉选择
- 🌍 地区选择
- 📂 分类选择
- 🏷️ 标签选择

### BusinessPaymentSelector 适合：

- 💳 支付方式选择
- 🏦 银行卡选择
- 👛 钱包选择
- 💰 账户选择
- 📱 移动端金融应用

**您的项目建议**：在支付相关的场景中使用 BusinessPaymentSelector，它完全契合您的 Figma 设计，提供更好的用户体验。MrSelect 可以保留用于其他简单的选择场景。