# StatusAlert - 状态告警

## 说明

设备状态告警组件，支持单条直接渲染和多条堆叠展示。堆叠时显示最顶层告警内容，底部有层叠阴影暗示更多条目；点击堆叠卡片（箭头、按钮等交互控件除外）会以抽屉形式展开全部告警，每条保留各自的交互能力。

## StatusAlert 属性

| 属性 | 说明 | 类型 | 默认值 | 必填 |
|------|------|------|--------|------|
| **alerts** | 告警数据数组，单条直接渲染，多条自动堆叠 | `StatusAlertItemProps[]` | - | 是 |
| **stackTitle** | 堆叠标题，多条时显示在卡片上方（如"共4条异常提示"） | `string` | - | 否 |
| **accessibilityTitle** | 堆叠标题无障碍配置 | `AccessibilityPropsType` | - | 否 |
| **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** | 整条点击回调；未传 `onNavigationPress` 时也作为箭头点击兜底 | `() => void` | - | 否 |
| **onNavigationPress** | 右侧导航箭头点击回调，用于单独处理箭头按压 | `() => void` | - | 否 |

## 使用示例

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

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

// 多条告警 - 堆叠展示，点击后抽屉展开全部
<StatusAlert
  stackTitle="共3条异常提示"
  alerts={[
    { title: '网络连接异常', leadingIconType: 'offline', actionType: 'navigate', onPress: () => goNetwork() },
    { title: '温度传感器故障', leadingIconType: 'fault', warning: true },
    { title: '滤芯寿命不足', leadingIconType: 'consumable', actionType: 'button', buttons: [{ text: '购买' }] },
  ]}
  onPress={() => reportClick()}
/>

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

## 注意事项

- `alerts` 为空或未传时组件不渲染
- 单条（`alerts.length === 1`）直接渲染该条，不进入堆叠/抽屉逻辑
- 堆叠时仅展示第一条告警内容，多条通过底层阴影暗示
- 点击堆叠卡片后以抽屉（`Drawer` elastic 弹性高度）展开全部告警，抽屉内每条告警保留各自的 `actionType` 交互（navigate 箭头、按钮等可独立点击），条间距 8px
- `onPress` 在打开抽屉的同时额外触发，可用于埋点等副作用，不影响抽屉展开
- `onNavigationPress` 只作用于右侧导航箭头；未传时箭头点击回退到 `onPress`
- `warning=true` 时标题颜色强制为红色，优先级高于 `leadingIconType`