# Tasks RouteCard 设计

## 背景

Alarms / Media / Monitor 侧栏卡已抽离。Tasks 航线库仍内联 `route-grid > article`（装饰性 `route-map` 预览 + 名称文案）。航线编辑器与 `route-planner-map` 为强交互原生区，不在本阶段范围。

## 目标

1. 新增 `src/components/RouteCard.vue` 纯展示组件。
2. `TasksView` 航线库网格用组件替换 `article` 循环体。
3. 视觉不变：继续 `prototype.css` 的 `.route-grid` / `.route-map`。
4. 搜索、新建、空态、编辑器、地图保留在页面。

## 非目标

- 不抽 toolbar / 搜索 / `route-grid` 容器
- 不改航线编辑器、航点列表、`route-planner-map`
- 不加点击/菜单事件（当前卡无交互）
- 不迁 CSS 到 scoped
- 不改任务计划表、执行记录表

## 方案（已选）

**原始展示字段 props，无 emit。**

| prop | 类型 | 说明 |
|------|------|------|
| `name` | string | 航线名称 |
| `waypoints` | number | 航点数量 |
| `distance` | string | 已格式化距离（如 `1.2 km`） |
| `collectedAt` | string | 采集时间文案 |
| `mapClass` | string | 预览装饰 class（`route-a` / `route-c`） |

## 组件结构

```html
<article>
  <div class="route-map" :class="mapClass">
    <svg><use href="#i-route" /></svg>
    <span>{{ distance }}</span>
  </div>
  <div>
    <strong>{{ name }}</strong>
    <small>{{ waypoints }} 个航点 · 采集于 {{ collectedAt }}</small>
  </div>
</article>
```

## TasksView 改造

```html
<div class="route-grid">
  <RouteCard
    v-for="r in filteredRoutes"
    :key="r.id"
    :name="r.name"
    :waypoints="r.waypoints"
    :distance="r.distance"
    :collected-at="r.collectedAt"
    :map-class="r.mapClass"
  />
  <div v-if="!filteredRoutes.length" class="table-empty" style="grid-column:1/-1">暂无航线</div>
</div>
```

- `load` 映射、`filteredRoutes`、`routeSearch`、`openRouteEditor` 不变

## 样式

- 全局 `prototype.css`：`.route-grid article`、`.route-map`、`.route-a` / `.route-c`（若存在）等
- 组件不加 scoped 新皮肤

## 文件清单

| 动作 | 路径 |
|------|------|
| 新增 | `src/components/RouteCard.vue` |
| 修改 | `src/views/TasksView/TasksView.vue` |

## 实现顺序

1. **A** — `RouteCard` + TasksView 接入；commit  
2. **B** — 浏览器冒烟：航线库 tab、搜索空态、卡渲染；编辑器入口仍可用

Commit：`refactor: 抽取 RouteCard 航线库展示卡`

## 验收标准

1. 航线库网格外观与抽离前一致  
2. 搜索过滤仍只影响列表；空态仍在  
3. 「新建航线」仍打开编辑器；地图编辑器不回归  
4. 无 console error  

## 约束

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