# NumberKeyboardPopover

基于 Popover 的数字键盘组件，支持外部插槽传递触发元素。

## 功能特性

- ✅ 基于 Ant Design Popover 实现
- ✅ 支持外部插槽传递触发元素
- ✅ 支持小数输入和位数控制
- ✅ 支持亮色/暗色主题
- ✅ 提供 ref 方法控制开关状态
- ✅ 完整的回调函数支持

## 基本用法

```tsx
import NumberKeyboardPopover from './NumberKeyboardPopover';

function Example() {
  const [amount, setAmount] = useState('0.00');

  const handleConfirm = (value: string) => {
    setAmount(value);
    console.log('确认金额:', value);
  };

  return (
    <NumberKeyboardPopover
      value={amount}
      onChange={(value) => console.log('输入中:', value)}
      onConfirm={handleConfirm}
      onCancel={() => console.log('取消输入')}
      allowDecimal={true}
      decimalPlaces={2}
      selectType="dark"
    >
      <div style={{ 
        padding: '12px 16px', 
        border: '1px solid #d9d9d9', 
        borderRadius: '6px',
        cursor: 'pointer'
      }}>
        点击输入金额: ${amount}
      </div>
    </NumberKeyboardPopover>
  );
}
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| children | 触发元素 | `React.ReactNode` | - |
| value | 当前值 | `string` | `''` |
| onChange | 值变化回调 | `(value: string) => void` | - |
| onConfirm | 确认回调 | `(value: string) => void` | - |
| onCancel | 取消回调 | `() => void` | - |
| allowDecimal | 是否允许小数 | `boolean` | `true` |
| decimalPlaces | 小数位数 | `number` | `2` |
| selectType | 键盘主题 | `'light' \| 'dark'` | `'dark'` |
| disabled | 是否禁用 | `boolean` | `false` |
| overlayClassName | Popover 额外的类名 | `string` | `''` |

### Ref 方法

| 方法 | 说明 | 类型 |
|------|------|------|
| open | 打开键盘 | `() => void` |
| close | 关闭键盘 | `() => void` |
| isOpen | 获取当前是否打开 | `() => boolean` |

## 使用 Ref 控制

```tsx
import { useRef } from 'react';
import NumberKeyboardPopover, { NumberKeyboardPopoverRef } from './NumberKeyboardPopover';

function Example() {
  const keyboardRef = useRef<NumberKeyboardPopoverRef>(null);

  const handleOpenKeyboard = () => {
    keyboardRef.current?.open();
  };

  return (
    <>
      <button onClick={handleOpenKeyboard}>
        外部按钮打开键盘
      </button>
      
      <NumberKeyboardPopover ref={keyboardRef}>
        <div>触发元素</div>
      </NumberKeyboardPopover>
    </>
  );
}
```