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'