# SelectList - 选择列表

## 说明

单选列表组件，支持左对勾和右对勾两种选中样式，支持分组和子选项。常放在 Drawer 内使用。

## 属性

### SelectListProps

| 属性 | 说明 | 类型 | 默认值 | 必填 |
|------|------|------|--------|------|
| **options** | 选项数据 | `SelectItemOption[]` | - | 是 |
| **value** | 当前选中值 | `string \| number` | - | 否 |
| **onChange** | 选中回调，传 value | `(value: string \| number) => void` | - | 否 |
| **onSelect** | 点击回调，传完整 item | `(item: SelectItemOption) => void` | - | 否 |
| **selectedAlign** | 选中标记位置 | `'left' \| 'right'` | - | 否 |
| **isGroup** | 是否分组 | `boolean` | - | 否 |

### SelectItemOption

| 属性 | 说明 | 类型 | 必填 |
|------|------|------|------|
| **value** | 唯一标识 | `string \| number` | 是 |
| **title** | 标题 | `string` | 是 |
| **subtitle** | 副标题（仅右对勾） | `string` | 否 |
| **leadingIcon** | 左侧图标（仅右对勾） | `ReactElement` | 否 |
| **disabled** | 禁用 | `boolean` | 否 |
| **subItems** | 子选项（仅左对勾+非分组） | `SelectSubItemOption[]` | 否 |

### SelectSubItemOption

| 属性 | 说明 | 类型 | 必填 |
|------|------|------|------|
| **value** | 唯一标识 | `string \| number` | 是 |
| **title** | 标题 | `string` | 是 |
| **trailingValue** | 右侧文字 | `string` | 否 |
| **showNavigate** | 显示箭头 | `boolean` | 否 |
| **disabled** | 禁用 | `boolean` | 否 |
| **onPress** | 点击回调 | `() => void` | 否 |

## 使用示例

```tsx
import { SelectList } from '@hyperOS/components/selectList';

// 右对勾
<SelectList
  options={[
    { value: 1, title: '选项一' },
    { value: 2, title: '选项二', subtitle: '描述' },
  ]}
  value={1}
  onChange={setValue}
/>

// 左对勾 + 分组
<SelectList
  selectedAlign="left"
  isGroup
  options={[
    { value: 'a', title: '分组A', subItems: [{ value: 's1', title: '子项', trailingValue: '值', showNavigate: true }] },
    { value: 'b', title: '分组B' },
  ]}
  value="a"
  onChange={setValue}
/>

// 使用 onSelect 获取完整 item
<SelectList
  options={[
    { value: 1, title: '选项一' },
    { value: 2, title: '选项二' },
  ]}
  value={1}
  onSelect={(item) => console.log(item)}
/>
```