2.8 KiB

Raw Blame History

Tasks RouteCard 设计

背景

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

目标

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

非目标

不抽 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`）

组件结构

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

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

实现顺序

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

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

验收标准

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

约束

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

2.8 KiB Raw Blame History