# DataItem

数据展示条目组件，用于呈现「主标题 + 副标题」结构的单条数据（如数值、单位、状态文本）。支持点击导航态、强调色、尺寸和字体模式切换。

> 文件：`src/hyperOS/IotComponents/dataItem/DataItem.tsx`

## 导入

```ts
import { DataItem } from '@hyperOS/IotComponents/dataItem';
```

## 基础用法

```tsx
<DataItem title="25°C" subtitle="当前温度" />
```

## 尺寸

`size` 控制主标题字号，默认 `medium`。

| size | 数字字体 | 系统字体（stringMode） |
| --- | --- | --- |
| `medium` | `fontNumber28Demibold`（28pt） | `fontSystem26Medium`（26pt） |
| `small` | `fontNumber24Demibold`（24pt） | `fontSystem22Medium`（22pt） |

```tsx
<DataItem title="25°C" subtitle="当前温度" size="small" />
<DataItem title="25°C" subtitle="当前温度" size="medium" />
```

## 字体模式

`stringMode` 控制主标题字体类型，默认 `false`（使用数字专用字体）。

- `false`：数字字体（`num28D` / `num24D`），适合纯数值展示
- `true`：系统字体（`custom24M` / `custom20R`），适合文字内容

```tsx
<DataItem title="已连接" subtitle="设备状态" stringMode />
```

## 对齐方式

`align` 控制条目内文本对齐，默认 `left`。

```tsx
<DataItem title="25°C" subtitle="温度" align="center" />
```

## 点击导航态

传入 `onPress` 后，副标题右侧自动显示右箭头图标，整个副标题区域可点击。`disabled` 时点击无效，图标保留但不响应。

```tsx
<DataItem
  title="25°C"
  subtitle="查看详情"
  onPress={() => navigation.navigate('Detail')}
/>
```

## 强调色

`colorType` 对应色系的 Content 文字色（如 `'blue'` → `accentBlueContent`）。不传则使用默认内容色。

```tsx
<DataItem title="25°C" subtitle="当前温度" colorType="blue" />
<DataItem title="运行中" subtitle="设备状态" colorType="green" />
```

## 禁用态

`disabled` 使整个条目透明度降至 0.5，`onPress` 不可触发。

```tsx
<DataItem title="--" subtitle="暂无数据" disabled />
```

## Props

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `title` | `string` | — | 主标题文本（必填） |
| `subtitle` | `string` | — | 副标题文本 |
| `size` | `'small' \| 'medium'` | `'medium'` | 主标题尺寸 |
| `stringMode` | `boolean` | `false` | `false` 用数字字体，`true` 用系统字体 |
| `align` | `'left' \| 'center'` | `'left'` | 文本对齐方式 |
| `onPress` | `() => void` | — | 点击回调，有值时显示右箭头图标 |
| `colorType` | `ColorType` | — | 主标题颜色类型，对应色系 Content 文字色；不传则使用默认内容色 |
| `disabled` | `boolean` | `false` | 禁用态，透明度 0.5，`onPress` 无效 |
| `accessible` | `boolean` | `true` | 无障碍开关 |
| `accessibilityLabel` | `string` | — | 无障碍标签 |
| `accessibilityHint` | `string` | — | 无障碍提示，默认为 `title` 或 `title, subtitle` |

## 注意事项

1. `onPress` 的点击热区是副标题行整体（文字 + 图标），不是整个条目。
2. `disabled` 不会隐藏右箭头图标，仅阻止点击响应。
3. `colorType` 使用 `useContentColorTypeState` 取对应色系的 Content token（如 `'blue'` → `accentBlueContent`）。
4. 通常不单独使用，配合 `DataGroup` 排列多个条目。