# ListItem - 普通列表项

## 说明

通用的列表项组件，支持主标题、副标题（字符串或自定义组件）、右侧文案/图标、左侧图标等。

## 属性

| 属性 | 说明 | 类型 | 默认值 | 必填 |
|------|------|------|--------|------|
| **title** | 标题 | `string` | - | 是 |
| **subtitle** | 副标题 | `string \| ReactElement<SubtitleGroupProps>` | - | 否 |
| **value** | 右侧文案 | `string` | - | 否 |
| **onPress** | 点击回调 | `() => void` | - | 是 |
| **onLongPress** | 长按回调 | `() => void` | - | 否 |
| **delayLongPress** | 长按延迟 | `number` | - | 否 |
| **disabled** | 禁用状态 | `boolean` | `false` | 否 |
| **actionType** | 右侧图标类型 | `'navigate' \| 'select' \| 'none' \| 'custom'` | `'navigate'` | 否 |
| **badge** | 红点 | `boolean` | - | 否 |
| **leadingIcon** | 左侧图标 | `ReactElement<SvgProps> \| ImageSourcePropType` | - | 否 |
| **customRender** | 自定义渲染 | `ReactElement` | - | 否 |

## 使用示例

```tsx
import { ListItem } from '@hyperOS/components/listItem';
import { SubtitleGroup } from '@hyperOS/components/subtitleGroup';
import { Home } from '@icons/index';

// 基础用法 — 默认右侧带箭头
<ListItem title="列表项标题" onPress={() => {}} />

// 带副标题和右侧文案
<ListItem
  title="列表项标题"
  subtitle="副标题描述"
  value="详细信息"
  onPress={() => {}}
/>

// 带左侧 SVG 图标
<ListItem
  title="带图标列表项"
  leadingIcon={<Home width={24} height={24} />}
  onPress={() => {}}
/>

// 右侧操作类型 — 选择
<ListItem title="选择项" actionType="select" onPress={() => {}} />

// 自定义右侧渲染
<ListItem
  title="固件版本"
  actionType="custom"
  customRender={<Text>1.2.3</Text>}
  onPress={() => {}}
/>

// 显示小红点
<ListItem title="消息" badge onPress={() => {}} />

// 禁用状态
<ListItem title="禁用项" disabled onPress={() => {}} />
```

## 注意事项

- `onPress` 必填，不传时列表项不可点击
- `leadingIcon` 容器固定 46x46，图标建议使用 24x24 或更小尺寸
- `actionType='custom'` 时，右侧完全由 `customRender` 控制，`value` 和 `badge` 不生效