2.9 KiB

Raw Blame History

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

<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 替换循环

<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>

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

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

Step 3: 静态核对

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

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
跳过全量单测；静态 + 冒烟

2.9 KiB Raw Blame History

Tasks RouteCard Implementation Plan

File map

Task 1: RouteCard + TasksView

Task 2: 浏览器冒烟

约束

2.9 KiB

Raw Blame History