# StatusAlert - 状态告警

## 说明

设备状态告警组件，支持单条直接渲染和多条堆叠展示。堆叠时显示最顶层告警内容，底部有层叠阴影暗示更多条目。

## StatusAlertStack 属性

| 属性 | 说明 | 类型 | 默认值 | 必填 |
|------|------|------|--------|------|
| **title** | 堆叠标题（如"设备提醒"） | `string` | - | 是 |
| **alerts** | 告警数据数组 | `StatusAlertItemProps[]` | - | 是 |
| **onPress** | 点击整体的回调 | `() => void` | - | 否 |
| **style** | 外层容器样式 | `ViewStyle` | - | 否 |

## StatusAlertItem 属性

| 属性 | 说明 | 类型 | 默认值 | 必填 |
|------|------|------|--------|------|
| **title** | 通知文本内容 | `string` | - | 是 |
| **overline** | 标题上方小字 | `string` | - | 否 |
| **subtitle** | 副标题 | `string \| ReactElement` | - | 否 |
| **presentation** | 展示场景 | `'page' \| 'modal'` | `'page'` | 否 |
| **warning** | 警告态（标题红色） | `boolean` | `false` | 否 |
| **leadingIconType** | 左侧图标类型 | `'warning' \| 'fault' \| 'consumable' \| 'offline' \| 'reminder' \| 'custom'` | - | 否 |
| **leadingIcon** | 自定义左侧图标 | `ReactElement` | - | 否 |
| **actionType** | 右侧交互类型 | `'none' \| 'navigate' \| 'button' \| 'buttonGroup' \| 'custom'` | `'none'` | 否 |
| **buttons** | 按钮配置 | `{ text: string; onPress?: () => void }[]` | - | 否 |
| **trailingNavigate** | 单按钮右侧追加箭头 | `boolean` | `false` | 否 |
| **onPress** | navigate/箭头点击回调 | `() => void` | - | 否 |

## 使用示例

```tsx
import { StatusAlert } from 'mhui-rn';

// 单条告警 - 导航跳转
<StatusAlert
  title="设备提醒"
  alerts={[{
    title: '滤芯需要更换',
    leadingIconType: 'consumable',
    actionType: 'navigate',
    onPress: () => navigateToDetail(),
  }]}
/>

// 多条告警 - 堆叠展示
<StatusAlert
  title="共3条异常提示"
  alerts={[
    { title: '网络连接异常', leadingIconType: 'offline' },
    { title: '温度传感器故障', leadingIconType: 'fault', warning: true },
    { title: '滤芯寿命不足', leadingIconType: 'consumable' },
  ]}
  onPress={() => navigateToAlertList()}
/>

// 带按钮的告警
<StatusAlert
  title="设备提醒"
  alerts={[{
    title: '固件需要升级',
    actionType: 'button',
    buttons: [{ text: '升级', onPress: () => startUpgrade() }],
  }]}
/>
```

## 注意事项

- `alerts` 为空或未传时组件不渲染
- 堆叠时仅展示第一条告警内容，多条通过底层阴影暗示
- `warning=true` 时标题颜色强制为红色，优先级高于 `leadingIconType`