# 交互控件组件

## `<button>`

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| text | string | - | 按钮文字 |
| type | `'primary' \| 'default' \| 'plain'` | `'primary'` | 样式类型 |
| size | `'default' \| 'large' \| 'mini'` | `'default'` | 尺寸 |
| disabled | boolean | false | 禁用 |
| loading | boolean | false | 加载中状态 |
| icon | ReactNode | - | 文字前的图标 |
| children | ReactNode | - | 自定义内容，优先级高于 icon/text |
| throttle | number | 500 | onClick 节流时间 (ms) |
| onClick | (e?: TouchEvent) => void | - | 点击回调 |
| onDisabledClick | (e?: TouchEvent) => void | - | 禁用状态下点击回调 |
| openType | `'getPhoneNumber' \| 'agreePrivacyAuthorization' \| 'agreePrivacyAuthorization\|getPhoneNumber'` | - | 开放能力 |
| onGetPhoneNumber | (e: GetPhoneNumberResult) => void | - | 获取手机号回调，openType 包含 getPhoneNumber 时有效 |
| onAgreePrivacyAuthorization | (e: AgreePrivacyResult) => void | - | 隐私授权回调，openType 包含 agreePrivacyAuthorization 时有效 |
| className | string | - | 样式类名 |
| style | CSSProperties | - | 内联样式 |

```tsx
// 基础按钮
<button text="提交" type="primary" onClick={() => handleSubmit()} />

// 加载状态
<button text="加载中" loading />

// 自定义内容
<button>
  <image src="icon.png" style={{ width: '16px', height: '16px' }} />
  <text>自定义按钮</text>
</button>

// 开放能力：获取手机号
<button
  openType="getPhoneNumber"
  onGetPhoneNumber={(e) => console.log(e)}
/>
```

---

## `<switch>`

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| checked | boolean | - | 受控值；设置后 defaultChecked 被忽略 |
| defaultChecked | boolean | false | 非受控默认值 |
| disabled | boolean | false | 禁用 |
| size | `'default' \| 'large'` | `'large'` | 尺寸 |
| onChange | (checked: boolean) => void | - | 状态变化，直接接收 boolean，不是事件对象 |
| className | string | - | 样式类名 |
| style | CSSProperties | - | 内联样式 |

```tsx
// 非受控
<switch defaultChecked onChange={(checked) => console.log(checked)} />

// 受控
const [on, setOn] = useState(false);
<switch checked={on} onChange={setOn} />
```

---

## `<slider>`

**仅支持受控用法，必须传 `value`。**

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| value | number | - | **必填**，当前值 |
| min | number | 0 | 最小值 |
| max | number | 100 | 最大值 |
| showValue | boolean | true | 是否显示当前数值 |
| disabled | boolean | false | 禁用 |
| onChange | (value: number) => void | - | 数值变化，直接接收 number |
| className | string | - | 样式类名 |
| style | CSSProperties | - | 内联样式 |

```tsx
const [volume, setVolume] = useState(50);
<slider value={volume} min={0} max={100} onChange={setVolume} />
```

---

## `<radio-group>` / `<radio>`

```tsx
const [selected, setSelected] = useState('a');

<radio-group value={selected} onChange={(v) => setSelected(v)}>
  <radio value="a">选项 A</radio>
  <radio value="b">选项 B</radio>
  <radio value="c" disabled>选项 C（禁用）</radio>
</radio-group>
```

### radio-group 属性

| 属性 | 类型 | 说明 |
|------|------|------|
| value | string \| number | 当前选中值（受控） |
| defaultValue | string \| number | 默认值（非受控） |
| onChange | (value: string \| number) => void | 选中变化回调 |
| className | string | 样式类名 |
| style | CSSProperties | 内联样式 |

### radio 属性

| 属性 | 类型 | 说明 |
|------|------|------|
| value | string \| number | 该项的值 |
| disabled | boolean | 禁用 |
| children | ReactNode | 标签内容 |
| className | string | 样式类名 |
| style | CSSProperties | 内联样式 |