# Alarms + Media 薄卡片组件设计

## 背景

TDesign 表单/页签/标准列表迁移与 Devices 真分页已收口。仍有一批**强定制卡列表**沿用原型 `article + prototype.css`：

- Alarms：线性 `alarm-item`
- Media：直播/原始视频网格卡
- Monitor：侧栏 `device-card`（树形绑定机、多选）
- Tasks：航线库 `route-grid`

本阶段只做 **Alarms + Media** 的本地薄展示组件，降低页面模板体积，为后续 Monitor 设备卡抽离铺路。

## 目标

1. 抽出 `AlarmItem.vue`、`MediaCard.vue` 两个展示组件。
2. `AlarmsView` / `MediaView` 仅用组件替换 `v-for` 内的 `article` 循环体。
3. **视觉与交互保持现状**：class 仍走 `prototype.css`，不引入 `t-list` / `t-card` 硬套。
4. 数据加载、空态、映射、请求、tab 仍留在页面。

## 非目标

- 不改 Monitor 侧栏 / 地图 / 飞行控制 / LivePlayer
- 不改 Tasks 航线库卡与航线编辑器
- 不迁 CSS 到 scoped（本阶段）
- 不改后端 API、分页策略、业务字段语义
- 不做通用 `BusinessCard` 抽象

## 方案（已选 A）

按视图各抽 **1 个列表项组件**：

| 组件 | 用途 |
|------|------|
| `src/components/AlarmItem.vue` | 告警列表单行 |
| `src/components/MediaCard.vue` | 直播卡 / 原始视频卡（`variant` 区分） |

不抽 `AlarmList` / `MediaGrid` 容器层（循环与空态仍在页面，避免无收益透传）。

## 组件契约

### AlarmItem

**Props（展示用，与现映射字段对齐）**

| prop | 类型 | 说明 |
|------|------|------|
| `severity` | string | 严重 / 警告 / 提示 |
| `severityClass` | string | `critical` / `medium` / `low` |
| `title` | string | 告警标题 |
| `device` | string | 设备标识文案 |
| `time` | string | 触发时间文案 |
| `status` | string | 待处理 / 已确认 / 已恢复 |
| `statusClass` | string | 状态样式 class |

**Events**

| event | payload | 说明 |
|-------|---------|------|
| `handle` | — | 点击「处理」；页面侧带上整条 alarm 调 API |

根节点保持：

```html
<article class="alarm-item" :class="severityClass">
```

内部结构与现 `AlarmsView` 模板一致（severity 标签、title/device·time、status、`t-button` 处理）。

### MediaCard

**Props**

| prop | 类型 | 说明 |
|------|------|------|
| `variant` | `'live' \| 'video'` | 直播 / 原始视频 |
| `name` | string | 主标题 |
| `desc` | string | 副文案 |
| `visualClass` | string | 封面背景 class（如 `dock-camera`） |
| `source` | string? | live：画面来源角标 |
| `duration` | string? | video：时长角标 |

**Events**

| event | 何时 |
|-------|------|
| `play` | 点击播放按钮（live / video 共用） |
| `action` | live：更多；video：下载 |

根节点：

```html
<article>
  <div class="media-visual" :class="visualClass">…</div>
  <div class="media-card-copy">…</div>
</article>
```

- `variant === 'live'`：LIVE 角标 + `source` + 更多按钮（`#i-more`）
- `variant === 'video'`：`duration` + 下载按钮（`#i-download`）

网格容器 class（`live-media-grid` / `media-grid`）仍在 `MediaView`，不进组件。

## 页面改造

### AlarmsView

```html
<div class="alarm-list">
  <AlarmItem
    v-for="a in alarms"
    :key="a.id"
    v-bind="alarmItemProps(a)"
    @handle="handle(a)"
  />
  <div v-if="!alarms.length" class="table-empty">暂无告警</div>
</div>
```

- `load` / `handle` / 指标 computed / 侧栏 bars 不变
- 可用小函数或直接逐 prop 绑定；**禁止**把 resolve API 塞进组件

### MediaView

```html
<div class="live-media-grid">
  <MediaCard
    v-for="s in liveStreams"
    :key="s.id"
    variant="live"
    :name="s.name"
    :desc="s.desc"
    :source="s.source"
    :visual-class="s.visualClass"
    @play="openLive(s)"
    @action="ui.toast('更多操作')"
  />
  …
</div>

<div class="media-grid">
  <MediaCard
    v-for="v in videos"
    :key="v.id"
    variant="video"
    …
    @play="ui.toast('播放：' + v.name)"
    @action="download(v)"
  />
  …
</div>
```

- tabs、load、download、路由 `view` query 不变

## 样式

- 组件 **不加** 会改变视觉的 scoped 新规则
- 继续依赖全局 `prototype.css` 中：
  - `.alarm-item` 及相关
  - `.live-media-grid` / `.media-grid` / `.media-visual` / `.media-card-copy` / `.live-corner` / `.media-duration` 等
- 若为消除 Vue 属性继承告警需 `inheritAttrs`，不得改 class 语义

## 文件清单

| 动作 | 路径 |
|------|------|
| 新增 | `src/components/AlarmItem.vue` |
| 新增 | `src/components/MediaCard.vue` |
| 修改 | `src/views/AlarmsView/AlarmsView.vue` |
| 修改 | `src/views/MediaView/MediaView.vue` |

## 实现顺序

1. **A** — `AlarmItem` + `AlarmsView` 接入；单独 commit  
2. **B** — `MediaCard` + `MediaView` 接入；单独 commit  
3. **C** — 浏览器冒烟：告警列表/处理按钮；媒体直播卡/视频卡播放与操作

建议 commit message：

- `refactor: 抽取 AlarmItem 告警列表项组件`
- `refactor: 抽取 MediaCard 媒体网格卡组件`

## 验收标准

1. Alarms 页：列表渲染、空态、处理确认流与 resolve 成功刷新仍可用  
2. Media 页：直播/视频 tab、卡数量、播放/更多/下载行为与抽离前一致  
3. DOM：仍为 `article.alarm-item` / 媒体 `article > .media-visual + .media-card-copy`  
4. 无控制台 error；不回归 Monitor / Devices / Tasks  
5. 不修改 `prototype.css`（本阶段无必要删除/搬迁）

## 风险与后续

| 风险 | 处理 |
|------|------|
| 漏绑 class 导致样式掉 | 对照现模板逐字段复制；冒烟看截图 |
| emit 丢上下文 | 页面 `@handle="handle(a)"` 闭包带 id |
| 过早抽象 | 明确禁止 BusinessCard；Monitor 另阶段 |

**后续（不在本 spec）**：Monitor `DockDeviceCard`；Tasks `RouteCard`；可选 CSS 迁 scoped。

## 约束

- 工作目录：`/Users/qingyuan/CodeProject/laic-frontend`
- 不改后台
- 不 `git add -A`；按文件精确 add + 中文 commit
- 跳过全量单测；以页面冒烟为准