docs: 增加 Tasks RouteCard 设计与实现计划

航线库展示卡抽离，编辑器与地图不在范围。

docs/superpowers/plans/2026-08-28-tasks-route-card.md

@@ -0,0 +1,109 @@
+# 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
+- 跳过全量单测；静态 + 冒烟

docs/superpowers/specs/2026-08-28-tasks-route-card-design.md

@@ -0,0 +1,98 @@
+# 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
+- 跳过全量单测；页面冒烟为准