From 619925e6a8048adfeb324f8b855baf5300b5c643 Mon Sep 17 00:00:00 2001 From: xiaosi <2652281683@qq.com> Date: Mon, 31 Aug 2026 14:11:13 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=20Tasks=20RouteCard?= =?UTF-8?q?=20=E8=AE=BE=E8=AE=A1=E4=B8=8E=E5=AE=9E=E7=8E=B0=E8=AE=A1?= =?UTF-8?q?=E5=88=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 航线库展示卡抽离，编辑器与地图不在范围。 --- .../plans/2026-08-28-tasks-route-card.md | 109 ++++++++++++++++++ .../2026-08-28-tasks-route-card-design.md | 98 ++++++++++++++++ 2 files changed, 207 insertions(+) create mode 100644 docs/superpowers/plans/2026-08-28-tasks-route-card.md create mode 100644 docs/superpowers/specs/2026-08-28-tasks-route-card-design.md diff --git a/docs/superpowers/plans/2026-08-28-tasks-route-card.md b/docs/superpowers/plans/2026-08-28-tasks-route-card.md new file mode 100644 index 0000000..06166d1 --- /dev/null +++ b/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 ` +``` + +- [ ] **Step 2: TasksView 替换循环** + +```html +
+ +
暂无航线
+
+``` + +```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 +- 跳过全量单测；静态 + 冒烟 diff --git a/docs/superpowers/specs/2026-08-28-tasks-route-card-design.md b/docs/superpowers/specs/2026-08-28-tasks-route-card-design.md new file mode 100644 index 0000000..b13d431 --- /dev/null +++ b/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 +
+
+ + {{ distance }} +
+
+ {{ name }} + {{ waypoints }} 个航点 · 采集于 {{ collectedAt }} +
+
+``` + +## TasksView 改造 + +```html +
+ +
暂无航线
+
+``` + +- `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 +- 跳过全量单测；页面冒烟为准