From 5832dbf1420c524b9a298ba587a5aa1a697daec1 Mon Sep 17 00:00:00 2001
From: xiaosi <2652281683@qq.com>
Date: Mon, 31 Aug 2026 14:11:58 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8A=BD=E5=8F=96=20RouteCard=20?=
 =?UTF-8?q?=E8=88=AA=E7=BA=BF=E5=BA=93=E5=B1=95=E7=A4=BA=E5=8D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RouteCard.vue      | 22 ++++++++++++++++++++++
 src/views/TasksView/TasksView.vue | 20 ++++++++++----------
 2 files changed, 32 insertions(+), 10 deletions(-)
 create mode 100644 src/components/RouteCard.vue

diff --git a/src/components/RouteCard.vue b/src/components/RouteCard.vue
new file mode 100644
index 0000000..939f056
--- /dev/null
+++ b/src/components/RouteCard.vue
@@ -0,0 +1,22 @@
+<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>
diff --git a/src/views/TasksView/TasksView.vue b/src/views/TasksView/TasksView.vue
index 9873232..e1b9133 100644
--- a/src/views/TasksView/TasksView.vue
+++ b/src/views/TasksView/TasksView.vue
@@ -119,16 +119,15 @@
             <t-button variant="outline" @click="openRouteEditor"><svg><use href="#i-plus" /></svg>新建航线</t-button>
           </div>
           <div class="route-grid">
-            <article v-for="r in filteredRoutes" :key="r.id">
-              <div class="route-map" :class="r.mapClass">
-                <svg><use href="#i-route" /></svg>
-                <span>{{ r.distance }}</span>
-              </div>
-              <div>
-                <strong>{{ r.name }}</strong>
-                <small>{{ r.waypoints }} 个航点 · 采集于 {{ r.collectedAt }}</small>
-              </div>
-            </article>
+            <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>
         </div>
@@ -243,6 +242,7 @@ import { useDeviceStore } from '@/stores/modules/devicesStore'
 import * as urls from '@/config/urls'
 import commonRefs from '@/utils/commonRefs'
 import mapHelper from '@/core/mapHelper'
+import RouteCard from '@/components/RouteCard.vue'
 
 const ROUTE_SOURCE = 'task-route'
 const ROUTE_LINE = 'task-route-line'