# Tasks RouteCard Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 将 Tasks 航线库网格卡抽成纯展示 `RouteCard`；搜索/新建/编辑器留在页面。

**Architecture:** `RouteCard.vue` 接收 name/waypoints/distance/collectedAt/mapClass；无 emit。`TasksView` 的 `route-grid` 循环替换为组件。CSS 仍用 `prototype.css`。

**Tech Stack:** Vue 3 `<script setup>`、`prototype.css`

**Spec:** `docs/superpowers/specs/2026-08-28-tasks-route-card-design.md`

---

## File map

| 文件 | 职责 |
|------|------|
| `src/components/RouteCard.vue` | 航线库单卡展示 |
| `src/views/TasksView/TasksView.vue` | 接入；保留 filteredRoutes / 编辑器 |

---

### Task 1: RouteCard + TasksView

**Files:**
- Create: `src/components/RouteCard.vue`
- Modify: `src/views/TasksView/TasksView.vue`

- [ ] **Step 1: 创建 RouteCard.vue**

```vue
<template>
  <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>
</template>

<script setup>
defineProps({
  name: { type: String, required: true },
  waypoints: { type: Number, required: true },
  distance: { type: String, required: true },
  collectedAt: { type: String, required: true },
  mapClass: { type: String, required: true }
})
</script>
```

- [ ] **Step 2: 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>
```

```js
import RouteCard from '@/components/RouteCard.vue'
```

保留 toolbar、搜索、新建、编辑器、地图、其它 tab。

- [ ] **Step 3: 静态核对**

```bash
rg -n 'RouteCard|route-map|route-grid' src/components/RouteCard.vue src/views/TasksView/TasksView.vue
```

Expected: 组件有 `route-map`；页面用 `RouteCard`，无内联 `route-map` article。

- [ ] **Step 4: Commit**

```bash
git add src/components/RouteCard.vue src/views/TasksView/TasksView.vue
git commit -m "refactor: 抽取 RouteCard 航线库展示卡"
```

---

### Task 2: 浏览器冒烟

- [ ] 打开 `/tasks`，切到航线库：卡或空态正常
- [ ] 搜索过滤不报错；「新建航线」仍打开编辑器
- [ ] 无 console error；任务计划 tab 仍可用

---

## 约束

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